作者：陈婉凌,夏毓彦
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5+CSS3+jQuery Mobile轻松构造App与移动网站(第2版)试读：
前言
最近制作网站时不少客户会问，网站能不能直接转换成手机可以浏览的版本，最好能直接装在用户的手机上？当然可以！只要有HTML5，客户的上述需求都能轻易满足。大多数客户都会优先考虑如何节省成本，如果为了移动设备再开发一个原生应用程序（Native App）的版本，费用会更加昂贵。但是通过HTML5技术，稍微修改一下现有网站就能放到移动设备上，功能界面与普通APP没有区别，甚至更加美观，客户接受度普遍都很高。对于程序开发人员而言，轻轻松松就能增加两三倍的收入，这也是HTML5这么诱人的原因。
对于程序开发人员而言，最大的问题应该是界面设计部分，jQuery Mobile函数库的出现，完全解决了这个问题，它的优点之一就是只要稍加设置属性，就能将表单组件转换成移动设备界面。HTML5与jQuery Mobile两者搭配使用，能够轻易达到跨平台、跨设备（Write-Once, Run Anywhere）的目的，这无疑是目前开发跨移动设备网站的技术首选。
HTML5不仅仅是单纯的HTML语法，还包含了JavaScript、CSS等技术，HTML5新增了一些网页应用程序的API，这些都必须搭配JavaScript语言使用。另外，网页美化的部分，如文字字体、大小与颜色等，以前可以使用标记属性来设置，现在HTML5已经停用这些样式美化的标记属性，改由CSS语法负责。当然，学习这些技术之前，必须十分熟悉基本的HTML语法，才能达到事半功倍的效果。
本书以HTML5为主体，搭配jQuery制作网页，再搭配jQuery Mobile制作Mobile APP，由基础到高级循序渐进，并通过范例，让读者进行实战练习。第4篇“打包与测试”教用户如何将写好的网页打包成Android APP。本书最后3章包含了完整的范例实战——“百度地图API和谷歌地图API”“甜点坊订购系统实战”以及“记事本Note APP实战”，后面两个范例分别搭配Web Storage和Web SQL数据库。制作完成之后，用户立即就能将成果打包并且放到移动设备上安装运行。只要按部就班地跟着本书学习，就能轻松制作网页及Android APP。“工欲善其事，必先利其器”，网页制作前的首要任务就是准备好相关的软件工具，例如想要设计个人专用图案或影片就必须由图像编辑软件、多媒体剪辑软件进行辅助，这些软件工具虽然可以在市面上买到，但对于经费有限的读者来说，却是一大负担。读者可以参考书中所列举的免费工具或自由软件，让有心学习的用户找到合适的工具。相信本书会是用户学习网页制作的最佳入门书，同时也适合老师们作为相关课程的教材使用。
本书内容虽经再三思考校对，力求谨慎、正确，但疏漏之处恐难避免，还请读者批评指正，再次感谢。
本书范例的素材和代码下载地址为：http://pan.baidu.com/s/1qY6Kj04（注意区分数字和英文字母大小写）。如果下载有问题，请发送电子邮件至booksaga@126.com，邮件主题设置为“求HTML5+CSS3（第2版）代码”。编者2016年8月第01篇HTML5网页开发 第1章 HTML5基础入门 第2章 文字变化与排版技巧 第3章 HTML5表格与表单 第4章 HTML5多媒体素材的应用 第5章 网页存储Web Storage第1章 HTML5基础入门
HTML是HyperText Markup Language（超文本标记语言）的缩写，虽然说HTML也算是一种程序语言，但是事实上HTML并不像C++或Visual Basic语言那样必须记住大量的语法。正确地说，HTML只是一种标记（tags），每个标记都是一个特定的指令，这些指令组合起来就是我们在浏览器看到的网页。1.1 认识HTML5
HTML5与HTML4在架构上有很大的不同，但是基本的标记语法并没有很大的改变。下面我们先来了解一下HTML5与HTML4的差异。1.1.1 HTML5与HTML4的差异
HTML5是最新的HTML标准，于2014年达到稳定阶段，不过目前多数标准都已经大致制定，大部分的浏览器也都已经支持HTML5标准。
广义的HTML5除了本身的HTML5标记之外，还包含CSS3与JavaScript。为了配合CSS语法，HTML5在架构与网页排版美化方面的标记做了很大的更改，但是基本的标记语法并没有大的改变。下面列出几项HTML4和HTML5比较大的差异，供读者参考。
1．语法简化
HTML、XHTML的DOCTYPE、html、meta、script等标记，在HTML5中被大幅度简化。
2．统一网页内嵌影音的语法
以前我们在网页中播放影音时，需要使用ActiveX或Plug-in的方式来完成，例如播放YouTube影音需要安装Flash Player，播放苹果网站的影音则需要安装QuickTime Player。HTML5之后使用
3．新增
为了让网页的可读性更高，HTML5增加了
4．HTML5废除了一些旧的标记
HTML5新增了一些标记，也废除了一些旧标记。废除的旧标记大部分是网页美化的标记，例如、、等。在下一小节中会列出废除的标记。
5．全新的表单设计
对于设计网页的程序者来说，表单是最常用的功能，在这方面，HTML5做了很大的更改，不但新增了几项新的标记，原来的
6．利用
HTML5新增了具有绘图功能的
7．提供API开发网页应用程序
为了让网页程序设计者更好地开发网页设计应用程序，HTML5提供了多种API供设计者使用，例如Web SQL Database让设计者可以脱机访问客户端（Client）的数据库。当然，要使用这些API，必须熟悉JavaScript语法。
以上7项只是HTML5中较大的更改，有些标记语法的小修改，在以下的章节中笔者会陆续进行说明。1.1.2 HTML5废除的标记
HTML5新增了一些标记，也废除了一些旧的标记，虽然目前这些即将废除的标记仍然可以使用，不过既然W3C已经明确指出将废除这些标记，为了避免以后网页显示发生问题，最好避免使用这些标记。
如果网页中不小心使用了这些废除的标记也没有关系，当标记停用时，HTML5仍然具备向下兼容的特性，浏览器将会跳过错误继续向下执行，只是网页可能会无法完整呈现想要的效果。
表1-1列出了常用但HTML5将废除的标记，提醒读者特别留意。表1-1 HTML将废除的标记（续表）1.2 学习HTML前的准备工作
工欲善其事，必先利其器。学习HTML之前必须先准备好编写HTML的操作环境，本节就告诉你如何创建HTML，进而存储文件并在浏览器中预览其结果。1.2.1 创建HTML文件
学习HTML不需要昂贵的硬件与软件设备，只要准备好下面两个基本工具即可。
1．浏览器
如Microsoft Internet Explorer（IE）、Google Chrome或者Mozilla Firefox浏览器。
2．纯文本编辑软件
HTML是标准的文件格式，任何一种纯文本编辑软件都可以编辑HTML文件。例如，Windows操作系统中的“记事本”，就是一个基本的文字编辑工具。提示目前，Google Chrome、Firefox、Opera及Safari浏览器都支持HTML5，只是支持程度各有不同，Internet Explorer（IE）从IE 9之后对HTML 5才有较佳的支持。
笔者接下来就通过Windows操作系统中的记事本和360安全浏览器，介绍创建HTML文件的方法。
01 打开记事本，请运行“开始/所有程序/附件/记事本”命令。在文档空白中输入如图1-1所示的文字。图1-1 在记事本中输入文字
02 单击“文件”菜单中的“保存”命令，将记事本文件保存为HTML文件，如图1-2所示。图1-2 单击“文件”菜单中的“保存”命令
03 在“文件名”文本框中输入index.htm，保存文件，如图1-3所示。图1-3 输入文件名
完成以上的操作后，这个文件的格式就是“HTML文件”。接着就可以利用浏览器来观看网页的效果了。提示HTML文件中的HTML标记是不区分大小写的，不管是、或都是同样的效果，不过有些程序语言是区分大小写的。为了养成良好的习惯，建议尽量采用小写。1.2.2 预览HTML网页
制作好的网页必须要使用浏览器才能正常显示，下面以360安全浏览器来说明如何浏览网页。
01 打开360安全浏览器，将上一小节保存的index.html文件拖曳到浏览器内，或者运行“文件｜打开”命令，打开index.html文件，如图1-4所示。图1-4 将html文件拖曳到浏览器中
02 运行的结果就会显示在浏览器内，如图1-5所示。图1-5 在浏览器中显示网页内容
如果对运行结果不满意，不需要关闭浏览器，可以直接打开index.html文件进行修改，修改完成后需要保存文件。此时只要返回浏览器，单击“刷新”按钮或按键盘上的F5功能键，就可以立即看到修改后的结果了。
从下一小节开始，我们将进行HTML语法的学习。1.3 HTML语法的概念与架构
开始学习HTML语法之前，首先必须了解HTML的基本架构。1.3.1 HTML的标记类型
所有的HTML标记都有固定的格式，必须用“<”符号与“>”符号括住，例如。HTML标记有容器标记（Container Tags）与单一标记（Single Tag）两种。
1．容器标记（Container Tags）
容器标记（Container Tags）是成对的开始标记（Start Tag）与结束标记（End Tag），利用这两个标记将文字围住，以达到预期的效果。大部分的HTML标记都属于此种标记，终止标记前会加上一个斜线“/”。
例如：
2．单一标记（Single Tag）
单一标记只有起始标记而没有结束标记，例如
、
标记的功能是添加分隔线，
标记表示成
即可，不必写成
。1.3.2 HTML的组成
一个最简单的HTML网页由与标记标识出网页的开始与结束，网页中分为“头（head）”和“主体（body）”两部分，如下所示。
●
标记：这里通常会放置网页的相关信息，例如●
●
标记：这里放置网页的内容，这些内容将直接显示在网页上。1.3.3 标记属性的应用有些标记可以加上属性（Attributes）来改变其在网页上显示的方式，属性直接置于开始标记内。如果有一个以上的属性，不同的属性需要以空格隔开。例如标记有lang属性可以使用，lang属性用来指定网页语言，语法如下：
表示网页语言设置为中文。当有多个属性值时就可以用空格来分隔各个属性，如下所示。
例如：
meta标记用来描述网页，有利于搜索引擎快速找到网站并正确分类。提示标记的属性同样是不区分大小写的。1.4 HTML5文件结构与语义标记
网页开发标准很重要的一环就是“结构”（structure）与“呈现”（presentation）分开，让网页开发人员只需关注网页结构及内容，而网页设计师可以用CSS语法帮助美化网页。这样，不仅增加了程序的可读性，每当网页需要改版时，设计师只要更改CSS文件就可以让网页焕然一新，不需要去修改HTML文件。1.4.1 结构化的语义标记
语义标记其实并不算新的概念，曾经动手设计过博客的读者，相信对分栏、头部、菜单、主内容区、页脚等结构都很熟悉。如果要对页面进行分栏处理、添加标题栏、导航栏或页脚区，在HTML4中的做法是使用
利用这些语义标记生成同样的两栏式网页架构，如图1-7所示。图1-7 两栏式网页架构
结构化语义标记可以自由配置，并没有规定
打开下载资源中的“范例/CH01/背包客旅行札记.htm”文件，就可以看到一个HTML5的实例网页，如图1-8所示。图1-8 实例网页
用记事本打开“背包客旅行札记.htm”，可以看到完整的HTML架构写法。
HTML语法只是显示网页结构与内容，至于网页美化的部分，就交给CSS语法吧。CSS语法在以后章节中有详细的介绍。
可以打开“CH01/背包客旅行札记-CSS版.htm”文件，查看加上CSS语法之后网页所显示的效果，如图1-9所示。图1-9 使用CSS样式后的页面1.4.2 HTML5声明与编码设置
标准的HTML文件在文件前端都必须使用DOCTYPE声明使用的标准规范。在HTML4中还有DOCTYPE命令，而且有3种模式：严格标准模式（HTML 4 Strict）、近似标准模式（HTML 4 Transitional）和近似标准框架模式（HTML 4 Frameset）。DOCTYPE命令必须很清楚地声明使用何种标准，以近似标准框架来说，其语法如下：
HTML5的DOCTYPE声明就简单多了，其语法如下所示：
语言与编码类型
网页中声明语言与编码是很重要的，如果网页文件中没有正确声明编码，浏览器会根据浏览者计算机的设置显示编码。例如，我们有时逛一些网站，会看到一些网页变成乱码，通常都是因为没有正确声明编码。
语言的声明方式很简单，只要在
与中间加入如下代码即可：lang属性设置为zh-CN，表示文件内容使用简体中文。
网页编码的声明语法如下：
charset属性设置为GB2312，表示使用GB2312编码。如果使用UTF-8编码，只要将charset属性值改为UTF-8即可。提示GB2312是简体中文编码，只支持简体中文，也就是说GB2312编码的网页在台湾地区用BIG5编码打开会变成乱码，而UTF-8是国际码，支持多种语言，不容易出现乱码的问题。要特别提醒读者，网页编码的声明要与保存文件时的编码格式一致。
试读结束[说明：试读内容隐藏了图片]