作者：肖睿,邓小飞

出版社：人民邮电出版社

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

HTML5+CSS3开发实战试读：

前言

随着新一代互联网技术的迅猛发展，各种前端开发技术层出不穷。如何设计开发出更加优秀的网页、如何提高用户体验，已经成为前端开发工程师工作中追求的目标。HTML5+CSS3技术就是为了满足这样的目标而诞生的。

本书内容分为4个部分，共8章，即HTML5新技能、CSS3设计网页效果、多媒体技术以及Canvas绘图技能，具体内容安排如下。

第一部分（第1～2章）：介绍HTML5新增的元素及属性、CSS3高级选择器，能够使用HTML5新增的input类型完成表单的页面布局，使用表单属性实现页面中的表单验证功能，从而使网页设计人员可以更省时省力地设计出标准、精美的Web页面。

第二部分（第3～5章）：介绍CSS3边框、背景、渐变、文本等美化网页的新特性，通过CSS3 2D和3D转换、CSS3动画和过渡实现更加炫酷的效果，增强用户体验。

第三部分（第6章）：针对多媒体技术进行讲解，主要介绍视频及音频元素的语法和使用方法，通过打造个性化视频案例，提升多媒体知识的运用技能，增强网页的体验性。

第四部分（第7～8章）：介绍Canvas绘图知识，主要分为Canvas基础和Canvas高级应用。基础部分介绍使用Canvas API实现简单图形，比如三角形、圆形、矩形等的绘制；高级部分介绍使用Canvas API绘制较复杂的图形，比如渐变、文本、图像等，最后贯穿所学知识由浅入深地讲解风景时钟案例的制作。学习方法

学习本书需要掌握正确的学习方法，养成课前预习、课上练习、课后复习的好习惯，做到持之以恒，定能学有所成，从而使读者完成从不会→会→熟练→精通的蜕变。学完本书后，读者能够掌握HTML5+CSS3制作网页的技巧，快速熟练地打造精美、炫酷的网页。

课前：

• 浏览预习作业，带着问题读教材，并记录疑问。

• 即使看不懂也要坚持看完。

• 提前将下一章的示例自己动手做一遍，记下问题。

课上：

• 认真听讲，做好笔记。

• 完成上机练习或项目案例。

课后：

• 及时总结，完成教材布置的作业。

• 多模仿，多练习。

• 多浏览技术论坛、博客，获取他人的开发经验。

本书提供了更加便捷的学习体验，读者可以通过扫描二维码的方式下载书中的上机练习素材及作业素材。

本书由课工场全栈开发教研团队组织编写，参与编写的还有邓小飞、唐桂林、倪天伟、李新友、王莉等院校老师。尽管编者在写作过程中力求准确、完善，但书中不妥或错误之处仍在所难免，殷切希望广大读者批评指正！  第1章 初识HTML5本章任务

任务1：了解HTML5的优势

任务2：HTML5新增元素及属性

任务3：CSS3高级选择器技能目标

◆ 了解HTML5的简介及优势

◆ 掌握HTML5新增的结构元素、网页元素及全局属性

◆ 能够熟练使用CSS3高级选择器美化网页本章知识梳理本章简介

从2010年起，HTML5和CSS3就已经成为互联网技术一直关注和讨论的话题，1999年HTML4就停止开发了，直到2008年1月22日HTML5才公布了第一份正式草案。2010年，HTML5开始用于解决实际问题，各大浏览器厂商开始升级自己的产品以支持HTML5的新功能。尽管有时候浏览器对其支持得不是很好，但大部分现代浏览器都已经支持了HTML5。现在HTML5已经广泛应用于网站制作、游戏开发、移动应用开发等各个领域。

目前HTML5技术已经日趋成熟，支持HTML5的浏览器包括Firefox（火狐浏览器）、IE9及其更高版本、Chrome（谷歌浏览器）、Safari、Opera等，国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样支持HTML5。随着谷歌、Twitch、YouTube等大型企业将视线投向HTML5，更加确认了HTML5在互联网时代的发展前景。在不久的将来，HTML5将会与我们的工作生活息息相关，HTML5不仅在PC端，在移动端上更是有着广泛的应用和发展前景。预习作业

1. 简答题（1）什么是HTML5？HTML5有哪些优势？（2）在HTML5中，新增加的结构元素有哪些？（3）在HTML5中，新增加的全局属性有哪些？

2. 编码题

使用HTML5新增加的结构元素搭建页面框架，要求如下。（1）设置一个500px宽，700px高的大盒子。（2）大盒子拆分为三块，结构为上中下。（3）分别使用不同的结构标签布局页面。任务1 了解HTML5的优势

HTML5是用于取代1999年制订的HTML4.01和XHTML1.0标准的HTML标准版本，它首先强化了Web网页的表现性能，其次追加了本地数据库等Web应用的功能。HTML5实际上指的是包括HTML、CSS和JavaScript在内的一整套技术组合，它希望减少浏览器对于需要插件的丰富性网络应用服务（Rich Internet Application，RIA），如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准。

HTML5具有如下特性。

★ 跨平台

HTML5可以运行在PC端、iOS或Android移动设备端，只要有一个支持HTML5的浏览器即可运行。

★ 兼容性

如果读者以前做过Web前端开发，就会了解Web兼容性（尤其是IE6）多么让人崩溃，几乎要为每一个浏览器做兼容处理。但是HTML5趋于成熟，只要浏览器支持HTML5就能实现各种效果，开发人员不需要再写浏览器判断之类的代码。

★ 各大浏览器厂商的支持

下面使用WebStorm工具创建两个文件，一个是HTML5文件（左边），另一个是HTML4文件（右边），如图1.1所示。

通过图1.1的对比，可以看到HTML5的结构要简洁得多。在其他方面HTML5也有很多变化，后续的学习中会一一讲解到。图1.1 HTML5与HTML4的对比任务2 HTML5新增元素及属性1.2.1 HTML5新增结构元素

了解过HTML的人都知道，一个页面是由许多元素按一定的顺序组合实现的，但是在早先的HTML版本中并没有具实际意义的元素。一般是通过div、table等元素来确定布局和功能，并通过class、id等选择器来表示其实际意义，这样在页面结构的理解以及搜索引擎的优化上都有或多或少的缺陷。为了解决以上问题，HTML5在HTML4的基础上进行了大量的修改，下面我们就来学习HTML5新增的功能。

在具体学习之前先来分析一下当当网图书分类页面结构，如图1.2所示。图1.2 当当网图书分类页面

由图1.2中的方框标注可以看出，该页面是由上、中、下三部分组成的，中间部分又由左中右的结构组成。如果用HTML4实现，需要使用示例1所示的代码。示例1

上述代码没有任何错误，在任何浏览器和环境中都能正确运行，并且能得到想要的结果，而且绝大部分的开发人员也是这样设计的。但是对于浏览器来说，所知道的只有一系列的div，具体做什么，在哪里显示，都是通过id来获取的。如果开发人员不同，id的命名也不同，就会导致HTML代码的可读性很差。

使用HTML5新增的结构元素可以很好地定位标记，明确某标记在页面中的位置和作用，如示例2所示。示例2

通过示例1和示例2的代码可以看到，两个示例代码虽然不一样，但是在浏览器里显示的效果是一样的，使用HTML5新增元素创建的页面代码更加简洁和高效，而且更容易被搜索引擎搜索到。

一个普通的页面，会有头部、导航、文章内容，还有附着的左右边栏，以及底部等模块，可通过id或class进行区分，并通过不同的CSS样式进行处理。但相对于HTML来说，id和class不是通用的、标准的规范，搜索引擎只能去猜测某部分的功能。

HTML5新定义了一组语义化的元素，虽然这些元素可以用传统的HTML元素（如：div、p、span等）来代替，但是它们可以简化HTML页面的设计，无需大量使用id或class选择器，而且在搜索引擎搜索的时候也会用到这些元素，目前的主流浏览器中已经可以使用这些元素了。新增加的结构元素如表1-1所示。表1-1 HTML5新增的结构元素注意HTML5的设计是以效率优先为原则，要求样式和内容分离，因此在HTML5的实际开发中，必须使用CSS来定义样式。

下面就一一介绍HTML5新增的结构元素。图1.3所示的是一个典型的HTML5结构的网站，可以打开网站源代码了解其中HTML5标签的使用，或者扫描二维码观看视频了解。图1.3 典型的HTML5网站HTML5网站结构视频讲解

下面通过这个网站分别讲解几个主要的HTML5结构元素。

1. header元素

在HTML5出现之前，开发人员习惯使用div元素布局网页，HTML5在div元素的基础上新增了header元素，也叫

因为header元素是HTML5新增元素，所以旧版本浏览器均不支持，需要IE9以上或最新Chrome等浏览器支持。

图1.4展示了header中添加的内容以及显示的位置。图1.4 header效果

2. nav元素

nav元素代表页面的一部分，是一个可以作为页面导航的链接组。其中的导航元素链接到其他页面或者当前页面的其他部分，使HTML代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。语法

nav元素是与导航相关的，一般用于网站导航布局，就像使用div元素、span元素一样。但nav元素与div元素又有不同之处，此元素一般只用于导航，所以在一个HTML网页布局中，nav元素可能就使用在导航条处或与导航条相关的地方，它通常与ul、li元素配合使用。图1.5显示了nav元素在页面中的应用效果。图1.5 nav效果

3. section元素

section元素不只是一个普通的容器元素，它主要用于表示一段专题性的内容，通常用于带有标题和内容的区域，如文章的章节、对话框中的标签页，或者论文中有编号的部分。

一般来说，当一个元素只是为了样式化或者方便脚本使用时，应该使用div元素；当元素内容明确地出现在文档大纲中时，应该使用section元素。语法

图1.6演示了section元素在页面中的应用效果。图1.6 section效果

4. article元素

article元素是一个特殊的section元素，它比section元素具有更明确的语义，代表一个独立的、完整的相关内容块。通常article元素会有标题部分（包含在header内），有时也会包含footer元素。虽然section元素也是带有主题性的一块内容，但是无论从结构上还是内容上来说，其独立性和完整性都没有article元素强。语法

5. aside元素

aside元素在网站制作中主要有以下两种使用方法。（1）包含在article元素中作为主要内容的附属信息，其中的内容可以是与当前文章有关的相关资料、名词解释等。

6. footer元素

footer元素一般用于页面或区域的底部，通常包含文档的作者、版权信息、使用条款链接等。如图1.7所示，页面底部通常使用footer元素来布局。

上一节介绍了HTML5结构元素，结构元素只用于设计网页结构，编写框架。但一个完整的网页不能只有框架，还必须有具体的网页内容，HTML5新增了如表1-2所示的网页元素。表1-2 HTML5新增网页元素

这几个元素主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础。下面分别讲解这几个新增元素。

1. datalist元素

datalist元素用于为文本框提供一个可选数据的列表，用户可以直接选择列表中预先添加的某一项，从而免去输入的麻烦。如果用户不需要选择或者选项里不存在用户需要的内容，也可以自行输入。在实际应用中，如果把datalist提供的列表绑定到某文本框，则需要使用文本框的list属性来引用datalist元素的id属性。

datalist元素是由一个或多个option元素组成的，而且每一个option元素都必须设置value属性，如示例3所示。示例3

页面效果如图1.8所示。图1.8 datalist效果

2. time元素

在网页中使用time元素和不使用time元素效果并没有什么区别，只是使用time元素容易被搜索引擎搜索到。语法

我们在每天早上 9:00 开始营业。

我在 情人节 有个约会。

3. mark元素

当把一行文字包含在mark元素之内时，页面上显示时文字会有背景，用于突出重点。语法天气渐渐变暖了

4. progress元素

progress元素在页面上显示为一个进度条。value属性表示当前已完成的进度，max属性表示总进度。语法

其他的几个元素如video、audio、canvas功能比较多，操作起来比较复杂，将在后面的章节详细讲述，此处不做赘述。利用HTML5新增的网页元素完成的页面效果如图1.9所示。图1.9 HTML5新增网页元素效果1.2.3 HTML5新增全局属性

HTML5新增了全局属性的概念。所谓全局属性，是指任何元素都可以使用的属性。新增的全局属性见表1-3。表1-3 HTML5新增全局属性

下面依次对这几个属性进行讲解。

1. contentEditable

contentEditable属性的主要功能是允许用户在线编辑元素中的内容。contentEditable属性可以设定两个值：true和false。如果设置为true，页面元素允许被编辑，如果设置为false，页面元素不允许被编辑；如果未指定true或者false，该元素的编辑状态将由父元素来决定。下面代码段中的ul元素在页面上是可以被编辑的。

• 列表一
• 列表二

在编辑完元素内容后，如果想要保存这些内容，只能把元素的innerHTML属性发送到服务器端进行保存，因为改变元素内容后，该元素的innerHTML属性也会随之改变。

2. designMode

designMode属性用来指定整个页面是否可编辑。当页面可编辑的时候，页面中任何支持contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本里被修改，该属性有两个值：on和off。值为on的时候页面可编辑，值为off的时候页面不可编辑。使用JavaScript指定designMode属性的用法如下所示。

通常整个页面是不能被修改的，所以该属性使用得并不是十分广泛，此处不再示例。

3. hidden

在HTML5中所有的元素都允许使用hidden属性。该属性类似于input元素中的hidden，功能也是使元素处于不可见状态。hidden属性是bool类型，设为false元素可见，设为true元素不可见。

4. spellcheck

spellcheck属性是HTML5中针对单行文本框和多行文本框设置的。它的功能是对用户输入的文本内容进行拼写和语法检查。该属性也是bool类型，设为true进行语法检查，否则不检查。但如果元素的readOnly属性和disabled属性生效的话，spellcheck属性将失效。

5. tabindex

tabindex是网页开发中的一个基本概念，当不断按Tab键让窗口或页面中的控件获取焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex属性表示该控件是第几个被访问到的。1.2.4 上机训练

上机练习1——搭建网易邮箱页面结构需求说明

使用HTML5新增的结构元素搭建网易邮箱页面结构，页面中每块内容的高为200px，边框为1px的红色实线，页面效果如图1.10所示。图1.10 搭建网易邮箱页面结构

上机练习2——制作三栏式布局需求说明

使用HTML5新增的结构元素制作三栏式布局，要求左右两侧固定宽度，中间自适应。完成效果如图1.11所示。图1.11 三栏式布局完成效果任务3 CSS3高级选择器1.3.1 结构伪类选择器

CSS是最强大的网页设计工具之一，开发人员可以使用它在几分钟内改变一个网站的页面，而不用改变页面的元素。但绝大部分开发人员使用的CSS选择器远未发挥它们真正的潜力，有时候还趋向于使用过多的和无用的class、id、div、span等，把HTML写得很凌乱。避免写凌乱的属性和元素且保持代码简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式变得更加灵活。

下面先简单讲解几个CSS3的高级选择器，如表1-4所示。表1-4 CSS3高级选择器

为了更好地演示效果，编写统一的结构代码如示例4所示。示例4

外部p元素

上述代码仅仅是本小节涉及的结构，其他结构读者可以自行添加。

1. :first-of-type与:last-of-type:first-of-type 选择器匹配属于其父元素的所有特定类型的第一个子元素。 :last-of-type 选择器匹配属于其父元素的所有特定类型的最后一个子元素。 p: first-of-type{ background-color: #cccccc; }

运行效果如图1.12所示。图1.12 :first-of-type效果图

通过示例4的代码和图1.12可以看出，p:first-of-type获取的是第一个子元素p。在该示例中能够获取body的第一个子元素p，也能获取div的第一个子元素p，同时还能获取header的第一个子元素p。如果只想获取header的第一个子元素可以将CSS代码改成如下：header p:first-of-type { background-color: #cccccc; }

:last-of-type的用法和:first-of-type相同，只不过检索的是最后一个子元素。注意在进行子元素查找的时候，要注意元素的包含关系，即子元素的子元素，如果其类型满足要求也能被检索到。

2. :first-child与:last-child

:first-child是用于选取属于其父元素的第一个子元素的指定选择器，效果类似于:first-of-type。

:last-child是用于选取属于其父元素的最后一个子元素的指定选择器。效果类似于:last-of-type。p:first-child { background-color: #cccccc; }

运行效果如图1.12所示，不再截图演示。

3. :nth-child(n)

:nth-child(n)选择器匹配属于其父元素的第n个子元素，并且不限制元素的类型。n可以是数字、关键字或公式。通过:nth-child(n)对下面的代码操作：

当n是数字时，获取div中的第n个位置的元素（注意n从1开始）。div p:nth-child(1) { background-color: #cccccc; }

该代码段的作用是获取div中的第一个p元素，并给这个p元素设置背景色。n除了是数字之外，还可以是表达式，如an+b，此时n从零开始。如下代码表示给div中所有奇数位置的p元素加背景色：div p:nth-child(2n+1) { background-color: #cccccc; }

另外还可以使用odd和even关键字，odd和even是用于匹配下标是奇数或偶数的子元素的关键字（第一个子元素的下标是1）。下面的CSS代码分别为div中的奇数p元素和偶数p元素指定两种不同的背景色：div p:nth-child(odd) { background-color: #cccccc; } div p:nth-child(even) { background-color:#46face; }

4. :before与:after

:before选择器在被选元素的内容前面通过使用content属性来插入内容。

:after选择器在被选元素的内容后面通过使用content属性来插入内容。div p:before { content: "新增内容"; }

此段代码表示在div中所有的p元素的内容前面都添加文本“新增内容”，:after和:before的用法相同，只不过表示添加在内容之后。

示例5演示了:nth-child(n)和:before的用法。示例5

div里面的第一个p元素

div里面的第二个p元素

div里面的第三个p元素

div里面的第四个p元素

示例5的效果如图1.13所示。图1.13 CSS3高级选择器

CSS3的高级选择器对浏览器有一定要求，IE9以下都不支持，Firefox、Safari和Opera目前通用的版本都支持。如果说网页的用户大部分用的还是IE8以下的版本，建议使用原始的class和id选择器。但不可否认，CSS3的高级选择器越来越被各大浏览器支持，随着新版本的浏览器越来越普及，这些高级选择器在开发中所发挥的作用也会越来越大。1.3.2 上机训练

上机练习3——制作爱奇异视频播放列表需求说明

使用学过的元素制作爱奇异视频播放列表页面，布局使用HTML5元素，要符合语义化，具体要求如下。（1）使用无序列表来布局。（2）影视名称使用标题标签。（3）文字描述使用p元素。（4）使用结构伪类选择器选择li元素下的标题元素，并设置字体大小为16px，字体颜色为# 4d4d4d。（5）使用结构伪类选择器选择li元素下第一个p元素，并设置字体大小为14px，字体颜色为# 640000。（6）使用结构伪类选择器选择li元素下第二个p元素，并设置字体大小为12px，字体颜色为蓝色。

页面完成效果如图1.14所示。图1.14 制作爱奇异视频播放列表本章作业

一、选择题

1. 以下关于HTML5的描述正确的是（ ）。

A. HTML5不适合W3C标准B. HTML5只是在原来的基础上规范了标准，没有新增内容C. XHTML不属于HTML5的发展史中的版本D. HTML5不需要安装任何插件就可以直接使用网页播放视频

2. CSS3基本选择器优先级正确的是（ ）。

A. 标签选择器>类选择器>ID选择器B. 标签选择器>ID选择器>类选择器C. 类选择器>标签选择器>ID选择器D. ID选择器>类选择器>标签选择器

3. 以下哪个不是HTML5新增的结构元素？（ ）

A. headerB. sectionC. navD. div

4. 关于新增的网页元素，说法错误的是（ ）。

A. video定义音频，如音乐或其他音频流B. canvas定义图形C. datalist定义可选的数据列表D. time定义日期或时间

5. 以下关于CSS3新增伪类选择器的描述错误的是（ ）。

A. p:last-of-type选择所有属于其父元素的最后一个

类型的

元素B. p:only-of-type选择所有属于其父元素的唯一

类型的

元素C. :enabled?:disabled控制表单控件的只读状态D. p:nth-child(2)选择所有属于其父元素的第二个子元素的

元素

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

下载完整电子书