首页 > 程序开发 > web前端 > HTML/CSS >

HTML标签语义化

2017-09-07

HTML标签语义化。什么是标签语义化?在合适的地方用合适的标签,用正确的标签做正确的事

前言

什么是标签语义化:

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

什么是合适的标签

当用于包裹文本时:h1~h6,span,strong,em,p… 当用于渲染列表时: ul,li,ol,dd,dt,dl 当用于链接时:a 当用于布局时:head,nav,footer,main,section,div..

什么是正确的标签

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

想使用正确标签的前提是了解标签本身的意义,如果标签没有意义,那和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

相关文章
最新文章
热点推荐