HTML5与HTML4区别简介

时间 2020-01-11

标签 html5 html html4 区别简介栏目 HTML5 繁體版

原文原文链接

移动互联网的快速发展，尤为是4G时代已经来临，加上微软在Windows 10中搭载了新的浏览器Edge取代了IE的地位，因此如今不少网站都开始抛弃IE朝着HTML5发展，PC端在不一样浏览器之间的兼容性问题愈来愈少，在移动终端上用的甚是普遍，HTML5已成为浏览器标记语言的霸主，这是大势所趋。随着Adobe放弃移动Flash，微软亦将中止发展Silverlight，HTML5的应用仍存在着巨大的上升空间。近期内极可能从广告行业逐渐往游戏行业、广播电视行业和媒体行业转型，不远的未来还能把触角伸得更远。做为新一代Web开发标准，HTML5的将来十分光明，值得咱们去学习。html

什么是HTML5？

HTML5最早由WHATWG(Web超文本应用技术工做组)命名的一种超文本标记语言，随后与W3C组织的XHTML2.0相结合，产生如今最新一代的超文本标记语言。前端

并为HTML5创建了一些规则：html5

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。web
减小对外部插件的需求（好比 Flash）编程
更优秀的错误处理canvas
更多取代脚本的标记浏览器
HTML5 应该独立于设备服务器
开发进程应对公众透明session

能够简单点理解成：HTML 5 ≈ HTML + CSS3 + JavaScript + APIapp

咱们如今web前端开发的静态网页，通常都是HTML4.01，同时符合W3C规范。那么他们二者直接又有什么实质性的区别呢？

1.在文档类型声明上

<!DOCTYPE> 声明能帮助浏览器正确地显示网页。

HTML5

<!DOCTYPE html>

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

对比可见：在文档声明上，HTML4和XHTML有一段很长的代码，而且很难记住，想必不少人都是经过编辑器直接生成的吧？而HTML5只有简单的声明，这也方便人们的记忆。

2.设置页面字符编码

在HTML5中可使用对 <meta> 元素直接追加charset属性的方式来指定字符编码。

HTML4

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

HTML5

<meta charset="UTF-8">

从HTML5开始，对于文件的字符编码推荐使用UTF-8。

3.在结构语义上

HTML4： 没有体现结构语义化的标签，咱们一般都是这样来表示网站的头部 <div id="header">。

HTML5： 在语义上却有很大的优点。提供了一些新的标签，好比 <header> / <nav> / <section> / <article> / <aside> / <footer> 等。

提供这样的标签有什么样的好处呢？语义化的含义就是用正确的标签作正确的事情，HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有CSS样式状况下也以一种文档格式显示，而且是容易阅读的。搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4.其余新增内容

新增的input类型： email(邮件地址) / url(URL地址) / number(数字) / range(范围滑动条) / date(日期) / search(搜索) / color(颜色选择器) 等。

新的内联元素：

<meter> 定义预约义范围内的度量
<progress> 定义任何类型的任务的进度
<time> 定义一个日期/时间
<mark> 标签订义带有记号的文本

新的内嵌元素：

<video> 定义视频
<audio> 定义音频
<source> 为媒介元素（好比 <video> 和 <audio>）定义媒介资源

新的交互元素：

<details> 定义元素的细节
<datagrid> 定义树列表 (tree-list) 中的数据
<datalist> 定义选项列表
<menu> 定义菜单列表
<command> 定义命令按钮

5.`<canvas>`替代Flash

Flash给不少Web开发者带来了麻烦，要在网页上播放Flash须要一堆代码和插件，<canvas> 标签使得开发者只要使用一个标签就能和用户产生UI交互。HTML5已经能够替代Flash的绝大多数特性，并且从HTML5的发展趋势来看，HTML5将逐渐得到对Flash的优点，因此替代趋势确定是存在的，已经有很多Flash开发者转入了HTML5阵营，因此我相信不久以后HTML5游戏开发这个领域应该会有很是大的发展。

6.废除的元素

能用CSS替代的元素： 对于 <basefont> / <big> / <center> / <font> / <s> / <strike> / <tt> / <u>这些元素，因为它们的功能都是纯粹的画面展现服务的，而HTML5中提倡把画面展现性功能放在CSS样式中统一编辑，因此将这些元素废除。

再也不使用Frame框架： 因为Frame框架对网页可用性存在负面影响，HTML5中再也不支持 <frame>，只支持iframe框架，或者用服务器建立的多个页面组成的复合页面的形式。

只有部分浏览器支持的元素： <applet> / <bgsound> / <blink> / <marquee> 等元素。<bgsound> 和 <marquee> 只被IE支持，被HTML5废除。其中 <applet> 可由 <embed> 或 <object> 替代，<bgsound> 可由 <audio> 替代，<marquee> 可由JavaScript编程方式替代。

7.本地存储

HTML5 Storage提供了一种方式让网站可以把信息存储到你本地的计算机上，并在之后须要的时候进行获取。这个概念和Cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这使得Cookie速度很慢并且效率也不高。HTML5的Storage是存储在你的计算机上，网站在页面加载完毕后能够经过Javascript来获取这些数据。

HTML5提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个session的数据存储

若是须要保存一些数据到用户的浏览器，而这些数据又不须要每一个请求都提交给服务器，不妨考虑使用本地存储。