HTML5与HTML4区别简介
移动互联网的快速发展,尤其是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区别简介的更多相关文章
- html5与html4区别
1.声明方法简化,doctype.meta 2.有些元素可以省略标记,body.tbody... 3.新增语义化标签,<section><article>...<arti ...
- HTML-HTML5+CSS3权威指南阅读(一、HTML5与HTML4之间的区别)
一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- 面试中的一些小问题之html5和html4的区别?
HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...
- 小强的HTML5移动开发之路(3)——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- HTML5与HTML4的比较
HHTML5封装一些标签和属性,方便了开发. <form> <p> <label>Username:<input name="search" ...
- HTML5和HTML4的主要区别 [转]
原文:http://www.cnblogs.com/jiangyehu1110/archive/2013/07/10/3182277.html 1. HTML5标准还在制定中 这头一个不同之处显而易见 ...
- 以太坊客户端Ethereum Wallet与Geth区别简介
以太坊客户端Ethereum Wallet与Geth区别简介 最近有不少朋友在搭建交易平台,在咨询和技术交流的过程中发现很多朋友不太清楚Ethereum Wallet和Geth区别.甚至有朋友使用Ge ...
- svn与git区别简介,git分支操作在mac客户端soureTree和使用命令行如何实现
svn与git区别简介: 性能方面(经过实践的) svn:下载速度慢,因为它其中的源文件太多,并且在show log日志的时候每次都需要去服务器拉取,速度很慢 git:下载速度快,并且git clon ...
- 翻译:HTML5与HTML4的区别
本文选译自:W3C Working Group Note: HTML5 Differences from HTML4. 解释一下W3C Working Group Note,作为"工作组笔记 ...
随机推荐
- Qt:QDateTime、QDate、QTime与QDateTimeEdit
时间日期是经常遇到的数据类型,Qt中的时间日期类如下: QTime:时间类型,只表示时间,如15:23:13: QDate:日期类型,只表示日期,如2017-4-5: QDateTime:日期时间类型 ...
- 爬虫之标签查找补充及selenium模块的安装及使用与案例
今日内容概要 bs模块之标签查找 过滤器 selenium模块 今日内容详细 html_doc = """ <html> <head> <t ...
- Winform调用存储过程
数据表及数据准备: create table Member ( MemberId int primary key identity(1,1), MemberAccount nvarchar(20) u ...
- Linux密码操作
CentOS7 利用Python程序生成sha512加密密码: [root@localhost ~]# python -c 'import crypt,getpass;pw="zxcvbnm ...
- .NET CORE 授权
.NET CORE 授权 一.三种方式授权 不论使用NET CORE框架的何种授权都必须引入中间件,因为它实现了在管道中对当前请求的鉴权和授权的验证,在Startup中的Configure中首先加入鉴 ...
- 35 异常机制 异常处理机制 异常处理五个关键字 try、catch、finally、throw、thorws 代码
异常处理机制 概念 抛出异常 捕获异常 异常处理五个关键字 try.catch.finally.throw.thorws 代码 // main { int a = 1; int b = 0; // 假 ...
- 10 Java的方法 可变参数
5.可变参数 JDK 1.5开始,Java支持传递同类型的可变参数给一个方法. 在方法声明中,在制定参数类型后加一个省略号(-). 一个方法中只能指定一个可变参数,它必须是方法的最后一个参数.任何普通 ...
- LGP7704题解
来一个特别暴力的做法. 首先,如果删掉 \(x\) 和 \(y\) 的效果一定和删掉 \(xy\) 的效果相同,且代价一定不大于后者. 于是我们只删除质数,题目就变成了寻找 \(i!(1 \leq i ...
- K8S搭建自动化部署环境 Jenkins下载、安装和启动
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.jenkins 下载 jenkins下载地址:https://jenkins.io/zh/download/ 如下图,左边是稳定版本,右边是每 ...
- 使用tc ingress来限速接收方向
Linux中的QoS分为入口(Ingress)部分和出口(Egress)部分,入口部分主要用于进行入口流量限速(policing),出口部分主要用于队列调度(queuing scheduling).大 ...