一、HTML5的发展历程
+ html演变的几个版本: html2.0、html3.2、html4.0、html4.01、html5。
+ 其中在html4.01发布之后,还发布了xtml1.0,它是基于html4.01的,没有新增任何新的元素和属性;xhtml遵循更严格的语法规范,xhtml定义的新的MIME类型(内容类型)为application/xhtml+xml,但是xtml1.0版本的网页仍然可以以text/html类型来发布,xtml1.0就是一个xml风格的html;在xtml1.0之后就是xtml1.1,xtml1.1版本的网页只能通过application/xhtml+xml类型来发布,它好像就是一个货真价实的xml;随后的xtml2.0之后就是html5.
二、HTML5的新特性
+ 用于绘画的canvas
+ 用于媒介回放的video和audio
+ 对本地离线存储的更好的支持-localStorage数据永久存储,sessionStorage关闭浏览器之后数据自动删除.
+ 增加了一些语义化标签:header、footer、nav、aside、section、main、figure、template、data、time等
(https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list)
+ 对web表单的改进,新增表单功能,如新增type类型:color、datatime、email、number等
(https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attr-type)
+ 新增技术如:web workers(让浏览器在后台运行javascript)、web sockets(web应用程序可以实时的获取或推送信息)、 geolocation(使用地理位置定位)等
三、HTML5新标签的使用
+ HTML5新标签浏览器兼容问题
IE9以下的IE浏览器不支持HTML5,可以通过document.createElement来动态添加HTML5中特有的标签:
或是直接使用成熟的框架:
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
也有可能用户会禁用脚本,所以最好还是在上面的script标签下加一段noscript标签:
(更多可参见:http://www.cnblogs.com/pigtail/archive/2013/01/07/2849136.html)
+ HTML4中创建文档大纲的唯一方式是使用<h1>到<h6>元素,如果想让大纲中只有唯一一个根节点,代码中只能写一个<h1>;
HTML5中,每个节点都可以有自己的<h1>元素。(HTML5的大纲算法)
四、文档类型
1、为什么HTML5只需写<!DOCTYPE html>?
+ html5不基于SGML(标准通用标记语言),不需要引用DTD,所以文档声明可以直接写成 <!DOCTYPE html>
+ html4.01基于SGML,所以<!DOCTYPE>(文档声明)中必须引用DTD,DTD规定了标记语言的规则,只有引用了它,浏览器才能正 确的呈现内容
2、DOCTYPE的作用
+ 告诉浏览器用什么文档类型来解析文档
3.HTML4.01和HTML5之间的差异
+ HTML4.01有三种文档声明(同xhtml的文档声明一样有三种:strict、transitional、frameset),HTML5只有一种。
HTML4.01的三种文档声明:
+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
五、浏览器的模式
1、标准模式和兼容模式(怪异模式)的区别:
+ 标准模式下浏览器渲染页面有了统一的规范,兼容模式下不同浏览器有自己一套渲染页面的规范。
2、触发标准模式和兼容模式的方法:
2.1 浏览器以兼容模式渲染页面
+ 文档不指明doctype(没有写DOCTYPE或是DOCTYPE不是在第一行,DOCTYPE不在第一行浏览器会认为页面不具备DOCTYPE)
to be continued