浅谈HTML5与HTML
随着HTML5语言的成熟,HTML5的应用越来越广泛。那相对于之前的HTML4.0版本,HTML5增加了哪些新特性。下面是我的一些看法,欢迎大家指导。
1.什么是HTML5?
HTML5是什么?要回答这个问题,我们需要先了解一下HTML是什么。HTML的英文全称为Hyper Text Markup Language,即超文本标记语言。HTML5是HTML的一个新版本,随后和W3C的xhtml2.0相结合产生最新一代的超文本标记语言。(注:HTML不是编程语言,而是一种 标记语言)。
2.HTML5与HTML的区别?
1.文档类型的声明


以上是HTML4与HTML5的文档声明。对比可见,HTML5的声明方式更加简洁,使用和记忆也更加方便。
2.语义结构


HTML没有体现结构语义化的标签,通常用<div id="header"></div>来命名。
HTML5在语义上却有很大的优势。提供了一些新的标签,如上图所示。
3.HTML5的新特性
1.绘图功能(Canvas)
在网页中绘制图形一直是个大难题,我们不得不借助flash、silverlight 等插件。HTML5增加Canvas标签,通过javascript中getContext("2d") 对象属性和方法的引用绘图,甚至允许你与网页生成更多的交互,例如绘制直矩形、放大缩小等等。

2.媒体元素(Video、Audio)
HTML5提供了Audio和Video标签,我们可以不再需要第三方插件来渲染音频或视频。图例如下所示。
2.1 video
<video>属性标签

video示例

2.2 Audio
<audio>标签属性

audio示例

3.表单
1. HTML5 新的 Input 类型
–url
–number
–range
–Date pickers (date, month, week, time, datetime, datetime-local)
–search
–color
虽然主流浏览器都兼容HTML5的新标签,但是对于 IE8 及以下版本会存在一些兼容性问题,可通过JavaScript 创建一个没用的元素来解决。