HTML5 十大新特性(一)——語義標簽


  說語義標簽前先來理解下什么叫語義化,當下html是靠div+css來鑄造頁面的整體框架和結構的,通篇大量的div可讀性極低,因此誕生了這些特殊的標簽,簡單地說就是見名知義,使頁面更清晰,方便維護和開發。

  HTML5為我們提供了一系列的語義標簽。

  1、<section></section>

    定義文檔中的主體部分的節、段。

  2、<article></article>

    一個特殊的section標簽,比section有更明確的語義。定義來自外部的一個獨立的、完整的內容塊,例如什么論壇的文章,博客的文本。。。

 

  3、<aside></aside>

    用來裝載頁面中非正文的內容,獨立於其他模塊。例如廣告、成組的鏈接、側邊欄。。。

  4、<header></header>

    定義文檔、頁面的頁眉。通常是一些引導和導航信息,不局限於整個頁面頭部,也可以用在內容里。

  5、<footer></footer>

    定義了文檔、頁面的頁腳,和header類似。

  6、<nav></nav>

    定義了一個鏈接組組成的導航部分,其中的鏈接可以鏈接到其他網頁或者當前頁面的其他部分。

  7、<hgroup></hgroup>

    用於對網頁或區段(section)的標題元素(h1~h6)進行組合。

  8、<figure></figure>

    用於對元素進行組合。

  9、<figcaption></figcaption>

    為figure元素加標題。一般放在figure第一個子元素或者最后一個。

  10、<details></details>

    定義元素的細節,用戶可以點擊查看或者隱藏。

  11、<summary></summary>

    和details連用,用來包含details的標題。

  12、<canvas></canvas>

    用來進行canvas繪圖。

  13、<video></video>

    定義視頻。

  14、<audio></audio>

    定義音頻。

  15、<embed></embed>

    定義嵌入網頁的內容。比如插件。

  16、<source></source>

    該標簽為媒介元素(比如video、audio)定義媒介元素。

  17、<datalist id='dl'></datalist>

    定義可選數據的列表,與input配合使用(<input list='dl'>)可制作輸入值的下拉列表。

  18、<mark></mark>

    在視覺上向用戶展現出那些想要突出的文字。比如搜索結果中向用戶高亮顯示搜索關鍵詞。

  19、<meter [min/max/low/high/optimum/value]></meter>

    度量衡,用紅黃綠表示出一個數值所在范圍。

  20、<output></output>

    定義不同類型的輸出,樣式與span無異。

  21、<progress></progress>

    進度條,運行中的進度。

  22、<time></time>

    定義日期或者時間。

  23、<keygen></keygen>

    定義加密內容。

  24、<command></command>

    定義命令行為。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM