HTML5-程序员参考-四-HTML5 程序员参考（四）七、HTML5 元素参考本章为所有新的 HTML5 元素提供

HTML5 程序员参考（四）

原文：HTML5 Programmer's Reference

协议：CC BY-NC-SA 4.0

七、HTML5 元素参考

本章为所有新的 HTML5 元素提供了详细的参考。元素在语义上被分组，所以所有提供分段语义的元素都在一起，所有提供分组语义的元素都在一起，等等。每个元素条目将包含以下内容:

元素及其功能的简要描述。
包含元素语法和简短示例的用法部分。
属性部分列出了可以在元素上设置的所有属性。
包含该元素所有相关标准的表格。

所有这些相同的元素在第二章中有更详细的介绍。您可以在那里找到深入的讨论，以及更多的例子和浏览器支持。

部分

HTML5 定义了几个新元素，用于标记较大文档中的内容部分。这些部分通常是独立的或不同的内容组。一些部分在单个文档中是可重复的。区段元素有助于提供文档的整体结构。

article元素

article元素用于表示较大文档中自包含的独立内容的一部分:一页博客文章中的一篇博客文章、报纸页面中的一个故事或较大页面上的一则广告。

用法〔??〕

元素用于表示内容的块部分，并在文档流中呈现为块元素(类似于div或标题元素)。结束标记是必需的。

语法

<article>...</article>

清单 7-1 。文章元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>First Article Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
      </article>
      <article>
        <h1>Second Article Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
      </article>
    </body>
</html>

属性

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate

表 7-1。article元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/sections.html#the-article-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-article-element |

aside元素

aside元素表示与其包含的内容无关或松散相关的内容:侧边栏、注释或评论。省略aside元素中的内容不应该影响包含内容的含义。

用法〔??〕

元素用于表示内容的块部分，并在文档流中呈现为块元素(类似于div或标题元素)。结束标记是必需的。

语法

<aside>...</aside>

清单 7-2 。旁白元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Article Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
        <aside>
          <h2>Aside Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur nisi id gravida.</p>
          <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
          </ul>
        </aside>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
contenteditable
contextmenu
dataset
dir
draggable
hidden
id
lang
spellcheck
style
tabindex
title

表 7-2。aside元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/sections.html#the-aside-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-aside-element |

footer元素

footer元素用于表示出现在包含部分末尾的内容。页脚通常提供有关其包含节的信息。每个部分最多应该有一个footer。

用法〔??〕

元素用于表示内容的块部分，并在文档流中呈现为块元素(类似于div或标题元素)。结束标记是必需的。footer元素不能包含header、footer或main元素。

语法

<footer>...</footer>

清单 7-3 。页脚元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Article Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
        <footer>
          <p>Sitemap:</p>
          <ul>
            <li>link</li>
            <li>link</li>
            <li>link</li>
          </ul>
          <p>Copyright notice.</p>
        </footer>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-3。footer元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/sections.html#the-footer-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-footer-element |

header元素

header元素用于表示一节开始处的一组介绍性内容。每个部分最多应该有一个标题。

用法〔??〕

元素用于表示内容的块部分，并在文档流中呈现为块元素(类似于div或标题元素)。结束标记是必需的。header元素不能包含header、footer或main元素。

语法

<header>...</header>

清单 7-4 。标题元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <header>
          <h1>Article Title</h1>
          <ul>
            <li>navlink 1</li>
            <li>navlink 2</li>
            <li>navlink 3</li>
          </ul>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-4。header元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/sections.html#the-header-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-header-element |

nav元素

nav元素用于表示导航部分，该导航部分具有到其他页面或当前文档中的内容或部分的主要导航链接。

用法〔??〕

元素用于表示内容的块部分，并在文档流中呈现为块元素(类似于div或标题元素)。结束标记是必需的。

语法

<nav>...</nav>

清单 7-5 。nav元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <header>
          <h1>Article Title</h1>
          <nav>
            <ul>
              <li>navlink 1</li>
              <li>navlink 2</li>
              <li>navlink 3</li>
            </ul>
          </nav>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
      </article>
    </body>
</html>

性能

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-5。nav元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/sections.html#the-nav-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-nav-element |

section元素

section元素用于表示一组通用的内容，通常覆盖一个特定的主题。通常，部分的主题由一个子 header 元素表示。

用法〔??〕

usage元素用于表示内容的块部分，并在文档流中呈现为块元素(类似于div或标题元素)。结束标记是必需的。

语法

<section>...</section>

清单 7-6 。section元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <section>
          <h1>Introduction</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
            arcu nec, ullamcorper velit. In in nulla tellus.</p>
        </section>
        <section>
          <h1>First Section</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
            arcu nec, ullamcorper velit. In in nulla tellus.</p>
        </section>
        <section>
          <h1>Second Section</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
            arcu nec, ullamcorper velit. In in nulla tellus.</p>
        </section>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-6。section元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/sections.html#the-section-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-section-element |

分组

HTML5 标准定义了一组新的元素来按类型将数据分组，以区别于用于提供整体文档结构的 section 元素。

figure和figcaption元素

figure元素用于将一组独立的数据组合在一起，该组数据作为一个单独的集合从文档的主要内容中引用。典型的用途是用于插图、图表、代码示例等。元素可选地用于为一个图形元素提供标题。

用法〔??〕

这些元素用于表示内容的块部分，并在文档流中呈现为块元素(类似于div或标题元素)。两个元素都需要结束标记。元素是可选的，但是必须是一个figure元素的子元素。

语法

<figure>
    <figcaption>...</figcaption>
    ...
</figure>

清单 7-7 。figure和figcaption元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Title</h1>
        <figure>
          <figcaption>Caption: Source Information</figcaption>
          <img src="diagrams/diagram1-1.png" alt="Schematic diagram" />
        </figure>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-7。figure and figcaption要素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/grouping-content.html#the-figure-element``www.w3.org/TR/html5/grouping-content.html#the-figcaption-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-figure-element``www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-figcaption-element |

main元素

main元素用作另一个元素的主要内容的容器。主要元素本身并不提供结构或者有助于文档的大纲。它只提供一个分组容器。

用法〔??〕

元素用于表示内容的块部分，并在文档流中呈现为块元素(类似于div或标题元素)。结束标记是必需的。

语法

<main>...</main>

清单 7-8 。main元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Article Title</h1>
        <main>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
             tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
             arcu nec, ullamcorper velit. In in nulla tellus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
             tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
             arcu nec, ullamcorper velit. In in nulla tellus.</p>
        </main>
        <aside>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </aside>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-8。main元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/grouping-content.html#the-main-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-main-element |

语义学

HTML5 标准指定了几个新元素，旨在为定义数据部分的语义目的提供更多功能。因为它们旨在提供语义细节而不是结构，所以这些标记被呈现为内联元素。

不幸的是，在当前的浏览器实现中很少支持这些标签。

bdi元素

bdi元素 ( bdi是“双向隔离”的缩写)用于隔离可能与周围文本格式化方向不同的文本部分——例如，当在其他英文页面中直接包含阿拉伯文本时。

用法〔??〕

元素用于表示包含在其他文本中的一部分文本，因此呈现为内联元素。

语法

<bdi>...</bdi>

清单 7-9 。bdi元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Article Title</h1>
        <p>Lorem ipsum dolor sit amet, <bdi>consectetur adipiscing elit</bdi>. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-9。bdi元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/text-level-semantics.html#the-bdi-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-bdi-element |

data元素

data元素用于表示嵌入在文档中的机器可读数据。通常，数据将使用类型或数据属性嵌入到元素中。

用法〔??〕

这个元素用于将机器可读的数据嵌入到文档中。它通常不被呈现。不需要结束标记。

语法

<data value="someval">

清单 7-10 。data元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Article Title</h1>
        <ul>
          <li><data value="ser-123-456">Serial Number 1</li>
          <li><data value="ser-123-856">Serial Number 2</li>
          <li><data value="ser-123-204">Serial Number 3</li>
        </ul>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-10。data元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/text-level-semantics.html#the-data-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-data-element |

mark元素

mark元素用于表示一组数据中的出现次数。事件本身是上下文特定的。

用法〔??〕

该元素用于表示较大内容中的数据部分，因此呈现为内联元素。结束标记是必需的。

语法

<mark>...</mark>

清单 7-11 。mark元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Article Title</h1>
        <p>Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
        <p>Lorem ipsum dolor sit amet, <mark>consectetur</mark> adipiscing elit. Vestibulum
           tempus in nisi id gravida. Nullam vitae velit tincidunt, vulputate
           arcu nec, ullamcorper velit. In in nulla tellus.</p>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-11。mark元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/text-level-semantics.html#the-mark-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-mark-element |

ruby、rp和rt元素

ruby、rp和rt元素用于创建 Ruby 注释，这是主文本旁边显示的短文本。通常，拼音注释用于指示东亚语言的发音。有关 Ruby 注释的详细信息，请参见www.w3.org/TR/ruby/和http://en.wikipedia.org/wiki/Ruby_character。

用法〔??〕

一个ruby元素通常由一组被ruby标签包围的内容组成，带有一个或多个rp或rt注释。

语法

<ruby>base<rt>annotation</ruby>
<ruby><rb>base<rt>annotation</ruby>

清单 7-12 。ruby、rt和rp元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Article Title</h1>
        <ruby>B<rt>a<rt>a</ruby><ruby>A<rt>a<rt>a</ruby>
        <ruby>S<rt>a<rt>a</ruby><ruby>E<rt>a<rt>a</ruby>
        <ruby>BASE<rt>annotation 1<rt>annotation 2</ruby>
      </article>
    </body>
</html>

属性

这些元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-12。ruby, rt,和rp元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element``www.w3.org/TR/html5/text-level-semantics.html#the-rt-element``www.w3.org/TR/html5/text-level-semantics.html#the-rp-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-ruby-element``www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-rt-element``www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-rp-element |

time元素

类似于data元素，time元素用于表示嵌入在文档中的机器可读的日期/时间数据。

用法〔??〕

这个元素用于将机器可读的数据嵌入到文档中。需要一个结束标记。

语法

<time>...</time>

清单 7-13 。time元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Article Title</h1>
        <time>2011-11-12T14:54</time>
        <time>2011-11-12T14:54:39</time>
        <time>2011-11-12T14:54:39.929</time>
        <time>2011-11-12 14:54</time>
        <time>2011-11-12 14:54:39</time>
        <time>2011-11-12 14:54:39.929</time>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-13。time元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/text-level-semantics.html#the-time-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-time-element |

wbr元素

断字机会标签用于指示文档流中的一个位置，在该位置浏览器可以启动一个换行符，尽管其内部规则可能不会这样做。它对双向排序没有影响，如果浏览器确实在标签处开始换行，则不使用连字符。

用法〔??〕

此元素用于指示文本中的分词机会，因此仅在需要分词时才呈现。因此，它应该包含在其他块元素(如段落)中。不需要结束标记。

语法

<wbr>

清单 7-14 。wbr元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <article>
        <h1>Article Title</h1>
        <p>Supercali<wbr>fragilistic<wbr>expialidocious and
          antidis<wbr>establishment<wbr>arianism.</p>
      </article>
    </body>
</html>

属性

这个元素可以有任何“全局”属性，这是所有 HTML 元素的标准。这些属性包括:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-14。wbr元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/text-level-semantics.html#the-wbr-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-wbr-element |

音频和视频内容

audio元素

元素用于在网页中嵌入声音内容(通常是音频文件)。

过去，在文档中嵌入音频内容通常需要使用插件(最常见的是 Flash)。这具有相当普遍的好处，因为只要目标浏览器安装了插件，它就能够播放内容。围绕用户界面控制、处理不同文件格式以及动态流等特殊功能的所有复杂性都由插件软件来处理。

当实现嵌入声音内容的能力时，web 浏览器制造商必须自己处理这些问题。因此，音频播放器的用户界面控件的外观和功能因浏览器而异。

由于专利阻碍，每个浏览器还支持不同的文件格式，并且一些浏览器根据本地安装的软件在不同的操作系统上支持不同的文件格式。对音频文件格式、专利问题和操作系统支持的深入讨论超出了本书的范围，但是你可以在网上找到大量的信息。具体来说:

Mozilla 开发者网络有一个很好的页面，讨论了各种音频格式及其在主流浏览器中的支持。
http://hpr.dogphilosophy.net/test/index.php是一个页面，您可以访问它来测试您的浏览器对各种音频格式的支持。该页面还提供了一些关于各种格式及其在主流浏览器中的支持状态的有用信息。
www.jwplayer.com/html5/formats/JW 播放器是基于 HTML5 技术的专有音频/视频播放器(播放器的核心是开源)。该公司对 HTML5 音频和视频支持的状态有着明显的兴趣，他们维护着自己关于该主题的统计数据。

网络上还有其他可用的资源，但其中许多似乎已经过时(或者无法核实它们最后更新的时间)。

用法〔??〕

元素用于在文档中嵌入声音内容。可以使用src属性或者使用包含在audio元素中的source元素来指定内容。有关使用source元素的详细信息，请参见下一节。

该元素还可以包含零个或多个track元素，为音频内容指定基于时间的数据(如字幕)。详情见track元件一节。

此外，如果浏览器不支持音频元素，该元素可以选择性地包含将被呈现的其他元素。

<audio>标签不是自动关闭的，因此开始和结束标签都是必需的。

语法

<audio></audio>

清单 7-15 。audio元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <p>Basic</p>
      <audio controls="true" src="../media/winamp-llama.mp3">
        <p>Your browser does not support the HTML5 audio tag.</p>
      </audio>
      <p>Using source Elements</p>
      <audio controls="true">
        <source src="testfile.mp3" type="audio/mpeg">
        <source src="testfile.ogg" type="audio/ogg">
        <p>Your browser does not support the HTML5 audio tag.</p>
      </audio>
    </body>
</html>

属性

音频元素支持以下属性:

autoplay:这是一个布尔标志，当它被设置(设置为任何值，甚至是false)时，将使浏览器立即开始播放音频内容，而不需要停下来进行缓冲。
controls:如果设置了该属性，浏览器将显示音频播放器的默认用户界面控件(音量控件、进度条/滑动条等)。).
loop:如果设置了该属性，浏览器将循环播放指定文件。
muted:该属性指定默认静音播放。
preload:该属性用于提示浏览器如何为指定内容提供最佳的用户体验。它可以有三个值:
- none指定作者想要最小化音频内容的下载，可能因为内容是可选的，或者因为服务器资源是有限的。
- metadata指定作者推荐下载音频内容的元数据(持续时间、曲目列表、标签等。)和可能的前几帧内容。
- auto指定浏览器可以把用户的需求放在第一位，而不会给服务器带来风险。这意味着浏览器可以开始缓冲内容、下载所有元数据等等。
src:这个属性指定内容的来源，就像一个img元素一样。如果需要，可以省略这个属性，而在audio元素中包含一个或多个source元素。

此外，audio元素支持以下全局属性:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-15。audio元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/embedded-content-0.html#the-audio-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-video-element |

source元素

source元素用于为其父元素指定一个内容源。因此，源元素 s 必须总是包含在音频或视频元素 s 中。它本身不代表任何东西。

用法〔??〕

source元素用于为audio或video元素指定一个内容源。允许多个source元素。如果一个audio或video元素中包含多个source元素，浏览器将按顺序检查每个元素，并获取和播放第一个指定以其支持的方式编码的内容的元素。这为各种浏览器中对音频和视频格式的分散支持提供了一种变通方法:只需以所需的格式对所需的内容进行编码，并根据需要使用尽可能多的源元素来指定不同编码的位置。

<source>标签不需要结束标签，也不会在文档中呈现。所有的source元素必须在任何track元素之前。

语法

<source src="testfile.mp3">

清单 7-16 。source元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <audio controls="true">
        <source src="testfile.mp3" type="audio/mpeg">
        <source src="testfile.ogg" type="audio/ogg">
        <p>Your browser does not support the HTML5 audio tag.</p>
      </audio>
      <video controls="true">
        <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
        <source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
        <p>Your browser does not support the HTML5 video tag.</p>
      </video>
    </body>
</html>

属性

一个source元素有两个属性:

src:src属性用于提供适合包含元素的媒体资源的地址。该属性是必需的。
type:type属性用于指定媒体资源的 MIME 类型。浏览器使用该类型属性来确定它是否可以播放媒体资源。如果它不能播放媒体资源，浏览器将不会尝试获取它，并将移动到下一个source元素(如果有的话)。type属性可以包含可选的codec参数，该参数指定用于创建指定媒体的编解码器。codec参数的语法由 RFC6381 控制，“桶媒体类型的codecs和profiles参数”

表 7-16。source元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 互联网工程任务组 | 提议的标准 | http://tools.ietf.org/html/rfc6381 | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 语言参考 | www.w3.org/TR/html-markup/source.html | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#the-source-element |

track元素

track元素用于为音频或视频元素指定基于时间的数据，例如隐藏式字幕或字幕。像source元素一样，track元素本身不定义任何内容，并且必须是音频或视频元素的子元素。由track元素指定的基于时间的数据可以以浏览器支持的任何方式格式化；最常见的格式是新的 WebVTT 格式。

WebVTT 格式的数据

Web 视频文本轨道格式 (WebVTT ) 标准为文本文件(UTF-8 编码)指定了特定的模式或格式，将任意数据与时间点相关联。通常数据是标题信息，但也可以是任何格式的数据，包括 XML、HTML 甚至 JSON。

有效的 WebVTT 文件由WEBVTT声明、声明旁边的可选描述以及零个或多个提示或注释组成。因此文件

WEBVTT

是有效的 WebVTT 文件。

一个有效的提示由一个可选的提示标识符组成，下一行是提示计时(也可能包括提示设置)，下一行是提示的内容。一个简单的例子如清单 7-17 所示。

清单 7-17 。李尔王的示例 WebVTT 隐藏字幕文件

WEBVTT

1 - Act 1, Scene 1
00:00:1.000 --> 00:00:1.500
Scene: King Lear's Palace
Enter Kent, Gloucester, and Edmund.

00:00:1.500 --> 00:00:2.000 position:10%  size:50%
<v Kent> I thought the king had more affected the Duke of
Albany than Cornwall.

00:00:2.100 --> 00:00:3.500 position:10%  size:50%
<v Gloucester> It did always seem so to us: but now, in the
division of the kingdom, it appears not which of
the dukes he values most; for equalities are so
weighed, that curiosity in neither can make choice
of either's moiety.

在这个例子中，有三个独立的提示，每个都有一个时间戳范围。随着视频的播放，每个提示会在适当的时间显示。WebVTT 标准包括格式化结果字幕的能力；在该示例中，对话框提示框被限制为视频视口宽度的 50%,并且被定位在远离视口左侧总视口宽度的 10%。

WebVTT 标准非常广泛，我不打算在这里全面介绍。详情见http://dev.w3.org/html5/webvtt/的 W3C 标准。在 HTML5 Doctor 网站上还有一个很棒的教程，可以在http://html5doctor.com/video-subtitling-and-webvtt/找到。

用法〔??〕

track元素用于为包含的音频或视频元素指定包含基于时间的数据的文件。同一个音频或视频元素允许有多个track元素。

track标签是自结束的，不需要结束标签，并且track标签必须跟在任何源标签之后。

语法

<track src="karaoki.vtt">

清单 7-18 。track元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <audio controls="true">
        <source src="testfile.mp3" type="audio/mpeg">
        <source src="testfile.ogg" type="audio/ogg">
        <track src="karaoki.vtt" kind="captions" label="Karaoki Cues">
        <p>Your browser does not support the HTML5 audio tag.</p>
      </audio>
      <video controls="true">
        <source src='thetwotowers.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src='thetwotowers.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
        <source src='thetwotowers.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
        <track src="closed-captioning.vtt" kind="captions" label="Closed Captioning">
        <track src="peter_fran_philippa.vtt" kind="subtitles" src="en" label="Director and
Writer Scene Notes">
        <p>Your browser does not support the HTML5 video tag.</p>
      </video>
    </body>
</html>

性能

track元素具有以下属性:

default:表示这是内容的默认轨道，除非被用户覆盖，否则应该显示该轨道。
kind:表示文件中包含何种数据。有效值包括:
- captions:表示数据是内容的转录或翻译(如隐藏式字幕)。
- chapters:表示数据是导航内容时使用的一组章节标题或其他小节信息。
- descriptions:数据是对视频或音频内容的描述，适合盲人(视频的情况下)或聋人(音频的情况下)。
- metadata:数据是脚本使用的，不会直接显示给用户。
- subtitles:字幕是父内容的附加内容，如场景信息、额外的叙述背景等。如果指定了这个kind，那么还必须为内容指定srclang属性。
label:当用户正在浏览可用曲目时，可以呈现的曲目的用户可读标签。
src:内容的 URI。
srclang:轨道数据的语言，在 BCP 47 语言标签中(见http://tools.ietf.org/html/bcp47处的 BCP 47 标准)。如果kind设置为字幕，则必须指定该属性。

表 7-17。track元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | Internet 工程任务组(Internet Engineering Task Force) | 最佳当前实践 | http://tools.ietf.org/html/bcp47 | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 编辑草稿 | http://dev.w3.org/html5/webvtt/ | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 语言参考 | www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-track-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#the-track-element |

video元素

元素用于在网页中嵌入视频内容(通常是视频文件)。

过去，在文档中嵌入视频内容通常需要使用插件(最常见的是 Flash)。这具有相当普遍的好处，因为只要目标浏览器安装了插件，它就能够播放内容。围绕用户界面控制、处理不同文件格式以及动态流等特殊功能的所有复杂性都由插件软件来处理。

当实现嵌入视频内容的能力时，网络浏览器制造商必须自己处理这些问题。因此，视频播放器的用户界面控件的外观和功能因浏览器而异。

由于专利阻碍，每个浏览器还支持不同的文件格式，并且一些浏览器根据本地安装的软件在不同的操作系统上支持不同的文件格式。对视频文件格式、专利问题和操作系统支持的深入讨论超出了本书的范围，但是你可以在网上找到大量的信息。具体来说:

Mozilla 开发者网络有一个很好的页面，讨论了各种视频格式及其在主流浏览器中的支持。
Zencoder 是一家基于云的转码服务提供商。因为他们的主要业务是视频转码，所以他们非常了解各种级别的支持需要什么样的格式。
www.jwplayer.com/html5/formats/JW 播放器是基于 HTML5 技术的专有音频/视频播放器(播放器的核心是开源)。该公司对 HTML5 音频和视频支持的状态有着明显的兴趣，他们维护着自己关于该主题的统计数据。

网络上还有其他可用的资源，但其中许多似乎已经过时(或者无法核实它们最后更新的时间)。

用法〔??〕

元素用于在文档中嵌入视频内容。可以使用src属性或者使用包含在video元素中的source元素来指定内容。有关使用源元素的详细信息，请参见本章中的source元素一节。

该元素还可以包含零个或多个track元素，为视频内容指定基于时间的数据(如字幕)。有关使用轨道元件的详细信息，请参见本章中的track元件一节。

此外，如果浏览器不支持音频元素，该元素可以选择性地包含将被呈现的其他元素。

<video>标签不是自动关闭的，因此开始和结束标签都是必需的。

语法

<video></video>

清单 7-19 。video元素

<!DOCTYPE html>
<html>
    <head>
        <title>The HTML5 Programmer's Reference</title>
    </head>
    <body>
      <p>Basic</p>
      <video controls="true" src="../media/lotr_thetwotowers.mp4">
        <p>Your browser does not support the HTML5 video tag.</p>
      </video>
      <p>Using source Elements</p>
      <video controls="true">
        <source src="../media/video-1.mp4" type="video/mp4">
        <source src="../media/video-1.ogv" type="video/ogg">
        <p>Your browser does not support the HTML5 video tag.</p>
      </video>
    </body>
</html>

属性

视频元素支持以下属性:

autoplay:这是一个布尔标志，当设置为(任何值，甚至是false)时，浏览器会立即开始播放视频内容，而不会停下来进行缓冲。
controls:如果设置了该属性，浏览器将显示视频播放器的默认用户界面控件(音量控件、进度条/滑动条等)。).
height:该属性可用于指定视频播放器的高度，以像素为单位。
loop:如果设置了该属性，浏览器将循环播放指定文件。
muted:该属性指定默认静音播放。
poster:该属性可用于指定视频播放前要显示的海报的 URL。如果没有指定海报，那么一旦加载，播放器将默认显示视频的第一帧。
preload:该属性用于向浏览器提供如何为指定内容提供最佳用户体验的提示。它可以采用以下值:
- none:指定作者希望尽量减少视频内容的下载，可能是因为内容是可选的，也可能是因为服务器资源有限。
- metadata:指定作者推荐下载视频内容的元数据(时长、曲目列表、标签等。)和可能的前几帧内容。
- auto:指定浏览器可以把用户的需求放在第一位，而不会给服务器带来风险。这意味着浏览器可以开始缓冲内容、下载所有元数据等。
src:该属性指定内容的来源。如果需要的话，可以省略这个属性，而在<video>标签中包含一个或多个<source>标签。
width:该属性可用于指定视频播放器的宽度，以像素为单位。

此外，video元素支持以下全局属性:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-18。video元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/TR/html5/embedded-content-0.html#the-video-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-video-element |

互动元素

details和summary元素

details和summary元素用于提供渐进公开的基本解决方案。通过点击一个summary元素的内容，相关联的details元素内的内容被显示(或隐藏)。这种特殊的用户界面小部件通常被称为“expando ”,是基于 web 的应用和本地应用的通用 UI 组件。

目前在 Internet Explorer、IE Mobile(参见http://status.modern.ie/detailssummary)、Firefox 或 Firefox for Android(参见https://bugzilla.mozilla.org/show_bug.cgi?id=591737)中都不支持这些元素。然而，IE 团队正在考虑实现，Firefox 团队正在积极开发该功能。除此之外，Chrome、Chrome for Android、Android 浏览器、Safari 和 Safari Mobile 都很好地支持该功能。

用法〔??〕

标签应该一起使用。details标签是父标签，第一个元素是summary标签。当用户点击summary标签的内容时，出现在summary标签后的内容(但仍在details标签内)将被显示或隐藏。

这两个标记都呈现为块元素。这些标记不是自结束标记，因此两个元素都需要结束标记。

语法

<details>
    <summary>...</summary>
    ...
</details>

清单 7-20 。details和summary元素

<!DOCTYPE HTML>
<html>
  <head>
    <title>The HTML5 Programmer's Reference</title>
  </head>
  <body>
    <article>
      <h1>Using the &lt;summary&gt; and &lt;details&gt; tags</h1>
      <details>
        <summary>Item 1</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          accumsan orci nec justo rhoncus facilisis. Integer pellentesque
          ipsum vitae semper lacinia. Quisque non nisl rutrum, porta est at,
          ultrices neque. Aenean consequat, lacus vulputate vestibulum
          faucibus, turpis magna mollis quam, a congue neque lorem at
          justo.</p>
      </details>
      <details>
        <summary>Item 2</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          accumsan orci nec justo rhoncus facilisis. Integer pellentesque
          ipsum vitae semper lacinia. Quisque non nisl rutrum, porta est at,
          ultrices neque. Aenean consequat, lacus vulputate vestibulum
          faucibus, turpis magna mollis quam, a congue neque lorem at
          justo.</p>
      </details>
      <details open>
        <summary>Item 3--this one will be open by default</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          accumsan orci nec justo rhoncus facilisis. Integer pellentesque
          ipsum vitae semper lacinia. Quisque non nisl rutrum, porta est at,
          ultrices neque. Aenean consequat, lacus vulputate vestibulum
          faucibus, turpis magna mollis quam, a congue neque lorem at
          justo.</p>
      </details>
      <details>
        <summary>Item 3</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          accumsan orci nec justo rhoncus facilisis. Integer pellentesque
          ipsum vitae semper lacinia. Quisque non nisl rutrum, porta est at,
          ultrices neque. Aenean consequat, lacus vulputate vestibulum
          faucibus, turpis magna mollis quam, a congue neque lorem at
          justo.</p>
      </details>
    </article>
  </body>
</html>

属性

details 元素有一个open属性，当这个属性存在时(即使设置为 false ),它将导致相关内容默认可见。否则，这两个元素都支持以下标准全局属性:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-19。details和summary元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-details-element``www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-summary-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-details-element``www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-summary-element |

表单元素

datalist元素

datalist元素提供了一种将数据列表与标准输入元素相关联的方法。当用户开始在输入字段中键入时，列表出现在下方，并且随着用户继续键入，选择范围变窄。用户可以随时使用箭头键从列表中选择一个项目。

这种类型的输入字段通常被称为“组合框”，是 web 和本机应用中常见的用户界面元素。

请注意，目前对该功能的支持非常有限。Internet Explorer 将其列为“已发货”,但在实现中存在重大缺陷(参见http://playground.onereason.eu/2013/04/ie10s-lousy-support-for-datalists/中的讨论和示例)。Safari 目前不支持桌面或移动设备上的功能。

用法〔??〕

元素为一个输入字段提供了一个可过滤的默认条目列表。当用户在字段中键入内容时，列表会出现并缩小到与输入的字符相匹配的选项。用户可以随时从列表中选择一个项目，或者不断键入以输入自定义选项。

datalist元素将一组option元素作为子元素，很像表单select元素。在支持该元素的浏览器中，datalist元素不会呈现在文档中，可以出现在标记中的任何位置。要将给定的datalist与特定的输入字段相关联，设置输入的列表属性以匹配期望的datalist元素的id属性。

语法

<datalist id="example">
    <option value="val1">
    <option value="val2">
    ...
</datalist>
<input list="example" />

清单 7-21 。datalist元素

<!DOCTYPE html>
<html>
  <head>
    <title>The HTML5 Programmer's Reference</title>
  </head>
  <body>
    <!-- Note the datalist can be anywhere -->
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Internet Explorer">
      <option value="Opera">
      <option value="Safari">
    </datalist>
    <article>
      <h1>Using the &lt;datalist&gt; tag</h1>
      <input list="browsers" />
    </article>
  </body>
</html>

属性

datalist元素支持以下属性:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-20。datalist元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/html/wg/drafts/html/master/forms.html#the-datalist-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-datalist-element |

meter元素

meter元素在页面上以填充栏的形式提供了一个可视的指示器或计量器。该条旨在模拟具有已知范围或已知范围的一部分(例如，磁盘使用或音量响度)的测量。它不应该用来显示进步；为此，使用progress元素。

用法〔??〕

meter元素提供了一种度量建模的方法，因此具有允许您定义当前值以及最小和最大值甚至范围的属性。根据这些设置，栏的外观会有所不同。

<meter>标签不是自动关闭的，需要关闭标签。如果浏览器不支持<meter>标签，<meter>标签可以包含其他内容。

语法

<meter></meter>

清单 7-22 。meter元素

<!DOCTYPE html>
<html>
  <head>
    <title>The HTML5 Programmer's Reference</title>
  </head>
  <body>
    <article>
      <h1>Using the &lt;meter&gt; tag</h1>
      <p>Simple meter from 1 to 100, value set to 25:<br>
        <meter min="1" max="100" value="25"></meter>
      </p>
      <p>Simple meter from 1 to 100, low range from 1 to 25, high range from
         75 to 100, value set to 90:<br>
        <meter min="1" max="100" low="25" high="75" value="90"></meter>
      </p>
      <p>Simple meter from 1 to 100, low range from 1 to 25, high range from
         75 to 100, value set to 10:<br>
        <meter min="1" max="100" low="25" high="75" value="10"></meter>
      </p>
      <p>Simple meter from 1 to 100, low range from 1 to 25, high range from
         75 to 100, optimum set to 10, value set to 10:<br>
        <meter min="1" max="100" low="25" high="75" optimum="10" value="10"></meter>
      </p>
      <p>Simple meter from 1 to 100, low range from 1 to 25, high range from
         75 to 100, optimum set to 10, value set to 10:<br>
        <meter min="1" max="100" low="25" high="75" optimum="10" value="90"></meter>
      </p>
    </article>
  </body>
</html>

属性

meter元素支持以下属性:

value:要显示的当前值。如果指定，该值必须在min和max值范围内。如果没有设置value，或者设置不正确，浏览器将默认为 0。如果指定但值大于max属性，该值将被设置为max属性的值。如果该值小于 min 属性，则该值将被设置为min属性的值。
min:范围的最小值。如果未指定，则默认为 0。
max:范围的最大值。必须大于min属性的值(如果指定)。默认为 1。
low:低量程的最高值。当值属性在低范围内时，默认情况下，该条将呈现黄色。
high:上限范围的最小值，范围从该值到max属性的值。当值属性在高范围内时，默认情况下，该条将呈现黄色。
optimum:表示范围的最佳值。该值必须在范围的min和max值之间。如果使用了low和high范围，在其中一个范围内指定一个optimum值将指示这些范围中的哪一个是优选的。当该值在首选范围内时，该条将呈现绿色。当它在另一个范围内时，它将呈现红色。

此外，仪表元素支持以下全局属性:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-21。meter元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/html/wg/drafts/html/master/forms.html#the-meter-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-meter-element |

output元素

output元素提供了一种方式来指示作为表单的一部分完成的计算的输出(例如，利息计算)。元素没有特殊的功能，只是一种从语义上指示计算输出的方式。

用法〔??〕

默认情况下，元素呈现为内联元素。它不是自结束的，结束标记是必需的。

语法

<output>...</output>

清单 7-23 。output元素

<!DOCTYPE html>
<html>
  <head>
    <title>The HTML5 Programmer's Reference</title>
  </head>
  <body>
    <input name="operand1" id="operand1" /> +
    <input name="operand2" id="operand2" /> =
    <output></output><br>
    <button>Add</button>
    <script>
// Get references to the elements we will need.
var myOutput = document.querySelector('output');
var in1 = document.getElementById('operand1')
var in2 = document.getElementById('operand2')
var myButton = document.querySelector('button');

// Add a click event handler to the button that adds the contents of the two
// fields. We'll use parseFloat to cast the value to a number; experiment by
// entering various values including numbers, characters, and combinations of
// characters and numbers. Especially try combinations that start with numbers.
myButton.addEventListener('click', function() {
  myOutput.innerText = parseFloat(in1.value) + parseFloat(in2.value);
}, false);
    </script>
  </body>
</html>

性能

output元素支持以下属性:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-22。output元素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/html/wg/drafts/html/master/forms.html#the-output-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-output-element |

progress元素

元素用于在页面上提供一个进度指示器。它用于指示任务的进度或完成情况，并向用户提供已经完成的工作量和剩余工作量的概念。它不应用于可视化已知范围内的测量；为此，请使用meter元素。

用法〔??〕

progress元素提供了一种对正在进行的过程的完成进行建模的方法，因此它具有允许您定义当前值和最大值的属性。根据这些设置，栏的外观会有所不同。

<progress>标签不是自动关闭的，需要关闭标签。如果浏览器不支持<progress>标签，<progress>标签可以包含其他内容。

语法

<progress></progress>

清单 7-24 。progress元素

<!DOCTYPE html>
<html>
  <head>
    <title>The HTML5 Programmer's Reference</title>
  </head>
  <body>
    <article>
      <h1>Using the &lt;progress&gt; tag</h1>
      <p>Downloading file1<br>
        <progress max="100" value="10">10/100</progress> 10%</p>
    </article>
  </body>

属性

progress元素支持以下属性:

max:活动的最大值。该值必须是有效的正浮点数。如果没有指定max，最大值默认为 1。
value:进度的当前值。该值必须是介于 0 和max(如果指定)或 1(如果未指定max)之间的有效浮点数。如果没有指定value,那么进度条被认为是不确定的，这意味着它正在建模的活动正在进行，但是没有给出需要多长时间才能完成的指示。

此外，progress元素支持标准的全局属性:

accesskey
class
classlist
contenteditable
contextmenu
dataset
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title

表 7-23。进度要素的标准

规格

状态

统一资源定位器

| | --- | --- | --- | | 万维网路联盟(World Wide Web Consortiumˌ简称 W3C) | 候选人推荐 | www.w3.org/html/wg/drafts/html/master/forms.html#the-progress-element | | WHATWG | 生活标准 | www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-progress-element |