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 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 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
实现树状结构的两种方法
2006/10/09 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
Python中集合类型(set)学习小结
2015/01/28 Python
python实现计算倒数的方法
2015/07/11 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
美国轮胎网站:Priority Tire
2018/11/28 全球购物
一名女生的自荐信
2013/12/08 职场文书
项目考察欢迎辞
2014/01/17 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
文艺晚会策划方案
2014/06/11 职场文书
2014年党员整改措施
2014/10/24 职场文书
2015年考研复习计划
2015/01/19 职场文书
云台山导游词
2015/02/03 职场文书