笔记之“HTML5元素-功能元素”

2.H5新增了很多专用元素

1）hgroup元素：用于对整个页面或页面中一个内容区块的标题进行组合。

2）video元素：定义视频

<video src="movie.ogg" controls="controls">video元素</video>

3）audio元素：定义音频

<audio src="someaudio.wav">audio元素</audio>

4）embed元素：用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。

<embed src="horse.wav" />

5）mark元素：主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

6）dialog元素：定义对话窗或窗口

<dialog open>这是打开的对话窗口</dialog>

7）bdi元素：定义文本的文本方向，使其脱离其周围文本的方向设置

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

8）figcaption元素：定义figure元素

<figure>
    <figcaption>我是小可爱</figcaption>
    <img src="timg.jpg" width="100px" height="100px" />
</figure>

效果如图：

9）time元素：表示日期或时间，也可以同时表示两者。

10）canvas元素：表示图形，如图表和其他图像。元素本身没有行为，仅提供一块画布，但他把一个绘制API展现给客户端javascript以使脚本把想绘制的东西绘制到这块画布上。

11）output元素：表示不同类型的输出，比如脚本的输出

12）menu元素：表示菜单列表。当希望列出表单控件时使用该标签。

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

效果如图：

13）details元素：表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用，summary元素提供标题或图例。标题是可见的，用户单击标题时，会显示出细节信息。summary元素应该是details元素的第一个子元素。

<details>
    <summary>老鼠</summary>
    短尾毛丝鼠体型较大，体长30～38cm，尾长10cm左右；长尾毛丝鼠体型较小，体长24～28cm，尾长14～15cm。 一般雌鼠体重510～710g，雄鼠体重425～570g。前半身似兔，后半身似鼠，耳大钝圆，尾毛蓬松。眼睛明亮，鼻端两侧有许多长须。标准毛丝鼠皮毛呈蓝灰色，腹部渐淡至白色，腹中部有分界明显的白色带。
</details>

效果如图：