前端知識學習---HTML5標籤變化

近期在複習前端方面的知識,將學習的知識整理一下做一個輸出

H5新增加的標籤大致可以分爲4類:

1.結構標籤:
結構標籤爲塊狀元素,可以理解成有意義的DIV,主要包括
-article標籤 主要用於定義一篇文章;
-header標籤 主要用戶定義一個頁面或一個區域的頭部;
-nav標籤 主要用於定義導航欄鏈接;
-section標籤 主要用於定義一個區域;
-aside標籤 主要用於定義內容部分的側邊欄;
-hgroup標籤 主要用於定義一個區塊的相關信息;
-figure標籤 主要用於定義一組媒體內容及他們的標題;
-figcation標籤 主要用於定義figure的標題;
-footer標籤 主要用於定義一個頁面或者一個區域的底部;
-dialog標籤 主要用於定義一個對話框;
其中article,section,header,footer,aside這5個標籤不建議進行嵌套;
header,footer,section優先級最高;
aside,article,figure,hgroup,nav優先級其次;
優先級最低的是div,figcaption;
標籤之間可以按照優先級進行嵌套。

2.多媒體標籤:

-video標籤 用於定義視頻文件;
-audio標籤 用於定義音頻文件;
-source標籤 用於定義媒體資源;
-canvas標籤 用於定義圖片;
-embed標籤 用於定義外部可交互的內容或插件,比如flash;
這些多媒體標籤的出現意味着以及支持不使用插件的情況下即可以操作媒體文件,使得用戶體驗的的提高

3.web應用標籤:

-meter 狀態標籤 顯示實時狀態如:氣壓,氣溫;
兼容瀏覽器firefox,opera,chrome
-datalist 列表標籤 用於爲input標籤定義一個下拉列表,配合option使用;
兼容瀏覽器firefox,opera,chrome
-menu 命令列表,目前所有瀏覽器都不能兼容
-menuitem menu命令列表標籤,僅兼容firefox8.0以上
-command menu標記定義一個命令按鈕,僅兼容IE9

4.其他標籤:
-ruby標籤 用於定義註釋或音標;
-rt標籤 用於定義對ruby的註釋內容文本;
-rp標籤 用於定義不支持ruby標籤的瀏覽器如何顯示;
-mark標籤 用於定義有標記的文本,以黃色選中狀態顯示;
-output標籤 用於定義一些輸出類型,計算表單結果配合oninput事件使用;
-keygen標籤 用於定義表單裏一個生成的鍵值,主要用於加密信息傳輸;
-time標籤 用於定義一個時間/日期,目前主流瀏覽器均不支持

除以上內容外,h5還刪除了一些標籤:
純表現元素:basefont,big,center,font,strike,tt,u
對可用性能產生負面影響的元素:
frame,frameset,nofarmes
產生混淆的元素:
acronym,applet,isindex,dir

H5還對一些標籤進行了重新定義:
-b 代表內聯文本,通常是粗體,沒有傳遞表示重要的意思;
-i 代表內聯文本,通常是斜體,沒有傳遞表示重要的意思;
-dd 可以同details和figure一同使用,定義包含文本,dialog也可用;
-dt 可以同details和figure一同使用,彙總細節,dialog也可用;
-hr表示主題結束,而不是水平線,雖然顯示相同
-menu 重新定義用戶界面的菜單,配合commond或者menuitem 使用;
-small 表示小字體,例如打印註釋或者法律條款;
-strong 表示重要性而不是強調符號。

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