HTML5------ 语义化标签

一些语义化标签的技巧用法

1.figure

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figure>
    <img src="icon-logo.png">
    <p>logo</p>
</figure>

---

2.datalist

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。

<div>
    <input type="text" list="valList" />
    <datalist id="valList">
        <option value="javascript">javascript</option>
        <option value="java">java</option>
        <option value="html">html</option>
        <option value="css">css</option>
    </datalist>
</div>

---

3.details

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

与<summary>标签配合使用，有open属性，决定details 是否可见。

<!--不可见-->
<details>
    <summary>标题一</summary>
    <p>生活真美好</p>
</details>
<!--可见-->
<details open>
    <summary>标题二</summary>
    <p>今天天气真好</p>
</details>

---

4.progress

<progress> 进度条

<!--max表示最大值，value表示进度值-->
<progress max="100" value="50"></progress>
<progress></progress>