您的位置：首页 > Web前端 > HTML

HTML实训课程笔记_01

2014-05-14 20:13 393 查看

1.第一天：

1.

HTML:超文本标记语言.

       超文本：在你的文本中添加了非文字的信息(比如，图片，视频等)

    1.头部分：提供网页信息

    2.主体部分：提供网页中内容

   案例：

   <!DOCTYPE HTML>

<html> 

<head> 
<title>第一个html文件</title>
</head>

<body bgcolor="red"> 
hello ！<br/>xxx ！！
！
</body>

</html>



2.

dtd约束

     html5 <!DOCTYPE HTML>

3.

HTML元素结构

    1.标签：<>和标签名组成    <html>

    2.元素： <html>开始到</html>组成部分

    3.属性： <标签名属性名="属性值" 属性名="属性值"></标签名> <br/>

    以上是概念

    元素结构的分类：

        1.HTML元素

        2.head元素

       3.body元素



4.

常用的标签

   1.html标签根标签

   2.head标签头标签

           title标签：网页的标题

          meta标签:提供网页的原数据比如(网页的作者，关键字，文件类型等)

   3.body标签主体标签

            <br/>标签：换行的作用

   案例：

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="description" content="这个网站是一个学习及娱乐为一体的网站"/>

<meta http-equiv="author" content="redarmychen"/>


<meta http-equiv="refresh" content="2;URL=http://www.baidu.com"-->


<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<title>无标题文档</title>

</head>

<body bgcolor="#00FFCC">

</body>
</html>

4.pre标签

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>赞军哥</title>
</head>

<body>
<pre>
赞军哥
山外青山楼外楼，乐知学院军哥牛！
要问军哥哪里牛，青楼青楼还青楼！
</pre>

<h3>赞军哥</h3>
<hr noshade="noshade" width="20%" align="left"/>
<p> 山外青山楼外楼，乐知学院<b>军哥</b><i>牛</i>！<br/>
要问军哥<font color="#FF0000" size="+3">哪里牛</font>，<u>青楼青楼还青楼</u>！
</p>
</body>
</html>

5.link标签

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标题的图标</title>

<!--引入了外部的样式文件，对我的网页进行样式处理-->
<link rel="stylesheet" type="text/css"  href="style.css" />
<!--标题图标的显示操作 icn图片它是特殊的图片16*16像素-->
<link href="favicon.ico" rel="SHORTCUT ICON"/>

</head>
<body>
</body>
</html>

6.table标签

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格标签的使用</title>
</head>

<body>
<h3>Table标签的使用</h3>
<hr noshade="noshade">
<!--
table表格标签  border表格的边框
cellspacing 表格外间距(td与td之间 td与table边框之间的距离) （规定单元格之间的空白）
cellpadding 表格内间距(文本与表格之间间隙)（规定单元边沿与其内容之间的空白。）
一般这个两个都是结合使用 默认都把它设置成0的值
--->
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>毛泽东</td>
<td>男</td>
<td>83</td>
</tr>
<tr>
<td>刘少奇</td>
<td>男</td>
<td>67</td>
</tr>
</table>
</body>

</html>

7.table标签（合并行与列的案例）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Table合并行与列的案例</title>
</head>

<body>

<table border="1px" cellpadding="0" cellspacing="0" width="800" height="200" align="center">
<tr>
<td>1</td>
<td rowspan="2">陈红军</td><!--rowspan跨行它跨几行，对应的行的列，就不能再写了。why?因为被它占用-->
<td>陈红军：曾用名：二孩，Java高级讲师。精通java</td>
</tr>

<tr>
<td>2</td>
<!--<td>陈红军</td> 被第一行的第二列给占用了-->
<td>陈红军：曾用名：红孩儿,android高级讲师，精通android</td>
</tr>
</table>

<hr noshade="noshade">

<table border="1px" cellpadding="0" cellspacing="0" width="800" height="200" align="center">
<tr>
<th colspan="3">公共课</th><!--colspan 跨列 那么被跨的列 就不能再写-->
<th>专业课程</th>
</tr>

<tr>
<td>体育课</td>
<td>英语课</td>
<td>高数课程</td>
<td>C++课程</td>
</tr>

</table>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航