html5语义化标签

缺乏、安全感 2022-03-09 13:56 292阅读 0赞

转

# 前端初学者对html语义化标签的理解 #

2018年06月25日 13:47:31 [liuyingv8][] 阅读数：1116

在学习HTML阶段的最后，我们会涉及到学习语义化标签，明明用div等标签就可以构成页面，那么为什么还会有语义化标签的存在？语义化标签到底是什么？学好语义化标签又会[在哪][Link 1]方面应用？接下来会从上面几个方面说一下我的理解。

一、 语义化标签是什么？

常用的语义化标签包括

<header></header>头部

<nav></nav>导航栏

<section></section>区块（有语义化的div）

<main></main>主要区域

<artical></artical>主要内容

<aside></aside>侧边栏

<footer></footer>底部

二、 为什么会用语义化标签？

平时，我们都会采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于浏览器对页面的读取。所以HTML5新增了很多新的语义化标签。并且，在我们未给页面添加css样式时，用户体验并不好。语义化标签也能让浏览器更好的读取页面结构。再就是便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

1、 [页面布局][Link 2]

如下图，如果我们用div来实现此图的布局，那么就要涉及到加类名或者选择符的问题，还有起名字，很多时候就会弄混。直接用语义化标签就会标记出每个区域的作用并且更好是实现页面布局。

![前端初学者对html语义化标签的理解][html]

2、 在移动端布局方面应用

学习一阶段的最后我们会学习到移动端的布局与书写，那么此时选择使用语义化标签往往要比div书写更简单优化。比如移动端布局中我们要采用百分比布局或者rem布局方式，就会涉及到弹性盒中的固比固。比如在我们移动端页面中，拿QQ举例。

![前端初学者对html语义化标签的理解][html 1]

QQ的页面中就可以划分状态栏，header，main，footer。三个区域。在我们的消息区域，有很多消息时，要想查看最底部消息就要下拉，但与此同时header与footer是不动的。那么我们就用到了语义化标签。用到了弹性盒中的固比固（固定高 ： flex：1 ： 固定高）；

3、 举例

![前端初学者对html语义化标签的理解][html 2]

这是在学习移动端布局时所写的一个练习，之所以拿出来它，是因为它是一个很典型的案例，页面中都运用了语义化标签。

给大家看一下页面结构的代码：

<ul>

<li>

</li>

</ul>

</header>

<nav>

<ul>

</ul>

</nav>

<main>

<figcaption>我也不看足球，这里没什么文字时代复分</figcaption>

</figure>

<figcaption>我也不看足球，这里没什么文字时代复分</figcaption>

</figure>

<figcaption>我也不看足球，这里没什么文字时代复分</figcaption>

</figure>

<figcaption>我也不看足球，这里没什么文字时代复分爱</figcaption>

</figure>

<figcaption>我也不看足球，这里没什么文字时代复分</figcaption>

</figure>

</main>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</footer>

</div>

三、 总结

其实总结起来也就是一句话，没有没有用的东西，div等无语义化的标签有他们的好处，语义化标签也有语义化标签的好处，不可[一概而论][Link 3]。但是语义化标签也不是乱用的，视我们页面需求与情况而定。

[liuyingv8]: https://me.csdn.net/liuyingv8
[Link 1]: https://www.baidu.com/s?wd=%E5%9C%A8%E5%93%AA&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[Link 2]: https://www.baidu.com/s?wd=%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[html]: http://p1.pstatp.com/large/pgc-image/1529898847558c7d4451aa5
[html 1]: http://p9.pstatp.com/large/pgc-image/1529898864385efed51c570
[html 2]: /images/20220309/2171fc36e1184bd9b874f47e251277ef.png
[Link 3]: https://www.baidu.com/s?wd=%E4%B8%80%E6%A6%82%E8%80%8C%E8%AE%BA&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd