一掀虎、html5語法特點(diǎn)
1.DOCTYPE及字符編碼
① 文檔聲明DOCTYPE：<!doctype html>
② 文檔字符編碼：<meta charset="utf-8">
③ 給文檔指定語言：<html lang="zh-CN">
2.不區(qū)分大小寫
① 目的是為了兼容更多的文檔辰企，在HTML5里不區(qū)分大小寫
建議：寫代碼最好規(guī)范，最好小寫
3.布爾值
① <input type="checkbox" checked/>
在這里checked寫上就表示true，如果不寫就表示false候生。而不用 像HTML4中要寫成checked="checked"了提澎。
4.可以省略引號
① <input type="text" />
② <input type='text'>
③ <input type=text>
上面三種寫法都可以尾抑，當(dāng)然如果屬性值中出現(xiàn)空格镰踏，就必須寫引號或雙引號
建議：最好使用雙引號
5.個別標(biāo)簽可以進(jìn)行省略
h5中可以進(jìn)行省略的標(biāo)簽
①例如：
<input></input>可以寫成<input/>②例如：
<p>段落</p>可以寫成<p>段落③可以完全省略html函筋，body等標(biāo)簽只保留文檔聲明，瀏覽器依然會以html5的方式來解析該文檔奠伪。
二驻呐、h5中新增及刪除的標(biāo)簽
1.h5中新增的標(biāo)簽可以分為4類，分別是結(jié)構(gòu)標(biāo)簽芳来，表單標(biāo)簽，媒體標(biāo)簽猜拾，其他功能標(biāo)簽即舌。
新增的結(jié)構(gòu)標(biāo)簽
-
section標(biāo)簽
表示頁面中的一個內(nèi)容區(qū)塊,比如章節(jié)、頁眉挎袜、頁腳或頁面的其他部分顽聂。可以和h1盯仪、 h2……等標(biāo)簽結(jié)合起來使用紊搪，表示文檔結(jié)構(gòu)。例：HTML5中<section>……</section>HTML4中<div> ……</div>全景。 -
article標(biāo)簽
表示頁面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容耀石。比如一篇文章。 -
aside標(biāo)簽
表示article標(biāo)簽內(nèi)容之外的爸黄、與article標(biāo)簽內(nèi)容相關(guān)的輔助信息滞伟。 -
header標(biāo)簽
表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標(biāo)題。 -
hgroup標(biāo)簽
表示對整個頁面或頁面中的一個內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合炕贵。 -
footer標(biāo)簽
表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注梆奈。一般來說，他會包含創(chuàng)作者的姓名称开、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息亩钟。 -
nav標(biāo)簽
表示頁面中導(dǎo)航鏈接的部分。
figure標(biāo)簽
表示一段獨(dú)立的流內(nèi)容鳖轰，一般表示文檔主體流內(nèi)容中的一個獨(dú)立單元清酥。使用figcaption標(biāo)簽為figure標(biāo)簽組添加標(biāo)題。例如：
<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>
新增的媒體標(biāo)簽
-
video標(biāo)簽
定義視頻脆霎。像電影片段或其他視頻流总处。例：<video src="movie.ogg" controls="controls">video標(biāo)簽</video>
HTML4中寫法：
<object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>
-
audio標(biāo)簽
定義音頻。如音樂或其他音頻流睛蛛。例：<audio src ="someaudio.wav">audio標(biāo)簽</audio>
html4中寫法：
<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value="someaudio.wav">
</object>
-
embed標(biāo)簽
用來嵌入內(nèi)容(包括各種媒體)鹦马。格式可以是Midi胧谈、Wav、AIFF荸频、AU菱肖、MP3,flash等。例：<embed src="flash.swf" />;
HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>
新增表單控件標(biāo)簽
-
email
必須輸入email -
url
必須輸入url地址 -
number
必須輸入數(shù)值 -
range
必須輸入一定范圍內(nèi)數(shù)值 -
Date Pickers（日期選擇器）
擁有多個可供選取日期和時間的新輸入類型：
date - 選取日旭从、月稳强、年
month - 選取月、年
week - 選取周和年
time - 選取時間（小時和分鐘）
datetime - 選取時間和悦、日退疫、月、年（UTC 時間）
datetime-local - 選取時間鸽素、日褒繁、月、年（本地時間） -
search
用于搜索域馍忽，域顯示為常規(guī)的文本域棒坏。 - color
新增的其他標(biāo)簽
其他新增標(biāo)簽
-
mark標(biāo)簽
主要用來在視覺上向用戶呈現(xiàn)哪些需要突出顯示或高亮顯示的文字。典型應(yīng)用搜索結(jié)果中高亮顯示搜素關(guān)鍵字遭笋。HTML5<mark></mark>HTML4<span></span>坝冕。
例子：<p>Do you forget to buy <mark>milk</mark> today.</p>
效果 -
progress標(biāo)簽
表示運(yùn)行中的進(jìn)程，可以使用progress標(biāo)簽顯示JavaScript中耗時時間函數(shù)的進(jìn)程瓦呼。等待中……喂窟、請稍后等。
例子：<progress value="70" max="100"></progress>
效果 -
time標(biāo)簽
屬于語義標(biāo)簽吵血，用來標(biāo)注頁面中的某個內(nèi)容谎替，這個標(biāo)注是給搜索引擎用的。因為當(dāng)搜索引擎解析到這個標(biāo)簽的時候會根據(jù)這個標(biāo)注來知道這是個時間蹋辅。 -
ruby標(biāo)簽
定義 ruby 注釋（中文注音或字符）钱贯。
與 <ruby> 以及 <rt> 標(biāo)簽一同使用。ruby 標(biāo)簽由一個或多個字符（需要一個解釋/發(fā)音）和一個提供該信息的 rt 標(biāo)簽組成侦另，還包括可選的 rp 標(biāo)簽秩命，定義當(dāng)瀏覽器不支持 "ruby" 標(biāo)簽時顯示的內(nèi)容。
例子：<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby> -
wbr標(biāo)簽
表示軟換行褒傅。與br標(biāo)簽的區(qū)別：br標(biāo)簽表示此處必須換行弃锐；wbr表示瀏覽器窗口或父級標(biāo)簽足弓寬時（沒必要換行時），不換行殿托，而寬度不夠時主動在此處換行
2.被刪除的標(biāo)簽
能用css代替的標(biāo)簽
basefont霹菊、big、center支竹、font旋廷、s鸠按、strike、tt饶碘、u目尖。這些標(biāo)簽純粹是為畫面展示服務(wù)的，HTML5中提倡把畫面展示性功能放在css中統(tǒng)一編輯扎运。不再使用frame框架瑟曲。
frameset、frame豪治、noframes洞拨。html5中不支持frame框架，只支持iframe框架负拟，或者用服務(wù)器方創(chuàng)建的由多個頁面組成的符合頁面的形式扣甲，刪除以上這三個標(biāo)簽。只有部分瀏覽器支持的標(biāo)簽
applet齿椅、bgsound、blink启泣、marquee等標(biāo)簽涣脚。其他被廢除的標(biāo)簽
廢除rb，使用ruby替代寥茫。
廢除acronym使用abbr替代遣蚀。
廢除dir使用ul替代。
廢除isindex使用form與input相結(jié)合的方式替代
廢除listing使用pre替代
廢除xmp使用code替代
廢除nextid使用guids
廢除plaintex使用“text/plian”（無格式正文）MIME類型替代纱耻。
三芭梯、h5新增及廢除的屬性
新增表單相關(guān)的屬性
- 對input（type=text）、select弄喘、textarea與button指定autofocus屬性玖喘。它以指定屬性的方式讓標(biāo)簽在畫面打開時自動獲得焦點(diǎn)。
- 對input（type=text）蘑志、textarea指定placeholder屬性累奈，它會對用戶的輸入進(jìn)行提示，提示用戶可以輸入的內(nèi)容急但。
- 對input澎媒、output、select波桩、textarea戒努、button與fieldset指定form屬性。它聲明屬于哪個表單镐躲，然后將其放置在頁面的任何位置储玫，而不失表單之內(nèi)侍筛。
- 對input（type=text）、textarea指定required屬性缘缚。該屬性表示用戶提交時進(jìn)行檢查勾笆，檢查該標(biāo)簽內(nèi)必定要有輸入內(nèi)容。
- 為input標(biāo)簽增加幾個新的屬性：autocomplete桥滨、min窝爪、max、multiple齐媒、pattern與step蒲每。還有l(wèi)ist屬性與datalist標(biāo)簽配合使用；datalist標(biāo)簽與autocomplete屬性配合使用喻括。multiple屬性允許上傳時一次上傳多個文件邀杏； pattern屬性用于驗證輸入字段的模式，其實就是正則表達(dá)式唬血。step 屬性規(guī)定輸入字段的合法數(shù)字間隔（假如 step="3"望蜡，則合法數(shù)字應(yīng)該是 -3、0拷恨、3脖律、6，以此類推）腕侄，step 屬性可以與 max 以及 min 屬性配合使用小泉，以創(chuàng)建合法值的范圍。
- 為input冕杠、button標(biāo)簽增加formaction微姊、formenctype、formmethod分预、formnovalidate與formtarget屬性兢交。用戶重載form標(biāo)簽的action、enctype笼痹、method魁淳、novalidate與target屬性。為fieldset標(biāo)簽增加disabled屬性与倡，可以把它的子標(biāo)簽設(shè)為disabled狀態(tài)界逛。
- 為input、button纺座、form增加novalidate屬性息拜，可以取消提交時進(jìn)行的有關(guān)檢查，表單可以被無條件地提交。
新增鏈接相關(guān)屬性
- 為a少欺、area增加media屬性喳瓣。規(guī)定目標(biāo) URL 是為什么類型的媒介/設(shè)備進(jìn)行優(yōu)化的。該屬性用于規(guī)定目標(biāo) URL 是為特殊設(shè)備（比如 iPhone）赞别、語音或打印媒介設(shè)計的畏陕。該屬性可接受多個值。只能在 href 屬性存在時使用仿滔。
- 為area增加herflang和rel屬性惠毁。hreflang 屬性規(guī)定在被鏈接文檔中的文本的語言。只有當(dāng)設(shè)置了 href 屬性時崎页，才能使用該屬性鞠绰。注釋：該屬性是純咨詢性的。rel 屬性規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系飒焦。只有當(dāng)使用 href 屬性時蜈膨，才能使用 rel 屬性。
- 為link增加size屬性牺荠。sizes 屬性規(guī)定被鏈接資源的尺寸翁巍。只有當(dāng)被鏈接資源是圖標(biāo)時 (rel="icon")，才能使用該屬性休雌。該屬性可接受多個值曙咽。值由空格分隔。
- 為base標(biāo)簽增加target屬性挑辆，主要是保持與a標(biāo)簽的一致性。
新增其他屬性
- 為ol增加reversed屬性孝情，它指定列表倒序顯示鱼蝉。
- 為meta增加charset屬性
- 為menu增加type和label屬性。label為菜單定義一個標(biāo)注箫荡，type屬性定義可以menu以上下文菜單魁亦、工具條與列表三種形式出現(xiàn)。
- 為style增加scoped屬性羔挡。它允許我們?yōu)槲臋n的指定部分定義樣式洁奈，而不是整個文檔。如果使用 "scoped" 屬性绞灼，那么所規(guī)定的樣式只能應(yīng)用到 style 標(biāo)簽的父標(biāo)簽及其子標(biāo)簽利术。
- 為script增減屬性，它定義腳本是否異步執(zhí)行低矮。async 屬性僅適用于外部腳本（只有在使用 src 屬性時）有多種執(zhí)行外部腳本的方法：
- 如果 async="async"：腳本相對于頁面的其余部分異步地執(zhí)行（當(dāng)頁面繼續(xù)進(jìn)行解析時印叁，腳本將被執(zhí)行）
- 如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執(zhí)行
- 如果既不使用 async 也不使用 defer：在瀏覽器繼續(xù)解析頁面之前，立即讀取并執(zhí)行腳本
- 為html標(biāo)簽增加manifest，開發(fā)離線web應(yīng)用程序時他與API結(jié)合使用轮蜕，定義一個URL昨悼，在這個URL上描述文檔的緩存信息。
-
為iframe增加撒個屬性跃洛，sandbox率触、seamless、srcdoc汇竭。用來提高頁面安全性葱蝗，防止不信任的web頁面執(zhí)行某些操作。
新增屬性例子：
廢除的屬性
HTML4中一些屬性在Html5中不再被使用韩玩，而是采用其他屬性或其他方式進(jìn)行替代垒玲。
| 在HTML 4中使用的屬性 | 使用該屬性的標(biāo)簽 | 在HTML 5中的替代方案 |
|---|---|---|
| rev | link、a | rel |
| charset | link找颓、a | 在被鏈接的資源的中使用HTTP Content-type頭標(biāo)簽 |
| shape合愈、coords | a | 使用area標(biāo)簽代替a標(biāo)簽 |
| longdesc | img、iframe | 使用a標(biāo)簽鏈接到校長描述 |
| target | link | 多余屬性击狮，被省略 |
| nohref | area | 多余屬性佛析，被省略 |
| profile | head | 多余屬性，被省略 |
| version | html | 多余屬性彪蓬，被省略 |
| name | img | id |
| scheme | meta | 只為某個表單域使用scheme |
| archive寸莫、chlassid、codebose档冬、codetype膘茎、declare、standby | object | 使用data與typc屬性類調(diào)用插件酷誓。需要使用這些屬性來設(shè)置參數(shù)時披坏，使用param屬性 |
| valuetype、type | param | 使用name與value屬性盐数，不聲明之的MIME類型 |
| axis棒拂、abbr | td、th | 使用以明確簡潔的文字開頭玫氢、后跟詳述文字的形式帚屉。可以對更詳細(xì)內(nèi)容使用title屬性漾峡，來使單元格的內(nèi)容變得簡短 |
| scope | td | 在被鏈接的資源的中使用HTTP Content-type頭標(biāo)簽 |
| 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 |
四斥黑、全局屬性 對任何標(biāo)簽都可以使用的屬性
- HTML5 中添加的屬性。
| 屬性 | 描述 |
|---|---|
| accesskey | 規(guī)定激活元素的快捷鍵眉厨。 |
| class | 規(guī)定元素的一個或多個類名（引用樣式表中的類）锌奴。 |
| contenteditable | 規(guī)定元素內(nèi)容是否可編輯。 |
| contextmenu | 規(guī)定元素的上下文菜單憾股。上下文菜單在用戶點(diǎn)擊元素時顯示鹿蜀。 |
| data-* | 用于存儲頁面或應(yīng)用程序的私有定制數(shù)據(jù)。 |
| dir | 規(guī)定元素中內(nèi)容的文本方向服球。 |
| draggable | 規(guī)定元素是否可拖動茴恰。 |
| dropzone | 規(guī)定在拖動被拖動數(shù)據(jù)時是否進(jìn)行復(fù)制、移動或鏈接斩熊。 |
| hidden | 規(guī)定元素仍未或不再相關(guān)往枣。 |
| id | 規(guī)定元素的唯一 id。 |
| lang | 規(guī)定元素內(nèi)容的語言粉渠。 |
| spellcheck | 規(guī)定是否對元素進(jìn)行拼寫和語法檢查分冈。 |
| style | 規(guī)定元素的行內(nèi) CSS 樣式。 |
| tabindex | 規(guī)定元素的 tab 鍵次序霸株。 |
| title | 規(guī)定有關(guān)元素的額外信息雕沉。 |
| translate | 規(guī)定是否應(yīng)該翻譯元素內(nèi)容。 |
全局屬性例子：
