作者：陈承欢
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5+CSS3移动Web开发实战试读：
前言
目前，HTML5和CSS3已成为Web应用开发中的热门技术。HTML5和CSS3不仅是两项新的Web技术标准，更代表了Web开发世界的一次重大改变。HTML5具有更多的描述性标签、良好的多媒体支持、强大的Web应用、先进的选择器、精美的视觉效果、方便的操作、跨文档消息通信、客户端存储等诸多优势。HTML5的优点主要在于可以跨平台使用。例如，开发一款HTML5的游戏，可以很轻易地将其移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发送到App Store或Google Play上。HTML5的跨平台能力非常强大，这也是大多数Web应用开发者对HTML5充满兴趣的主要原因。
本书具有以下特色和创新。（1）充分调研HTML5、CSS3新技术的实际应用情况，精心优选教学案例。本书开发前期，我们对HTML5、CSS3新技术的实际应用情况做了大量细致的调研工作，先后分析了搜狐网、新华网等5个新闻类网站的手机版，携程旅行、同程旅游等7个旅游类网站的触屏版，苏宁易购、京东商城等8个购物类网站的触屏版，艺龙无线、去哪儿网等15个网站的注册登录和留言网页，俄罗斯方块、连连看等18款网页游戏，以及16个常用的音乐视频网页播放器，40多个网页图形，80多个复杂样式和网页特效。经过4次筛选、优化和简化，本书最终形成了55个典型教学案例，并将这些教学案例分为8种类型。这些教学案例全都来自于真实网站或项目，代表了移动Web应用开发的实际需求和前沿水平。（2）合理选取教学内容，科学设置教学单元。本书从跨平台的移动Web开发实际应用的角度讲解HTML5和CSS3的新元素和新功能，而不是从HTML5和CSS3理论知识本身取舍教学内容。本书遵循读者的认知规律和技能的形成规律，将基于HTML5+CSS3的移动Web应用开发分为8类：跨平台的网站首页设计、文本新闻浏览网页设计、旅游景点推荐网页设计、商品信息展示网页设计、注册登录与留言网页设计、音乐视频播放网页设计、网页图形绘制与游戏设计、复杂样式与网页特效设计。对应这8种类型的Web应用开发，本书设置了8个教学单元，将HTML5和CSS3的相关知识合理地安排到各个教学单元中。由于基于HTML5和CSS3的Web开发涉及面广、应用领域多，同时由于篇幅有限，本书重点探析了基于HTML5+CSS3的典型Web应用，对于HTML5地理定位、Web数据存储、应用程序缓存、Web Workers等高级应用以附录的方式进行了简单介绍，让读者对此有一个初步的认识。（3）充分考虑教学实施的需求，每个教学单元面向教学全过程设置“教学导航→实例探析→知识疏理→引导训练→同步训练→拓展训练→单元小结”7个教学环节。每个教学单元相关的理论知识相对独立，以问题解答的方式进行组织，形成了系统性好、条理性强、循序渐进的理论知识体系。每个教学单元根据学习知识和训练技能的需要合理设置移动Web开发任务，形成“实例探析→引导训练→同步训练→拓展训练”4个训练层次。（4）围绕55个移动Web开发任务，采用“任务驱动、精讲多练、理论实践一体化”的教学方法，全方位促进读者基于HTML5+CSS3移动Web开发能力的提升，引导读者在完成各个设计任务的过程中，逐步理解HTML5和CSS3的新功能和新特点，循序渐进地学会HTML5和CSS3的应用，从而熟练掌握形式多样的移动Web应用设计方法。（5）改进和优化教学内容的组织方法和程序代码的分析方法，HTML5和CSS3的理论知识以“必需、够用”为度，并将够用的理论知识与必备的技能训练合理分离。每一个教学单元独立设置了“知识疏理”环节，主要分析与归纳各单元必要的理论知识要点，使读者较系统地掌握必备的理论知识。学习HTML5和CSS的主要目的是应用所学知识分析、设计各类移动Web应用，在分析、设计移动Web应用的过程中，在实际需求的驱动下学习知识和领悟知识，最终熟练掌握知识并固化为能力。HTML5和CSS的应用灵活多样，因此，读者学习移动Web应用开发课程的重点不是记住了多少理论知识，而是通过阶梯训练学会HTML5和CSS的实际应用，利用其优势解决实际的移动应用开发问题。本书重点关注的触屏版网页设计、音乐视频播放、网页图形绘制、游戏设计、复杂样式设计、网页特效设计等方面都是HTML5+CSS3的典型应用。这些应用所涉及的HTML代码、CSS代码和JavaScript代码都或多或少地应用了相似或相同的标签、属性、方法或事件。如果对各个任务的代码进行逐一说明，则会造成大量重复解释，同时也会缺乏系统性。基于这一原因，本书在各个任务的实施过程中并没有对代码进行详细解释说明（部分解释说明以注释方式写在代码中），而是将HTML5和CSS3的相关标签、属性、方法或事件在附录中以表格形式进行集中介绍，方便在分析代码时进行查找。（6）本书配套教学资源丰富，包括教学单元设计、教学流程设计、移动Web开发任务设计、教学案例、电子教案等教学资源，力求做到想师生之所想，急师生之所急。
本书由湖南铁道职业技术学院陈承欢教授编著，颜珍平、颜谦和、吴献文、谢树新、侯伟、潘玫玫、郭外萍、裴来芝、谭传武、肖素华、林保康、王欢燕、张丹、王姿、张丽芳等多位老师参与了网页特效的设计、优化和部分章节的编写、校对和整理工作。
由于编者水平有限，书中难免存在疏漏之处，敬请各位读者批评指正，编者的QQ号为1574819688。感谢您使用本书，期待本书能成为您的良师益友。2018年11月编著者HTML5+CSS3移动Web开发实战课程设计
1. 教学单元设计
2. 教学流程设计
3. 移动Web应用开发任务设计单元1 跨平台的网站首页设计
HTML5的语义化标签及属性可以让开发者非常方便地实现清晰的Web页面布局，加上CSS3的效果渲染，使快速创建丰富灵活的Web页面变得相对简单。本单元通过对网站首页设计的探析与训练，重点介绍HTML5网页的基本结构及组成元素、HTML5的语义和结构标签、 声明等内容。读者应学会CSS样式的定义方法与样式表的插入方法，掌握网站首页的设计方法。教学导航实例探析任务1-1 探析携程旅行网的首页【效果展示】
携程旅行网首页0101.html的浏览效果如图1-1所示。图1-1 携程旅行网首页0101.html的浏览效果
携程旅行网首页0101.html的主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。【网页探析】
1. 网页0101.html的HTML代码探析
携程旅行网首页0101.html的HTML代码如表1-1所示。表1-1 网页0101.html的HTML代码
网页0101.html主体结构的HTML代码如表1-2所示。该网页主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，其中顶部结构使用
2. 网页0101.html的CSS代码探析
网页0101.html通用的CSS代码如表1-3所示。表1-3 网页0101.html通用的CSS代码
网页0101.html主体结构的CSS代码如表1-4所示。表1-4 网页0101.html主体结构的CSS代码
网页0101.html顶部内容的CSS代码如表1-5所示。表1-5 网页0101.html顶部内容的CSS代码
网页0101.html中部内容的CSS代码定义如表1-6所示。表1-6 网页0101.html中部内容的CSS代码
网页0101.html底部内容的CSS代码如表1-7所示。表1-7 网页0101.html底部内容的CSS代码
网页0101.html侧边栏的CSS代码如表1-8所示。表1-8 网页0101.html侧边栏的CSS代码知识梳理
1. HTML5印象
HTML5是万维网的核心语言，它的第一份正式草案公布于2008年1月22日。2012年12月17日，万维网联盟（World Wide Web Consortium，W3C）正式宣布凝结了大量网络工作者心血的HTML5规范正式定稿。W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日，HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（Hyper Text Markup Language，HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的开发者努力提高新元素的交互操作性。
支持HTML5的浏览器包括Chrome（谷歌浏览器）、Firefox（火狐浏览器）、IE9及其更高版本、Safari、Opera等。傲游浏览器（Maxthon）以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。
2. CSS3印象
CSS（Cascading Style Sheet）可译为层叠样式表或级联样式表，是一组格式设置规则，用于控制Web页面的外观。
在制作网页时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确控制。这时，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。CSS3是CSS技术的升级版本。CSS3语言开发是朝着模块化发展的。CSS3将完全向后兼容，网络浏览器也还将继续支持CSS2。CSS3可以使用新的可用的选择器和属性，可实现新的设计效果（例如渐变、交互和分栏）。
3. HTML5的主要特性（1）语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa、微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。（2）本地存储特性（Class：Offline & Storagf）
基于HTML5开发的网页APP拥有更短的启动时间和更快的联网速度。这得益于HTML5 APP Cache及本地存储功能。（3）设备兼容特性（Class：Device Access）
自Geolocation功能的API（Application Programming Interface，应用程序编程接口）文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择。HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据相连，如视频影音可直接与Microphones及摄像头相连。（4）连接特性（Class：Connectivity）
更有效的连接使得基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性。这两个特性能够帮助我们实现从服务器将数据“推送”到客户端的功能。（5）多媒体特性（Class：Multimedia）
支持网页端的Audio、Video等多媒体功能，与各种APPS（Application Service，应用服务）相得益彰。（6）三维、图形及特效特性（Class：3D，Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，让用户惊叹于HTML5在浏览器中所能呈现的惊人视觉效果。（7）性能与集成特性（Class：Performance & Integration）
没有用户会永远等待你的Loading（加载）——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助你的Web应用和网站在多样化的环境中更快速的工作。（8）CSS3特性（Class：CSS3）
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（Web Open Font Format，WOFF）也提供了更高的灵活性和控制性。
4. HTML5的主要变化
HTML5提供了一些新的元素和属性，如
其中包括纯粹显示效果的标记，如和
和标签依然保留，但它们的意义已经和之前有所不同。这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。、、这些标签则被完全去掉了。（3）一些全新的表单输入对象
包括日期、URL、E-mail地址，其他的对象则增加了对非拉丁字符的支持。HTML5还引入了微数据。这一使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。总地来说，这些与结构有关的改进使内容创建者可以创建更干净、更容易管理的网页，而这样的网页对搜索引擎、对读屏软件等更为友好。（4）全新的、更合理的Tag
多媒体对象将不再全部绑定在object或embed Tag中，而是视频有视频的Tag，音频有音频的Tag。（5）本地数据库
这个功能将内嵌一个本地的SQL数据库，以优化交互式搜索、缓存及索引功能。同时，那些离线Web程序也将因此获益匪浅。（6）Canvas对象
将给浏览器带来直接绘制矢量图的能力。这意味着用户可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。（7）浏览器中的真正程序
将提供API实现浏览器内的编辑与拖放，以及各种图形用户界面的能力。内容修饰Tag将被剔除，而使用CSS。
另外，HTML5取代Flash在移动设备的地位，强化了Web页的表现性，增加了本地数据库。
5. HTML5新增的标签和废除的标签
HTML5中，新增加了多个标签元素，同时也废除了多个标签元素。（1）HTML5新增的标签
HTML5新增的标签及其功能说明如表1-9所示。表1-9 HTML5新增的标签及其功能说明（2）HTML5废除的标签
HTML5废除的标签如表1-10所示。表1-10 HTML5废除的标签
6. HTML5新增和废除的标签属性
HTML5中，在新增加和废除很多标签元素的同时，也增加和废除了很多属性。（1）HTML5新增的属性
HTML5新增的属性如表1-11所示。表1-11 HTML5新增的属性列表（2）HTML5废除的属性
HTML4中的一些属性在HTML5中不再被使用，这些属性被其他属性或其他方式替代，如表1-12所示。表1-12 HTML5废除的属性列表
7. HTML5语义和结构标签实例代码探析
新建example01.html网页文件，该网页的浏览效果如图1-2所示。图1-2 example01.html网页的浏览效果
网页example01.html对应的HTML代码如表1-13所示。表1-13 网页example01.html对应的HTML代码
下面对表1-13中的HTML代码的结构及组成进行解析。（1）HTML5的文档声明
创建example01.html网页文件，如果使用的网页编写工具支持HTML5文件类型，那么，应该生成如下的HTML5模板：
网页example01.html的头部代码由
网页example01.html的尾部由
网页example01.html的导航由
网页导航对于一个网页来说至关重要。快速、方便的导航是留住访客所必需的。导航可以被包含在
网页example01.html的区块和文章由
网页example01.html的侧边栏由
8. HTML5中典型的标记方法（1）内容类型（ContentType）
HTML5文件的扩展名仍然为“.html”或者“.htm”，内容类型（ContentType）仍然为“text/html”。（2）doctype声明
在HTML5中，使用 声明。该声明方式适用所有版本的HTML。HTML5中不可以使用版本声明。（3）指定字符编码
HTML5中的字符编码推荐使用UTF-8。HTML5中可以使用元素直接追加charset属性的方式来指定字符编码：。
在HTML4中使用的继续有效，但不能同时混合使用两种方式。（4）具有boolean值的属性
当只写属性而不指定属性值时表示属性为true，也可以将其他的属性名设定为属性值或将空字符串设定为属性值。如果想要将属性值设置为false，则可以不使用该属性。（5）引号
指定属性时属性值两边既可以用双引号，也可以用单引号。当属性值不包括空字符串、“<”“>”“=”、单引号、双引号等字符时，属性两边的引号可以省略。例如 。
9. HTML5主要的语义和结构标签说明
HTML5提供新的元素来创建更好的页面结构。（1）
用于定义文档的头部区域，表示页面中一个内容区块或整个页面的标题。（2）
用于定义文档中的节（section、区段），表示页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分。可以和
、等元素结合起来使用，表示文档结构。（3）
用于定义文档或节的页脚部分，表示整个页面或页面中一个内容区块的脚注，通常包含文档的作者、版权信息、使用条款链接、联系信息等。可以在一个文档中使用多个
用于定义页面中一块与上下文不相关的独立内容，如一篇文章。
用于定义页面内容之外的内容，表示article元素内容之外的与article元素内容相关的辅助信息。（6）标签
用于对整个页面或页面中的一个内容区块的标题进行组合。
10. 声明的用法
声明必须是HTML文档的第一行，位于 标签之前。 声明不是HTML标签，它是指示Web浏览器关于页面应使用哪个HTML版本进行编写的指令。
在HTML 4.01中， 声明引用DTD（Document Type Definition，文档类型定义），因为HTML 4.01基于SGML。DTD规定了标签语言的规则，这样浏览器才能正确地呈现内容。HTML5不基于SGML，所以不需要引用DTD。在HTML 4.01中有3种 声明。在HTML5中只有一种—— 。
声明没有结束标记，并且对大小写不敏感。应始终向HTML文档添加 声明，这样浏览器才能获知文档类型。
11. HTML的注释标签的用法
网页中HTML的注释标签使用实例如下：
所有浏览器都支持注释标签，注释标签用于在源代码中插入注释，注释不会显示在浏览器中。使用注释对代码进行解释有助于以后对代码的编辑。这在编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯，这样就不会把脚本显示为纯文本。观察以下JavaScript代码：
注释行结尾处的两条斜杠（//）是JavaScript注释符号，这样可以避免JavaScript执行“-->”标签。
12. 如何插入样式表
浏览网页时，当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有以下3种。（1）外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。
标签通常用在文档的头部，示例代码如下所示：
浏览器会从文件外部样式表mystyle.css中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑，样式表应该以.css扩展名进行保存。外部样式表文件不能包含任何的html标签，下面是一个样式表文件的实例：hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}注意不要在属性值与单位之间留有空格。假如使用“margin-left: 20 px”而不是“margin-left:20px”，则它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。（2）内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用
（3）内联样式由于内联样式要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，所以应慎用这种方法，当样式仅需要在一个元素上应用一次时可以使用内联样式。
要使用内联样式，需要在相关的标签内使用样式（style）属性。style属性可以包含任何CSS属性。以下代码展示了如何改变段落的颜色和左外边距：
This is a paragraph
13. 网页中的多重样式
如果网页中的某些属性在不同的样式表中被同样的选择器定义，那么属性值将被继承过来。
例如，外部样式表拥有针对h3选择器的3个属性，代码如下：h3 { color: red; text-align: left; font-size: 8pt; }
而内部样式表拥有针对h3选择器的两个属性，代码如下：h3 { text-align: right; font-size: 20pt; }
假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：color: red; text-align: right; font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
14. 标记-moz-、-webkit-、-o-和-ms-的解释（1）-moz-：以-moz-开头的样式代表Firefox浏览器特有的属性，只有Webkit浏览器可以解析。moz是Mozilla的缩写。（2）-webkit-：以-webkit-开头的样式代表Webkit浏览器特有的属性，只有Webkit浏览器可以解析。WebKit是一个开源的浏览器引擎，Chrome、Safari浏览器即采用WebKit内核。（3）-o-：以-o-开头的样式代表Opera浏览器特有的属性，只有Opera浏览器可以解析。（4）-ms-：以-ms-开头的样式代表IE浏览器特有的属性，只有IE浏览器可以解析。引导训练任务1-2 设计苏宁易购网的首页【任务描述】
编写HTML代码和CSS代码，设计图1-3所示的苏宁易购网的首页0102.html。图1-3 苏宁易购网首页0102.html的浏览效果
苏宁易购网首页0102.html的主体结构为顶部、中部、底部结构。顶部内容包括3个导航超链接和1个Logo图片；中部内容包括多个由图片和文字组成的导航超链接；底部内容也由3个部分组成，从上至下依次为当前用户和“回顶部”锚点链接按钮、登录和注册超链接、版权信息。
网页0102.html顶部结构使用
1. 网页0102.html的主体结构设计
在本地硬盘的文件夹“01跨平台的网站首页设计\0102”中创建苏宁易购网的首页0102.html。（1）编写网页0102.html通用的CSS代码
苏宁易购网的首页0102.html通用的CSS代码如表1-14所示。表1-14 网页0102.html通用的CSS代码（2）编写网页0102.html主体结构的CSS代码
网页0102.html主体结构的CSS代码如表1-15所示。表1-15 网页0102.html主体结构的CSS代码（3）编写网页0102.html主体结构的HTML代码
网页0102.html主体结构的HTML代码如表1-16所示。表1-16 网页0102.html主体结构的HTML代码
2. 网页0102.html的局部内容设计（1）网页0102.html的顶部内容设计
苏宁易购网的首页0102.html顶部内容的CSS代码如表1-17所示。表1-17 网页0102.html顶部内容的CSS代码
试读结束[说明：试读内容隐藏了图片]