从0到1：HTML5+CSS3修炼之道最新章节_莫振杰著

1.1 HTML、XHTML和HTML5

大多数新手在学习HTML5时，往往都会分不清HTML、XHTML和HTML5之间究竟有什么区别。在本书开篇的第一节，我们先来解决这个困扰了相当多初学者的问题。

1.1.1 HTML和XHTML

HTML，全称“HyperText Mark-up Language（超文本标记语言）”，它是构成网页文档的主要语言。我们常说的HTML，指的是HTML4.01。

XHTML，全称“EXtensible HyperText Mark-up Language（扩展的超文本标记语言）”，它是XML风格的HTML4.01，我们可以称之为更严格、更纯净的HTML4.01。

HTML语法书写比较松散，比较利于开发者编写。但是对于机器如电脑、手机等来说，语法越松散，处理起来越困难。因此，为了让机器更好地处理HTML，才在HTML的基础上引入了XHTML。

XHTML相对于HTML来说，在语法上更加严格。XHTML和HTML的主要区别如下。

1.XHTML标签必须被关闭

在XHTML中，所有标签必须被关闭，如<p></p>、<div></div>等。此外，空标签也需要闭合，例如<br>要写成<br/>。

错误写法：<p>欢迎来到绿叶学习网。

正确写法：<p>欢迎来到绿叶学习网</p>。

2.XHTML标签以及属性必须小写

在XHTML中，所有标签以及标签属性必须小写，不能大小写混用，也不能全部都是大写。标签的属性值可以大写，但是我们依然建议全部采用小写。

错误写法：<Body><DIV></DIV></Body>。

正确写法：<body><div></div></body>。

3.XHTML标签属性必须用引号

在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。

错误写法：<input id=txt type=text/>。

正确写法：<input id="txt" type="text"/>。

4.XHTML标签用id属性代替name属性

在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。

错误写法：<div name="wrapper"></div>。

正确写法：<div id="wrapper"></div>。

下面是一个完整的XHTML文档：

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

<html>

<head>

</head>

<body>

<p>《从0到1：HTML+CSS快速上手》</p>

<p>《从0到1：CSS进阶之旅》</p>

</body>

</html>

1.1.2 HTML5

HTML指的是HTML4.01，XHTML是XML风格的HTML4.01，它是HTML的过渡版本。而HTML5指的是下一代HTML，也就是HTML4.01的升级版，如图1-1所示。

图1-1 HTML5

对于在HTML5版本中新增的技术，我们在后续章节会详细介绍。单纯从新增的标签上来看，HTML5有以下几个特点。

1.文档类型简写

基于HTML5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地简化了。

XHTML文档声明如下：

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

在HTML5中可以简写为：

<!DOCTYPE html>

2.字符编码简写

XHTML字符编码如下：

在HTML5中可以简写为：

3.标签不再区分大小写

<div>绿叶学习网</DIV>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。

4.允许属性值不加引号

<div id=wrapper style=color:red>绿叶学习网</div>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。

5.允许部分属性的属性值省略

在HTML5中，部分具有特殊性属性的属性值是可以省略的。例如，下面代码是完全符合HTML5规范的：

上面两句代码等价于：

在HTML5中，可以省略属性值的属性如表1-1所示。

表1-1 HTML5中可以省略属性值的属性

当然，对于哪些属性可以省略值，哪些不可以省略，我们不需要去记忆。在实际开发中用多了，自然就会记住了。

下面是一个完整的HTML5文档，小伙伴们可以好好跟XHTML文档对比一下。