随着HTML5语言的成熟,HTML5的应用越来越广泛。那相对于之前的HTML4.0版本,HTML5增加了哪些新特性。下面是我的一些看法,欢迎大家指导。
1.什么是HTML5?
HTML5是什么?要回答这个问题,我们需要先了解一下HTML是什么。HTML的英文全称为Hyper Text Markup Language,即超文本标记语言。HTML5是HTML的一个新版本,随后和W3C的xhtml2.0相结合产生最新一代的超文本标记语言。(注:HTML不是编程语言,而是一种 标记语言)。
2.HTML5与HTML的区别?
1.文档类型的声明
![](https://img.haomeiwen.com/i3827605/6ec6b63972b20f35.png)
![](https://img.haomeiwen.com/i3827605/01bf2cc05886ad76.png)
以上是HTML4与HTML5的文档声明。对比可见,HTML5的声明方式更加简洁,使用和记忆也更加方便。
2.语义结构
![](https://img.haomeiwen.com/i3827605/c31d178360d62abc.png)
![](https://img.haomeiwen.com/i3827605/7a3d3360918bea17.png)
HTML没有体现结构语义化的标签,通常用<div id="header"></div>来命名。
HTML5在语义上却有很大的优势。提供了一些新的标签,如上图所示。
3.HTML5的新特性
1.绘图功能(Canvas)
在网页中绘制图形一直是个大难题,我们不得不借助flash、silverlight 等插件。HTML5增加Canvas标签,通过javascript中getContext("2d") 对象属性和方法的引用绘图,甚至允许你与网页生成更多的交互,例如绘制直矩形、放大缩小等等。
![](https://img.haomeiwen.com/i3827605/3a88732f12125ad4.png)
2.媒体元素(Video、Audio)
HTML5提供了Audio和Video标签,我们可以不再需要第三方插件来渲染音频或视频。图例如下所示。
2.1 video
<video>属性标签
![](https://img.haomeiwen.com/i3827605/8ff4afe0b7dc5df8.png)
video示例
![](https://img.haomeiwen.com/i3827605/65f54e1e9ae4c2fa.png)
2.2 Audio
<audio>标签属性
![](https://img.haomeiwen.com/i3827605/4ed9c0560864228f.png)
audio示例
![](https://img.haomeiwen.com/i3827605/24edb1216d80ee50.png)
3.表单
1. HTML5 新的 Input 类型
–url
–number
–range
–Date pickers (date, month, week, time, datetime, datetime-local)
–search
–color
虽然主流浏览器都兼容HTML5的新标签,但是对于 IE8 及以下版本会存在一些兼容性问题,可通过JavaScript 创建一个没用的元素来解决。
网友评论