HTML5 与 HTML4 的区别(2)

新增的结构标签

在 HTML5 中，新增了以下与结构相关的标签：

section标签

section 标签表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。
它可以与h1、h2、h3、h4、h5、h6等标签结合起来使用，标识文档结构。

HTML5 中代码示例：
<section>....</section>

HTML4 中代码示例：
<div>...</div>

article标签

article 标签表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章或报纸中的一篇文章。

HTML5 中代码示例：
<article>...</article>

HTML4 中代码示例：
<div>...</div>

aside标签

aside 标签表示 article 标签的内容之外、并与 article 标签的内容相关的辅助信息。

HTML5 中代码示例：
<aside>...</aside>

HTML4 中代码示例：
<div>...</div>

header标签

header 标签表示页面中的一个内容区块或整个页面的标题。

HTML5 中代码示例：
<header>...</header>

HTML4 中代码示例：
<div>...</div>

hgroup标签

hgroup 标签用于对整个页面或页面中一个内容区块的标题进行组合。

HTML5 中代码示例：
<hgroup>...</hgroup>

HTML4 中代码示例：
<div>...</div>

footer标签

footer 标签表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者的版权或联系信息。

HTML5 中代码示例：
<footer>...</footer>

HTML4 中代码示例：
<div>...</div>

nav标签

nav 标签表示页面中导航链接的部分。

HTML5 中代码示例：
<nav>...</nav>

HTML4 中代码示例：
<ul>...</ul>

figure标签

figure 标签表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用 figcaption 标签为 figure 标签组添加标题。

HTML5 中代码示例：
<figure>
    <figcaption>新增的结构标签</figcaption>
    <p>在 HTML5 中，新增了以下与结构相关的标签：</p>
</figure>

HTML4 中代码示例：
<dl>
    <h1>新增的结构标签</h1>
    <p>在 HTML5 中，新增了以下与结构相关的标签：</p>
</dl>

新增的其他标签

除了结构标签外，在 HTML5 中，还新增了以下标签：

video标签

video 标签定义视频，比如电影片段或其他视频流。

HTML5 中代码示例：
<video src="movie.ogg" controls="controls">video标签</video>

HTML4 中代码示例：
<object type="video/ogg" data="movie.ogv">
    <param name="src" value="movie.ogv">
</object>

audio标签

audio 标签定义音频，比如音乐或其他音频流。

HTML5 中代码示例：
<audio src="someaudio.wav">audio标签</audio>

HTML4 中代码示例：
<object type="application/ogg" data="someaudio.wav">
    <param name="src" value="someaudio.wav">
</object>

embed标签

embed 标签用来插入各种多媒体，格式可以是 midi、wav、aiff、au、mp3等。

HTML5 中代码示例：
<embed src="horse.wav" />

HTML4 中代码示例：
<object data="flash.swf" type="application/x-shockwave-flash"></object>

mark标签

mark 标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark 标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5 中代码示例：
<mark>...</mark>

HTML4 中代码示例：
<span>...</span>

progress标签

progress 标签表示一个进度条，可以使用 progress 标签来显示那些执行耗时较长的操作，提升用户体验。

HTML5 中代码示例：
<progress value="22" max="100"></progress> 

HTML4 中代码示例：
这是 HTML5 中新增功能，故无法用 HTML4 代码来实现，只能通过 javascript 来控制。

time标签

time 标签表示日期或时间，也可以同时表示两者。

HTML5 中代码示例：
<time>...</time>

HTML4 中代码示例：
<span>...</span>

ruby标签

ruby 标签表示 ruby 注释（中文注音或字符）。

HTML5 中代码示例：
<ruby>漢<rt><rp>(</rp>さご<rp>)</rp></rt></ruby>

HTML4 中代码示例：
这是 HTML5 中新增的功能。

rt标签

rt 标签表示字符（中文注音或字符）的解释或发音。

HTML5 中代码示例：
<ruby>漢<rt>さご</rt></ruby>

HTML4 中代码示例：
这是 HTML5 中新增的功能。

rp标签

rp 标签在 ruby 注释中使用，以定义不支持 ruby 标签的浏览器所显示的内容。

HTML5 中代码示例：
<ruby>漢<rt><rp>(</rp>さご<rp>)</rp></rt></ruby>

HTML4 中代码示例：
这是 HTML5 中新增的功能。

wbr标签

wbr 标签表示软换行。wbr 标签与 br 标签的区别是：br 标签表示此处必须换行；而 wbr 标签的意思是浏览器窗口或父级标签的宽度足够宽时（没必要换行时），不进行换行，而当宽度不够时，主动在此处进行换行。wbr 标签好像对字符型的语言作用挺大，但是对于中文，貌似没多大用处。

HTML5 中代码示例：
<p>To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>Request Object.</p>

HTML4 中代码示例：
这是 HTML5 中新增的功能。

canvas标签

canvas 标签表示图形，比如图表和其他图像。这个标签本身没有行为，仅提供一块画布，但它把一个绘图 API 展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。

HTML5 中代码示例：
<canvas id="myCanvas" width="200" height="200"></canvas>

HTML4 中代码示例：
<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

command标签

command 标签表示命令按钮，比如单选按钮、复选框或按钮。

HTML5 中代码示例：
<command onclick="cut()" label="cut">

HTML4 中代码示例：
这是 HTML5 中新增的功能。

details标签

details 标签表示用户要求得到并且可以得到的细节信息。它可以与 summary 标签配合使用。summary 标签提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息。summary 标签应该是 details 标签的第一个子标签。

HTML5 中代码示例：
<details>
    <summary>HTML5</summary>
    This document teaches you everything you have to learn about HTML 5.
</details>

HTML4 中代码示例：
这是 HTML5 中新增的功能。

datalist标签

datalist 标签表示可选数据的列表，与 input 标签配合使用，可以制作出输入值的下拉列表。

HTML5 中代码示例：
<datalist></datalist>

HTML4 中代码示例：
这是 HTML5 中新增的功能。

datagrid标签

datagrid 标签表示可选数据的列表，它以树形列表的形式来显示。

HTML5 中代码示例：
<datagrid></datagrid>

HTML4 中代码示例：
这是 HTML5 中新增的功能。

keygen标签

keygen 标签表示生成密钥。

HTML5 中代码示例：
<keygen>

HTML4 中代码示例：
这是 HTML5 中新增的功能。

output标签

output 标签表示不同类型的输出，比如脚本的输出。

HTML5 中代码示例：
<output></output>

HTML4 中代码示例：
<span></span>

source标签

source 标签为媒介标签（比如<video>和<audio>）定义媒介资源。

HTML5 中代码示例：
<source>

HTML4 中代码示例：
<param>

menu标签

menu 标签表示菜单列表。当希望列出表单控件时使用该标签。

HTML5 中代码示例：
<menu>
    <li><input type="checkbox" />Red</li>
    <li><input type="checkbox" />Blue</li>
</menu>

HTML4 中代码示例：
在 HTML4 中 menu 标签不被推荐使用。

新增的input标签的类型

HTML5 中新增了很多 input 标签的类型，现列举如下：

email

email 类型表示必须输入 E-mail 地址的文本输入框。

HTML5 中代码示例：
<input type="email" />

HTML4 中代码示例：
这是 HTML5 中新增的功能。

url

url 类型表示必须输入URL地址的文本输入框。

HTML5 中代码示例：
<input type="url" />

HTML4 中代码示例：
这是 HTML5 中新增的功能。

number

number 类型表示必须输入数值的文本输入框。

HTML5 中代码示例：
<input type="number" />

HTML4 中代码示例：
这是 HTML5 中新增的功能。

range

range 类型表示必须输入一定范围内数字值的文本输入框。

HTML5 中代码示例：
<input type="range" />

HTML4 中代码示例：
这是 HTML5 中新增的功能。

Date Pickers

HTML5 拥有多个可供选取日期和时间的新型输入文本框：

HTML5 中代码示例：
<input type="date" />----选取日、月、年
<input type="month" />----选取月、年
<input type="week" />----选取周和年
<input type="time" />----选取时间（小时和分钟）
<input type="datetime" />----选取时间、日、月、年（UTC时间）
<input type="datetime-local" />----选取时间、日、月、年（本地时间）

HTML4 中代码示例：
这是 HTML5 中新增的功能。

废除的标签

由于各种原因，在 HTML5 中废除了很多标签，简单介绍如下。

1、能使用CSS替代的标签

对于 basefont、big、center、font、s、strike、tt、u 这些标签，由于它们的功能都是纯粹为画面展示服务的，在 HTML5 中提倡把画面展示型功能放在 CSS 样式表中统一编辑，所以将这些标签废除了，并使用添加或编辑 CSS 样式表的方式进行替代。

2、不再使用frame框架

对于 frameset 标签、frame 标签与 noframes 标签，由于 frame 框架对网页可用性存在负面影响，在 HTML5 中已不支持 frame 框架，只支持 iframe 框架，或者用服务器方创建的由多个页面组成的复合页面的形式，同时将以上这三个标签废除。

3、只有部分浏览器支持的标签

对于 applet、bgsound、blink、marquee 等标签，由于只有部分浏览器支持这些标签，特别是 bgsound 标签以及 marquee 标签，只被 IE 所支持，所以在 HTML5 中被废除。其中 applet 标签可由 embed 标签或 object 标签替代，bgsound 标签可由 audio 标签替代，marquee 可以由 JavaScript 编程的方式所替代。

4、其他被废除的标签

废除 rb 标签，使用 ruby 标签替代
废除 acronym 标签，使用 abbr 标签替代
废除 dir 标签，使用 ul 标签替代
废除 isindex 标签，使用 form 标签与 input 标签相结合的方式替代
废除 listing 标签，使用 pre 标签替代
废除 xmp 标签，使用 code 标签替代
废除 nextid 标签，使用 GUIDS 替代
废除 plaintext 标签，使用“text/plian”MIME类型替代