HTML5新增标签

figure

用于对元素进行组合。多用于图片与图片描述组合

xxxxxxxxxx
<figure>
    <img src="img.gif" alt="figure标签"  title="figure标签" />
    <figcaption>figure的标题</figcaption>
</figure>

details

<details>用于描述文档或文档的某个部分的细节，类似于下拉列表

xxxxxxxxxx
<details>
      <summary>指定的标题，用户点击标题时展示下面的所有内容，内容可以是任何形式的内容</summary>
      <div>
          <p>内容描述</p>
      </div>
</details>
<!-- 当增设open属性时，描述内容默认展示 -->
<details open>
     <summary>指定的标题，用户点击标题时展示下面的所有内容，内容可以是任何形式的内容</summary>
     <div>
         <p>内容描述</p>
     </div>
</details>

mark

主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词

xxxxxxxxxx
<p>你是<mark>大长腿</mark>吗？</p>

meter

定义度量衡。仅用于已知最大和最小值的度量

xxxxxxxxxx
<meter min="0" max="100" value="81" low="20" high="80"></meter>

low:最低临界点

high：最高临界点

Min：最小值

Max：最大值

Value：当前值

progress

运行中的进程。可以使用 <progress>标签来显示 JavaScript中耗费时间的函数的进程

xxxxxxxxxx
<progress max="100" value="20"></progress>

max：定义完成值

value：定义当前值

datalist

定义可选数据的列表。与 input元素配合使用，就可以制作出输入值的下拉列表。

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

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

xxxxxxxxxx
<input id="myCar" list="cars" />
<datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
</datalist>

canvas

定义图形，比如图表和其他图像

实时效果反馈

1.下列details标签描述中正确的是哪一个

A 用于对元素进行组合。多用于图片与图片描述组合

B 用于描述文档或文档的某个部分的细节，类似于下拉列表

C 主要用来在视觉上向用户呈现那些需要突出的文字

D 定义度量衡。仅用于已知最大和最小值的度量

答案

1=>B

实操

1. 【实操】创建页面，在页面上完成视频与音频的播放