面試官問H4和H5有什么區(qū)別（內(nèi)心獨(dú)白：MMP，不就是多了一些語義化的標(biāo)簽嗎，難道讓我把增加的標(biāo)簽和你說一遍嗎？），作為一個(gè)不優(yōu)秀的前端顯然我沒能回答好這個(gè)問題，所以有了這篇文章。
H5對(duì)H4升級(jí)的地方實(shí)在太多，本人能力有限主要整理了HTML部分，不詳不正之處歡迎指正。
本篇文章主要參考文章：
HTML5與HTML4的區(qū)別 http://blog.csdn.net/superhoy/article/details/51637670 （這篇文章寫得非常好，建議直接看這篇文章）
WEB前端之HTML5~HTML5與HTML4的區(qū)別 http://blog.csdn.net/actionActivity/article/details/53708282
HTML5與HTML4區(qū)別簡介 https://segmentfault.com/a/1190000003976076
一、什么是HTML5&H5
HTML5 是對(duì)超文本標(biāo)記語言的第五次重大修改，在2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過接近8年的艱苦努力，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成。
H5 是HTML5+CSS3+JS+API的統(tǒng)稱（并不是官方定義）?？赡躊C端瀏覽器版本各種各樣（說的就是IE），對(duì)H5的兼容并不好，所以后者通常被認(rèn)為是移動(dòng)端網(wǎng)頁，也有人說H5是為了移動(dòng)設(shè)備產(chǎn)生的。
二、HTML5相比HTML4有哪些區(qū)別
HTML5作為新的超文本編輯語言它是向下兼容的
- 1.DOCTYPE聲明的簡化
<!DOCTYPE html> - 2.指定字符編碼
<meta charset="UTF-8"> - 3.新增內(nèi)聯(lián)SVG和Canvas
<svg><canvas> - 4.新增支持音視頻
<video><audio> - 5.元素標(biāo)記的省略、具有boolean值的屬性、省略引號(hào)
- 6.不再使用frame框架，只支持iframe框架
- 7.強(qiáng)調(diào)標(biāo)簽語義化，HTML5為了語義化增加修改了很多標(biāo)簽和屬性
- 新增的標(biāo)簽
<section><article><main><aside><header><footer><nav><figure><figcaption><template><audio><video><source><track><embed><mark><progress><meter><time><ruby><rt><rp><bdi><wbr><canvas><datalist><keygen><output><menu>... - 修改的標(biāo)簽，主要是修改了語義
<b><i><s><small><strong><u><address>... - 廢除的標(biāo)簽
<basefont><big><center><font><strike><tt><frame><frameset><noframes><acronym><applet><isindex><dir> - 新增的屬性，HTML5新增了很多屬性，后面有詳細(xì)列出
- 廢棄的屬性，廢棄的屬性也有很多，后面有詳細(xì)列出
- 修改的屬性，（譯注：大部分是限制放寬，略）
- 新增的標(biāo)簽
- 8.本地?cái)?shù)據(jù)存儲(chǔ)類型（localStorage、sessionStorage）
- 9.還有......，更多的我不清楚了，歡迎各位幫我補(bǔ)充。
三、詳細(xì)解釋
3.1 HTML5的DOCTYPE聲明簡化了很多
- HTML5 不是基于SGML因此不需要引用DTD
<!DOCTYPE html> - HTML4規(guī)定了三種的DOCTYPE聲明方式，分別是：Strict、Transitional 和 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
更詳細(xì)資料請(qǐng)查看 https://www.cnblogs.com/zhengshihui/p/6868419.html
3.2 指定字符編碼
- HTML5：
<meta charset="UTF-8"> - HTML4：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
3.3 支持內(nèi)聯(lián)SVG和Canvas，<canvas>替代了Flash
關(guān)于SVG和Canvas了解甚少，我找了幾篇文章供大家參考
https://my.oschina.net/whutzl/blog/528351
http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp
3.4 HTML5支持音視頻 <video> <audio>
HTML5將徹底代替FLASH，是什么讓Adobe放棄了FLASH
https://baijiahao.baidu.com/s?id=1573954657320044&wfr=spider&for=pc
3.5 元素標(biāo)記的省略、具有boolean值的屬性、省略引號(hào)
具有boolean值的屬性(常見的checked、selected、disabled、readonly)
http://blog.csdn.net/PrairieLoneWolf/article/details/8449187
3.6 不再使用frame框架
由于Frame框架對(duì)網(wǎng)頁可用性存在負(fù)面影響，HTML5中不再支持 <frame>，只支持iframe框架，或者用服務(wù)器創(chuàng)建的多個(gè)頁面組成的復(fù)合頁面的形式。
3.7 語義化 (以下整理的內(nèi)容并不是全部修改)
HTML5 非常強(qiáng)調(diào)語義化為此增加修改了很多標(biāo)簽，其中有的專注于結(jié)構(gòu)，如<header> <article>有的專注于內(nèi)容，如<data>。
https://segmentfault.com/a/1190000005626375
http://www.itdecent.cn/p/3d43727e04a5
以下更詳細(xì)的內(nèi)容請(qǐng)參考
MDN HTML5 標(biāo)簽列表 https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
MDN HTML 元素參考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
3.7.1 新增的標(biāo)簽
| 標(biāo)簽(為了文檔結(jié)構(gòu)) | 描述 |
|---|---|
| article | 定義獨(dú)立于文檔的一塊內(nèi)容，比如blog入口或報(bào)刊文章 |
| section | 定義文檔中的一個(gè)章節(jié) |
| main | 定義文檔中主要或重要的內(nèi)容 |
| aside | 定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容，如：側(cè)邊欄 |
| header | 定義頁面或章節(jié)的頭部 |
| footer | 定義頁面或章節(jié)的尾部，可以包含作者、版權(quán)等信息 |
| nav | 定義只包含導(dǎo)航鏈接的章節(jié) |
| figure | 代表一個(gè)和文檔有關(guān)的圖例 |
| figcaption | 代表一個(gè)圖例的說明 |
| template | 可以用于聲明一塊可用于克隆與插入的HTML片段 |
| ... |
| 標(biāo)簽(其它新標(biāo)簽) | 描述 |
|---|---|
| audio | 音頻 |
| video | 視頻 |
| source | 為 <video> 或 <audio> 這類媒體元素指定媒體源 |
| track | 為 <video> 或 <audio> 這類媒體元素指定文本軌道（字幕） |
| embed | 代表一個(gè)嵌入 的外部資源，如應(yīng)用程序或交互內(nèi)容 |
| mark | 代表一段需要被高亮的引用 文字 |
| progress | 代表進(jìn)度條 |
| meter | 代表滑動(dòng)條 |
| time | 代表日期 和時(shí)間 值 |
| ruby、rt、rp | 代表被ruby 注釋 標(biāo)記的文本，如中文漢字和它的拼音 |
| bdi | 代表需要脫離 父元素文本方向的一段文本 |
| wbr | 代表建議換行 (Word Break Opportunity) |
| canvas | 位圖區(qū)域 |
| datalist | 代表提供給其他控件的一組預(yù)定義選項(xiàng) |
| keygen | 代表一個(gè)密鑰對(duì)生成器 控件 |
| output | 代表計(jì)算值 |
| menu | 代表菜單 |
| menuitem | 代表一個(gè)用戶可以點(diǎn)擊的菜單項(xiàng) |
| ... |
3.7.2 修改的標(biāo)簽 （實(shí)在沒找到詳細(xì)資料，見諒）
| 標(biāo)簽 | 描述 HTML5 | 描述 HTML4 |
|---|---|---|
| b | 代表一段需要被關(guān)注的文字，不建議使用 | 粗體文本 |
| i | 代表一段不同性質(zhì)的文字，如技術(shù)術(shù)語、外文短語等 | 斜體文本效果 |
| s | 代表不準(zhǔn)確或不相關(guān)的內(nèi)容，提倡使用<del><ins> | 加刪除線文本 |
| u | 代表一段需要下劃線呈現(xiàn)的文本注釋 | 下劃線 |
| small | 代表注釋 | 小號(hào)字體 |
| strong | 代表特別重要文字 | 著重強(qiáng)調(diào) |
| address | 定義包含聯(lián)系信息的一個(gè)章節(jié) | 描述通訊地址 |
| ... |
3.7.3 廢除的標(biāo)簽 更多的請(qǐng)參考 MDN 過時(shí)的和棄用的元素
| 標(biāo)簽 | 描述 | 代替方法 |
|---|---|---|
| basefont | 用來設(shè)置文檔的默認(rèn)字體大小 | 使用CSS代替 |
| font | 定義了該內(nèi)容的字體大小、顏色與表現(xiàn) | 使用CSS代替 |
| big | 字體加大一號(hào) | 使用CSS代替 |
| center | 這個(gè)元素的整個(gè)內(nèi)容在它的上級(jí)元素中水平居中 | 使用CSS代替 |
| strike | 在文本上放置刪除線 | <del>或<s> |
| tt | HTML 電報(bào)文本元素 (<tt>) 產(chǎn)生一個(gè)內(nèi)聯(lián)元素 | 帶有 CSS的<code>或<span>來代替 |
| frame、frameset | 特定的窗口（框架） | <iframe> |
| acronym | 表示省略語 | <abbr> |
| applet | 包含了Java的applet | <object> |
| isindex | 對(duì)話框 | <input> |
| dir | 表示一個(gè)目錄 | <ul> |
| ... |
3.7.4 新增的屬性
表單元素：
- input的type屬性增加的新類型 tel、search、url、email、date、time、number、range、color
- form屬性可用于在input、output、select、textarea、button、label、object、fieldset元素上指定關(guān)聯(lián)的<form>元素的id，不局限于常規(guī)的層疊關(guān)系
- input、textarea元素可使用placeholder屬性來幫助用戶填寫數(shù)據(jù)，注意，它不應(yīng)當(dāng)替代label元素的作用
- 可使用autofocus元素來制定自動(dòng)獲得焦點(diǎn)的元素（非type="hidden"的input、select、textarea、button的元素）
- fieldset標(biāo)簽允許使用disabled屬性，這將禁止所有子元素的交互；它同時(shí)還可以使用name以方便腳本獲取
- input元素有了用于指明輸入限制的屬性autocomplete, min,max, multiple, pattern及step
- input type="image"的元素有width和height屬性
- input與textarea元素有了dirname以指明書寫方向（譯注：ltr或rtl）
- textarea元素有了新的屬性，如maxlength、minlength、wrap來控制最大輸入長度與提交時(shí)的斷行行為
- form元素有了novalidate屬性來禁止默認(rèn)的表單驗(yàn)證行為
- input與button元素有了formaction, formenctype, formmethod, formnovalidate與formtarget屬性，用于覆蓋繼- 承自form的action, enctype, method, novalidate及target屬性
- input元素有了minlength和maxlength屬性
非表單元素：
- area元素同a和link元素一樣有了新的hreflang、type、rel屬性
- base元素同a一樣可以有target屬性
- meta元素有了charset屬性
- script元素有了async屬性將影響腳本的加載與運(yùn)行
- html元素有manifest屬性，可用于指定緩存行為
- link元素有了新的屬性sizes，可以指定不同的大小的favicon
- ol元素有了新的屬性reversed，它代表著列表的順序是逆序的
- iframe元素有了sandbox和srcdoc屬性以支持沙盒安全保護(hù)
- object元素有了typemustmatch元素以保證更安全的嵌入順序
- img元素有crossorigin屬性以在canvas中支持CORS
- contenteditable
- data-*代表了開發(fā)定制的屬性，這種格式可以避免與將來的新HTML屬性沖突
- hidden屬性代表一個(gè)元素不再與文檔相關(guān)
- role及aria-*用于支持無障礙訪問
- spellcheck用于指定內(nèi)容是否允許進(jìn)行拼寫檢查
- translate用于指定內(nèi)容是否應(yīng)當(dāng)翻譯
3.7.5 廢棄的屬性
這些屬性被廢棄，你可以找到你能夠用以替代的屬性或標(biāo)簽。
- a廢棄屬性：shape, coords, rev, charset
- area廢棄屬性：nohref
- form廢棄屬性：accept
- head廢棄屬性：profile
- html廢棄屬性：version
- iframe廢棄屬性：longdesc
- img廢棄屬性：name
- input廢棄屬性：usemap
- link廢棄屬性：target, rev, charset
- meta廢棄屬性：scheme
- object廢棄屬性：archive, classid, codebase, codetype, declare, standby
- param廢棄屬性：valuetype, type
- table廢棄屬性：summary
- td廢棄屬性：axis, abbr, scope
- th廢棄屬性：axis
HTML不再包含純用于表現(xiàn)的屬性，它們應(yīng)當(dāng)被CSS替代：
- caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup,tbody, td, - tfoot, th, thead和tr的align屬性被廢棄
- body的alink, link, text, background屬性被廢棄
- table, tr, td, th和body的bgcolor屬性被廢棄
- object的border屬性被廢棄
- table的cellpadding和cellspacing屬性被廢棄
- col, colgroup, tbody, td, tfoot, th, thead和tr的char和charoff屬性被廢棄
- br的clear屬性被廢棄
- dl, ol和ul的compact屬性被廢棄
- table的frame屬性被廢棄
- iframe的frameborder屬性被廢棄
- td和th的height屬性被廢棄
- img和object的hspace和vspace屬性被廢棄
- iframe的marginheight和marginwidth屬性被廢棄
- hr的noshade屬性被廢棄
- td和th的nowrap屬性被廢棄
- table的rules屬性被廢棄
- iframe的scrolling屬性被廢棄
- hr的size屬性被廢棄
- li,和ul的type屬性被廢棄
- col, colgroup, tbody, td, tfoot, th, thead和tr的valign屬性被廢棄
- hr, table, td, th, col, colgroup和pre的width屬性被廢棄
下列屬性允許使用，但不鼓勵(lì)被使用：
- img元素上的border屬性。如果使用，要求使用0作為值。應(yīng)當(dāng)替代為CSS控制
- script元素上的language屬性。如果使用，要求使用JavaScript（不區(qū)分大小寫），同時(shí)不應(yīng)當(dāng)與type屬性沖突。由于它沒有實(shí)際意義，開發(fā)應(yīng)當(dāng)省略它
- a的name屬性。開發(fā)應(yīng)當(dāng)使用id來替代它
3.7.6 修改的屬性，（譯注：大部分是限制放寬，略）
3.8本地?cái)?shù)據(jù)存儲(chǔ)類型
HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：
1）localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
2）sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。
對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)。
HTML5 使用 JavaScript 來存儲(chǔ)和訪問數(shù)據(jù)。
學(xué)習(xí)localStorage和sessionStorage使用方法可以參考
http://blog.csdn.net/feiying008/article/details/52150192
本文最后再次建議讀者看這篇文章，比我整理的全面很多
HTML5與HTML4的區(qū)別 http://blog.csdn.net/superhoy/article/details/51637670
本文全部內(nèi)容均是自己整理或網(wǎng)絡(luò)摘抄，未經(jīng)過校驗(yàn)，如有錯(cuò)誤歡迎指出。
歡迎轉(zhuǎn)載，但請(qǐng)注明出處。
