HTML5对比HTML4的主要改变和改进总结


Posted in HTML / CSS onMay 27, 2016

这段时间一直在帮老师做项目比较忙,经常课都没去上,就泡在实验室里,也没什么时间看其他东西了。我在项目中分配到了前端页面设计这一块,有时候浏览网页看到移动端APP和html5最近都比较火的,随着移动互联网快速发展,尤其是4G时代已经来临,加上微软在win10中搭载了新的浏览器edge取代了IE的地位,所以现在很多网站都开始抛弃IE朝着html5发展,这是一种趋势,尤其是在移动端网页这块,而PC端在不同浏览器之间还是有部分兼容性问题亟待解决,但是不久的将来,html5将会成为浏览器标记语言的霸主。

什么是html5?
html5最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言,随后与W3C组织的xhtml2.0(标准)相结合,产生现在最新一代的超文本标记语言。可以简单点理解成:HTML 5 ≈ HTML+CSS 3+javascript+API

我们现在web前端开发的静态网页,一般都是html4.01。同时符合W3C规范。那么他们两者直接又有什么实质性的区别呢?

1.在文档类型声明上

html:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

    >  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  

html5:

XML/HTML Code复制内容到剪贴板
    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>    
    由这两者对比可见:在文档声明上,html4有很长的一段代码,并且很难记住这段代码,想必很多人都是靠工具直接生成的吧?而html5却是不同, 只有简简单单的声明,这也方便人们的记忆。

2.设置页面字符编码
在HTML5中可以使用对<meta>元素直接追加charset属性的方式来指定字符编码, 如下所示:

html:<meta charset= “UTF-8 ”>

html5:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

3.在结构语义上

html:没有体现结构语义化的标签,我们通常都是这样来命名的div id="header".这样表示网站的头部。

html5:在语义上却有很大的优势。提供了一些新的标签,比如:header、article、footer

提供这样的标签有什么样的好处呢?我觉得最主要还是在SEO的优化上,不管是我们自己来对网页模块命名,还是有这样的标签。因为做网站 最终的目的只有一个,那就是盈利。想盈利的话,就只有通过SEO优化的技术,把你网站排名做上来,这样你的网站才有价值,正是这一点,html5符合了这一点。为什么这么说呢?因为他定义的这些标签,更加有利于优化,蜘蛛能识别你。

4.其他新增内容
新增的input类型包括:number(数字),date(日期),color(颜色),range(范围)等等。

新的内联元素包括 time、meter 和 progress。

新的内嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。

5.<canvas>标签替代Flash
Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就 能和用户产生UI交互。虽然目前<canvas>标签还不能实现Flash的所有功能,但是很快<canvas>就会让 Flash看起来老土,哈哈!

6.废除的元素
能用css替代的元素:对于basefont、big、font、s、tt、u、这些元素,由于它们的功能都是纯粹的 画面展示服务的,而HTML5中提倡把画面展示性功能放在css样式中统一编辑,所以将这些元素废除。

不再使用Frame框架:由于frame框架对网页可用性存在负面影响,html5中不支持frame,只支持iframe框架,或者用服务器创建的多个页面组成的复合页面的形式。

只有部分浏览器支持的元素:applet、bgsound、blink、marquee等元素。bgsound和marquee只被ie支持,被html5废除。其中applet元素可由embed元素或object元素替代,bgsound元素可由audio元素替代,marquee可以由javascript编程方式替代。

总结:虽然在前几年html5已经出来了,但是那时候因为不够成熟,时机不对,才没被兴起。在这互联网高速发展的时候,也是来临4G的时代。 我们还不学习hml5+css3我们就out了!

HTML / CSS 相关文章推荐
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 #HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 #HTML / CSS
深入理解HTML的FormData对象
May 17 #HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 #HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 #HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 #HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 #HTML / CSS
You might like
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
nginx下安装php7+php5
2016/07/31 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
犀利的js 函数集合
2009/06/11 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python匿名函数的使用方法解析
2019/10/10 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
员工自我鉴定范文
2013/10/06 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
社区灵活就业证明
2014/11/03 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript