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

时间 2019-12-10

标签前端系列语义标签繁體版

原文原文链接

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

语义类标签也是你们工做中常常会用到的一类标签。他们的特色是表现上互相差很少，主要区别是表示不一样的语义。好比section、nav、p。web

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

语义标签使用场景

做为天然语言延伸的语义类标签

做为天然语言和纯文本的补充,用来表达必定的结构或者消除歧义bash

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（放置代码、而且保持代码原有的缩进结构）