HTML5新增了哪些標籤和屬性？新增了標籤和屬性（總結）-H5教程-PHP中文網

首頁

web前端

H5教程

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

青灯夜游

Sep 15, 2018 pm 06:10 PM

html5屬性標籤

本章為大家介紹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：選取月、年

（7）color：顏色。

3、媒體標籤

（1）video：影片；

（2）audio：音訊；

（3 ）embed：嵌入內容（包括各種媒體），Midi、Wav、AU、MP3、Flash、AIFF等。

4、其他功能標籤

（1）mark：標註，高亮顯示（像螢光筆做筆記）；

（2） progress：進度條；;

（3）time：資料標籤，給搜尋引擎使用；發布日期9:00更新日期4:00；

（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定義了內嵌框架的內容。

以上是HTML5新增了哪些標籤和屬性？新增了標籤和屬性（總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。