HTML5标签学习

来源：互联网发布：橙名网络编辑：程序博客网时间：2024/06/05 20:20

<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 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> 标签

定义和用法

HTML 4.01 与 HTML 5 之间的差异

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

例子

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

HTML 5 <ins> 标签

定义和用法

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

HTML 4.01 与 HTML 5 之间的差异

没有。

例子

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

属性

属性值描述45citeURL指向另一个文档的 URL，该文档解释文本插入的原因。45datetimeYYYYMMDD定义文本插入的日期和时间。45

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 中的新属性。

属性值描述autofocusautofocus使 keygen 字段在页面加载时获得焦点。challengechallenge如果使用，则将 keygen 的值设置为在提交时询问。disableddisabled禁用 keytag 字段。formformname定义该 keygen 字段所属的一个或多个表单。keytypersa定义 keytype。rsa 生成 RSA 密钥。namefieldname

定义 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> 标签

定义和用法

实例

链接到一个外部样式表：

<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> 标签

定义和用法

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 中的新标签。

属性

属性值描述mediamedia query定义媒介资源的类型，供浏览器决定是否下载。srcurl媒介的 URL。typenumeric 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>