一、html5語法特點
1.DOCTYPE及字符編碼
① 文檔聲明DOCTYPE：<!doctype html>
② 文檔字符編碼：<meta charset="utf-8">
③ 給文檔指定語言：<html lang="zh-CN">
2.不區分大小寫
① 目的是為了兼容更多的文檔，在HTML5里不區分大小寫
建議：寫代碼最好規范，最好小寫
3.布爾值
① <input type="checkbox" checked/>
在這里checked寫上就表示true，如果不寫就表示false。而不用 像HTML4中要寫成checked="checked"了。
4.可以省略引號
① <input type="text" />
② <input type='text'>
③ <input type=text>
上面三種寫法都可以，當然如果屬性值中出現空格，就必須寫引號或雙引號
建議：最好使用雙引號
5.個別標簽可以進行省略
h5中可以進行省略的標簽
①例如：
<input></input>可以寫成<input/>②例如：
<p>段落</p>可以寫成<p>段落③可以完全省略html，body等標簽只保留文檔聲明，瀏覽器依然會以html5的方式來解析該文檔。
二、h5中新增及刪除的標簽
1.h5中新增的標簽可以分為4類，分別是結構標簽，表單標簽，媒體標簽，其他功能標簽。
新增的結構標簽
-
section標簽
表示頁面中的一個內容區塊,比如章節、頁眉、頁腳或頁面的其他部分。可以和h1、 h2……等標簽結合起來使用，表示文檔結構。例：HTML5中<section>……</section>HTML4中<div> ……</div>。 -
article標簽
表示頁面中一塊與上下文不相關的獨立內容。比如一篇文章。 -
aside標簽
表示article標簽內容之外的、與article標簽內容相關的輔助信息。 -
header標簽
表示頁面中一個內容區塊或整個頁面的標題。 -
hgroup標簽
表示對整個頁面或頁面中的一個內容區塊的標題進行組合。 -
footer標簽
表示整個頁面或頁面中一個內容區塊的腳注。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯系信息。 -
nav標簽
表示頁面中導航鏈接的部分。
figure標簽
表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption標簽為figure標簽組添加標題。例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>
HTML4中常寫作
<dl>
<h2>prc</h2>
<p>The People's Republic of China was born in 1949</p>
</dl>
新增的媒體標簽
-
video標簽
定義視頻。像電影片段或其他視頻流。例：<video src="movie.ogg" controls="controls">video標簽</video>
HTML4中寫法：
<object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>
-
audio標簽
定義音頻。如音樂或其他音頻流。例：<audio src ="someaudio.wav">audio標簽</audio>
html4中寫法：
<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value="someaudio.wav">
</object>
-
embed標簽
用來嵌入內容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />;
HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>
新增表單控件標簽
-
email
必須輸入email -
url
必須輸入url地址 -
number
必須輸入數值 -
range
必須輸入一定范圍內數值 -
Date Pickers（日期選擇器）
擁有多個可供選取日期和時間的新輸入類型：
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間（小時和分鐘）
datetime - 選取時間、日、月、年（UTC 時間）
datetime-local - 選取時間、日、月、年（本地時間） -
search
用于搜索域，域顯示為常規的文本域。 - color
新增的其他標簽
其他新增標簽
-
mark標簽
主要用來在視覺上向用戶呈現哪些需要突出顯示或高亮顯示的文字。典型應用搜索結果中高亮顯示搜素關鍵字。HTML5<mark></mark>HTML4<span></span>。
例子：<p>Do you forget to buy <mark>milk</mark> today.</p>
效果 -
progress標簽
表示運行中的進程，可以使用progress標簽顯示JavaScript中耗時時間函數的進程。等待中……、請稍后等。
例子：<progress value="70" max="100"></progress>
效果 -
time標簽
屬于語義標簽，用來標注頁面中的某個內容，這個標注是給搜索引擎用的。因為當搜索引擎解析到這個標簽的時候會根據這個標注來知道這是個時間。 -
ruby標簽
定義 ruby 注釋（中文注音或字符）。
與 <ruby> 以及 <rt> 標簽一同使用。ruby 標簽由一個或多個字符（需要一個解釋/發音）和一個提供該信息的 rt 標簽組成，還包括可選的 rp 標簽，定義當瀏覽器不支持 "ruby" 標簽時顯示的內容。
例子：<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby> -
wbr標簽
表示軟換行。與br標簽的區別：br標簽表示此處必須換行；wbr表示瀏覽器窗口或父級標簽足弓寬時（沒必要換行時），不換行，而寬度不夠時主動在此處換行
2.被刪除的標簽
能用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類型替代。
三、h5新增及廢除的屬性
新增表單相關的屬性
- 對input（type=text）、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓標簽在畫面打開時自動獲得焦點。
- 對input（type=text）、textarea指定placeholder屬性，它會對用戶的輸入進行提示，提示用戶可以輸入的內容。
- 對input、output、select、textarea、button與fieldset指定form屬性。它聲明屬于哪個表單，然后將其放置在頁面的任何位置，而不失表單之內。
- 對input（type=text）、textarea指定required屬性。該屬性表示用戶提交時進行檢查，檢查該標簽內必定要有輸入內容。
- 為input標簽增加幾個新的屬性：autocomplete、min、max、multiple、pattern與step。還有list屬性與datalist標簽配合使用；datalist標簽與autocomplete屬性配合使用。multiple屬性允許上傳時一次上傳多個文件； pattern屬性用于驗證輸入字段的模式，其實就是正則表達式。step 屬性規定輸入字段的合法數字間隔（假如 step="3"，則合法數字應該是 -3、0、3、6，以此類推），step 屬性可以與 max 以及 min 屬性配合使用，以創建合法值的范圍。
- 為input、button標簽增加formaction、formenctype、formmethod、formnovalidate與formtarget屬性。用戶重載form標簽的action、enctype、method、novalidate與target屬性。為fieldset標簽增加disabled屬性，可以把它的子標簽設為disabled狀態。
- 為input、button、form增加novalidate屬性，可以取消提交時進行的有關檢查，表單可以被無條件地提交。
新增鏈接相關屬性
- 為a、area增加media屬性。規定目標 URL 是為什么類型的媒介/設備進行優化的。該屬性用于規定目標 URL 是為特殊設備（比如 iPhone）、語音或打印媒介設計的。該屬性可接受多個值。只能在 href 屬性存在時使用。
- 為area增加herflang和rel屬性。hreflang 屬性規定在被鏈接文檔中的文本的語言。只有當設置了 href 屬性時，才能使用該屬性。注釋：該屬性是純咨詢性的。rel 屬性規定當前文檔與被鏈接文檔/資源之間的關系。只有當使用 href 屬性時，才能使用 rel 屬性。
- 為link增加size屬性。sizes 屬性規定被鏈接資源的尺寸。只有當被鏈接資源是圖標時 (rel="icon")，才能使用該屬性。該屬性可接受多個值。值由空格分隔。
- 為base標簽增加target屬性，主要是保持與a標簽的一致性。
新增其他屬性
- 為ol增加reversed屬性，它指定列表倒序顯示。
- 為meta增加charset屬性
- 為menu增加type和label屬性。label為菜單定義一個標注，type屬性定義可以menu以上下文菜單、工具條與列表三種形式出現。
- 為style增加scoped屬性。它允許我們為文檔的指定部分定義樣式，而不是整個文檔。如果使用 "scoped" 屬性，那么所規定的樣式只能應用到 style 標簽的父標簽及其子標簽。
- 為script增減屬性，它定義腳本是否異步執行。async 屬性僅適用于外部腳本（只有在使用 src 屬性時）有多種執行外部腳本的方法：
- 如果 async="async"：腳本相對于頁面的其余部分異步地執行（當頁面繼續進行解析時，腳本將被執行）
- 如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行
- 如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取并執行腳本
- 為html標簽增加manifest，開發離線web應用程序時他與API結合使用，定義一個URL，在這個URL上描述文檔的緩存信息。
-
為iframe增加撒個屬性，sandbox、seamless、srcdoc。用來提高頁面安全性，防止不信任的web頁面執行某些操作。
新增屬性例子：
廢除的屬性
HTML4中一些屬性在Html5中不再被使用，而是采用其他屬性或其他方式進行替代。
| 在HTML 4中使用的屬性 | 使用該屬性的標簽 | 在HTML 5中的替代方案 |
|---|---|---|
| rev | link、a | rel |
| charset | link、a | 在被鏈接的資源的中使用HTTP Content-type頭標簽 |
| shape、coords | a | 使用area標簽代替a標簽 |
| longdesc | img、iframe | 使用a標簽鏈接到校長描述 |
| target | link | 多余屬性，被省略 |
| nohref | area | 多余屬性，被省略 |
| profile | head | 多余屬性，被省略 |
| version | html | 多余屬性，被省略 |
| name | img | id |
| scheme | meta | 只為某個表單域使用scheme |
| archive、chlassid、codebose、codetype、declare、standby | object | 使用data與typc屬性類調用插件。需要使用這些屬性來設置參數時，使用param屬性 |
| valuetype、type | param | 使用name與value屬性，不聲明之的MIME類型 |
| axis、abbr | td、th | 使用以明確簡潔的文字開頭、后跟詳述文字的形式。可以對更詳細內容使用title屬性，來使單元格的內容變得簡短 |
| scope | td | 在被鏈接的資源的中使用HTTP Content-type頭標簽 |
| align | caption、input、legend、div、h1、h2、h3、h4、h5、h6、p | 使用CSS樣式表替代 |
| alink、link、text、vlink、background、bgcolor | body | 使用CSS樣式表替代 |
| align、bgcolor、border、cellpadding、cellspacing、frame、rules、width | table | 使用CSS樣式表替代 |
| align、char、charoff、height、nowrap、valign | tbody、thead、tfoot | 使用CSS樣式表替代 |
| align、bgcolor、char、charoff、height、nowrap、valign、width | td、th | 使用CSS樣式表替代 |
| align、bgcolor、char、charoff、valign | tr | 使用CSS樣式表替代 |
| align、char、charoff、valign、width | col、colgroup | 使用CSS樣式表替代 |
| align、border、hspace、vspace | object | 使用CSS樣式表替代 |
| clear | br | 使用CSS樣式表替代 |
| compace、type | ol、ul、li | 使用CSS樣式表替代 |
| compace | dl | 使用CSS樣式表替代 |
| compace | menu | 使用CSS樣式表替代 |
| width | pre | 使用CSS樣式表替代 |
| align、hspace、vspace | img | 使用CSS樣式表替代 |
| align、noshade、size、width | hr | 使用CSS樣式表替代 |
| align、frameborder、scrolling、marginheight、marginwidth | iframe | 使用CSS樣式表替代 |
| autosubmit | menu |
四、全局屬性 對任何標簽都可以使用的屬性
- HTML5 中添加的屬性。
| 屬性 | 描述 |
|---|---|
| accesskey | 規定激活元素的快捷鍵。 |
| class | 規定元素的一個或多個類名（引用樣式表中的類）。 |
| contenteditable | 規定元素內容是否可編輯。 |
| contextmenu | 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。 |
| data-* | 用于存儲頁面或應用程序的私有定制數據。 |
| dir | 規定元素中內容的文本方向。 |
| draggable | 規定元素是否可拖動。 |
| dropzone | 規定在拖動被拖動數據時是否進行復制、移動或鏈接。 |
| hidden | 規定元素仍未或不再相關。 |
| id | 規定元素的唯一 id。 |
| lang | 規定元素內容的語言。 |
| spellcheck | 規定是否對元素進行拼寫和語法檢查。 |
| style | 規定元素的行內 CSS 樣式。 |
| tabindex | 規定元素的 tab 鍵次序。 |
| title | 規定有關元素的額外信息。 |
| translate | 規定是否應該翻譯元素內容。 |
全局屬性例子：
