新增部分不常用标签

figure

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

figure

<figure>
  <img
    src="/images/logo.png"
    alt="figure标签"
    title="figure标签"
    width="200px"
  />
  <figcaption>figure的标题</figcaption>
</figure>

details

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

details

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

mark

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

mark

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

meter

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

相关信息

low：最低临界点

high：最高临界点

Min：最小值

Max：最大值

Value：当前值

meter

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

progress

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

相关信息

max：定义完成值

value：定义当前值

progress

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

datalist

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

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

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

datalist

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

随堂训练

轻松一刻 🎧

音乐

音乐

视频教程 🎥

A video

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。