社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 主體

HTML5新增了哪些標籤和屬性？新增了標籤和屬性（總結）

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

本章為大家介紹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定義了內嵌框架的內容。