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

什么是HTML5？

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

并为HTML5建立了一些规则：

  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

  • 减少对外部插件的需求（比如 Flash）

  • 更优秀的错误处理

  • 更多取代脚本的标记

  • HTML5 应该独立于设备

  • 开发进程应对公众透明

可以简单点理解成：HTML 5 ≈ HTML + CSS3 + JavaScript + API

我们现在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的数据存储

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

HTML5与HTML4区别简介的更多相关文章

  1. html5与html4区别

    1.声明方法简化,doctype.meta 2.有些元素可以省略标记,body.tbody... 3.新增语义化标签,<section><article>...<arti ...

  2. HTML-HTML5+CSS3权威指南阅读（一、HTML5与HTML4之间的区别）

    一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  3. 面试中的一些小问题之html5和html4的区别？

    HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...

  4. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  5. HTML5与HTML4的比较

    HHTML5封装一些标签和属性,方便了开发. <form> <p> <label>Username:<input name="search" ...

  6. HTML5和HTML4的主要区别 [转]

    原文:http://www.cnblogs.com/jiangyehu1110/archive/2013/07/10/3182277.html 1. HTML5标准还在制定中 这头一个不同之处显而易见 ...

  7. 以太坊客户端Ethereum Wallet与Geth区别简介

    以太坊客户端Ethereum Wallet与Geth区别简介 最近有不少朋友在搭建交易平台,在咨询和技术交流的过程中发现很多朋友不太清楚Ethereum Wallet和Geth区别.甚至有朋友使用Ge ...

  8. svn与git区别简介，git分支操作在mac客户端soureTree和使用命令行如何实现

    svn与git区别简介: 性能方面(经过实践的) svn:下载速度慢,因为它其中的源文件太多,并且在show log日志的时候每次都需要去服务器拉取,速度很慢 git:下载速度快,并且git clon ...

  9. 翻译：HTML5与HTML4的区别

    本文选译自:W3C Working Group Note: HTML5 Differences from HTML4. 解释一下W3C Working Group Note,作为"工作组笔记 ...

随机推荐

  1. c语言刷 DFS题记录

    144. 二叉树的前序遍历 /** * Definition for a binary tree node. * struct TreeNode { * int val; * struct TreeN ...

  2. MySql的事务及数据的导入导出

    Mysql的事务及应用 1.补充数据库的导入与导出 导入 mysql -u root -p database < E:/SS/Test.sql -- 即执行sql文件 导出 -- 结构+数据 m ...

  3. Mysql高级操作学习笔记:索引结构、树的区别、索引优缺点、创建索引原则(我们对哪种数据创建索引)、索引分类、Sql性能分析、索引使用、索引失效、索引设计原则

    Mysql高级操作 索引概述: 索引是高效获取数据的数据结构 索引结构: B+Tree() Hash(不支持范围查询,精准匹配效率极高) 树的区别: 二叉树:可能产生不平衡,顺序数据可能会出现链表结构 ...

  4. JZ-042-和为 S 的两个数字

    和为 S 的两个数字 题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 返回值描述: 对应每个测试案例,输出两 ...

  5. Mattermost Server安装及配置AD/LADP

    一.安装Mattermost Server Mattermost is an open source, self-hosted Slack-alternative. 1.下载mattermost  s ...

  6. IntelliJ IDEA 中打包时报aspose-cells错误缺失

    异常情况 在本地执行word转换为pdf是没有问题,但是在maven中提示错误: 解决方案 将com\aspose\aspose-cells\9.0.0下除了[aspose-cells-9.0.0.j ...

  7. ElasticSearch 分布式及容错机制

    1 ElasticSearch分布式基础 1.1 ES分布式机制 分布式机制:Elasticsearch是一套分布式的系统,分布式是为了应对大数据量.它的特性就是对复杂的分布式机制隐藏掉. 分片机制: ...

  8. 【简记】Linux界面连接WPA2-Enterprise Wifi

    背景 公司从去年(2021)年开始使用 WPS2-Enterprise 安全方式,我的笔记本来公司就得用网线才能连(因为当时没意识到,只是以为连不上可能和驱动有关系,这是大错特错的理解..)赶上今天去 ...

  9. Scipy的stats模块包含了多种概率分布的随机变量，随机变量分为连续和离散两种。+忽略程序中警告信息+np.newaxis解释

  10. vue3-关于使用element-plus第三方组件库时出现的一些问题的解决方案(1)

    这只是在使用element-plus组件开发过程中遇到的第一个问题,后面遇到更多问题及解决方案时会再同步到博客上来 --------------我是分割线------------------ 今天用到 ...