html語義化標籤

優點:

1便開發人員閱讀代碼文檔,理清代碼結構

2 SEO(搜索引擎優化:瀏覽器對網頁排名搜索排名)

 

通用容器:div——塊級通用容器;span——短語內容無語義容器。

           如果語義不合適,也不要霸王硬上弓,=。。 =老實的用div吧。

 

        < title></title>:簡短、描述性、唯一(提升搜索引擎排名)。

         搜索引擎會將title作爲判斷頁面主要內容的指標,有效的title應該包含幾個與頁面內容密切相關的關鍵字,建議將title核心內容放在前60個字符中。

 

         <hn></hn>:h1~h6分級標題,用於創建頁面信息的層級關係。

         對於搜索引擎而言,如果標題與搜索詞匹配,這些標題就會被賦予很高的權重,尤其是h1。

 

         <header></header>:頁眉通常包括網站標誌、主導航、全站鏈接以及搜索框。

        也適合對頁面內部一組介紹性或導航性內容進行標記。

 

         <nav></nav>:標記導航,僅對文檔中重要的鏈接羣使用。

         html5規範不推薦對輔助性頁腳鏈接使用nav,除非頁腳再次顯示頂級全局導航、或者包含招聘信息等重要鏈接。

 

         <main></main>:頁面主要內容,一個頁面只能使用一次。如果是web應用,則包圍其主要功能。

 

         <article></article>:包含像報紙一樣的內容= =||是這麼理解的,表示文檔、頁面、應用或一個獨立的容器。

         article可以嵌套article,只要裏面的article與外面的是部分與整體的關係。

 

        <section></section>

一份或一張報紙有很多個版塊,有頭版、國際時事版塊、體育版塊、娛樂版塊、文學版塊等等,像這種有版塊標題的、內容屬於一類的版塊就可以用section包起來。
然後在各個版塊下面,又有很多文章、報道,每篇文章都有自己的文章標題、文章內容。這個時候用article就最好。如果一篇報道太長,分好多段,每段都有自己的小標題,這時候又可以用section把段落包起來

        <aside></aside>:指定附註欄,包括引述、側欄、指向文章的一組鏈接、廣告、友情鏈接、相關產品列表等。

          如果放在main內,應該與所在內容密切相關。

 

        <footer></footer>:頁腳,只有當父級是body時,纔是整個頁面的頁腳。

        

         <small></small>:指定細則,輸入免責聲明、註解、署名、版權。

         只適用於短語,不要用來標記“使用條款”、“隱私政策”等長的法律聲明。

 

         <strong></strong>:表示內容重要性。

         <em></em>:標記內容着重點(大量用於提升段落文本語義)。

        <mark></mark>:突出顯示文本(yellow),提醒讀者。

         在HTML5中em是表示強調的唯一元素,而strong則表示重要程度。

           <b></b>:出於實用目的提醒讀者的一塊文字,不傳達任何額外的重要性

            <i></i>:不同於其他文字的文字= =|||這個翻譯真的是······

 

        <figure></figure>:創建圖(默認有40px左右margin)。

        <figcaption></figcaption>:figure的標題,必須是figure內嵌的第一個或者最後一個元素。

 

        <cite></cite>:指明引用或者參考,如圖書的標題,歌曲、電影、等的名稱,演唱會、音樂會、規範、報紙、或法律文件等。

        只用於參考源本身,而不是從中引述。

        <blockquoto></blockquoto>:引述文本,默認新的一行顯示。

        <q></q>:短的引述(跨瀏覽器問題,儘量避免使用)。

         可以對blockquoto和q元素使用cite屬性(不是cite元素!),對搜索引擎自動化工具有用。cite=“URL”引述來源地址。

 

        <time></time>:標記時間。datetime屬性遵循特定格式,如果忽略此屬性,文本內容必須是合法的日期或者時間格式。     
        不再相關的時間用s標籤。

 

        <abbr></abbr>:解釋縮寫詞。使用title屬性可提供全稱,只在第一次出現時使用就ok。

        abbr[title]{ border-bottom:1px dotted #000; }

 

        <dfn></dfn>:定義術語元素,與定義必須緊挨着,可以在描述列表dl元素中使用。

 

        <address></address>:作者、相關人士或組織的聯繫信息(電子郵件地址、指向聯繫信息頁的鏈接)。

        如果提供整個頁面的作者聯繫信息,一般放在頁面級footer裏。不能包含文檔或者文檔等其他內容。

 

       <del></del>:移除的內容。

        <ins></ins>:添加的內容。

        少有的既可以包圍塊級,又可以包圍短語內容的元素。

 

        <code></code>:標記代碼。包含示例代碼或者文件名 (< &lt;  > &gt;)

       <pre></pre>:預格式化文本。保留文本固有的換行和空格。

 

       
        <meter></meter>:表示分數的值或者已知範圍的測量結果。如投票結果。

        例如:<meter value="0.2" title=”Miles“>20%completed</meter>

 

        <progress></progress>:完成進度。可通過js動態更新value

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章