html5 Doctor——教你规范使用html5标签

时间：2022-11-26 02:56:12

　　学习地址（英文资料）：http://html5doctor.com/

　　http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-a-element

　　想必大家也和我一样，刚接触div的时候，觉得div真的是个好东西，觉得页面就是div+css。控制样式在div里面加个id或者class，div完全能够胜任划分页面布局。确实，div标签是一个很好的通用标签。不过，除了查看每个div标签的id属性之外，真的很难了解到每个div标签代表文档的那个部分。尽管你可能会觉得，只要命名合理，id可以足够胜任标识的任务（这让我想起，在游戏策划中，请来一个资深史学家外加有文学家称号的大牛给游戏世界中100双鞋子命名的段子\>+</当考验功底呀），但是id是任意的。html5就是提供一组标签来解决这个问题，这些标签可以更清晰地定义构成某个html文档的主要内容块。不管web页面最终如何显示内容，大多数web页面都是由常见页面和元素的不同构成。

　　先介绍几个重要的标签：

  • header:header标签用于将html页面的一部分标记为页眉部分；
  • section:section标签用于标识页面上的重要内容部分。该标签类似于将一本书分成几个章节。　
  • article:article标签标识了web页面中的主要内容。
  • aside:aside标签表示标签中包含的内容与页面主要内容相关，但不是该页面的一部分。有点类似于使用括弧对正文进行注释。括弧中的内容提供关于该元素的一些附加信息。
  • footer:footer标签将所包含的元素内容标记为文档的页脚;
  • nav:nav标签中包含的内容主要用于导航。

　　对于nav、footer、header应该很容易理解，而对于section、article、aside的进一步解释，我们以搭建一个博客页面为例子：对于博客页面，博文、评论、推荐链接等应该是属于重要部分（假设是块状布局），应该用<section>将其放在一起，然后再细分。比如博文就是主要内容，我们应该用<article>标签将每篇博文包含，而推荐链接应该符合“主要内容相关，但不是该页面的一部分”的说法，应该用<aside>包含。值得提出的是，并不是一个页面就是一个article、一个aside、一个header、比如article就是可以包含header的。

　　以下是对比较有讨论性和使用的标签进行了记录：

　　A

  • a　　

　　对于设置了href属性的值的<a>来说是一个超链接，对于没有设置href属性值的<a>表示的是一个超链接的占位符。如果没有设置href属性，则相应不可以使用如　　下属性：　　download, hreflang, media, rel, target 以及 type 属性。

  • abbr

　　代表的是一种简写或缩写，<abbr>有一个可选的title属性，title属性的值是对缩写的一种解释扩展。

　　<abbr>作为一种行内级元素，可以嵌套在<P>、<strong>、<em>等元素之间。

　　你可能知道还有一个元素叫做<acronym>。没错，两者都是可以表示缩写的，但是<acronym>已经被标准剔除。但是正如你所知道的，<addr>不被ie6、ie7所　　支持，你　　可能免不了这么一段代码：

<!--[if lte IE 7]>

<script type="text/javascript">document.createElement('abbr');</script>

<![endif]-->
  • address

　　定义文档作者或拥有者的信息。一般是这么规定的，对于<body>中的<address>表示的是文档作者信息；对于<article>中的<address>定义的是文章作者的　　   信息。　　有一点需要注意，<address>不应该用于表述通讯地址。举个应用例子应该会更加好理解。比如，几乎每个页面的<footer>都会定义联系我们、反馈信息　　的链接，其中可　　能需要我们填写文档开发人员或所属公司的联系方式等，此时<address>就派上用场了。

<!-- This is bad! -->

<address>

Dr. Jack Osborne<br>

HTML5 Hospital,<br>

Doctorville,<br>

Great Britain<br>

Tel: +44 (0)XXXX XXXXXX

</address>

　　为什么以上是不对的，因为<address>并不能表示任意的地址，对于上述的postal addresses，除非与文档部分有一个非常明确的关联信息。那我们如果处理这些任意的地址　　呢。请看下面：

<div class="vcard">

<p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>

<p class="adr">

<span class="street-address">HTML5 Hospital</span><br>

<span class="region">Doctorville</span><br>

<span class="postal-code">Postal Code</span><br>

<span class="country-name">Great Britain</span>

</p>

<p class="tel">+44 (0)XXXX XXXXXX</p>

</div>
  • area

　　表示一个图像的可点击区域。有可选的属性href。demo可以参看 http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

  • article　

　　标签规定独立的自包含内容。

　　一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

　　<article> 元素的潜在来源：论坛帖子、报纸文章、博客条目、用户评论

　　谈到<article>，就必须要提提<section>、<div>，三者的联系和区别，相必也是仁者见仁，智者见智的事情。一下仅仅代表一方观点：

　　首先看联系合作，单个的article使用

<article>

        <h1>Apple</h1>

        <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>

        ...

</article>

　　当在博客页面的时候

<article>

  <header>

    <h1>Apple</h1>

    <p>Published: <time pubdate="pubdate">2009-10-09</time></p>

  </header>

  <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>

  ...

  <footer>

    <p><small>Creative Commons Attribution-ShareAlike License</small></p>

  </footer>

</article>

　　<article>嵌套的时候，一下模板是一个博客评论展示区

<article>

  <header>

    <h1>Apple</h1>

    <p>Published: <time pubdate datetime="2009-10-09">9th October, 2009</time></p>

  </header>

  <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>

  ...

  <section>

    <h2>Comments</h2>

    <article>

      <header>

      <h3>Posted by: Apple Lover</h3>

      <p><time pubdate datetime="2009-10-10T19:10-08:00">~1 hour ago</time></p>

    </header>

    <p>I love apples, my favourite kind are Granny Smiths</p>

    </article>

    <article>

      <header>

        <h3>Posted by: Oranges are king</h3>

        <p><time pubdate datetime="2009-10-10T19:15-08:00">~1 hour ago</time></p>

      </header>

      <p>Urgh, apples!? you should write about ORANGES instead!!1!</p>

    </article>

  </section>

</article>

　　当<article>中包含多个<section>的时候，其中<section>主要用于将<article>划分为多个逻辑单元

<article>

  <h1>Apple varieties</h1>

  <p>The apple is the pomaceous fruit of the apple tree...</p>

  <section>

    <h2>Red Delicious</h2>

    <p>These bright red apples are the most common found in many supermarkets...</p>

  </section>

  <section>

    <h2>Granny Smith</h2>

    <p>These juicy, green apples make a great filling for apple pies...</p>

  </section>

</article>

　　<section>中包含多个<article>，之中可以认为<article>是一个个的分类

<section>

  <h1>Articles on: Fruit</h1>

  <article>

    <h2>Apple</h2>

    <p>The apple is the pomaceous fruit of the apple tree...</p>

  </article>

  <article>

    <h2>Orange</h2>

    <p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>

  </article>

  <article>

    <h2>Banana</h2>

    <p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>

  </article>

</section>

　　好吧。你可能会觉得，其实以上模式完全是可以相互互换的。是的没错，语义化的主观性就在这里，但是我们不得不提一下，<section>、<div>、<article>的区别到底是什　　　么可以分三点描述：

  1. Would the content would make sense on its own in a feed reader? If so use <article>
  2. Is the content related? If so use <section>
  3. Finally if there’s no semantic relationship use <div>

　　三者中，<article>是最具有语义化的元素，如果内容块语义明显并且内容块之间有很明显独立意义，请使用<article>，如果内容块有语义但内容块之间有很强的关联意义，请　　使用<section>，如果块之间没有语义，使用<div>。

  • aside

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

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

  • audio

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

　　B

  • b

　　<b> 标签规定粗体文本。

　　想必你肯定知道这么几个堂兄弟——<b>、<em>、<i>、<strong>。W3C的定义是这样子的：

  • <i> — was italic, now for text in an “alternate voice”, such as foreign words, technical terms, and typographically italicized text (W3C:Markup, WHATWG)
  • <b> — was bold, now for “stylistically offset” text, such as keywords and typographically emboldened text (W3C:Markup, WHATWG)
  • <em> — was emphasis, now for stress emphasis, i.e., something you’d pronounce differently (W3C:Markup, WHATWG)
  • <strong> — was for stronger emphasis, now for strong importance, basically the same thing (stronger emphasis or importance is now indicated by nesting) (W3C:Markup, WHATWG)

　　<i>表示的是斜体。　　

　　<b>有加粗的效果，但是并没有情感色彩在里面。比如说，在一段文字里面，我们设置了开头的前5个字为<b></b>进行了加粗，这仅仅是出于排版的要求，并没有什么特殊的含义。也有一些时候，我们只是在对话中将某人说的话都加<b>，主要功能就是为了区别出这个加粗的话是某个人说的，而不是为了暗示，这写加<b>的话很重要。

　　<em>标的是重点（是语言学方面），<strong>表达的意思是重要性（情感色彩很强烈）。

  • base

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

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

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

  • bdi

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

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

  • bdo

　　bdo 元素可覆盖默认的文本方向。

  • blockquote

　　<blockquote> 标签定义块引用。

　　<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有　　它们自己的空间。~请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。

  • body

　　body 元素定义文档的主体。

　　body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

  • br

　　<br> 可插入一个简单的换行符。

　　<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

　　请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间

  • button

　　<button> 标签定义一个按钮。

　　在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

　　<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任　　何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

　　唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

　　请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

　　C

  • canvas　　

　　<canvas> 标签定义图形，比如图表和其他图像。

　　<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

  • caption

　　caption 元素定义表格标题。

　　caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

  • cite　

　　<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

　　按照惯例，引用的文本将以斜体显示。

　　用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 　　<a> 标签中，从而把一个超链接指向该联机版本。

　　<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独　　立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

  • code

　　短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。

　　我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。

　　em 把文本定义为强调内容

　　strong 把文本定义为语气更强的强调内容

　　dfn 定义一个定义项目

　　code 定义计算机代码文本

　　samp 定义样本文本

　　kbd 定义键盘文本。表示文本是从键盘上键入的。经常用在预计刷机相关的文档或手册中。

　　var 定义变量。与pre和code标签配合使用。

　　cite 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

  • col

　　<col> 标签为表格中一个或多个列定义属性值。

　　如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

　　您只能在 table 或 colgroup 元素中使用 <col> 标签。

　　在 HTML 中，<col> 没有结束标签。

　　在 XHTML 中，<col> 标签必须被正确的关闭。

  • colgroup

　　<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

　　如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

　　<colgroup> 标签只能在 table 元素中使用。

  • command

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

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

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

　　D

  • datalist

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

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

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

  • dl(definition list) dt dd(defintion description)

　　The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more 　　names (dt elements) followed by one or more values (dd elements). Within a single dl element, there should not be more than one dt element for each 　　　name.

<dl>

  <dt>Authors:</dt>

  <dd>Remy Sharp</dd>

  <dd>Rich Clark</dd>

  <dt>Editor:</dt>

  <dd>Brandan Lennox</dd>

  <dt>Category:</dt>

  <dd>Comment</dd>

</dl>
  • del

　　定义文档中已被删除的文本。

  • details

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

　　The details element represents a disclosure widget from which the user can obtain additional information or controls.

　　— WHATWG HTML5 specification

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

  • div

　　The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics 　　      common to a group of consecutive elements.

　　W3C Specification

　　很多时候，div是为了控制样式而存在

  • doctype

　　<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

　　<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

　　在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

　　HTML5 不基于 SGML，所以不需要引用 DTD。

　　提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

  • em
  • embed

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

　　F

  • fieldset

　　fieldset 元素可将表单内的相关元素分组。

　　<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。　　

　　当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

　　<fieldset> 标签没有必需的或唯一的属性。

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

  • figure figcaption

　   The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main 　　flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

　　W3C Specification　

　　<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

　　figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

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

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

<figure>

  <img src="/kookaburra.jpg" alt="Kooaburra">

  <img src="/pelican.jpg" alt="Pelican stood on the beach">

  <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">

  <figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>

</figure>

　　我们再来讨论一下，figure和aside的区别

  • If the content is simply related and not essential, use <aside>.
  • If the content is essential but its position in the flow of content isn’t important, use <figure>.

　　需要提醒一点，并不是所有图片都应该包含在figure中，比如对于图形banner，你会选择一个figure来包含吗？那显然太让“浪费”了

  • footer

　　The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information 　　　　about its section such as who wrote it, links to related documents, copyright data, and the like.

　　<footer> 标签定义文档或节的页脚。

　　<footer> 元素应当含有其包含元素的信息。

　　页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

　　您可以在一个文档中使用多个 <footer> 元素。

  • from

　　<footer> 标签定义文档或节的页脚。

　　<footer> 元素应当含有其包含元素的信息。

　　页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

　　您可以在一个文档中使用多个 <footer> 元素。

  • h1~h6

　　<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

　　由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表　　定义来达到漂亮的显示效果。

  • head

　　<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

　　文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

　　下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

　　<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

  • header

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

  • hr

　　<hr> 标签在 HTML 页面中创建一条水平线。

　　水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

  • html

　　<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由<head> 标签定义，而主体由 <body> 标

　　定义。

　　I

  • iframe

　　<iframe> 元素会创建包含另外一个文档的内联框架（即行内框架）。当然，一如所有标签含义的简洁性，但我们仍然无法忽略SEO性能的问题。

　　参照：http://www.williamlong.info/archives/3136.html

　　参半，我个人是很少用iframe在项目中，但是iframe确实是个好东西，勇气来很方便。很多时候我都是js动态加载iframe的。

  • 对于<i>、<img>、<input>在此不再赘述
  • ins

　　<ins> 标签定义已经被插入文档中的文本。请与 <del> 一同使用，来描述文档中的更新和修正。

　　K

  • kbd

　　定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。　

<p>Mac users: To take a screenshot press <kbd><kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>3</kbd></kbd></p>
  • keygen　

　　<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

　　L

  • label

　　<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控　　件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

　　<label> 标签的 for 属性应当与相关元素的 id 属性相同。

  • legend

　　legend 元素为 fieldset 元素定义标题（caption）。

  • li
  • link　　

　　<link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。

　　M

  • main

　　包含页面的主体部分。

　　 If you use something like <div id="main"> (or similar, such as <divid="content">), simply replace that with <main role="main">.

　　~一目了然吧

  • map

　　定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

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

　　注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

  • mark

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

　　HTML 5 introduces mark as a way to highlight text to indicate its relevance to the user.你可以细细揣摩一下，与<em>、<strong>的区别。

  • menu

　　<menu> 标签可定义一个菜单列表。

  • meta

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

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

  • meter

　　N

  • nav

　　"The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of 　　　links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is 　　common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is 　　necessary for those links."

　　<nav>应该包含了页面链接，但是页面链接不一定要包含在<nav>中，比如页脚部分的链接更适合包含在<footer>中，可以这么说，<nav>所包含的就是导航链接。

　　你可能会将导航菜单写在<menu>里面，问题不是显而易见的，只是<nav>应该更加合适。

  • noscript

　　noscript 元素用来定义在脚本未被执行时的替代内容（文本）。

　　此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。

　　O

  • object

　　摘自w3c:

　　定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。

　　<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

　　object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。

　　浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。

　　而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素　　 （每个对应一个浏览器）。

  • optgroup

　　<optgroup> 标签定义选项组。

　　optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

  • ol
  • option

　　option 元素定义下拉列表中的一个选项（一个条目）。　　

　　浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

　　option 元素位于 select 元素内部。

　 提示和注释：

　　注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。

　　注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。

　　提示：如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。

  • output

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

　　W3C例子：　

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function write_sum()

{

x=5

y=3

document.forms["sumform"]["sum"].value=x+y

}

</script>

</head>

<body onload="write_sum()">

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

<output name="sum"></output>

</form>

</body>

</html>

　　P

  • p
  • param
  • pre

　　摘自W3C:　

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

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

　　可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为　　在所有浏览器上并不都是一样的。

　　pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 　　　　　　　HTML/XHTML 文档的其他部分中一样即可。请看下面的例子：

  • progress

　　Q

  • <q>

　　标签定义短的引用。

　　浏览器经常在引用的内容周围添加引号。

　　摘自W3C:

　　<q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为　　缩进的块），请使用 <blockquote> 标签。

　　R

  • rp
  • rt
  • ruby

　　<rt> 标签定义字符（中文注音或字符）的解释或发音。

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

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

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

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

　　S

  • s

　　<s> 标签可定义加删除线文本定义。

　　<s> 标签是 <strike> 标签的缩写版本，Netscape 和 Internet Explorer 都支持它。但在 HTML 4 和 XHTML 中已经不再赞成使用它了，意思就是不再使用了；它早晚有一　　天将会消失。

　　注释：请使用 <del> 替代它！

  • samp

　　定义样式文本

  • script
  • section
  • select　　

　　select 元素可创建单选或多选菜单。

　　当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。

  • small

　　<small> 标签呈现小号字体效果。

　　<small> 标签和它所对应的 <big> 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。

　　与 <big> 标签类似，<small> 标签也可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字。

  • source

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

  • span

　　<span> 标签被用来组合文档中的行内元素。其本身是没有任何语义的。

  • strong
  • style
  • sub　　

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

　　包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

　　提示：无论是 <sub> 标签还是和它对应的 <sup> 标签，在数学等式、科学符号和化学公式中都非常有用。

  • summary

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

  • sup　　

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

　　包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

　　提示：这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用，就可以创建出很好的超链接脚注。

　　T

  • table
  • tbody　
  • thead
  • tfoot

　　<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。

　　tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

　　thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

　　注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚　　   了。您必须在 table 元素内部使用这些标签。

　　提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

  • td
  • th

　　<td> 标签定义 HTML 表格中的标准单元格。

　　HTML 表格有两类单元格：

　　表头单元 - 包含头部信息（由 th 元素创建）

　　标准单元 - 包含数据（由 td 元素创建）

　　td 元素中的文本一般显示为正常字体且左对齐。

  • textarea　

　　<textarea> 标签定义多行的文本输入控件。

　　文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

　　可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

　　注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

  • time　　

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

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

  • title　

　　<title> 元素可定义文档的标题。

　　浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链　　接的默认名称。

  • tr

　　<tr> 标签定义 HTML 表格中的行。

　　tr 元素包含一个或多个 th 或 td 元素。

  • track　　

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

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

  • tt　

　　<tt> 标签呈现类似打字机或者等宽的文本效果。

　　<tt> 标签与 <code> 和 <kbd> 标签一样，<tt> 标签和必需的 </tt> 结束标签告诉浏览器，要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器　　来说，这个标签在文本的显示上就没有什么特殊效果了。

　　U

  • u

　　<u> 标签可定义下划线文本。

  • ul

　　V

  • var

　　定义变量。可以与<pre>及<code>一起配合使用。

  • video

　　W

  • wbr　　

　　Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

　　提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素　　来添加 Word Break Opportunity（单词换行时机）。

　　感谢：w3school、html5doctor

html5 Doctor——教你规范使用html5标签的更多相关文章

  1. &lbrack;Mugeda HTML5技术教程之2&rsqb; Mugeda HTML5富媒体平台简介

    [Mugeda HTML5技术教程之2] Mugeda HTML5动画平台简介 摘要:Mugeda提供基于云的平台,供开发人员和设计人员快速的开发.发布和统计基于HTML5的,包含丰富动画和交互的移动 ...

  2. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  3. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  4. HTML5的文档结构和新增标签

    一．HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...

  5. &lbrack;Mugeda HTML5技术教程之1&rsqb; HTML5&colon; 生存还是毁灭

    [Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...

  6. HTML5 Cheat sheet PNG帮助手册（标签、事件、兼容）

    HTML5 Cheat sheet PNG帮助手册(标签.事件.兼容) 1.HTML5标签 2.HTML5事件 3.HTML5兼容 最新HTML5手册资料请参考:http://www.inmotion ...

  7. HTML5每日一练之figure新标签的应用

    igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...

  8. &lbrack;Mugeda HTML5技术教程之16&rsqb;案例分析：制作跨屏互动游戏

    本节我们将要做一个跨屏互动应用的案例分析,该应用时给一家商场做活动使用的,是一个跨屏爱消除游戏.PC端页面显示在连接在PC的大屏幕上,参与活动的玩家可以用自己的手机扫描PC端页面上的二维码,连接成功后 ...

  9. &lbrack;Mugeda HTML5技术教程之14&rsqb;案例分析：制作网页游戏

    本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一些Mugeda API的用法和使用Mugeda动画制作网页游戏的方法. (一)游戏规则: 1.开始游戏时,手机出现在最上面一行的任意一格: 2 ...

随机推荐

  1. Asp&period;Net实现无刷新文件上传并显示进度条&lpar;非服务器控件实现&rpar;&lpar;转&rpar;

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  2. linux3

    第一课:date +%Y-%m-%d 显示日期date +%H:%M 显示小时分钟date 显示日期 vi /etc/sysconfig/network-scripts/ifcfg-eth0 网卡配置 ...

  3. IDEA UML类图插件

    idea已经集成了该功能,只是默认没打开,仍然打开Settings界面,定位到Plugins,输入UML,参考下图:

  4. html 标签自己居中

    <div style="width: 200px; height: 200px; border: 1px solid red; margin: 0 auto;">&lt ...

  5. Mac RTX

    http://bbs.weiphone.com/read-htm-tid-1876850.html 公司的rtx还是2010的,如果是2011的就有mac版的了.直接到官网下. 那还是用2010的,尼 ...

  6. C语言的本质（3）——整数的本质与运算

    C语言的本质(3)--整数的本质与运算 计算机存储的最小单位是字节(Byte),一个字节通常是8个bit.C语言规定char型占一个字节的存储空间.如果这8个bit按无符号整数来解释,则取值范围是0~ ...

  7. nginx之 nginx &plus; tomcat &plus; redis 负载均衡且session一致性

    说明: 本文描述的是 nginx + tomcat + redis 实现应用负载均衡且满足session一致性,从安装到配置的全部过程,供大家学习!nginx 代理服务器ip: 10.219.24.2 ...

  8. 【Java学习笔记之二】java标识符命名规范

    什么是标识符 就是程序员在定义java程序时,自定义的一些名字.标识符可以应用在类名.变量.函数名.包名上. 标识符必须遵循以下规则 标识符由26个英文字符大小写(a~zA~Z).数字(0~9).下划 ...

  9. Linux学习之常用权限管理命令&lpar;二&rpar;

    (一)常用权限管理命令 (1)chmod命令 (2)chown (3)chgrp (4)umask (一)常用权限管理命令 (1)chmod命令 命令名称:chmod命令英文原意:change the ...

  10. leetcode-200-岛屿的个数（dfs找所有的连通分量）

    题目描述: 给定一个由 '1'(陆地)和 '0'(水)组成的的二维网格,计算岛屿的数量.一个岛被水包围,并且它是通过水平方向或垂直方向上相邻的陆地连接而成的.你可以假设网格的四个边均被水包围. 示例 ...

相关文章