第2章
HTML 5与HTML 4的区别
2.1  语法的改变
2.2  新增的元素和废除的元素
2.3  新增的属性和废除的属性
2.4  全局属性
HTML 5以HTML 4为基础，对HTML 4进行了大量的修改。本章从总体上概要介绍到底HTML 5对HTML 4进行了哪些修改，HTML 5与HTML 4之间比较大的区别是什么。
学习内容：
❑掌握HTML 5与HTML 4在基本语法上有什么区别，这个基本语法区别包括DOCTYPE 声明、内容类型（ContentType ）、字符编码的指定方法、元素标记的省略、具有布尔值的属性、引号的省略等几个方
面。
❑了解在HTML 5中新增了哪些元素，删除了哪些HTML 4中的元素，为什么要删除这些元素，用什么元素或方法来取代这些被删除的元素。
❑了解在HTML 5中新增了哪些属性，删除了哪些HTML 4中的属性，在HTML 5中用什么方法来取代这些被删除的属性。
❑掌握什么是全局属性，掌握本章中介绍的几个常用全局属性，它们是contentEditable 属性、designMode 属性、hidden 属性、spellcheck 属性，以及tabindex 属性。
2.1  语法的改变
css最新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 5语法解析的算法也都提供了详细的记载，所以各Web 浏览器的供应商们可以把HTML 5分析器集中封装在自己的浏览器中。最新的Firefox （默认为4.0以后的版本）与WebKit 浏览器引擎中都迅速地封装了供HTML 5使用的分析器，IE （Internet Explorer ）与Opera 也在努力加快对于HTML 5的支持—浏览器兼容性的提高指日可待。
接下来，让我们具体看一下在HTML 5中，到底对语法进行了哪些改变。
10HTML 5与CSS 3
权威指南
2.1.2  HTML 5中的标记方法
首先，让我们来看一下在HTML 5中的标记方法。
1. 内容类型（ContentType ）
首先，HTML 5的文件扩展符与内容类型保持不变。也就是说，扩展符仍然为“.html ”或“.htm ”，内容类型（ContentType ）仍然为“text/html ”。
2. DOCTYPE 声明
DOCTYPE 声明是HTML 文件中必不可少的，它位于文件第一行。在HTML 4中，它的声明方法如下：
<!D O C T Y P E  h t m l  P U B L I C  "-//W 3C //D T D  X H T M L  1.0 T r a n s i t i o n a l //E N ""/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 版本的兼容性
HTML 5的语法是为了保证与之前的HTML 语法达到最大程度的兼容而设计的。例如，符合“没有<p>的结束标记”的HTML 代码随处可见，HTML 5中并没有把这种情况作为错误来处理，而是允许存在这种情况，但明确地规定了这种情况应该怎么处理。
第2章　HTML 5与HTML 4的区别
11
那么，针对这个问题，让我们从元素标记的省略、具有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 。
说明：“不允许写结束标记的元素”是指，不允许使用开始标记与结束标记将元素括起来的
形式，只允许使用“<；元素/>”的形式进行书写。例如“<br>...</br>”的书写方式是错误的，正确的书写方式为“<br/>”。当然，HTML 5之前的版本中<br>这种写法可以被沿用。
“可以省略全部标记的元素”是指，该元素可以完全被省略。请注意，即使标记被省略了，该元素还是以隐式的方式存在的。例如将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 的属性值两边的引号-->
12HTML 5与CSS 3
权威指南
<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 属性指定字符编码、<p>元素的结束标记的省略、使用<；元素/>的方式来结束<meta>元素，以及<br>元素等本节中所介绍到的知识要点。
代码清单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标记示例
2.2  新增的元素和废除的元素
本节将详细介绍HTML 5中新增和废除了哪些元素
。
2.2.1  新增的结构元素
在HTML 5中，新增了以下与结构相关的元素：
❑section
元素第
2章　HTML 5与HTML 4的区别
13
section 元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。
HTML 5中代码示例：
<section>...</section>
HTML 4中代码示例：
<div>...</div>
❑article 元素
article 元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章。
HTML 5中代码示例：
<article>...</article>
HTML 4中代码示例：
<div>...</div>
❑aside 元素
aside 元素表示article 元素的内容之外的、与article 元素的内容相关的辅助信息。
HTML 5中代码示例：
<aside>…</aside>
HTML 4中代码示例：
<div>...</div>
❑header 元素
header 元素表示页面中一个内容区块或整个页面的标题。
HTML 5中代码示例：
<header>...</header>
HTML 4中代码示例：
<div>...</div>
❑hgroup 元素
hgroup 元素用于对整个页面或页面中一个内容区块的标题进行组合。
HTML 5中代码示例：
<hgroup>...</hgroup>
HTML 4中代码示例：
<div>...</div>
❑footer 元素
footer 元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。
HTML 5中代码示例：14HTML 5与CSS 3
权威指南

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。