HTML5 为 HTML 语言的第5版本,相对 HTML4 来说,HTML5 定义了大量的新元素,整理汇总如下。
这些新增元素的用法和 HTML4 大相径庭,在 HTML4 中类似的功能可以用 ID 或类来标识,而在 HTML5 中可以直接使用特定的标签,例如:
- HTML4 : <div id=”header”></div>
- HTML5 : <header></header>
HTML5 常用的新增元素含义及说明:
1. section [区域]
文档中的某一区域,可以使用section标签将某些区域一一标注出来。
2. article [文章内容]
文档中的某一具体的内容,可以使用article标签将某些具体内容一一标注出来。
3. aside [与主要内容相关的一些次要信息]
文档中的某些次要信息,主要用于补充说明。
4. hgroup [标题群组]
将 H1~H6群组。
5. header [页头]
包含页头的相关信息,比如 Logo、网站说明、导航等
6. footer [页脚]
包含页脚的相关信息,比如 作者、版权等。
7. nav [导航]
做导航菜单用。
8. figure [流媒体]
实例:
<figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>
HTML5其他新增的元素含义及说明:
9. video [视频] audio [音频]
10. embed [嵌入]
11.mark [标记]
用于高亮显示或标记一些出处。
12. progress [进度]
用于下载或加载某些程序时显示进度信息。
13. meter [信息检测]
14. time [日期时间]
15. ruby rt rp [用于标记拼音,音调等]
16. wbr [a line break opportunity]
17. canvas [渲染动态图片]
18. command [命令]
19. details [额外的信息]
20. datalist [input 新增 list 属性 ]
<input list="browsers">
<datalist id="browsers">
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
21. keygen [key 生成器]
22. output [输出信息]
23. input type 新增如下属性
- tel
- search
- url
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color
HTML5代码实例
<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header>
<h1>Page title</h1>
</header>
<nav>
<!-- Navigation -->
</nav>
<section id="intro">
<!-- Introduction -->
</section>
<section>
<!-- Main content area -->
</section>
<aside>
<!-- Sidebar -->
</aside>
<footer>
<!-- Footer -->
</footer>
</body>
</html>
专业~~