首頁 > web前端 > H5教程 > 主體

HTML5中新增的標籤和屬性的總結

不言
發布: 2018-07-21 11:42:06
原創
1690 人瀏覽過

這篇文章要跟大家分享的是關於HTML5中新增的標籤和屬性的總結,內容很不錯,有需要的朋友可以參考一下,希望可以幫助到大家。

收集總結的HTML5的新特性,基本上除了IE9以下都可以使用。

HTML5語法

#大部分延續了html的語法

不同之處:開頭的

#

##

字編碼變得簡潔,

不區分大小寫,

新增了布林值,類似checked,selected

#引號可以省略,但是編碼規格來說,不建議,

有可以省略結束符的標籤,和完全省略的標籤應用。

增加標籤:

#1、結構標籤

(1)section:獨立內容區塊,可以用h1~h6組成大綱,表示文件結構,也可以有章節、頁首、頁尾或頁首的其他部分;

(2)article:特殊獨立區塊,表示這篇頁眉中的核心內容;

(3)aside:標籤內容之外與標籤內容相關的輔助資訊;

##(4)header:某個區塊的頭部資訊/標題;

##(5)hgroup:頭部資訊/標題的補充內容;

(6)footer:底部資訊;

##(7)nav:導航條部分訊息;

(8)figure:獨立的單元,例如某個有圖片與內容的新聞區塊。

2、表單標籤

#(1)email:必須輸入郵件;

#(2)url:必須輸入url位址;

(3)number:必須輸入數值;

(4 )range:必須輸入一定範圍內的數值;

(5)Date Pickers:日期選擇器;

    a.date:選取日、月、年

    b.month:選取月、年

    c.week:選取週及年

    d.time:選取時間(小時和分鐘)############    e.datetime:選取時間、日、月、年(UTC時間)#### ########    f.datetime-local:選取時間、日、月、年(本地時間)############(6)search:搜尋常規的文字域;# ###########(7)color:顏色。 ######

3、媒體標籤

(1)video:影片;

(2) audio:音訊;

(3)embed:嵌入內容(包括各種媒體),Midi、Wav、AU、MP3、Flash、AIFF等。

4、其他功能標籤

#(1)mark:標註,高亮顯示(像螢光筆做筆記);

(2)progress:進度條;;

(3)時間:資料標籤,給搜尋引擎使用;發布日期更新日期< ;time datetime="2015- 01-23T04:00" pubdate>4:00;

(4)ruby與rt:對某個字進行註解;< ;ruby>註解內容瀏覽器不支援時如何顯示;

#(5 )wbr:軟換行,頁面寬度到需要換行時換行;

(6)canvas:使用JS程式碼做內容進行圖像繪製;

(7)command:按鈕;

(8)deteils :展開選單;

(9)dateilst:文字網域下拉提示;

(10)keygen:加密。

新增的屬性:

#對於js進行新增的屬性。

如果沒有以上兩個屬性的話,執行順序為先加載(下載)第一個src,然後在執行其onload,然後在向下依次同步執行defer屬性在h5之前就已經有了,輸入延遲加載(推遲執行),它會先加載(下載)src中文件內容,然後等頁面全部加載完成後,再加載onload中js.async屬性屬於異步加載,它會在加載src後,立即執行onload,同時還會繼續載入頁面以上執行順序,alert顯示會先顯示b再顯示a。

網頁中標籤中加入小圖示的樣式代碼

#有序列表ol:新增start(列表起始值),reversed(是否倒置)menu選單type屬性(3個選​​單類型)內嵌css樣式:在標籤內部來定義一個樣式區塊(scoped),只對樣式標籤內部才有效內嵌框架:iframe元素,新增了seamless無邊距無邊框,srcdoc定義了內嵌框架的內容。