第一部分 HTML5实战
第1章 HTML5简介
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 xmlns="http://www.w3.org/1999/xhtml"> <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>
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字符编码如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
在HTML5中可以简写为：
<meta charset="utf-8" />
3．标签不再区分大小写
<div>绿叶学习网</DIV>
上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。
4．允许属性值不加引号
<div id=wrapper style=color:red>绿叶学习网</div>
上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。
5．允许部分属性的属性值省略
在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的升级版。
1.2 学前准备
很多初学者可能会问：“现在都是HTML5的时代了，HTML是不是被淘汰了呢？我们直接学HTML5就可以了，不用再去学‘过时’的HTML了吧？”
实际上，HTML是从HTML4.01升级到HTML5的。我们常说的HTML，指的是HTML4.01，而HTML5一般指的是相对于HTML4.01“新增加的内容”，并不是说HTML4.01被淘汰了。准确来说，你要学的HTML其实等于HTML4.01加上HTML5。
之前好多小伙伴以为只要学HTML5就可以了，没必要再去学HTML。殊不知，如果你没有HTML基础是学不来HTML5的。这个误区非常严重，曾经误导了非常多的初学者。因为HTML5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。HTML5除了新增部分标签之外，还增加了大量新技术：
▶ 视频音频
▶ 元素拖放
▶ 本地存储
▶ 文件操作
▶ 地理位置
……
以上这些新增技术都是使用JavaScript来操作的。也就是说，HTML5使得HTML从一门“标记语言”转变为一门“编程语言”。
由于大多数HTML5技术都是使用JavaScript操作的，因此想要学习HTML5，必须首先具备HTML、CSS和JavaScript基础知识。市面上很多书都是力求在一本书中把HTML4.01和HTML5都讲解了，其实这是非常不现实的。因为读者需要一个循序渐进的过程，才能更好地把技术学透。为了让小伙伴们能够达到真正前端工程师的水平，本系列教程用以下3本书的篇幅来帮助读者合理地学习：
▶ 《从0到1：HTML+CSS快速上手》，首先从HTML+CSS入门知识开始，打牢基础。
▶ 《从0到1：CSS进阶之旅》，深入研究真正工作中的开发技巧以及前端面试题。
▶ 《从0到1：HTML5+CSS3修炼之道》，学习HTML5+CSS3最新核心技术。
这几本书具有很强的连贯性，本书是另外两本书的高阶篇，并不适合没有基础的人学习。在这本书中，我们只介绍HTML5相对于HTML4.01新增加的内容。对于HTML和CSS的基础知识，可以参考前两个教程，不然在学习本书的过程中可能对有些知识无法理解。
HTML5虽然涉及的知识点很多，但是书中浓缩的都是精华。有一句话说得好：“干扰因素越少，越容易专注一件事。”因此，对于书中的技巧，我们也会以最简单的例子来讲解。我在编写的时候也是字斟句酌，该展开的会详细介绍，没用的知识一定会一笔带过。希望大家在学习中不要跳跃学习。
对于本书的学习，一定要下载这本书的源代码，一边查看源码，一边测试效果。
【解惑】
对于HTML5的学习，除了这本书，还有什么推荐的吗？
不管是学习什么技术，我们都应该养成阅读官方文档的习惯。在Web技术中，虽然官方文档都是英文的，但这些都是最权威的参考资料。对于翻译过来的资料，很多都是带有个人理解的，并不一定准确，甚至还会误导人。阅读官方文档，不仅可以更深入地理解技术本质，还可以顺便提高一下英文水平。
因此，对于HTML5的学习，建议大家多看看W3C官方文档和MDN官方文档，因为这两个是最权威的参考资料。
W3C官方地址：https://www.w3.org/TR/html5/
MDN官方地址：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5
1.3 本章练习
单选题
1．下面有关HTML、XHTML和HTML5的说法中，不正确的是（ ）。
A．<input type="text" readonly />等价于<input type="text" readonly="readonly" />
B．HTML相对于XHTML来说，书写更加严格，也更加纯净
C．HTML指的是HTML4.01，XHTML是XML风格的HTML4.01
D．HTML5中的标签不区分大小写，属性值也可以不加引号
2．从语义上来说，<input type="radio" checked />可以等价于（ ）。
A．<input type="radio" checked="checked" />
B．<input type="radio" checked="true" />
C．<input type="radio" checked="false" />
D．<input type="text" readonly="1"/>
注：本书所有练习题的答案请见本书的配套资源，配套资源的具体下载方式见前言。