html标签语义整理

根据语义使用标签
不要全程使用div

1. 格式

1
2
<!-- time:定义日期/时间 H5 -->
<time></time>

2. 样式/节

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style></style>
<div></div>
<span></span>

<!-- header:定义 section 或 page 的页眉 H5 -->
<header></header>
<!-- section:定义 section H5 -->
<!-- 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 -->
<section>
<!-- article:定义文章 H5 -->
<article>
<!-- 应该有可能独立于站点的其余部分对其进行分 -->
元素的潜在来源:
论坛帖子
报纸文章
博客条目
用户评论
</article>
</section>
<!-- footer:定义 section 或 page 的页脚 H5 -->
<footer></footer>

3. 表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<form action="demo.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
<br>

<textarea rows="3" cols="20">
在w3school,你可以找到你所需要的所有的网站建设教程。
</textarea>
<br>

<select>
<!-- optgroup:定义选择列表中相关选项的组合 -->
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

<br>
<!-- label:定义 input 元素的标注 -->
<!-- for 属性应当与相关元素的 id 属性相同 -->
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
<br>

<!-- fieldset:定义围绕表单中元素的边框 -->
<fieldset>
<!-- legend:定义 fieldset 元素的标题 -->
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>

<br>

<!-- datalist 中描述了其可能的值 H5-->
<!-- 请使用 input 元素的 list 属性来绑定 datalist -->
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

</form>

4. 框架

1
2
3
4
5
6
7
8
9
10
11
12
13
<frameset cols = "25%, 25%,*">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
<frame src ="venus.htm" />
<frame src ="sun.htm" />
<frame src ="mercur.htm" />
</frameset>

<!-- iframe:定义内联框架 -->
<iframe src ="/index.html" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>

5. 图像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<!-- map:定义图像映射 -->
<map name="planetmap" id="planetmap">
<!-- 注释:img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。-->

<!-- area:定义图像地图内部的区域 -->
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<!-- canvas:定义图形 H5 -->
<canvas></canvas>

<!-- 定义媒介内容的分组,以及它们的标题 -->
<!-- h5 -->
<figure>
<!-- h5 -->
<figcaption>figure的标题</figcaption>
</figure>

http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

6. 音频/视频

1
2
3
4
5
6
7
8
9
10
11
12
<!-- audio:定义声音内容 H5 -->
<audio>
<!-- source:定义媒介源 H5 -->
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

<!-- video:定义视频 H5-->
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
</video>

7. 链接

1
2
3
4
5
6
7
8
9
10
11
<head>
<!-- link:定义文档与外部资源的关系 -->
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<!-- nav: -->
<nav>
<!-- nav:定义导航链 H5 -->
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

8. 列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- ul:定义无序列表 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>

<!-- ol:定义有序列表 -->
<ol>
<li></li>
<li></li>
<li></li>
</ol>

<!-- dl:定义定义列表 -->
<dl>
<!-- dt:定义定义列表中的项目 -->
<dt>计算机</dt>
<!-- dd:定义定义列表中项目的描述 -->
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

9. 表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- tablle:定义表格 -->
<table border="1">
<!-- thead:定义表格中的表头内容 -->
<thead>
<!-- tr:定义表格中的行 -->
<tr>
<!-- th:定义表格中的表头单元格 -->
<th>Month</th>
<th>Savings</th>
</tr>
</thead>

<!-- tfoot:定义表格的页脚(脚注或表注) -->
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>

<!-- tbody:定义表格中的主体内容 -->
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

10. 元信息

1
2
3
4
5
6
7
8
9
10
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- base: 标签为页面上的所有链接规定默认地址或默认目标。 -->
<base href="http://www.baidu.com/">
</head>
<body>
<!-- 游览器将在http://www.baidu.com/1.png寻找图片 -->
<img src="1.png" alt="">
</body>