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浏览器兼容
Dec 14 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
取选中的radio的值
2010/01/11 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
用python实现面向对像的ASP程序实例
2014/11/10 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
pandas 将索引值相加的方法
2018/11/15 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
电子商务专业个人的自我评价
2013/12/19 职场文书
双方协议书
2014/04/22 职场文书
党员公开承诺书内容
2014/05/20 职场文书
民族学专业求职信
2014/07/28 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
公司酒会致辞
2015/07/30 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python