重学前端系列--语义类标签

最新推荐文章于 2024-07-20 18:16:53 发布

weixin_34121304

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量238

点赞数

文章标签：前端 ruby ViewUI

原文链接：https://juejin.im/post/5cc71624f265da035378e970

版权

语义类标签是什么，使用它有什么好处

语义类标签也是大家工作中经常会用到的一类标签。他们的特点是表现上互相差不多，主要区别是表示不同的语义。比如section、nav、p。

增强可读性，可以清晰看出网页的结构，也更便于团队的开发和维护。对人类友好，还适合机器阅读，变现力丰富适合引擎检索（SEO）

语义标签使用场景

作为自然语言延伸的语义类标签

作为自然语言和纯文本的补充,用来表达一定的结构或者消除歧义

ruby(类似于注音或者意思的注解)
em(重音强调，来消除歧义)

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

hgroup（有时候会用副标题，为了避免副标题产生一个额外的一个层级.标题1和标题2会在同一个层级）

    <hgroup>
    <h1>标题1 </h1>
    <h2>标题2</h2>
    </hgroup>
    <p>balah balah</p>
    ......

复制代码

作为整体结构的语义类标签

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

复制代码

常见的语义类标签

aside （一般是左侧侧边栏）
article（文章主题部分，具有一定的独立性）
hgroup（标题组）
abbr（缩写，鼠标悬停会显示title值）

    <abbr title="World Wide Web">WWW</abbr>.
复制代码

hr（横向分隔线，表示故事的走向的转变或者话题的转变）
figure、figcaption（图片加文字）

    <figure>
     <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
     <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
    </figure>

复制代码

nav、ol、ul
pre（放置代码、并且保持代码原有的缩进结构）

weixin_34121304

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重学前端系列--语义类标签

语义类标签是什么，使用它有什么好处语义类标签也是大家工作中经常会用到的一类标签。他们的特点是表现上互相差不多，主要区别是表示不同的语义。比如section、nav、p。增强可读性，可以清晰看出网页的结构，也更便于团队的开发和维护。对人类友好，还适合机器阅读，变现力丰富适合引擎检索（SEO）语义标签使用场景作为自然语言延伸的语义类标签作为自然语言和纯文本的补充,用来表达一定的结...
复制链接

扫一扫