HTML语——div span 和语义化标签的pk，你常用的是什么？

最新推荐文章于 2024-04-19 20:39:07 发布

sameen1900

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量402

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_38526167/article/details/129756639

版权

我比较常用div和span标签布局，一切皆可行。

当然语义类标签也有它们自己无可替代的优点

语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有 CSS 的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。

对于语义标签：

“用对”比“不用”好，“不用”比“用错”好。当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们

作为自然语言延伸的语义类标签例如：em标签

作为标题摘要的语义类标签


<hgroup>
<h1>JavaScript对象</h1>
<h2>我们需要模拟类吗？</h2>
</hgroup>
<p>balah balah</p>
......

HTML5之后

<section>
    <h1>HTML语义</h1>
    <p>balah balah balah balah</p>
    <section>
        <h1>弱语义</h1>
        <p>balah balah</p>
    </section>
    <section>
        <h1>结构性元素</h1>
        <p>balah balah</p> 
    </section>
......
</section>

作为整体结构的语义类标签便于浏览器的阅读视图功能


<body>
    <header>
        <nav>
            ……
        </nav>
    </header>
    <aside>
        <nav>
            ……
        </nav>
    </aside>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>
        <address>……</address>
    </footer>
</body>


<body>
    <header>……</header>
    <article>
        <header>……</header>
        <section>……</section>
        <section>……</section>
        <section>……</section>
        <footer>……</footer>
    </article>
    <article>
        ……
    </article>
    <article>
        ……
    </article>
    <footer>
        <address></address>
    </footer>
</body>

header，如其名，通常出现在前部，表示导航或者介绍性的内容。

footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息等。

header 和 footer 一般都是放在 article 或者 body 的直接子元素，但是标准中并没有明确规定，footer 也可以和 aside，nav，section 相关联（header 不存在关联问题）。

aside 表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。

aside 很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是 aside，aside 不一定是侧边栏。aside 和 header 中都可能出现导航（nav 标签），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。

总结：div和span标签有他们的好处，但在现在手机使用比较便利的情况下，看文章、新闻、小说等等，更需要支持阅读视图功能，所以语义化标签有它的好处存在。

此文章为3月Day24学习笔记，内容来源于极客时间《重学前端》，推荐该课程。

sameen1900

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML语——div span 和语义化标签的pk，你常用的是什么？

aside 很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是 aside，aside 不一定是侧边栏。aside 和 header 中都可能出现导航（nav 标签），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。总结：div和span标签有他们的好处，但在现在手机使用比较便利的情况下，看文章、新闻、小说等等，更需要支持阅读视图功能，所以语义化标签有它的好处存在。header，如其名，通常出现在前部，表示导航或者介绍性的内容。
复制链接

扫一扫