2.1 语法的改变_HTML 5与CSS 3权威指南（第4版·上册）-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

2.1　语法的改变

2.1.1　HTML 5的语法变化

与HTML 4相比，HTML 5在语法上发生了很大的变化。可能很多人会因为“之前的HTML已经相当普及”，“如果改变基础语法，会产生什么影响”等想法而感到不安。

但是，HTML 5中的语法变化，与其他开发语言中的语法变化在根本意义上有所不同。它的变化，正是因为在HTML 5之前几乎没有符合标准规范的Web浏览器导致的。

HTML的语法是在SGML（Standard Generalized Markup Language）语言的基础上建立起来的。但是SGML语法非常复杂，要开发能够解析SGML语法的程序也很不容易，因此很多浏览器都不包含SGML的分析器。因此，虽然HTML基本上遵从SGML的语法，但是对于HTML的执行在各浏览器之间并没有一个统一的标准。

在这种情况下，各浏览器之间的互兼容性和互操作性在很大程度上取决于网站或网络应用程序的开发者在开发上所做的共同努力，而浏览器本身始终是存在缺陷的。

如上所述，在HTML 5中提高Web浏览器之间的兼容性是它的一个很大的目标，为了确保兼容性，就要有一个统一的标准。因此，在HTML 5中，围绕着这个Web标准，重新定义了一套在现有HTML的基础上修改而来的语法，以便各浏览器在运行HTML的时候能够符合一个通用标准。

因为关于HTML 5语法解析的算法也都提供了详细的记载，所以各Web浏览器的供应商可以把HTML 5分析器集中封装在自己的浏览器中。最新的Firefox（默认为4.0以后的版本）与WebKit浏览器引擎中都迅速地封装了供HTML 5使用的分析器，IE（Internet Explorer）与Opera也在努力加快对HTML 5的支持——提高浏览器的兼容性指日可待。

接下来，让我们具体看一下在HTML 5中对语法进行了哪些改变。

2.1.2　HTML 5中的标记方法

首先看一下HTML 5中的标记方法。

1.内容类型（ContentType）

首先，HTML 5的文件扩展符与内容类型保持不变。也就是说，扩展符仍然为“.html”或“.htm”，内容类型（ContentType）仍然为“text/html”。

2.DOCTYPE声明

DOCTYPE声明是HTML文件中必不可少的，它位于文件第一行。在HTML 4中，它的声明方法如下：

<!DOCTYPE html PUBLIC "-// W3C// DTD XHTML 1.0 Transitional// EN"
"http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在HTML 5中，刻意不使用版本声明，一份文档将会适用所有版本的HTML。HTML 5中的DOCTYPE声明方法（不区分大小写）如下：

<!DOCTYPE html>

另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM识别符，声明方法如下：

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

在HTML 5中像这样的DOCTYPE声明方式是允许的（不区分大小写，引号不区分是单引号还是双引号）。

3.指定字符编码

在HTML 4中，使用meta元素的形式指定文件中的字符编码，如下所示：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

在HTML 5中，可以使用对<meta>元素直接追加charset属性的方式来指定字符编码，如下所示：

<meta charset="UTF-8">

两种方法都有效，可以继续使用前面一种方式（通过content元素的属性来指定），但是不能同时混合使用两种方式。在以前的网站代码中可能会存在下面代码所示的标记方式，但在HTML 5中，这种字符编码方式将被认为是错误的，这一点请注意。

<meta charset="UTF-8" http-equiv="Content-Type"
content="text/html;charset=UTF-8">

从HTML 5开始，对于文件的字符编码推荐使用UTF-8。

2.1.3　HTML 5确保的兼容性

HTML 5的语法是为了保证与之前的HTML语法也能够达到最大程度的兼容而设计的。例如，符合“没有的结束标记”的HTML代码随处可见，HTML 5中并没有把这种情况作为错误来处理，而是允许存在这种情况，但明确规定了这种情况应该怎么处理。

那么，针对这个问题，我们从元素标记的省略、具有boolean值的属性、引号的省略这几方面来详细看一下在HTML 5中是如何确保与之前版本的HTML实现兼容的。

1.可以省略标记的元素

在HTML 5中，元素的标记可以省略。具体来说，分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。

接着，我们针对这三类情况列举一个元素清单，其中包括本书到现在为止还没有介绍的HTML 5中的新元素（关于这些新元素，2.2节将进行介绍）。

·不允许写结束标记的元素有：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。

说明

“不允许写结束标记的元素”是指不允许使用开始标记与结束标记将元素括起来的形式，只允许使用“<元素/>”的形式进行书写。例如“ ...”的书写方式是错误的，只允许“ ”的书写形式。当然，HTML 5之前的 这种写法可以被沿用。

“可以省略全部标记的元素”是指该元素可以完全被省略。注意，即使标记被省略了，该元素还是以隐式的方式存在的。例如省略不写body元素时，在文档结构中它还是存在的，可以使用document.body访问。

2.具有boolean值的属性

对于具有boolean值的属性，例如disabled与readonly等，当只写属性而不指定属性值时，表示属性值为true，如果想要将属性值设为false，则可以不使用该属性。另外，要想将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。

属性值的设定方法可以参考下面的代码示例：

<!-- 只写属性不写属性值代表属性为true-->
<input type="checkbox" checked>
<!-- 不写属性代表属性为false-->
<input type="checkbox">
<!-- 属性值= 属性名, 代表属性为true-->
<input type="checkbox" checked="checked">
<!-- 属性值= 空字符串, 代表属性为true-->
<input type="checkbox" checked="">

3.省略引号

大家已经知道，在指定属性值的时候，属性值两边加引号时既可以用双引号，也可以用单引号。

HTML 5在此基础上做了一些改进，当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性值两边的引号可以省略。如下面的代码所示：

<!-- 请注意type 的属性值两边的引号 -->
<input type="text">
<input type='text'>
<input type=text>

2.1.4　标记示例

现在，我们通过前面学到的HTML 5的语法知识来看一个关于HTML 5标记的示例。

代码清单2-1完全是用HTML 5写成的。其中省略了<html>、<head>、<body>等元素。可以通过这个示例复习一下HTML 5的DOCTYPE声明、用<meta>元素的charset属性指定字符编码、元素的结束标记的省略、使用<元素/>的方式来结束<meta>元素，以及 元素等本节中所介绍的知识要点。

代码清单2-1　HTML 5标记示例

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML 5 标记示例</title>
<p> 这段代码是根据HTML 5 语法
<br/> 编写出来的。

这段代码在Firefox 4浏览器中的运行结果如图2-1所示，另外，本书中如果没有特别说明使用什么浏览器，则使用的都是Firefox 4浏览器。

图2-1　HTML 5标记示例