首頁 > web前端 > H5教程 > HTML5新增了哪些標籤和屬性?新增了標籤和屬性(總結)

HTML5新增了哪些標籤和屬性?新增了標籤和屬性(總結)

青灯夜游
發布: 2018-09-15 18:10:09
原創
4530 人瀏覽過

本章為大家介紹HTML5新增了哪些標籤和屬性?新增了標籤與屬性(總結),讓大家了解HTML5中新增了哪些屬性與標籤。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

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

HTML5語法

大部分延續了html的語法

不同之處:開頭的

<!DOCTYPE html>
<html>
<meta charset="utf-8">
登入後複製

字元編碼變得簡潔,不區分大小寫,添加了布爾值,類似checked,selected

引號可以省略,但是編碼規範來說,不建議使用

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

HTML5新增加的標籤:

#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:日期選擇器;

  • date:選取日、月、年

  • month:選取月、年

  • ##week:選取周和年
  • time:選取時間(小時和分鐘)
  • #datetime:選取時間、日、月、年(UTC時間)
  • 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:資料標籤,給搜尋引擎使用;發布日期更新日期

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

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

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

(7)command:按鈕;

(8)deteils :展開選單;

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

(10) keygen:加密。

新增的屬性:

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

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

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

<link rel="icon" href="url..." type="图片名称" sizes="16*16">
登入後複製
有序列表ol:新增start(清單起始值),reversed(是否倒置)menu選單type屬性(3個選​​單類型)內嵌css樣式:在標籤內部來定義一個樣式區塊(scoped),只對樣式標籤內部才有效內嵌框架:iframe元素,新增了seamless無邊距無邊框, srcdoc定義了內嵌框架的內容。