H5-新增標籤與屬性,相容性處理
阿新 • • 發佈:2018-12-09
H5-01-新曾標籤,屬性,相容性處理
- 新標籤
- 結構標籤
- 功能性標籤標籤
- 相容不是特別強的標籤
- 新屬性
- 相容處理
(新標籤)
- 結構標籤
- header 定義文件的頭部區域,一般用在頂部
- footer 定義文件的尾部區域,一般用在尾部
- article 定義頁面獨立的文章內容,帖子、部落格文章、評論、新聞等可以使用
- nav 定義導航,替代ul和li定義的導航
- section 定義一塊區域,一般用來寫主體內容部分
- aside 定義側邊欄,側邊資訊可以使用
- figure 定義一塊獨立的內容,通常用來展示圖片及其描述
- figcaption 定義figure的標題
- iframe 框架, frameset已經被淘汰
- 相容不是很強的標籤
- dialog 定義一個對話方塊
- bdi 單獨設定文字擺放方式 open屬性
- details 表示使用者要求得到並且可以得到詳細資訊,要與summary標籤一起使用
- summary 提供標題或者圖示,使用者點選顯示隱藏詳細資訊,要作為details標籤子元素
(新屬性)
- 新屬性
- mark 突出顯示文字
- meter 刻度百分比
- progress 進度條
- ruby 內容+註釋 rt註釋內容 rp不支援時顯示
- wbr 長單詞換行的位置
- datalist 表示可顯示資料的列表,與input配合使用
- address 定義文件或文章的作者/擁有者的聯絡資訊。
(相容處理)
相容性程式碼(在IE8及以下存在相容性問題) CodeSource\標籤的相容性.html
解決方案一 通過createElement方法建立這些元素 例如:document.createElement(“header”);
- 解決方案二
引用html5shiv.js檔案,別人建立的元素封裝好的方案一
< script src=”html5shiv.js”>< /script>
CodeSource\html5shiv.js
- 注意事項 功能性元素還是不能相容的,這需要使用js來作處理相容