面试官问H4和H5有什么区别（内心独白：MMP，不就是多了一些语义化的标签吗，难道让我把增加的标签和你说一遍吗？），作为一个不优秀的前端显然我没能回答好这个问题，所以有了这篇文章。
H5对H4升级的地方实在太多，本人能力有限主要整理了HTML部分，不详不正之处欢迎指正。
本篇文章主要参考文章：
HTML5与HTML4的区别 http://blog.csdn.net/superhoy/article/details/51637670 （这篇文章写得非常好，建议直接看这篇文章）
WEB前端之HTML5~HTML5与HTML4的区别 http://blog.csdn.net/actionActivity/article/details/53708282
HTML5与HTML4区别简介 https://segmentfault.com/a/1190000003976076
一、什么是HTML5&H5
HTML5 是对超文本标记语言的第五次重大修改，在2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，HTML5标准规范终于制定完成。
H5 是HTML5+CSS3+JS+API的统称（并不是官方定义）。可能PC端浏览器版本各种各样（说的就是IE），对H5的兼容并不好，所以后者通常被认为是移动端网页，也有人说H5是为了移动设备产生的。
二、HTML5相比HTML4有哪些区别
HTML5作为新的超文本编辑语言它是向下兼容的
- 1.DOCTYPE声明的简化
<!DOCTYPE html> - 2.指定字符编码
<meta charset="UTF-8"> - 3.新增内联SVG和Canvas
<svg><canvas> - 4.新增支持音视频
<video><audio> - 5.元素标记的省略、具有boolean值的属性、省略引号
- 6.不再使用frame框架，只支持iframe框架
- 7.强调标签语义化，HTML5为了语义化增加修改了很多标签和属性
- 新增的标签
<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>... - 修改的标签，主要是修改了语义
<b><i><s><small><strong><u><address>... - 废除的标签
<basefont><big><center><font><strike><tt><frame><frameset><noframes><acronym><applet><isindex><dir> - 新增的属性，HTML5新增了很多属性，后面有详细列出
- 废弃的属性，废弃的属性也有很多，后面有详细列出
- 修改的属性，（译注：大部分是限制放宽，略）
- 新增的标签
- 8.本地数据存储类型（localStorage、sessionStorage）
- 9.还有......，更多的我不清楚了，欢迎各位帮我补充。
三、详细解释
3.1 HTML5的DOCTYPE声明简化了很多
- HTML5 不是基于SGML因此不需要引用DTD
<!DOCTYPE html> - HTML4规定了三种的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">
3.2 指定字符编码
- HTML5：
<meta charset="UTF-8"> - HTML4：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
3.3 支持内联SVG和Canvas，<canvas>替代了Flash
关于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 元素标记的省略、具有boolean值的属性、省略引号
具有boolean值的属性(常见的checked、selected、disabled、readonly)
http://blog.csdn.net/PrairieLoneWolf/article/details/8449187
3.6 不再使用frame框架
由于Frame框架对网页可用性存在负面影响，HTML5中不再支持 <frame>，只支持iframe框架，或者用服务器创建的多个页面组成的复合页面的形式。
3.7 语义化 (以下整理的内容并不是全部修改)
HTML5 非常强调语义化为此增加修改了很多标签，其中有的专注于结构，如<header> <article>有的专注于内容，如<data>。
https://segmentfault.com/a/1190000005626375
https://www.jianshu.com/p/3d43727e04a5
以下更详细的内容请参考
MDN HTML5 标签列表 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 新增的标签
| 标签(为了文档结构) | 描述 |
|---|---|
| article | 定义独立于文档的一块内容，比如blog入口或报刊文章 |
| section | 定义文档中的一个章节 |
| main | 定义文档中主要或重要的内容 |
| aside | 定义和页面内容关联度较低的内容，如：侧边栏 |
| header | 定义页面或章节的头部 |
| footer | 定义页面或章节的尾部，可以包含作者、版权等信息 |
| nav | 定义只包含导航链接的章节 |
| figure | 代表一个和文档有关的图例 |
| figcaption | 代表一个图例的说明 |
| template | 可以用于声明一块可用于克隆与插入的HTML片段 |
| ... |
| 标签(其它新标签) | 描述 |
|---|---|
| audio | 音频 |
| video | 视频 |
| source | 为 <video> 或 <audio> 这类媒体元素指定媒体源 |
| track | 为 <video> 或 <audio> 这类媒体元素指定文本轨道（字幕） |
| embed | 代表一个嵌入 的外部资源，如应用程序或交互内容 |
| mark | 代表一段需要被高亮的引用 文字 |
| progress | 代表进度条 |
| meter | 代表滑动条 |
| time | 代表日期 和时间 值 |
| ruby、rt、rp | 代表被ruby 注释 标记的文本，如中文汉字和它的拼音 |
| bdi | 代表需要脱离 父元素文本方向的一段文本 |
| wbr | 代表建议换行 (Word Break Opportunity) |
| canvas | 位图区域 |
| datalist | 代表提供给其他控件的一组预定义选项 |
| keygen | 代表一个密钥对生成器 控件 |
| output | 代表计算值 |
| menu | 代表菜单 |
| menuitem | 代表一个用户可以点击的菜单项 |
| ... |
3.7.2 修改的标签 （实在没找到详细资料，见谅）
| 标签 | 描述 HTML5 | 描述 HTML4 |
|---|---|---|
| b | 代表一段需要被关注的文字，不建议使用 | 粗体文本 |
| i | 代表一段不同性质的文字，如技术术语、外文短语等 | 斜体文本效果 |
| s | 代表不准确或不相关的内容，提倡使用<del><ins> | 加删除线文本 |
| u | 代表一段需要下划线呈现的文本注释 | 下划线 |
| small | 代表注释 | 小号字体 |
| strong | 代表特别重要文字 | 着重强调 |
| address | 定义包含联系信息的一个章节 | 描述通讯地址 |
| ... |
3.7.3 废除的标签 更多的请参考 MDN 过时的和弃用的元素
| 标签 | 描述 | 代替方法 |
|---|---|---|
| basefont | 用来设置文档的默认字体大小 | 使用CSS代替 |
| font | 定义了该内容的字体大小、顏色与表现 | 使用CSS代替 |
| big | 字体加大一号 | 使用CSS代替 |
| center | 这个元素的整个内容在它的上级元素中水平居中 | 使用CSS代替 |
| strike | 在文本上放置删除线 | <del>或<s> |
| tt | HTML 电报文本元素 (<tt>) 产生一个内联元素 | 带有 CSS的<code>或<span>来代替 |
| frame、frameset | 特定的窗口（框架） | <iframe> |
| acronym | 表示省略语 | <abbr> |
| applet | 包含了Java的applet | <object> |
| isindex | 对话框 | <input> |
| dir | 表示一个目录 | <ul> |
| ... |
3.7.4 新增的属性
表单元素：
- input的type属性增加的新类型 tel、search、url、email、date、time、number、range、color
- form属性可用于在input、output、select、textarea、button、label、object、fieldset元素上指定关联的<form>元素的id，不局限于常规的层叠关系
- input、textarea元素可使用placeholder属性来帮助用户填写数据，注意，它不应当替代label元素的作用
- 可使用autofocus元素来制定自动获得焦点的元素（非type="hidden"的input、select、textarea、button的元素）
- fieldset标签允许使用disabled属性，这将禁止所有子元素的交互；它同时还可以使用name以方便脚本获取
- input元素有了用于指明输入限制的属性autocomplete, min,max, multiple, pattern及step
- input type="image"的元素有width和height属性
- input与textarea元素有了dirname以指明书写方向（译注：ltr或rtl）
- textarea元素有了新的属性，如maxlength、minlength、wrap来控制最大输入长度与提交时的断行行为
- form元素有了novalidate属性来禁止默认的表单验证行为
- 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属性将影响脚本的加载与运行
- html元素有manifest属性，可用于指定缓存行为
- link元素有了新的属性sizes，可以指定不同的大小的favicon
- ol元素有了新的属性reversed，它代表着列表的顺序是逆序的
- iframe元素有了sandbox和srcdoc属性以支持沙盒安全保护
- object元素有了typemustmatch元素以保证更安全的嵌入顺序
- img元素有crossorigin属性以在canvas中支持CORS
- contenteditable
- data-*代表了开发定制的属性，这种格式可以避免与将来的新HTML属性冲突
- hidden属性代表一个元素不再与文档相关
- role及aria-*用于支持无障碍访问
- spellcheck用于指定内容是否允许进行拼写检查
- translate用于指定内容是否应当翻译
3.7.5 废弃的属性
这些属性被废弃，你可以找到你能够用以替代的属性或标签。
- 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不再包含纯用于表现的属性，它们应当被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属性被废弃
下列属性允许使用，但不鼓励被使用：
- img元素上的border属性。如果使用，要求使用0作为值。应当替代为CSS控制
- script元素上的language属性。如果使用，要求使用JavaScript（不区分大小写），同时不应当与type属性冲突。由于它没有实际意义，开发应当省略它
- a的name属性。开发应当使用id来替代它
3.7.6 修改的属性，（译注：大部分是限制放宽，略）
3.8本地数据存储类型
HTML5 提供了两种在客户端存储数据的新方法：
1）localStorage - 没有时间限制的数据存储
2）sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
学习localStorage和sessionStorage使用方法可以参考
http://blog.csdn.net/feiying008/article/details/52150192
本文最后再次建议读者看这篇文章，比我整理的全面很多
HTML5与HTML4的区别 http://blog.csdn.net/superhoy/article/details/51637670
本文全部内容均是自己整理或网络摘抄，未经过校验，如有错误欢迎指出。
欢迎转载，但请注明出处。
扫一扫
4426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
