HTML5新增语义化布局标签

最新推荐文章于 2023-05-14 11:44:45 发布

苦瓜式的幽默

最新推荐文章于 2023-05-14 11:44:45 发布

阅读量491

点赞数 2

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/are_gh/article/details/111473987

版权

本文介绍了HTML5中新增的语义化布局标签，如header、footer、main、nav等，并讨论了figure标签及其作用。此外，还详细讲解了audio和video标签的使用，包括它们的浏览器兼容性、支持的格式以及相关属性。同时，文章提到了HTML5中新增的表单元素和input类型，以及一些验证和交互特性。

摘要由CSDN通过智能技术生成

HTML5新增语义化布局标签

新增的结构标签（更加语义化）

header标签
- ```
<header>这里是头部区</header>
```
footer标签
- ```
<footer>这里是页脚区</footer>
```
main标签
- ```
<main>这里是主体区</main>
```

nav标签

<nav>
    <a>首页</a>
    <a>关于我们</a>
    <a>联系我们</a>
</nav>

article标签

<article>这里是一个有完整含义的内容区</article>

section标签

<section>
    <h2>标题一</h2>
    <p>内容区域</p>
</section>
<section>
    <h2>标题二</h2>
    <p>内容区域</p>
</section>

aside标签
- ```
<aside>这里是侧边栏</aside>
```

新增的其他标签

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

time标签

<time datetime="2019-02-19">元宵节</time>

progress标签
- progress 标签标示任务的进度（进程）。
- ```
<progress value="30" max="100"></progress>
```

meter标签

属性	属性值	说明
high	number	定义度量的值位于哪个点，被界定为高的值。
low	number	定义度量的值位于哪个点，被界定为低的值。
max	number	定义最大值。默认值是 1。
min	number	定义最小值。默认值是 0。
optimum	number	定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value	number	定义度量的值。