HTML标签语义化

前言

什么是标签语义化：

在合适的地方用合适的标签，用正确的标签做正确的事

什么是合适的标签

什么是正确的标签

标签用在了正确的地方就是正确的标签

想使用正确标签的前提是了解标签本身的意义，如果标签没有意义，那和div又有什么区别呢？（div标签为普通块级标签）

1. 关于div的理解：

理论上，我们应该在找不到比div更合适的标签的时候才选择div标签

先说说div标签，div标签为普通块级标签，可以认为他是毫无意义。正是因为他毫无意义，所以我们在网页上面看见了他太多的身影。你说这些标签用正确了吗？好像也没错！个人对乱用div标签进行布局的看法则是合适但不正确。

2.关于布局标签的替代：

头部标签使用header，可以理解为凡事你想给div命名head这类类名的div都应该替换为该标签。主要用来包含引导性帮助的功能区。

底部标签使用footer，一般用来包含网页底部版权信息等功能的功能区。

main标签用于主题内容区，页面直能出现一个该标签

nav标签则为导航标签，导航内容应包含在nav标签内部

常用的各种块级布局应该使用section标签，不过section标签作为块是希望块内出现对于的标题，理论section标签的划分是以同级h标签划分

页面悬挂内容等非页面主题内容部分使用aslide标签，寓意为挂件部分。比如悬浮广告，通知等使用该标签。

设计到文章的标签使用article标签

3.粗略的一个结构图

<header>
    <!-- logo图标等 -->
    <h1><a><img /></a></h1>
</header>
<nav></nav>
<main>
    <section>
        <h2>区域标题1</h2>
        <article>
            <h3>文章标题</h3>
            <time>发布时间</time>
            <address>作者地址信息</address>
            <p>正文第一段</p>
            <p>正文第二段</p>
            <p>正文第三段</p>
        </article>
    </section>
    <section>
        <h2>区域标题2</h2>
        <dl>
            <dt><img title="图片1"/></dt>
            <dd>图片1的描述</dd>
        </dl>
        <dl>
            <dt><img title="图片2"/></dt>
            <dd>图片2的描述</dd>
        </dl>
    </section>
    <section>
        <h2>区域标题3</h2>
        <ul>
            <li>有序列表1</li>
            <li>有序列表2</li>
            <li>有序列表3</li>
        </ul>
    </section>
</main>
<aslide>与网页主题内容无关的挂件如：公告信息，广告信息</aslide>
<footer>
    <a href="https://blog.csdn.net/stopllL/article/details/74783444">友情链接</a>
    <p>版权信息</p>
</footer>

结语

HTML的标签语义化不只是给人看，还给浏览器看。更好的语义化有助于浏览器更好更快的渲染。同样，更好的HTML结构也能简化一定的标签，并且使你的javascript操作更随心。

前端性能优化除了优化javascript还有html和css的优化 前端代码的可维护性除了javascript的可维护，还有html和css的可维护 前端除了javascript还有htm和css