HTML5并不仅仅是作为HTML标记语言的一个最新版本,更重要的是它制定了web应用开发的一系列标准, 成为第一个将web作为应用程序开发平台的HTML语言。
HTML5定义了一系列的新元素, 如新语义标签, 智能表单, 多媒体标签, 可以帮助开发者创建互联网应用, 同时有令人眼花的css3, 还提供了一些JavaScript的API(应用程序接口), 列如: 地理定位 重力感应, 硬件访问, 可以在浏览器内实现类似于原生应用, 制作webAPP, 甚至结合Canvas可开发一些网页板的小游戏啊。
H5其实只是一个泛称, 是由HTML5+CSS3+JavaScript等技术结合而成的一个应用开发平台。
1.HTML5的兼容性
新增的部分有兼容性的问题, 并不是所有的html5都是IE9兼容的, 有一些属性是需要IE10或者更高级的浏览器才能兼容, 所以, html5更多应用在移动端的方面, 因为移动端搭载的浏览器比较高级。
2.HTML5的骨架
代码示例:
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Title</title> <style> </style> </head> <body> </body> </html>
HTML5骨架是没有兼容的问题的。
反问：如果在xt的文档DTD里面书写h5的内容，会带来兼容问题么？
答：跟你用什么文档DTD没有关系 主要跟浏览器有关系。
3.HTML5新增的标签
新增的6大结构标签：
（1）header 网站头部 （2）nav 导航栏（3）section 类似于div （4）aside 文件侧栏（5）article 文章/文本内容（6）footer 网站脚部
作用：跟div一模一样 ，就是增加了语义性更加利于seo优化。
由于html5新增的标签有兼容问题，所以我们需要做兼容！怎么实现？
（1）利用document.creatElement()去创建html5的新标签，同时设置成块元素
<!–[if lt IE 9]>
<script type=”text/javascript”>
var e = “abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video”.split(‘, ‘);
var i= e.length;
while (i–){
document.createElement(e[i])
}
</script>
<![endif]–>
（1）借助于第三方的JS框架 =>html5shiv.min.js （推荐）配合IE的hack实现最佳兼容。
<!–[if lt IE 9]>
<script src=”js/html5shiv.min.js”></script>
<![endif]–>
注明：还有一些新增的用到的不多，所以了解即可，上述六个结构标签是最为常用的。
4.HTML5新增的智能表彰
以前学过 type =text ，submit ，reset，radio。。。。
type=”email” 限制用户输入必须为Email类型
type=”url” 限制用户输入必须为URL类型
type=”date” 自动生成一个日期控件
type=”number” 限制用户输入必须为数字类型
type=”range” 产生一个进度条的表单
type=”search” 产生一个搜索意义的表单
type=”color” 生成一个颜色选择表单
总结：智能表单的兼容比较大，在移动端用的较多，移动端会自动调取手机本身的控件（不同手机之间会略有不同，但如果需要高度自定义，就需要用JS去写了）。
