HTML4和HTML5的区别

面试官问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">

更详细资料请查看 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 支持内联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>
ttHTML 电报文本元素 (<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

本文全部内容均是自己整理或网络摘抄,未经过校验,如有错误欢迎指出。
欢迎转载,但请注明出处。

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值