HTML5标签学习

<abbr>

表示一个缩写形式，比如 "Inc."、"etc."。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

<address>

<address> 标签定义文档作者或拥有者的联系信息。

如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者或拥有者的联系信息。

通常的做法是将 address 元素添加到网页的头部或底部。

HTML 5 <area> 标签

定义和用法

<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。

area 元素始终嵌套在 <map> 标签内部。

注释：<img> 标签中的 usemap 属性与 map 元素中的
name 相关联，以创建图像与映射之间的关系。

实例

带有可点击区域的图像映射：

<img src="planets.gif" alt="Planets" usemap ="#planetmap" />

<map id="planetmap">
 <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
 <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
 <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />

亲自试一试

HTML 5 <article> 标签

定义和用法

<article> 标签定义独立的内容。

可能的 article 实例：

• 论坛帖子
• 报纸文章
• 博客条目
• 用户评论

实例

<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,
Apple announced the release of Safari 5 for Windows and Mac......
</article>

亲自试一试

HTML 5 <aside> 标签

定义和用法

<aside> 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关。

实例

<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

亲自试一试

HTML 4.01 与 HTML 5 之间的差异

<aside> 标签是 HTML 5 的新标签。

提示和注释：

提示：<aside> 的内容可用作文章的侧栏。

HTML 5 <audio> 标签

定义和用法

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

实例

一段简单的 HTML 5 音频：

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

亲自试一试

HTML 5 <base> 标签

定义和用法

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

<base> 标签必须位于 head 元素内部。

<b> 标签

定义和用法

<b> 标签定义粗体的文本。

<b> 标签用于强调某些文本。

实例

<p>It was a <b>red</b> house with a <b>blue</b> door.</p>

HTML 5 <bdi> 标签

定义和用法

bdi 指的是 bidi 隔离。

<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。

在发布用户评论或其他您无法完全控制的内容时，该标签很有用。

实例

把用户名从周围的文本方向设置中隔离出来：

<ul>
<li>Username <bdi>Bill<bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

亲自试一试

HTML 5 <blockquote> 标签

定义和用法

<blockquote> 标签定义摘自另一个源的块引用。

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

实例

<blockquote>帝国主义都是纸老虎 ... </blockquote>

亲自试一试

HTML 5 <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> 标签

定义和用法

以下元素都是短语元素。并不反对使用它们，但是通过使用样式表，可能取得更丰富的效果。

<em>	呈现为被强调的文本。
<strong>	定义重要的文本。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>	定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

HTML 5 <del> 标签

定义和用法

<del> 标签定义文档中已删除的文本。

实例

一段带有已删除部分和新插入部分的文本：

a dozen is <del>21</del> 12 pieces

定义和用法

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

实例

下面是一个 input 元素，datalist 中描述了其可能的值：

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

亲自试一试

浏览器支持

目前只有 Firefox 和 Opera 支持 <datalist> 标签。

HTML 5 <command> 标签

定义和用法

command 元素表示用户能够调用的命令。

<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。

只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

实例

标记一个按钮：

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

亲自试一试

HTML 5 <details> 标签

定义和用法

<details> 标签用于描述文档或文档某个部分的细节。

实例

关于文档的细节：

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

亲自试一试

浏览器支持

目前只有 Chrome 支持 <details> 标签。

HTML 5 <embed> 标签

定义和用法

<embed> 标签定义嵌入的内容，比如插件。

实例

<embed src="helloworld.swf" />

亲自试一试

HTML 5 <fieldset> 标签

定义和用法

<fieldset> 标签用于从逻辑上将表单中的元素组合起来。

<fieldset> 标签会在相关表单元素周围绘制边框。

<legend> 标签为 fieldset 元素定义标题。

实例

对表单中的相关元素进行分组：

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
  </fieldset>
</form>

亲自试一试

HTML 5 <figcaption> 标签

定义和用法

<figcaption> 标签定义 figure 元素的标题（caption）。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例

用作文档中插图的图像，带有一个标题：：

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

亲自试一试

HTML 5 <footer> 标签

定义和用法

<footer> 标签定义 section 或 document 的页脚。

在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

实例

文档的页脚：

<footer>This document was written in 2010</footer>

亲自试一试

HTML 5 <form> 标签

定义和用法

<form> 标签标签用于创建供用户输入的 HTML 表单。

form 元素包含一个或多个表单元素，比如：

• button
• input
• keygen
• object
• output
• select
• textarea

实例

带有两个输入字段和一个体积按钮的简单的 HTML 表单：

<form action="form_action.asp">
First name: <input type="text" name="fname" value="Mickey" /><br />
Last name:<input type="text" name="lname" value="Mouse" /><br />
<input type="submit" value="Submit" />
</form>

亲自试一试

HTML 5 <head> 标签

定义和用法

head 元素是所有头部元素的容器。位于 <head> 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息，等等。

下面是可用在 head 部分的标签：

• <base>
• <link>
• <meta>
• <script>
• <style>
• <title>

实例

一份简单的 HTML 文档，带有标题：

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容 ... ...
  ...
  ...
  ...
</body>

</html>

亲自试一试

HTML 5 <header> 标签

定义和用法

<header> 标签定义文档的页眉（介绍信息）。

实例

对主页的介绍：

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

<p>The rest of my home page...</p>

亲自试一试

HTML 5 <hgroup> 标签

定义和用法

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

实例

使用 <hgroup> 标签对网页或区段（section）的标题进行组合：

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

TIY

HTML 5 <html> 标签

定义和用法

<html> 标签告知浏览器这是一个 HTML 文档。

html 元素是 HTML 文档中最外层的元素。

html 元素也可称为根元素。

实例

简单的 HTML 5 文档：

<!DOCTYPE HTML>
<html>

<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

亲自试一试

HTML 5 <i> 标签

定义和用法

<i> 标签呈现斜体的文本。

<i> 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。在没有其他元素可以使用时，比如 <b>, <cite>, <dfn>, <em>, <q>, <small>, <strong>，请使用 <i> 标签。

HTML 5 <iframe> 标签

定义和用法

<iframe> 标签创建包含另一个文档的行内框架。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中，仅仅支持 src 属性

例子

<iframe src="/index.html"></iframe>

HTML 5 <ins> 标签

定义和用法

<ins> 标签定义文档的其余部分之外的插入文本。

HTML 4.01 与 HTML 5 之间的差异

没有。

例子

提示：请与 <del> 标签一起使用，来描述对文档的更新和修正。

属性

属性	值	描述	4	5
cite	URL	指向另一个文档的 URL，该文档解释文本插入的原因。	4	5
datetime	YYYYMMDD	定义文本插入的日期和时间。	4	5

HTML 5 <keygen> 标签

定义和用法

<keygen> 标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

实例

带有 keygen 字段的表单：

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

亲自试一试

浏览器支持

所有主流浏览器都支持 <keygen> 标签，除了 Internet Explorer 和 Safari。

HTML 4.01 与 HTML 5 之间的差异

keygen 是 HTML 中的新元素。

属性

new : HTML5 中的新属性。

属性	值	描述
autofocus	autofocus	使 keygen 字段在页面加载时获得焦点。
challenge	challenge	如果使用，则将 keygen 的值设置为在提交时询问。
disabled	disabled	禁用 keytag 字段。
form	formname	定义该 keygen 字段所属的一个或多个表单。
keytype	rsa	定义 keytype。rsa 生成 RSA 密钥。
name	fieldname	定义 keygen 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。

HTML 5 <label> 标签

定义和用法

<label> 标签为 input 元素定义标签（label）。

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

<label> 标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

实例

带有两个输入字段和相关标签的简单 HTML 表单：

<form>
<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" />
</form>

亲自试一试

HTML 5 <legend> 标签

定义和用法

legend 元素为以下元素定义标题（caption）：<fieldset>、<figure>、<details>。

实例

<fieldset>
<legend>健康信息：</legend>
<form>
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
</form>
</fieldset>

亲自试一试

HTML 5 <link> 标签

定义和用法

<link> 标签定义文档与外部资源之间的关系。

<link> 标签大多数时候都用来连接样式表。

实例

链接到一个外部样式表：

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

亲自试一试

HTML 5 <map> 标签

定义和用法

<map> 标签用于定义客户端图像映射。图像映射指的是带有可点击区域的图像。

name 属性在 map 元素中是必需的。该属性与 <img> 标签的 usemap 属性相关联，以创建图像与映射之间的关系。

map 元素包含若干 area 元素，定义图像映射中的可点击区域。

实例

带有可点击区域的图像映射：

<img src="planets.gif" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
 <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
 <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
 <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />
</map>

亲自试一试

浏览器支持

所有主流浏览器都支持 <map> 标签。

HTML 4.01 与 HTML 5 之间的差异

注释：在 HTML5 中，如果同时规定了 <map> 标签的 id 属性，则必须为 name 属性规定相同的值。

提示和注释：

注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

HTML 5 <mark> 标签

定义和用法

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

实例

突出显示部分文本：

<p>Do not forget to buy <mark>milk</mark> today.</p>

TIY

HTML 5 <menu> 标签

定义和用法

<menu> 标签定义菜单列表。当希望列出表单控件时使用该标签。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，不赞成使用 menu 元素。

在 HTML 5 中，重新定义了 menu 元素，且使用用于排列表单控件。

提示和注释

提示：请使用 CSS 来定义列表的类型。

例子

<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

HTML 5 <meta> 标签

定义和用法

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 5 中，不再支持 scheme 属性。

在 HTML 5 中，有一个新的 charset 属性，它使字符集的定义更加容易。

在 HTML 4.01 中，不得不这么写：

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

在 HTML 5 中，这样就够了：

<meta charset="ISO-8859-1">

提示和注释

提示：请使用 CSS 来定义列表的类型。

例子

定义针对搜索引擎的关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

定义对页面的描述：

<meta name="description" content="免费的 web 技术教程。" />

定义页面的最新版本：

<meta name="revised" content="David, 2008/8/8/" />

每 5 秒刷新一次页面：

<meta http-equiv="refresh" content="5" />

HTML 5 <nav> 标签

定义和用法

<nav> 标签定义导航链接的部分。

实例

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

TIY

HTML 4.01 与 HTML 5 之间的差异

<nav> 标签是 HTML 5 中的新标签。

提示和注释

提示：如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。

HTML 5 <ol> 标签

定义和用法

<ol> 标签定义有序列表。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，不赞成使用 "start" 属性，在 HTML 5 中是允许的。

在 HTML 4.01 中，不赞成使用 "compact" 和 "type" 属性，在 HTML 5 中，不再支持这两个属性。

提示和注释

提示：请使用 CSS 来定义列表的类型。

例子

<ol>
   <li>Coffee</li>
   <li>Tea</li>
</ol>

<ol>
   <li start="60">Coffee</li>
   <li>Tea</li>
</ol>

定义和用法

<output> 标签定义不同类型的输出，比如脚本的输出。

实例

如何在表单中使用 output 元素：

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

TIY

定义和用法

<optgroup> 标签定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

HTML 4.01 与 HTML 5 之间的差异

没有。

例子

<select>
      <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>

HTML 5 <param> 标签

定义和用法

param 元素允许您为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 <object> 标签提供参数。

HTML 4.01 与 HTML 5 之间的差异

不再支持 HTML 4.01 中的一些属性。

例子

<object id="Slider1" width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>

HTML 5 <pre> 标签

定义和用法

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

HTML 5 <progress> 标签

定义和用法

<progress> 标签定义运行中的进度（进程）。

可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

实例

标记“下载进度”：

对象的下载进度：

<progress>
<span id="objprogress">85</span>%
</progress>

TIY

HTML 5 <q> 标签

定义和用法

<q> 标签定义一个短的引用。

浏览器经常会在这种引用的周围插入引号。

实例

标记一段短的引用：

<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q> we hope they succeed.</p>

亲自试一试

HTML 5 <rp> 标签

定义和用法

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

ruby 注释是中文注音或字符。

在东亚使用，显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用：

ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

实例

一个 ruby 注释：

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

TIY

HTML 5 <section> 标签

定义和用法

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

实例

文档中的区段，解释了 PRC：

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

TIY

HTML 5 <small> 标签

定义和用法

<small> 标签将旁注 (side comments) 呈现为小型文本。

免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。

对于由 em 元素强调过的或由 strong 元素标记为重要的文本，small 元素不会取消对文本的强调，也不会降低这些文本的重要性。

实例

定义列表项中的注释（小型文本）：

<dl>
 <dt>单人间</dt>
 <dd>399 元 <small>含早餐，不含税</small></dd>
 <dt>双人间</dt>
 <dd>599 元 <small>含早餐，不含税</small></dd>
</dl>

亲自试一试

HTML 5 <source> 标签

定义和用法

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

HTML 4.01 与 HTML 5 之间的差异

<source> 标签是 HTML 5 中的新标签。

属性

属性	值	描述
media	media query	定义媒介资源的类型，供浏览器决定是否下载。
src	url	媒介的 URL。
type	numeric value	定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。

HTML 5 <sub> 和 <sup> 标签

定义和用法

<sub> 标签可定义下标文本。<sup> 可定义上标文本。

HTML 4.01 与 HTML 5 之间的差异

没有。

例子

这段文本包含 <sub>下标</sub>

这段文本包含 <sup>上标</sup>

HTML 5 <summary> 标签

定义和用法

<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

实例

有关文档的详细信息：

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

亲自试一试

HTML 5 <time> 标签

定义和用法

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

实例

如何定义时间和日期：

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

亲自试一试

浏览器支持

目前所有主流浏览器都不支持 <time> 标签。

HTML 5 <track> 标签

定义和用法

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

实例

播放带有字幕的视频：

<video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

浏览器支持

目前所有主流浏览器都不支持 <track> 标签。

HTML 5 <video> 标签

定义和用法

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

实例

一段简单的 HTML5 视频：

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>