作者：莫振杰

出版社：人民邮电出版社有限公司

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

从0到1：HTML5+CSS3修炼之道试读：

前言

一本好书不仅可以让读者学得轻松，更重要的是可以让读者少走弯路。如果你需要的不是大而全，而是恰到好处的前端开发教程，那么不妨试着看一下这本书。

本书和“从0到1”系列中的其他图书，大多是源于我在绿叶学习网分享的超人气在线教程。由于教程的风格独一无二、质量很高，因而累计获得超过100000读者的支持。更可喜的是，我收到过几百封的感谢邮件，大多来自初学者、已经工作的前端工程师，还有不少高校老师。

我从开始接触前端开发时，就在记录作为初学者所遇到的各种问题。因此，我非常了解初学者的心态和困惑，也非常清楚初学者应该怎样才能快速而无阻碍地学会前端开发。我用心总结了自己多年的学习和前端开发经验，完全站在初学者的角度而不是已经学会的角度来编写本书。我相信，本书会非常适合零基础的读者轻松地、循序渐进地展开学习。

之前，我问过很多小伙伴，看“从0到1”这个系列图书时是什么感觉。有人回答说：“初恋般的感觉。”或许，本书不一定十全十美，但是肯定会让你有初恋般的怦然心动。

配套习题

每章后面都有习题，这是我和一些有经验的前端工程师精心挑选、设计的，有些来自实际的前端开发工作和面试题。希望小伙伴们能认真完成每章练习，及时演练、巩固所学知识点。习题答案放于本书的配套资源中，具体下载方式见下文。

配套网站

绿叶学习网（www.lvyestudy.com）是我开发的一个开源技术网站，该网站不仅可以为大家提供丰富的学习资源，还为大家提供了一个高质量的学习交流平台，上面有非常多的技术“大牛”。小伙伴们有任何技术问题都可以在网站上讨论、交流，也可以加QQ群讨论交流：519225291、593173594（只能加一个QQ群）。

配套资源下载及使用说明

本书的配套资源包括习题答案、源码文件、配套PPT教学课件。扫描下方二维码，关注微信公众号“职场研究社”，并回复“52505”，即可获得资源下载方式。职场研究社

特别鸣谢

本书的编写得到了很多人的帮助。首先要感谢人民邮电出版社的赵轩编辑和罗芬编辑，有他们的帮助本书才得以顺利出版。

感谢五叶草团队的一路陪伴，感谢韦雪芳、陈志东、秦佳、程紫梦、莫振浩，他们花费了大量时间对本书进行细致的审阅，并给出了诸多非常棒的建议。

最后要感谢我的挚友郭玉萍，她为“从0 到1”系列图书提供了很多帮助。在人生的很多事情上，她也一直在鼓励和支持着我。认识这个朋友，也是我这几年中特别幸运的事。

由于水平有限，书中难免存在不足之处。小伙伴们如果遇到问题或有任何意见和建议，可以发送电子邮件至lvyestudy@foxmail.com，与我交流。此外，也可以访问绿叶学习网（www.lvyestudy.com），了解更多前端开发的相关知识。作者第一部分 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中，所有标签必须被关闭，如

错误写法：

欢迎来到绿叶学习网。

正确写法：

欢迎来到绿叶学习网

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

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

错误写法：

正确写法：

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

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

错误写法：。

正确写法：。

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

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

错误写法：

正确写法：

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

《从0到1：HTML+CSS快速上手》

《从0到1：CSS进阶之旅》

《从0到1：HTML5+CSS3修炼之道》

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

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

1.文档类型简写

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

XHTML文档声明如下：

在HTML5中可以简写为：

2.字符编码简写

XHTML字符编码如下：

在HTML5中可以简写为：

3.标签不再区分大小写

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

4.允许属性值不加引号

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

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

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

上面两句代码等价于：

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

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

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

《从0到1：HTML+CSS快速上手》

《从0到1：CSS进阶之旅》

《从0到1：HTML5+CSS3修炼之道》

最后，一句话概括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/HTML51.3 本章练习

单选题

1.下面有关HTML、XHTML和HTML5的说法中，不正确的是（ ）。

A.等价于

B.HTML相对于XHTML来说，书写更加严格，也更加纯净

C.HTML指的是HTML4.01，XHTML是XML风格的HTML4.01

D.HTML5中的标签不区分大小写，属性值也可以不加引号

2.从语义上来说，可以等价于（ ）。

A.

B.

C.

D.

注：本书所有练习题的答案请见本书的配套资源，配套资源的具体下载方式见前言。第2章 新增元素2.1 结构元素

在HTML5之前，对于页面中较大块的结构（如导航、内容区、侧边栏、底部等），一般都是使用div元素来实现。但是我们都知道，div是一个无语义的元素，如果整个页面都使用div来实现，那么可读性和可维护性是非常差的。

在HTML5中，新增了一组结构元素，以帮助完善页面的语义化，提高可读性、可维护性以及SEO（即搜索引擎优化）。语义化可不是简单的一个术语，可以说是HTML中最重要的概念。

对于语义化这个概念，我们在《从0到1：CSS进阶之旅》中已经做过非常详细的介绍了。由于内容很多，具体请参考该书，此处不再赘述。

HTML5新增的主要结构元素有6个：header、nav、article、aside、section、footer。

HTML5的结构元素有着比较严格的使用规范，在这一节中会详尽介绍每一个结构元素的使用场合，建议大家字斟句酌地阅读，把每一个结构元素都理解透。

还有一点要特别说明，大多数有关HTML5的书对结构元素的介绍都是笼统过一遍就算了，以致很多初学者以为这些结构元素随便看看、随便用用就算了。实际上，语义化可以说是前端面试必考的内容之一，小伙伴们一定要非常重视。2.1.1 header元素

在HTML5中，header元素一般用于3个地方：页面头部、文章头部（article元素）和区块头部（section元素）。

当用于页面头部时，header元素一般用于包含网站名称、页面LOGO、顶部导航、介绍信息等，如图2-1所示。

当用于文章头部时（即article元素头部），header元素一般用于包含“文章标题”和“meta信息”两部分。所谓的meta信息，一般指的是作者、点赞数、评论数等，如图2-2所示。图2-1 header元素用于页面头部图2-2 header元素用于文章头部（article）

当用于区块头部时（即section元素头部），header元素一般只包含区块的标题内容，如图2-3所示。图2-3 header元素用于区块头部（section）

举例

上面代码的HTML结构如图2-4所示。图2-4 HTML结构图

分析

这个图是结构元素最经典的一个使用图，从上面我们可以清晰看出header元素一般用于3个地方：页面头部、文章头部（article元素）和区块头部（section元素）。

这个结构图非常重要，对于后面介绍的其他结构元素，我们也应该多联系一下此图，这样学习思路会更加清晰。2.1.2 nav元素

在HTML5中，nav元素一般用于3个地方：顶部导航、侧栏导航和分页导航。

当用于顶部导航时，nav元素可以放到header元素内部，也可以放到header元素外部。具体放在里面还是外面，取决于实际开发需求。

一般情况下，主导航主要是使用无序列表来实现。在HTML5之前，都是使用一个div来包含着无序列表，而现在我们可以使用nav元素来代替div元素，以使结构更具有语义。

以前的导航结构如下：

现在的导航结构如下：

此外别忘了，nav元素并不只是可以用于顶部导航，还可以用于侧栏导航以及分页导航，如图2-5、图2-6和图2-7所示。图2-5 顶部导航图2-6 侧栏导航图2-7 分页导航2.1.3 article元素

在HTML5中，article元素一般只会用于一个地方：文章内容部分。我们可以把article看成一个独立的部分，它内部可以包含标题以及其他部分。也就是说，article元素内部可以包含header元素、section元素和footer元素等。

注意，在严格意义上，每一个article元素内部都应该有一个header元素。

举例

在HTML5中，aside元素一般用于表示跟周围区块相关的内容，如图2-4所示。

想要正确地使用 aside 元素，主要取决于它的使用位置，我们大体可以分为以下两种情况。

▶ 如果aside元素放在article元素或section元素之中，则aside内容必须与article内容或section内容紧密相关。

▶ 如果aside元素放在article元素或section元素之外，则aside内容应该是与整个页面相关的，比如相关文章、相关链接、相关广告等。

如果小伙伴们不知道在实际开发中怎么使用，可以到绿叶学习网（本书配套网站）查看各个页面的源代码，相信你会学到很多知识。事实上，这一章中涉及的大部分例子，都是根据绿叶学习网的页面结构来讲解的。2.1.5 section元素

在HTML5中，section元素一般用于某一个需要标题内容的区块。如果页面某个区块不需要标题，直接使用div元素就可以了。如果需要标题，则建议使用section元素。

HTML5标准建议，section元素内部必须带有标题，也就是说，section元素内部必须带有一个header元素。

在HTML5中，article、aside这两个元素可以看成是“特殊”的section元素，因为它们比section元素更具有语义化。在实际开发中，对于页面某一个区块，优先考虑语义化更好的article元素和aside元素，如果这两个都不符合，再考虑使用section元素。

举例

在HTML5中，footer元素一般用于两个地方：一个是“页面底部”，另一个是“文章底部”。

当用于页面底部时，footer元素一般包含友情链接、版权声明、备案信息等。

当用于文章底部时，也就是放在article元素内部时，footer元素一般包含“上一篇/下一篇导航”“文章分类”“发布信息”等。

举例

至此，我们已经把6个主要结构元素学完了，可能有些小伙伴都快被搞蒙了。一下子记不住没关系，等我们到了实际开发需要的时候再回来翻一下，然后用上几遍就记住了。2.2 表单元素

在HTML4.01中，表单的类型以及使用方法都非常有限。HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展。

▶ 新增input元素类型。

▶ 新增其他表单元素。

这两个方向的扩展，使得代码量大大减少，可以极大地提高开发效率。2.2.1 新增input元素类型

在HTML5中，大量地增加了input元素的种类。换句话说就是，input元素的type属性新增了大量属性值，如表2-1、表2-2所示。表2-1 新增的type属性值（验证型）表2-2 新增的type属性值（取值型）续表

除了表2-2列出的，type属性还有一个取值：datetime。不过，Chrome、Firefox、IE等浏览器的最新版本中已经不再支持了，小伙伴们如果在其他地方看到的话，直接忽略即可。

1.验证型

email

当type属性取值为“email”时，表示这是输入电子邮件的文本框（语义化）。

语法

举例

浏览器预览效果如图2-8所示。图2-8 email类型

分析

当我们输入非电子邮件格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图2-9所示。图2-9 提交时效果

这里有一点要说明，即必须是submit按钮才会弹出提示内容，使用其他按钮（如button按钮）则不会。这是因为email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。

tel

当type属性取值为“tel”时，表示这是输入电话号码的文本框（语义化）。

语法

举例

浏览器预览效果如图2-10所示。图2-10 tel类型

分析

当我们输入非电话号码格式的字符，然后点击【提交】按钮时，却发现居然可以提交！这是怎么回事呢？其实tel类型文本框并不具备完备的验证功能，如果想要达到验证效果，则需要结合3.2节介绍的pattern属性来实现。

url

当type属性取值为“url”时，表示这是输入URL的文本框（语义化）。

语法

举例

浏览器预览效果如图2-11所示。图2-11 url类型

分析

当我们输入非URL格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图2-12所示。图2-12 提交时效果

所谓的URL格式字符，指的是以“http://”或者“https://”开头的网络地址。有些小伙伴会发现，像https://www、tps://www.lvyestudy.com这种字符串也能提交！原因也是一样的：url类型文本框也不具备完备的验证功能，如果想要达到验证效果，需要结合pattern属性来实现。

2.取值型

range

当type属性取值为“range”时，我们可以通过拖动滑动条获取某一个范围内的数字。

语法

说明

min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。这3个属性的取值可以是整数，也可以是小数。

举例

浏览器预览效果如图2-13所示。图2-13 range类型

分析

上面这句代码表示：滑动条最小值为-10，最大值为10，每次拖动只能改变5（增加5或减少5）。value="-10"用于设置滑动条的初始值，有一个很有趣的现象是：设置不同的value值，滑块也会出现在对应数值的位置。在这个例子中，若设置value="5"，此时浏览器预览效果如图2-14所示。图2-14 设置value="5"

在实际开发中，range类型元素都是需要结合JavaScript来操作的，上面这个例子就是最简单也是最经典的。此外，output元素用于定义表单元素的输出结果，我们在这一节的后面会详细介绍。

number

当type属性取值为“number”时，我们可以通过使用微调按钮来获取某一个范围的数字。

语法

说明

min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。它们的属性取值可以是整数，也可以是小数。

number类型跟range类型功能非常相似，都是获取某一个范围内的数字。不过两者的外观不一样，其中number类型使用的是“微调按钮”，而range类型使用的是“滑块”。

举例

浏览器预览效果如图2-15所示。图2-15 number类型

分析

在这个例子中，我们可以直接在文本框中输入数字，也可以通过右边的微调按钮来改变数字。

color

当type属性取值为“color”时，我们可以直接使用浏览器自带的取色工具来获取颜色值。

语法

说明

value属性用于设置颜色初始值，格式必须是十六进制颜色值如#F1F1F1，不能是关键字（如black）和rgba颜色（如rgba(255, 255, 255, 0.5)）。

举例

浏览器预览效果如图2-16所示。图2-16 color类型

分析

当我们点击color类型元素时，浏览器会弹出自带的取色工具，以方便直接选取颜色值，如图2-17所示。图2-17 浏览器自带的取色工具

color类型元素不仅可以选择颜色，还可以将常用的颜色值添加到自定义颜色栏中，以便再次使用，非常方便。

date

当type属性取值为“date”时，我们可以直接使用浏览器自带的日历工具来获取日期（年、月、日）。

语法

说明

value属性用于设置日期初始值，格式必须如“2018-05-20”。

举例

浏览器预览效果如图2-18所示。图2-18 date类型

分析

当我们点击date类型元素时，浏览器会弹出自带的日历工具，以方便直接选取日期，如图2-19所示。图2-19 浏览器自带的日历工具

此外，value属性用于设置日期初始值，格式必须如“2018-05-20”，像“2018--5-20”这种是无效的。

time

当type属性取值为“time”时，我们可以直接使用浏览器自带的工具来获取时间（时、分）。

语法

说明

value属性用于设置时间初始值，格式必须如“08:04”。

举例

浏览器预览效果如图2-20所示。图2-20 time类型

分析

当我们点击time类型元素时，文本框右边会出现微调按钮，以方便调整时间，如图2-21所示。图2-21 微调按钮

此外，value属性用于设置时间初始值，格式必须如“08:04”，像“8:4”这种是无效的。

month

当type属性取值为“month”时，我们可以使用浏览器自带的工具来获取“月数”。

语法

说明

value属性用于设置初始值，格式必须如“2018-08”。

举例

浏览器预览效果如图2-22所示。图2-22 month类型

分析

当我们点击month类型元素时，浏览器会弹出选择框，以方便选择哪个月份，如图2-23所示。图2-23 月份选择框

week

当type属性取值为“week”时，我们可以使用浏览器自带的工具来获取“周数”。

语法

说明

value属性用于设置初始值，格式必须如“2018-W04”。其中，

试读结束[说明：试读内容隐藏了图片]

下载完整电子书