HTML5新增元素标记

作者:     目录: PHP+MySQL     发表: 2010年08月08日

HTML5 为 HTML 语言的第5版本,相对 HTML4 来说,HTML5 定义了大量的新元素,整理汇总如下。

这些新增元素的用法和 HTML4 大相径庭,在 HTML4 中类似的功能可以用 ID 或类来标识,而在 HTML5 中可以直接使用特定的标签,例如:

  • HTML4 : <div id=”header”></div>
  • HTML5 : <header></header>

HTML5新增元素标记

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
  • email
  • 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>

附:利用Html5和CSS3制作网站模板

标签: