H5新增的標籤和屬性

時間 2019-11-19

標籤 h5 新增標籤屬性简体版

原文原文鏈接

聲明

Web 世界中存在許多不一樣的文檔。只有瞭解文檔的類型，瀏覽器才能正確地顯示文檔。html

HTML 也有多個不一樣的版本，只有徹底明白頁面中使用的確切 HTML 版本，瀏覽器才能徹底正確地顯示出 HTML 頁面。這就是 <!DOCTYPE> 的用處。canvas

<!DOCTYPE> 不是 HTML 標籤。它爲瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的。瀏覽器

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，由於 HTML 4.01 基於 SGML（標準通用標記語言）。DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。安全

HTML5 不基於 SGML，因此不須要引用 DTD。ruby

在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種。框架

經常使用的DOCTYPE 聲明

HTML 5
```
<!DOCTYPE html>
```
HTML 4.01 Strict：該 DTD 包含全部 HTML 元素和屬性，但不包括展現性的和棄用的元素（好比 font）。不容許框架集（Framesets）。less
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
HTML 4.01 Transitional：該 DTD 包含全部 HTML 元素和屬性，包括展現性的和棄用的元素（好比 font）。不容許框架集（Framesets）。異步
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```

HTML 4.01 Frameset：該 DTD 等同於 HTML 4.01 Transitional，但容許框架集內容。async

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict：該 DTD 包含全部 HTML 元素和屬性，但不包括展現性的和棄用的元素（好比 font）。不容許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。ide
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
XHTML 1.0 Transitional：該 DTD 包含全部 HTML 元素和屬性，包括展現性的和棄用的元素（好比 font）。不容許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```

XHTML 1.0 Frameset：該 DTD 等同於 XHTML 1.0 Transitional，但容許框架集內容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1：該 DTD 等同於 XHTML 1.0 Strict，但容許添加模型（例如提供對東亞語系的 ruby 支持）。
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
```

增長標籤

標籤	描述
格式
<bdi>	容許您設置一段文本，使其脫離其父元素的文本方向設置。
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用於已知最大和最小值的度量。
<progress>	定義運行中的任務進度（進程）。
<rp>	定義不支持 ruby 元素的瀏覽器所顯示的內容。
<rt>	定義字符（中文註音或字符）的解釋或發音。
<ruby>	定義 ruby 註釋（中文註音或字符）。
<time>	定義一個日期/時間
<wbr>	規定在文本中的何處適合添加換行符。
表單
<datalist>	規定了 input 元素可能的選項列表。
<keygen>	規定用於表單的密鑰對生成器字段。
<output>	定義一個計算的結果
圖像
<canvas>	經過腳本（一般是 JavaScript）來繪製圖形（好比圖表和其餘圖像）。
<figcaption>	定義figure元素的標題
<figure>	figure 標籤用於對元素進行組合。
Audio/Video
<audio>	定義聲音，好比音樂或其餘音頻流。
<source>	定義media元素 (<video> 和 <audio>)的媒體資源。media
<track>	爲媒體(<video> 和 <audio>)元素定義外部文本軌道。
<video>	定義一個音頻或者視頻
連接
<nav>	定義導航連接
列表
<command>	定義用戶可能調用的命令（好比單選按鈕、複選框或按鈕）。
樣式/節
<header>	定義一個文檔頭部部分
<footer>	定義一個文檔底部
<section>	定義了文檔的某個區域
<article>	定義一個文章內容
<aside>	定義其所處內容以外的內容。
<details>	定義了用戶可見的或者隱藏的需求的補充細節。
<dialog>	定義一個對話框或者窗口
<summary>	定義一個可見的標題。當用戶點擊標題時會顯示出詳細信息。
程序
<embed>	定義了一個容器，用來嵌入外部應用或者互動程序（插件）。

一、結構標籤

（1）section：獨立內容區塊，能夠用h1~h6組成大綱，表示文檔結構，也能夠有章節、頁眉、頁腳或頁眉的其餘部分；

（2）article：特殊獨立區塊，表示這篇頁眉中的核心內容；

（3）aside：標籤內容以外與標籤內容相關的輔助信息；

（4）header：某個區塊的頭部信息/標題；

（5）hgroup：頭部信息/標題的補充內容；

（6）footer：底部信息；

（7）nav：導航條部分信息

（8）figure：獨立的單元，例如某個有圖片與內容的新聞塊。

二、表單標籤

（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：顏色

三、媒體標籤

（1）video：視頻

（2）audio：音頻

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

四、其餘功能標籤

（1）mark：標註（像熒光筆作筆記）

（2）progress：進度條；<progress max="最大進度條的值" value="當前進度條的值">

（3）time：數據標籤，給搜索引擎使用；發佈日期<time datetime="2014-12-25T09:00">9：00</time>更新日期<time datetime="2015- 01-23T04:00" pubdate>4:00</time>

（4）ruby和rt：對某一個字進行註釋；<ruby><rt>註釋內容</rt><rp>瀏覽器不支持時如何顯示</rp></ruby>

（5）wbr：軟換行，頁面寬度到須要換行時換行；

（6）canvas：使用JS代碼作內容進行圖像繪製；

（7）command：按鈕；

（8）deteils ：展開菜單；

（9）datailst：文本域下拉提示；

（10）keygen:加密；

(11) bdi：定義文本的文本方向，使其脫離其周圍文本的方向設置

新增的屬性

對於js進行添加的屬性。

<script defer src=".....js" onload="alert('a')"></script>
<script async src=".....js" onload="alert('b')"></script>

若是沒有以上兩個屬性的話，執行順序爲先加載（下載）第一個src，而後在執行其onload，而後在向下依次同步執行defer屬性在h5以前就已經有了，輸入延遲加載（推遲執行），它會先加載（下載）src中文件內容，而後等頁面所有加載完成後，再加載onload中js.async屬性屬於異步加載，它會在加載src後，當即執行onload,同時還會繼續加載頁面以上執行順序，alert顯示會先顯示b而後再顯示a

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

<link rel="icon" href="url..." type="圖片名稱" sizes="16*16">

<iframe>新增屬性

其餘屬性

manifest屬性：定義頁面須要用到的離線應用文件，通常放在<html>標籤裏
charset屬性：meta屬性之一,定義頁面的字符集
sizes屬性：<link>新增屬性，當link的rel="icon"時，用以設置圖標大小
base屬性:<base href="http://localhost/" target="_blank">表示當在新窗口打開一個頁面時，會將href中的內容做爲前綴添加到地址前
defer屬性：script標籤屬性，表示腳本加載完畢後，只有當頁面也加載完畢才執行（推遲執行）
async屬性：script標籤屬性，腳本加載完畢後立刻執行（運行過程當中瀏覽器會解析下面的內容），即便頁面尚未加載完畢（異步執行）
media屬性：<a>元素屬性：表示對何種設備進行優化
hreflang屬性：<a>的屬性，表示超連接指向的網址使用的語言
ref屬性：<a>的屬性,定義超連接是不是外部連接
reversed屬性:<ol>的屬性，定義序號是否倒敘
start屬性：<ol>的屬性，定義序號的起始值
scoped屬性：內嵌CSS樣式的屬性，定義該樣式只侷限於擁有該內嵌樣式的元素，適用於單頁開發

HTML5全局屬性

屬性	描述
contenteditable	規定是否可編輯元素的內容。
contextmenu	指定一個元素的上下文菜單。當用戶右擊該元素，出現上下文菜單
data-*	用於存儲頁面的自定義數據
draggable	指定某個元素是否能夠拖動
dropzone	指定是否將數據複製，移動，或連接，或刪除
hidden	hidden 屬性規定對元素進行隱藏。
spellcheck	檢測元素是否拼寫錯誤
translate	指定是否一個元素的值在頁面載入時是否須要翻譯

1.可直接在標籤裏插入的：data-自定義屬性名字；

　　hidden（直接放上去就是隱藏）；

　　spellcheck="true"（語法糾錯）；

　　tabindex="1"（Tab跳轉順序）；

　　contenteditable="true"(可編輯狀態，單擊內容，可修改)；

2.在JavaScript裏插入的window.document.designMode = 'on'（JavaScript的全局屬性，整個頁面的文本均可以編輯了）；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。