从0到1：HTML5+CSS3修炼之道
人民邮电出版社
北京
图书在版编目（CIP）数据
从0到1：HTML5+CSS3修炼之道/莫振杰著.--北京：人民邮电出版社，2020.1
ISBN 978-7-115-52505-5
Ⅰ.①从… Ⅱ.①莫… Ⅲ.①超文本标记语言—程序设计②网页制作工具 Ⅳ.①TP312②TP393.092.2
中国版本图书馆CIP数据核字（2019）第250865号
◆著 莫振杰
责任编辑 俞彬
责任印制 马振武
◆人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京市艺辉印刷有限公司印刷
◆开本：787×1092 1/16
印张：27.5
字数：757千字 2020年1月第1版
印数：1-2500册 2020年1月北京第1次印刷
定价：69.80元
读者服务热线：(010)81055410 印装质量热线：(010)81055316
反盗版热线：(010)81055315
广告经营许可证：京东工商广登字20170147号
作者根据自己多年的前后端开发经验，站在完全零基础读者的角度，详尽介绍了 HTML5 和CSS3的基础知识、新技术及各种高级开发技巧。
全书分为两大部分：第一部分介绍 HTML5的新技术，主要包括新增元素、新增属性、元素拖放、文件操作、本地存储、音频视频、离线应用等；第二部分介绍 CSS3 的新技术，主要包括新增选择器、CSS3变形、CSS3过渡、CSS3动画、多列布局、滤镜效果、弹性盒子模型等。
为了方便高校老师教学，本书不但配备了所有案例的源代码，还提供了配套的PPT课件。本书适合作为前端开发人员的参考书，也可以作为大中专院校相关专业的教学参考书。
如果你想要快速上手前端开发，又岂能错过“从0到1”系列？
这是一本非常有个性的书，学起来非常轻松！当初看到这本书时，我们很惊喜，简直像是发现了新大陆。
你随手翻几页，就能看出来作者真的是用“心”去写的。
作为忠实的读者，很幸运能够参与本书的审稿及设计。事实上，对于这样一本难得的好书，相信你看了之后，也会非常乐意帮忙将它完善得更好。
——五叶草团队
一本好书不仅可以让读者学得轻松，更重要的是可以让读者少走弯路。如果你需要的不是大而全，而是恰到好处的前端开发教程，那么不妨试着看一下这本书。
本书和“从0到1”系列中的其他图书，大多是源于我在绿叶学习网分享的超人气在线教程。由于教程的风格独一无二、质量很高，因而累计获得超过100000读者的支持。更可喜的是，我收到过几百封的感谢邮件，大多来自初学者、已经工作的前端工程师，还有不少高校老师。
我从开始接触前端开发时，就在记录作为初学者所遇到的各种问题。因此，我非常了解初学者的心态和困惑，也非常清楚初学者应该怎样才能快速而无阻碍地学会前端开发。我用心总结了自己多年的学习和前端开发经验，完全站在初学者的角度而不是已经学会的角度来编写本书。我相信，本书会非常适合零基础的读者轻松地、循序渐进地展开学习。
之前，我问过很多小伙伴，看“从0到1”这个系列图书时是什么感觉。有人回答说：“初恋般的感觉。”或许，本书不一定十全十美，但是肯定会让你有初恋般的怦然心动。
配套习题
每章后面都有习题，这是我和一些有经验的前端工程师精心挑选、设计的，有些来自实际的前端开发工作和面试题。希望小伙伴们能认真完成每章练习，及时演练、巩固所学知识点。习题答案放于本书的配套资源中，具体下载方式见下文。
配套网站
绿叶学习网（www.lvyestudy.com）是我开发的一个开源技术网站，该网站不仅可以为大家提供丰富的学习资源，还为大家提供了一个高质量的学习交流平台，上面有非常多的技术“大牛”。小伙伴们有任何技术问题都可以在网站上讨论、交流，也可以加QQ群讨论交流：519225291、593173594（只能加一个QQ群）。
配套资源下载及使用说明
本书的配套资源包括习题答案、源码文件、配套PPT教学课件。扫描下方二维码，关注微信公众号“职场研究社”，并回复“52505”，即可获得资源下载方式。
特别鸣谢
本书的编写得到了很多人的帮助。首先要感谢人民邮电出版社的赵轩编辑和罗芬编辑，有他们的帮助本书才得以顺利出版。
感谢五叶草团队的一路陪伴，感谢韦雪芳、陈志东、秦佳、程紫梦、莫振浩，他们花费了大量时间对本书进行细致的审阅，并给出了诸多非常棒的建议。
最后要感谢我的挚友郭玉萍，她为“从0 到1”系列图书提供了很多帮助。在人生的很多事情上，她也一直在鼓励和支持着我。认识这个朋友，也是我这几年中特别幸运的事。
由于水平有限，书中难免存在不足之处。小伙伴们如果遇到问题或有任何意见和建议，可以发送电子邮件至lvyestudy@foxmail.com，与我交流。此外，也可以访问绿叶学习网（www.lvyestudy.com），了解更多前端开发的相关知识。
作者
大多数新手在学习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的主要区别如下。
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>
HTML指的是HTML4.01，XHTML是XML风格的HTML4.01，它是HTML的过渡版本。而HTML5指的是下一代HTML，也就是HTML4.01的升级版，如图1-1所示。
对于在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所示。
当然，对于哪些属性可以省略值，哪些不可以省略，我们不需要去记忆。在实际开发中用多了，自然就会记住了。
下面是一个完整的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的升级版。
很多初学者可能会问：“现在都是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.下面有关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"/>
注：本书所有练习题的答案请见本书的配套资源，配套资源的具体下载方式见前言。
