一 、HTML5語法，標籤， 屬性

@(HTML5)[HTML5 語法, HTML5標籤, HTML5屬性]

[TOC]

一 、HTML5語法，標籤， 屬性

HTML 5的語法

html5相對於之前的html（html4，xhtml等）更加簡潔更加的人性化。主要體如今一下幾個方面：

1. 文檔申明：DOCTYPE
2. 字符編碼：charset
3. 不區分大小寫了：DIV標籤與div標籤同樣
4. 布爾值：主要是關於input等的checked="checked"屬性
5. 能夠省略引號：屬性的引號能夠省略
6. 能夠進行標籤的省略：大多數標籤能夠省略，不過不建議

HTML 5新增/刪除標籤

新增的標籤

主要分爲如下幾個方面：

• 結構標籤
• 表單標籤
• 媒體標籤
• 其餘功能標籤

結構標籤

1. header：定義整個文檔的頭部區域或者是一篇文章的頭部區域
2. section：表示頁面中的一個內容區塊，好比頁眉、頁腳或頁面的其餘部分
3. article：定義頁面獨立（與上下文不相關）的文章內容
4. aside：表示article標籤內容以外，與article標籤內容相關的輔助信息
5. hgroup：對整個頁面或者是頁面中的一個區塊的標題進行組合使用
6. nav：表示頁面中的導航連接的部分
7. figure：表示一段獨立的內容，通常表示一個獨立的單元，使用figcaption爲figure添加標題，寫出來有點像定義列表
8. footer：定義整個文檔的尾部區域或者是一篇文章的尾部區域

媒體標籤

大體包含：

1. video：視頻
2. audio：音頻
3. embed：嵌入內容（包括各類媒體），Midi、Wav、AU、MP三、Flash、AIFF等。 這裏不作過多的說明

表單控件標籤

1. email：必須輸入郵件；
2. url：必須輸入url地址；
3. number：必須輸入數值；
4. range：必須輸入必定範圍內的數值；
5. Date Pickers：日期選擇器；
   • date：選取日、月、年
   • month：選取月、年
   • week：選取周和年
   • time：選取時間（小時和分鐘）
   • datetime：選取時間、日、月、年（UTC時間）
   • datetime-local：選取時間、日、月、年（本地時間）
6. search：搜索常規的文本域；
7. color：顏色 這裏不作過多的說明

其餘功能標籤

1. mark：凸顯文字
2. meter： 標籤訂義度量衡。僅用於已知最大和最小值的度量。
3. progress：定義運行中的進度（進程）。
4. ruby：

<p><ruby>月明<rp>(</rp><rt>つきあ</rt><rp>)</rp></ruby>かり昇る頃</p>
<p>燈る <ruby>赤提燈 <rp>(</rp><rt>あかちょうちん</rt><rp>)</rp></ruby></p>
複製代碼

月明(つきあ)かり昇る頃

燈る 赤提燈 (あかちょうちん)

5. details：顯示詳情 ```

選擇詳細的信息

• 列表1
• 列表2
• 列表3
• 列表4

``` 6. datalist：下拉選框，有點像select，不過仍是有區別 ``` ```

刪除的標籤

一、能用css代替的元素 basefont、big、center、font、s、strike、tt、u。這些元素純粹是爲畫面展現服務的，HTML5中提倡把畫面展現性功能放在css中統一編輯。

二、再也不使用frame框架。

frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服務器方建立的由多個頁面組成的符合頁面的形式，刪除以上這三個標籤。

三、只有部分瀏覽器支持的元素

applet、bgsound、blink、marquee等標籤。

四、其餘被廢除的元素

廢除rb，使用ruby替代。

廢除acronym使用abbr替代。

廢除dir使用ul替代。

廢除isindex使用form與input相結合的方式替代

廢除listing使用pre替代

廢除xmp使用code替代

廢除nextid使用guids

廢除plaintex使用「text/plian」（無格式正文）MIME類型替代。

新增的屬性

對於js進行添加的屬性。

`

`

若是沒有以上兩個屬性的話，執行順序爲先加載（下載）第一個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定義了內嵌框架的內容

iframe新增屬性：

`

`

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樣式的屬性，定義該樣式只侷限於擁有該內嵌樣式的元素，適用於單頁開發

HTML 5全局屬性

1. 可直接在標籤裏插入的：data-自定義屬性名字；
2. hidden（直接放上去就是隱藏）；
3. spellcheck="true"（語法糾錯）；
4. tabindex="1"（Tab跳轉順序）；
5. contenteditable="true"(可編輯狀態，單擊內容，可修改)；
6. 在JavaScript裏插入的window.document.designMode = 'on'（JavaScript的全局屬性，整個頁面的文本均可以編輯了）；

HTML 5的兼容性

1. HTML5有部份內容兼容到IE9，IE8及如下對H5徹底不兼容後面的內容再也不考慮此類瀏覽器。

2. 部份內容須要加兼容前綴， -webkit-經常使用於兼容chrome瀏覽器， -moz-經常使用於兼容火狐， -o-經常使用於兼容opera， -ms-經常使用於兼容IE。

3. 兼容性查詢網站：caniuse.com/

web語義化的定義

在HTML結構的恰當位置上使用語義恰當的標籤，使頁面具備良好的結構，是頁面標籤元素具備含義，能讓搜索引擎更容易理解。 從一下幾點理解：

• 用正確的標籤作正確的事
• HTML語義化能讓頁面更具結構化且更加清晰，便於瀏覽器和搜索引擎進行解析所以在兼容條件下，要儘可能使用具備語義化的結構標籤。
• 即便在沒有css樣式的狀況下，網頁的內容也應該是有序的文檔格式顯示，而且是容易閱讀的。
• 使項目維護人員更容易對網站進行分塊，便於閱讀理解。
• 不具備語義的標籤元素最好不要在裏面放文字。好比div與i標籤。通常div是做爲容器。i標籤做爲圖標（icon）