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

最新推荐文章于 2022-11-20 21:31:46 发布

原创最新推荐文章于 2022-11-20 21:31:46 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5技巧 #语义化

HTML5 专栏收录该内容

1 篇文章

订阅专栏

博客介绍了HTML语义化标签的技巧用法，包括<figure>规定独立流内容，<datalist>定义选项列表需与input配合，<details>描述文档细节且与<summary>配合有open属性，<progress>用于显示进度条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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>