<abbr>
表示一个缩写形式,比如 "Inc."、"etc."。通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
<address>
<address> 标签定义文档作者或拥有者的联系信息。
如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者或拥有者的联系信息。
通常的做法是将 address 元素添加到网页的头部或底部。
HTML 5 <area> 标签
定义和用法
<area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。
area 元素始终嵌套在 <map> 标签内部。
实例
带有可点击区域的图像映射:
<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 <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> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
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 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。
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> 标签定义嵌入的内容,比如插件。
HTML 5 <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> 标签
实例
用作文档中插图的图像,带有一个标题::
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
HTML 5 <footer> 标签
定义和用法
<footer> 标签定义 section 或 document 的页脚。
在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
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 部分的标签:
实例
一份简单的 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>
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> 标签大多数时候都用来连接样式表。
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> 标签。
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>
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>
定义和用法
<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 中耗费时间的函数的进度。
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>
HTML 5 <section> 标签
定义和用法
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
实例
文档中的区段,解释了 PRC:
<section> <h1>PRC</h1> <p>The People's Republic of China was born in 1949...</p> </section>
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>