HTML5_新標籤

HTML5

是定義 HTML 標準的最新版本。

• 是一個新版本的 HTML 語言，具備新的元素，屬性，行爲，
• 是一個技術及，容許更多樣化和強大的網站和應用程序

 

• 優點：
• 跨平臺： 通吃 MAC PC Linux Andriod 各大平臺
• 快速迭代
• 下降成本
• 導流入口多
• 分發效率高

 

• 語義化標籤

div 無語義化意義，

各大瀏覽器發現 div 的 id 名重複

因而 HTML5 引入了一系列語義化標籤

解決 IE8 不支持語義化標籤，導入一個 html5shiv.min.js 文件

必須在 語義化標籤 以前導入

• 意義：
  • 語義化標籤更具可讀性，便於團隊開發和維護
  • 沒有 CSS 的狀況下，頁面也能很好地呈現內容結構，代碼結構
  • 搜索引擎 能更好的理解頁面中各部分間的關係，能夠搜索更快，更準確的信息

如下的一系列語義化元素， 都是 塊元素

• <header></header>
  • 無個數的限制
  • 一般包含 h1-h6 或者 hgroup，可是若是 hgroup 或者 h1-h6 本身就能實現好，就不須要用 header
  • 做爲整個網頁，或者一個內容塊的標題

 

• <footer></footer>

 

• <hgroup></hgroup>
  • 文字網站用的多
  • 包裹 h1-h6

 

• <nav></nav>
  • 包裹 多個導航連接
  • 若是元素 固定不動了，就能夠直接包裹  nav→a
  • 整個導航條 能夠拖動，則須 nav→ul→li→a

 

• <section><section>
  • 包含一個較大的總體內容

 

• <aside></aside>
  • 包裹 總體內容的附屬內容

 

• <article></article>
  • 正文內容，或者說主題內容

 

• 其餘新增標籤：
  • <meter value="0.8"></meter> 
    • 電量_最優_警告_過載    用來顯示已知範圍的標量值或者分數值。
    • <meter value="30" min="20" max="100"></meter>
    • <meter value="30" min="20" max="100" low="40" high="80"></meter>
    • <meter value="90" min="20" max="100" low="40" high="80" optimum="90"></meter>
  • <progress value="50" max="100"></progress>
    • <progress max="100"></progress>    進度條動態滾動，由於進度不肯定
  • <datalist></datalist>
    • 會包含一組 option 元素，這些元素表示其表單控件的可選值
    • 它的 id 必需要和 input 中的 list 一致
  • <detail></detail>
    • 列表區域

    • <details open >    <!--open 默認打開-->
          <summary>娘子</summary>
          <p>啊哈</p>
          <p>啊哈</p>
          <p>啊哈</p>
      </details>

       

  • <ruby>嫑<rt>biao</rt></ruby>
    • 註釋標籤
      
  • <mark>高亮文字</mark>
    • 標記標籤