下载掌阅APP，畅读海量书库
立即打开
大多数新手在学习HTML5时，往往都会分不清HTML、XHTML和HTML5之间究竟有什么区别。在本书开篇的第一节，我们先来解决这个困扰了相当多初学者的问题。
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的主要区别如下。
在XHTML中，所有标签必须被关闭，如<p></p>、<div></div>等。此外，空标签也需要闭合，例如<br>要写成<br/>。
错误写法：<p>欢迎来到绿叶学习网。
正确写法：<p>欢迎来到绿叶学习网</p>。
在XHTML中，所有标签以及标签属性必须小写，不能大小写混用，也不能全部都是大写。标签的属性值可以大写，但是我们依然建议全部采用小写。
错误写法：<Body><DIV></DIV></Body>。
正确写法：<body><div></div></body>。
在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
错误写法：<input id=txt type=text/>。
正确写法：<input id="txt" type="text"/>。
在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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>“从0到1”系列图书</title>
</head>
<body>
<p>《从0到1：HTML+CSS快速上手》</p>
<p>《从0到1：CSS进阶之旅》</p>
<p>《从0到1：HTML5+CSS3修炼之道》</p>
</body>
</html>
HTML指的是HTML4.01，XHTML是XML风格的HTML4.01，它是HTML的过渡版本。而HTML5指的是下一代HTML，也就是HTML4.01的升级版，如图1-1所示。
图1-1 HTML5
对于在HTML5版本中新增的技术，我们在后续章节会详细介绍。单纯从新增的标签上来看，HTML5有以下几个特点。
基于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>
XHTML字符编码如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
在HTML5中可以简写为：
<meta charset="utf-8" />
<div>绿叶学习网</DIV>
上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。
<div id=wrapper style=color:red>绿叶学习网</div>
上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。
在HTML5中，部分具有特殊性属性的属性值是可以省略的。例如，下面代码是完全符合HTML5规范的：
<input type="text" readonly/>
<input type="checkbox" checked/>
上面两句代码等价于：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>
在HTML5中，可以省略属性值的属性如表1-1所示。
表1-1 HTML5中可以省略属性值的属性
当然，对于哪些属性可以省略值，哪些不可以省略，我们不需要去记忆。在实际开发中用多了，自然就会记住了。
下面是一个完整的HTML5文档，小伙伴们可以好好跟XHTML文档对比一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>“从0到1”系列图书</title>
</head>
<body>
<p>《从0到1：HTML+CSS快速上手》</p>
<p>《从0到1：CSS进阶之旅》</p>
<p>《从0到1：HTML5+CSS3修炼之道》</p>
</body>
</html>
最后，一句话概括HTML、XHTML和HTML5 ：HTML指的是HTML4.01，XHTML是HTML的过渡版，HTML5是HTML的升级版 。