HTML5和以前HTML4的区别整理


Posted in HTML / CSS onOctober 20, 2013

HTML5是HTML标准的下一个版本。虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同。最新最全的HTML5-HTML4对比信息请看http://dev.w3.org/html5/html4-differences/,貌似略多的样子。在这个IE还仍然存在的世界里,HTML5的差别先掌握一些即可,等全部支持后再细细研究也不迟。

1. 简化的语法
HTML5简化了很多细微的语法,例如doctype的声明,你只需要写<!doctype html>就行了。HTML 5 指定 UTF-8 编码的方式如下<meta charset="UTF-8">

2. <canvas>标签替代Flash
Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。

3 新增许多标签
HTML5设计的一个原则是更好的体现网站的语义性,所以增加了<header>和<footer>这样的标签,用来明确表示网页的结构;新增 <section> 和 <article> 标签,<section>和<article>也有利于清晰化网页的结构,更有利于SEO;新增 <menu> 和 <figure> 标签,<menu>可以被用于创建传统的菜单,也可以用于工具栏和上下文菜单。<figure>标签使得网页文字和图片的排版更专业; 新增 <audio> 和 <video> 标签,这两个标签可能是HTML5里面最有用的两个标签了,使用起来时也异乎方便,如在HTML5页面中嵌入视频只需一小段

复制代码
代码如下:

<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>

同理,音频等其他的也类似。

4. 全新的表单
HTML5对 <form> 和 <forminput> 标签进行了大量修改,添加了很多新的属性,也修改了很多属性,详细https://3water.com/w3school/html5/html_5_form_attributes.htm

5. 删除 <b> 和 <font> 标签,<frame>, <center>, <big> 标签

6.HTML5 支持了不同类型的存储类型

HTML5 支持本地存储,在之前版本中是通过 Cookie 实现的。HTML5 本地存储速度快而且安全。并且HTML5有两种不同的对象可用来存储数据,HTML5通过JS来存储和访问数据:

    localStorage 适用于长期存储数据,浏览器关闭后数据不丢失
    sessionStorage 只是针对一个session的数据存储,存储的数据在浏览器关闭后自动删除

总的来说,HTML5已经超越了标记语言的范畴,更富语义的标签将使得HTML5更有用处。Canvas+WEBGL等技术,实现无插件的动画以及图像、图形处理能力;本地存储,可实现offline应用;websocket,一改http的纯pull模型,实现数据推送的梦想;MathML,SVG等,支持更加丰富的render等等等等,现在对于对HTML5的了解还只停留在表面阶段,以后会多阅读一部分HTML5的书籍增加一下见识。

HTML / CSS 相关文章推荐
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
html5开发之viewport使用
Oct 17 #HTML / CSS
HTML5计时器小例子
Oct 15 #HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 #HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 #HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 #HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 #HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 #HTML / CSS
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHPMailer发送邮件
2016/12/28 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
js微信支付实现代码
2016/12/22 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
keras 读取多标签图像数据方式
2020/06/12 Python
python 19个值得学习的编程技巧
2020/08/15 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
幼儿园老师寄语
2014/04/03 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
工程款申请报告
2015/05/15 职场文书
单位政审意见范文
2015/06/04 职场文书
老人院义工活动感想
2015/08/07 职场文书
2016新年晚会开场白
2015/12/03 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers