HTML 5 新的标签用法以及和HTML 4的区别

HTML 5 是一项全新的网络标准，它引入了一系列新的元素和属性，极大地丰富了网络应用服务。与此同时，一些在 HTML 4 中使用的过时标记被取消，例如 <font> 和 <center>。

HTML 5 新标签详解及与 HTML 4 的对比

1. <article> 标签

• 定义：用于定义外部的内容，例如来自外部新闻提供者的一篇新文章、博客文本、论坛文本或其他外部源内容。
• HTML 5 示例：<article></article>
• HTML 4 替代：<div></div>

2. <aside> 标签

• 定义：定义 <article> 以外的内容，其内容应与 <article> 的内容相关。
• HTML 5 示例：<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
• HTML 4 替代：<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

3. <audio> 标签

• 定义：用于定义声音，如音乐或其他音频流。
• HTML 5 示例：<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
• HTML 4 替代：<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

4. <canvas> 标签

• 定义：用于定义图形，如图表和其他图像。该 HTML 元素专为客户端矢量图形设计，本身无行为，但为客户端 JavaScript 提供绘图 API，使脚本能够在画布上绘制所需内容。
• HTML 5 示例：<canvas id="myCanvas" width="200" height="200"></canvas>
• HTML 4 替代：<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

5. <command> 标签

• 定义：定义命令按钮，如单选按钮、复选框或按钮。
• HTML 5 示例：<command onclick="cut()" label="cut">
• HTML 4 替代：无

6. <datalist> 标签

• 定义：定义可选数据的列表，与 <input> 元素配合使用，可制作输入值的下拉列表。
• HTML 5 示例：<datalist></datalist>
• HTML 4 替代：参考组合框（combobox）

7. <details> 标签

• 定义：定义元素的细节，用户可查看或通过点击隐藏。可与 <legend> 一起使用制作细节标题，点击标题可打开或关闭细节内容。
• HTML 5 示例：<details></details>
• HTML 4 替代：<dl style="display:hidden"></dl>

8. <embed> 标签

• 定义：定义嵌入的内容，如插件。
• HTML 5 示例：<embed src="horse.wav" />
• HTML 4 替代：<object data="flash.swf" type="application/x-shockwave-flash"></object>

9. <figcaption> 标签

• 定义：定义 <figure> 元素的标题，应置于 <figure> 元素的第一个或最后一个子元素位置。
• HTML 5 示例：<figure><figcaption>PRC</figcaption></figure>
• HTML 4 替代：无

10. <figure> 标签

• 定义：用于对元素进行组合，可使用 <figcaption> 元素为元素组添加标题。
• HTML 5 示例：<figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
• HTML 4 替代：<dl><h1></h1><p>The People's Republic of China was born in 1949...</p></dl>

11. <footer> 标签

• 定义：定义 <section> 或文档的页脚，通常包含创作者姓名、文档创作日期和/或联系信息。
• HTML 5 示例：<footer></footer>
• HTML 4 替代：<div></div>

12. <header> 标签

• 定义：定义 <section> 或文档的页眉。
• HTML 5 示例：<header></header>
• HTML 4 替代：<div></div>

13. <hgroup> 标签

• 定义：用于对网页或区段（section）的标题进行组合。
• HTML 5 示例：<hgroup></hgroup>
• HTML 4 替代：<div></div>

14. <keygen> 标签

• 定义：定义生成密钥。
• HTML 5 示例：<keygen>
• HTML 4 替代：无

15. <mark> 标签

• 定义：主要用于在视觉上向用户突出显示文字，典型应用是在搜索结果中高亮显示搜索关键词。
• HTML 5 示例：<mark></mark>
• HTML 4 替代：<span></span>

16. <meter> 标签

• 定义：定义度量衡，仅用于已知最大和最小值的度量，必须定义度量范围，可在元素文本或 min/max 属性中定义。
• HTML 5 示例：<meter></meter>
• HTML 4 替代：无

17. <nav> 标签

• 定义：定义导航链接的部分。
• HTML 5 示例：<nav></nav>
• HTML 4 替代：<ul></ul>

18. <output> 标签

• 定义：定义不同类型的输出，如脚本的输出。
• HTML 5 示例：<output></output>
• HTML 4 替代：<span></span>

19. <progress> 标签

• 定义：表示运行中的进程，可用于显示 JavaScript 中耗费时间的函数的进程。
• HTML 5 示例：<progress></progress>
• HTML 4 替代：无

20. <rp> 标签

• 定义：在 ruby 注释中使用，定义不支持 <ruby> 元素的浏览器所显示的内容。
• HTML 5 示例：<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
• HTML 4 替代：无

21. <rt> 标签

• 定义：定义字符（中文注音或字符）的解释或发音。
• HTML 5 示例：<ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
• HTML 4 替代：无

22. <ruby> 标签

• 定义：定义 ruby 注释（中文注音或字符）。
• HTML 5 示例：<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
• HTML 4 替代：无

23. <section> 标签

• 定义：定义文档中的节（section、区段），如章节、页眉、页脚或文档的其他部分。
• HTML 5 示例：<section></section>
• HTML 4 替代：<div></div>

24. <source> 标签

• 定义：为媒介元素（如 <video> 和 <audio>）定义媒介资源。
• HTML 5 示例：<source>
• HTML 4 替代：<param>

25. <summary> 标签

• 定义：包含 <details> 元素的标题，<details> 元素用于描述有关文档或文档片段的详细信息，<summary> 元素应是 <details> 元素的第一个子元素。
• HTML 5 示例：<details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
• HTML 4 替代：无

26. <time> 标签

• 定义：定义日期或时间，或两者。
• HTML 5 示例：<time></time>
• HTML 4 替代：<span></span>

27. <video> 标签

• 定义：定义视频，如电影片段或其他视频流。
• HTML 5 示例：<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
• HTML 4 替代：<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

通过上述对比可以看出，HTML 5 引入的新标签使网页结构更加语义化，开发人员能够更清晰地表达页面内容的结构和含义，同时也为用户提供了更好的浏览体验。