2.1 HTML5概述
从2010年开始,HTML5和CSS3一直就是互联网技术应用的热点。以HTML5+CSS3为主的Web应用使互联网进入一个崭新的发展阶段。
2.1.1 HTML历史
HTML从诞生至今,经历了近30年的发展,其中经历的版本及发布日期如表2.1所示。
表2.1 HTML语言的发展过程
提示:从上面HTML发展列表来看,HTML没有1.0版本,这主要是因为当时有很多不同的版本。有些人认为Tim Berners-Lee的版本应该算初版,但是其版本中还没有img元素,也就是说HTML刚开始时仅能够显示文本信息。
2.1.2 浏览器检测
HTML5发展的速度非常快,因此不用担心浏览器的支持问题。用户可以访问www.caniuse.com网站,该网站按照浏览器的版本提供了详尽的HTML5功能支持情况。
如果通过浏览器访问www.html5test.com,该网站会直接显示用户浏览器对HTML5规范的支持情况。另外,还可以使用Modernizr(JavaScript库)进行特性检测,它提供了非常先进的HTML5和CSS3检测功能。建议使用Modernizr检测当前浏览器是否支持某些特性。
2.1.3 HTML5语法特性
HTML5以HTML4为基础,对HTML4进行了全面升级改造。与HTML4相比,HTML5在语法上有很大的变化,具体说明如下。
1.内容类型
HTML5的文件扩展名和内容类型保持不变。例如,扩展名仍然为“.html”或“.htm”,内容类型(ContentType)仍然为“text/html”。
2.文档类型
在HTML4中,文档类型的声明方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
在HTML5中,文档类型的声明方法如下。
<!DOCTYPE html>
当使用工具时,开发人员也可以在DOCTYPE声明中加入SYSTEM识别符,声明方法如下:
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
在HTML5中,DOCTYPE声明方式是不区分大小写的,引号也不区分是单引号还是双引号。
注意:使用HTML5的DOCTYPE会触发浏览器以标准模式显示页面。众所周知,网页都有多种显示模式,如怪异模式(Quirks)、标准模式(Standards)。浏览器根据DOCTYPE来识别该使用哪种解析模式。
3.字符编码
HTML4使用meta元素定义文档的字符编码,如下所示。
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5继续沿用meta元素定义文档的字符编码,但是简化了charset属性的写法,如下所示。
<meta charset="UTF-8">
对于HTML5来说,上述两种方法都有效,用户可以继续使用前面一种方式,即通过content元素的属性来指定,但是不能同时混用两种方式。
注意:在传统网站中,可能会存在下面的标记。在HTML5中,这种字符编码方式将被认为是错误的。
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
从HTML5开始,对于文件的字符编码推荐使用UTF-8。
4.标记省略
在HTML5中,元素的标记可以分为3种类型:不允许写结束标记、可以省略结束标记、开始标记和结束标记全部可以省略。下面简单介绍这3种类型各包括哪些HTML5新元素。
第一,不允许写结束标记的元素有:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
第二,可以省略结束标记的元素有:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
第三,可以省略全部标记的元素有:html、head、body、colgroup、tbody。
提示:不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的形式,只允许使用<元素/>的形式进行书写。例如:
错误的书写方式。
<br></br>
正确的书写方式。
<br/>
在HTML5之前的版本中,<br>这种写法可以继续沿用。
可以省略全部标记的元素是指元素可以完全被省略。注意,该元素还是以隐式的方式存在的。例如,将body元素省略,但它在文档结构中还是存在的,可以使用document.body访问。
5.布尔值
布尔型属性,如disabled与readonly等,当只写属性而不指定属性值时,属性值为true;如果属性值为false,可以不使用该属性。另外,要想将属性值设定为true,也可以将属性名设定为属性值,或将空字符串设定为属性值。
【示例1】下面是几种正确的书写方法。
<!--只写属性,不写属性值,代表属性为true--> <input type="checkbox" checked> <!--不写属性,代表属性为false--> <input type="checkbox"> <!--属性值=属性名,代表属性为true--> <input type="checkbox" checked="checked"> <!--属性值=空字符串,代表属性为true--> <input type="checkbox" checked="">
6.属性值
属性值可以加双引号,也可以加单引号。HTML5在此基础上做了一些改进,当属性值不包括空字符串、<、>、=、单引号或双引号等字符时,属性值两边的引号可以省略。
【示例2】下面的写法都是合法的。
<input type="text"> <input type='text'> <input type=text>