1. 程式人生 > >H5-新增標籤與屬性,相容性處理

H5-新增標籤與屬性,相容性處理

H5-01-新曾標籤,屬性,相容性處理

  • 新標籤
    • 結構標籤
    • 功能性標籤標籤
    • 相容不是特別強的標籤
  • 新屬性
  • 相容處理

(新標籤)

  1. 結構標籤
    1. header 定義文件的頭部區域,一般用在頂部
    2. footer 定義文件的尾部區域,一般用在尾部
    3. article 定義頁面獨立的文章內容,帖子、部落格文章、評論、新聞等可以使用
    4. nav 定義導航,替代ul和li定義的導航
    5. section 定義一塊區域,一般用來寫主體內容部分
    6. aside 定義側邊欄,側邊資訊可以使用
    7. figure 定義一塊獨立的內容,通常用來展示圖片及其描述
    8. figcaption 定義figure的標題
    9. iframe 框架, frameset已經被淘汰
  2. 相容不是很強的標籤
    1. dialog 定義一個對話方塊
    2. bdi 單獨設定文字擺放方式 open屬性
    3. details 表示使用者要求得到並且可以得到詳細資訊,要與summary標籤一起使用
    4. summary 提供標題或者圖示,使用者點選顯示隱藏詳細資訊,要作為details標籤子元素

(新屬性)

  1. 新屬性
    1. mark 突出顯示文字
    2. meter 刻度百分比
    3. progress 進度條
    4. ruby 內容+註釋 rt註釋內容 rp不支援時顯示
    5. wbr 長單詞換行的位置
    6. datalist 表示可顯示資料的列表,與input配合使用
    7. address 定義文件或文章的作者/擁有者的聯絡資訊。

(相容處理)

  1. 相容性程式碼(在IE8及以下存在相容性問題) CodeSource\標籤的相容性.html

  2. 解決方案一 通過createElement方法建立這些元素 例如:document.createElement(“header”);

  3. 解決方案二 引用html5shiv.js檔案,別人建立的元素封裝好的方案一 < script src=”html5shiv.js”>< /script> CodeSource\html5shiv.js
  4. 注意事項 功能性元素還是不能相容的,這需要使用js來作處理相容