重學前端系列--語義類標籤

時間 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>

複製代碼