作者：新视角文化行
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通试读：
前言
本书全面介绍了HTML5、CSS3和jQuery Mobile的核心知识点，通过实际案例与知识点相结合的方式，使读者能够更容易理解技术要点，掌握APP与移动网站设计的方法与技巧。本书特点
● 完善的学习模式“基础知识+实战案例+提示与技巧+教学视频”4大环节保障了可学习性。详细讲解HTML5、CSS3和jQuery Mobile的知识与应用，力求让读者即学即会。140个实战案例辅助读者理解语法知识，做到处处有案例，步步有操作。180个提示和50个技巧贯穿全书，帮助读者顺利过渡到实际工作。
● 进阶式知识讲解
全书共19章，分别从HTML5、CSS3和jQuery Mobile的基础入手，循序渐进讲解它们的核心技术和应用，并逐步进阶到它们的综合应用。基础讲解与操作紧密结合，方法全面，技巧丰富，不但能学习到专业的语法知识与技巧，还能提高实际应用的能力。
● 详尽的视频教学
140个近640分钟多媒体语音教学视频，由一线教师亲授，详细记录了所有案例的具体操作过程，全面配合书中所讲知识与技能，提高学习效率。
● 配套的素材、源文件
提供书中所有实例的素材文件，便于读者跟随学习，掌握学习内容的精髓。另外，书中还提供了配套的源文件（HTML文件和CSS文件），供读者对比学习，提升学习效果。
本书内容
全书共分为19章，每章的主要内容如下。
第1章 从HTML到HTML5。主要介绍了HTML与HTML5的相关基础知识及HTML5的优势，使读者对HTML和HTML5有更深入、全面的了解。
第2章 HTML5文字与段落标签。主要介绍了HTML中用于设置文字、段落和列表的相关标签和属性设置方法，使读者能够更好地控制网页中的文字内容。
第3章 HTML5文档结构标签。主要介绍了HTML中新增的用于描述文档结构的相关标签的使用方法，通过使用HTML5文档结构标签，可以使页面的内容结构更加清晰。
第4章 HTML5图像与超链接标签。主要介绍了HTML页面中图像的插入与设置方法，以及网页中各种超链接的创建方法和相关属性的设置方法。
第5章 使用HTML5中的表单元素。详细介绍了传统的表单元素和HTML5新增的表单元素，通过新增的HTML5表单元素可以在移动应用中创建更加友好的表单应用。
第6章 使用HTML5画布元素。详细介绍了使用canvas元素在网页中绘制图形、文字和渐变的方法。
第7章 HTML5音频与视频标签。详细讲解了HTML5中Video与Audio元素的使用方法和属性设置技巧。
第8章 CSS样式的发展与选择器。主要介绍了有关CSS样式的基础知识，包括CSS样式的语法、CSS选择器、CSS3新增的选择器及应用CSS样式的方法。
第9章 设置文字与段落样式。主要介绍了用于设置网页文字与段落效果的相关CSS样式属性，以及CSS3新增的用于设置文字效果的相关属性的使用方法。
第10章 设置背景样式。主要介绍了用于设置网页元素背景效果的相关CSS样式属性，以及CSS3新增的颜色和背景相关的设置属性的使用方法。
第11章 设置超链接和边框样式。主要介绍了对元素边框和超链接进行设置的相关CSS属性和设置方法，并且对CSS3中新增的边框样式属性进行了详细讲解。
第12章 设置元素的定位与布局属性。主要介绍了网页元素定位的各种方法及相关CSS样式属性的设置方法，并且对CSS3中新增的多列布局属性进行了详细讲解。
第13章 CSS3盒模型。详细讲解了传统CSS盒模型与CSS3新增的弹性盒模型，以及CSS3中新增的有关盒模型设置的相关属性。
第14章 CSS3动画效果。详细介绍了CSS3各种动画效果的制作方法和技巧。
第15章 jQuery和jQuery Mobile基础。主要介绍了jQuery和jQuery Mobile的相关基础知识，以及jQuery Mobile页面的文档结构，使读者对jQuery Mobile页面有更好的认识。
第16章 认识并创建jQuery Mobile页面。主要介绍了jQuery Mobile页面及各部分结构的创建和设置方法，还介绍了结构化jQuery Mobile页面内容的方法。
第17章 使用jQuery Mobile主题与组件。主要介绍了jQuery Mobile页面主题的相关知识，包括使用默认主题、自定义主题的方法等，还介绍了jQuery Mobile中的各种页面组件的使用和设置方法，包括按钮组件、表单组件和列表组件等。
第18章 使用jQuery Mobile事件与插件。主要介绍了jQuery Mobile页面中的常用事件的设置方法，以及常用插件的使用方法。
第19章 移动应用制作实战。通过3个实用的移动应用案例，向读者介绍了综合应用HTML5、CSS3和jQuery Mobile开发移动应用的方法。编者2018年3月 第1章 从HTML到HTML5
jHTML是Internet上用于设计制作网页的主要语言。网页中所包括的图像、动画、表单和多媒体等复杂的元素，其本质都是HTML。随着互联网的飞速发展，网页设计语言也在不断变化和发展，从HTML到HTML5，每一次的发展变革都是为了适应互联网的需求。本章将向读者介绍有关HTML和HTML5的相关基础知识，使读者对HTML的发展有所了解，并且理解HTML5与HTML之间有哪些共同点及有哪些改进。本章知识点
• 了解HTML的基础知识
• 理解HTML的基本语法和编写注意事项
• 掌握HTML5的文档结构并理解HTML5的优势
• 掌握两种HTML文档的编写方式
• 认识HTML5中的标签
• 了解Web移动应用1.1 HTML基础
HTML主要运用标签使页面文件显示出预期的效果，也就是在文本文件的基础上，加上一系列的网页元素展示效果，最后形成后缀名为.htm或.html的文件。通过浏览器阅读HTML文件时，浏览器负责解释插入到HTML文件中的各种标签，并以此为依据显示内容，把HTML语言编写的文件称为HTML文本，HTML语言即网页的描述语言。1.1.1 HTML概述
在介绍HTML语言之前，不得不介绍World Wide Web（万维网）。万维网是一种建立在因特网上的、全球性的、交互的、多平台的和分布式的信息资源网络。它采用HTML语法描述超文本（Hypertext）文件。Hypertext一词有两个含义：一个是链接相关联的文件，另一个是内含多媒体对象的文件。
HTML的英文全称是Hyper Text Markup Language，中文通常称为超文本标记语言，HTML是Internet中用于编写网页的主要语言，HTML提供了精简而有力的文件定义，可以设计出多姿多彩的超媒体文件。通过HTTP通信协议，HTML文件得以在万维网上进行跨平台的文件交换。提示HTML文件可以直接由浏览器解释执行，无须编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分辨其语法结构，然后根据解释的结果显示网页内容，正是因为如此，网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的HTML源代码是十分重要的。1.1.2 HTML特性
HTML文件制作简单，且功能强大，支持不同数据格式的文件导入，主要有以下几个特点。（1）HTML文档容易创建，只需要一个文本编辑器就可以完成。（2）HTML文件存储容量小，能够尽可能快速地在网络中进行传输和显示。（3）HTML文件与操作平台无关，HTML独立于操作系统平台，能够与多种平台兼容，只需要一个浏览器就可以在操作系统中浏览网页文件。（4）简单易学，不需要很深的编程知识。（5）HTML具有扩展性，HTML的广泛应用带来了加强功能、增加标识符等要素，HTML采取了类元素的方式，为系统扩展提供了保证。1.1.3 HTML文档结构
编写HTML文件的时候，必须遵循HTML的语法规则。一个完整的HTML文件由标题、段落、列表、表格、单词和嵌入的各种对象所组成。这些逻辑上统一的对象统称为元素，HTML使用标签来分割并描述这些元素。实际上，整个HTML文件就是由元素与标签组成的。
HTML文件基本结构如下。
头部内容 主体内容可以看到，代码分为3部分。1. ……
告诉浏览器HTML文件的开始和结束，标签出现在HTML文档的第一行，用来表示HTML文档的开始。标签出现在HTML文档的最后一行，用来表示HTML文档的结束。两个标签一定要一起使用，网页中的其他内容都需要放在与之间。2.
……网页的头标签，用来定义HTML文档的头部信息，该标签也是成对使用的。3.
……在
标签之后就是与标签了，该标签也是成对出现的。与标签之间为网页主体内容和其他用于控制内容显示的标签。1.1.4 HTML的基本语法绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间的部分是元素体，如
…。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标签内进行设置。1. 普通标签普通标签是由一个起始标签和一个结束标签所组成的，其语法格式如下。
其中，x代表标签名称。
标签之中还可以附加一些属性，用来实现或完成某些特殊效果或功能，如下面的代码。
其中，a1，a2……，an为属性名称，而v1，v2……，vn则是其所对应的属性值。属性值加不加引号，目前所使用的浏览器都可接受，但根据W3C的新标准，属性值是需要加引号的，所以读者最好养成加引号的习惯。2. 空标签
虽然大部分的标签是成对出现的，但也有一些是单独存在的，这些单独存在的标签称为空标签，其语法格式如下。
同样，空标签也可以附加一些属性，用来完成某些特殊效果或功能，如下面的代码。
如下面的代码。
提示HTML还有其他更为复杂的语法，使用技巧也非常多，作为一种语言，它有很多的编写原则并且以很快的速度发展着。1.1.5 HTML编写注意事项
HTML由标签和属性构成，在编写HTML文档时，需要注意以下6点。（1）“<”和“>”是任何标签的开始和结束。元素的标签需要使用这对尖括号括起来，并且在结束标签的前面加上符号“/”，如
。（2）在HTML代码中不区分大小写。（3）任何空格和回车在HTML代码中均不起作用。为了使HTML代码更加清晰，建议不同的标签之间使用回车进行换行。（4）在HTML标签中可以添加各种属性设置，如下面的HTML代码。这里是段落文本
（5）需要正确的输入HTML标签。输入HTML标签时，不要输入多余的空格，否则浏览器可能无法识别这个标签，导致无法正确地显示。（6）在HTML代码中合理地使用注释。注释语句只会出现在HTML代码中，不会在浏览器中显示。1.2 HTML5基础HTML5是近10年来Web标准最巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。尽管HTML5的实现还有很长的路要走，但HTML5正在改变Web。1.2.1 HTML5概述
W3C在2010年1月22日发布了最新的HTML5工作草案。HTML5的工作组包括AOL、Apple、Google、IBM、Microsoft、Mozilla、Nokia、Opera及数百个其他的开发商。制定HTML5的目的是取代1999年W3C所制定的HTML4.01和XHTML1.0标准，希望能够在网络应用迅速发展的同时，网页语言能够符合网络发展的需求。
HTML5实际上指的是包括HTML、CSS样式和JavaScript脚本在内的一整套技术的组合，希望通过HTML5能够轻松地实现许多丰富的网络应用需求，而减少浏览器对插件的依赖，并且提供更多能有效增强网络应用的标准集。
在HTML5中添加了许多新的应用标签，其中包括
HTML5的文档结构与前面所介绍的HTML的文档结构非常类似，基础的文档结构如下。
HTML5的文档结构非常简洁，第一行代码 声明文档是一个HTML文档，接下来使用标签包含头部内容
标签和主体内容标签，从而构成HTML5文档的基本结构。1.2.3 HTML5的优势对于用户和网站开发者而言，HTML5的出现意义非常重大。因为HTML5解决了Web页面存在的诸多问题，HTML5的优势主要表现在以下几个方面。1. 化繁为简
为了做到尽可能简化，HTML5避免了一些不必要的复杂设计。例如，DOCTYPE声明的简化处理，在过去的HTML版本中，第一行的DOCTYPE过于冗长，在实际的Web开发中也没有什么意义，而在HTML5中DOCTYPE声明就非常简洁。
为了让一切变得简单，HTML5下了很大的功夫。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。2. 向下兼容
HTML5有着很强的兼容能力。在这方面，HTML5没有进行颠覆性的革新，允许存在不严谨的写法，如一些标签的属性值没有使用英文引号括起来，标签属性中包含大写字母，有的标签没有闭合等。然而，这些不严谨的错误处理方案在HTML5的规范中都有着明确的规定，也希望未来在浏览器中有一致的支持。当然，对于Web开发者来说，还是遵循严谨的代码编写规范比较好。
对于HTML5的一些新特性，如果旧的浏览器不支持，也不会影响页面的显示。在HTML规范中，也考虑了这方面的内容，如在HTML5中标签的type属性增加了很多新的类型，当浏览器不支持这些类型时，默认会将其视为text。3. 支持合理
HTML5的设计者们花费了大量的精力来研究通用的行为。例如，Google分析了上百万份的网页，从中提取了
既然该行为已经大量存在，HTML5就会想办法去改进，所以就直接增加了一个
对于HTML无法实现的一些功能，用户会寻求其他方法来实现，如对于绘图、多媒体、地理位置和实时获取信息等应用，通常会开发一些相应的插件间接地去实现。HTML5的设计者们研究了这些需求，开发了一系列用于Web应用的接口。
HTML5规范的制定是非常开放的，所有人都可以获取草案的内容，也可以参与进来提出宝贵的意见。因为开放，所以可以得到更加全面的发展。一切以用户需求为最终目的，所以，当用户在使用HTML5的新功能时，会发现这正是期待已久的功能。5. 用户优先
在遇到无法解决的冲突时，HTML5规范会把最终用户的诉求放在第一位。因此，HTML5的绝大部分功能都是非常实用的。用户与开发者的重要性远远高于规范和理论。例如，有很多用户都需要实现一个新的功能，HTML5规范设计者们会研究这种需求，并纳入规范；HTML5规范了一套错误处理机制，以便当Web开发者写了不够严谨的代码时，接纳这种不严谨的写法。HTML5比以前版本的HTML更加友好。1.2.4 HTML5精简的头部
HTML5避免了不必要的复杂性，DOCTYPE和字符集都极大地简化了。
DOCTYPE声明是HTML文件中必不可少的内容，它位于HTML文档的第一行，声明了HTML文件遵循的规范。HTML 4.01的DOCTYPE声明代码如下。
这么长的一串代码恐怕极少有人能够默写出来，通常都是通过复制/粘贴的方式添加这段代码。而在HTML5中的DOCTYPE代码则非常简单，如下所示。
这样就简洁了许多，不需要再复制/粘贴代码了。同时这种声明也标志性地让人感觉到这是符合HTML5规范的页面。如果使用了HTML5的DOCTYPE声明，则会触发浏览器以标准兼容的模式来显示页面。
字符集的声明也是非常重要的，它决定了页面文件的编码方式。在过去，都是使用如下的方式来指定字符集的，代码如下。
HTML5对字符集的声明也进行了简化处理，简化后的声明代码如下。
在HTML5中，以上两种字符集的声明方式都可以使用，这是由HTML5向下兼容的原则决定的。1.3 HTML文件的编写方式
网页文件即扩展名为htm或html的文件，本质上是文本类型的文件，网页中的图片、动画等资源是通过网页文件的HTML代码链接的，与网页文件分开存储。
由于HTML语言编写的文件是标准的ASCII文本文件，因此可以使用任意一种文本编辑器来打开或编辑。例如，Windows操作系统中自带的记事本或者专业的网页制作软件Dreamweaver。1.3.1 使用记事本编写
HTML是一个以文字为基础的语言，并不需要什么特殊的开发环境，可以直接在Windows操作系统自带的记事本中进行编辑，其优点是方便快捷，缺点是无任何语法提示、无行号提示和格式混乱等，初学者使用困难。实战 使用记事本制作HTML页面最终文件：最终文件\第1章\1-3-1.html 视频：视频\第1章\1-3-1.mp4
01 在Windows操作系统中执行“开始>所有程序>附件>记事本”命令，打开记事本窗口，如图1-1所示。在记事本中按正确的文档结构编写HTML页面代码，如图1-2所示。图1-1 打开记事本窗口图1-2 编写HTML代码
02 所编写的完整的页面HTML代码如下。
提示此处所编写的HTML页面代码非常简单，主要在头部的03 执行“文件>另存为”命令，将会弹出“另存为”对话框，将文件保存为“源文件\第1章\1-3-1.html”，如图1-3所示。单击“保存”按钮，即可将用记事本编写的HTML代码保存为网页文件，在浏览器中预览该网页文件，可以看到网页的效果，如图1-4所示。图1-3 “另存为”对话框图1-4 在浏览器中预览HTML页面提示在将记事本中编写的HTML代码保存为网页html格式时，需要注意“编码”选项的设置。默认情况下，需要将“编码”设置为UTF-8，否则，网页中的中文在浏览器中可能会显示为乱码。1.3.2 使用Dreamweaver编写
Dreamweaver是网页制作的主流软件，其优点是有所见即所得的设计视图，能够通过鼠标指针拖放直接创建并编辑网页文件，自动生成相应的HTML代码。Dreamweaver的代码视图有非常完善的语法自动提示、自动完成和关键词高亮等功能。可以说，Dreamweaver是一个非常全面的网页制作工具，图1-5所示为Dreamweaver软件的工作界面。图1-5 Dreamweaver工作界面1. 菜单栏
菜单栏中包含了所有Dreamweaver CC操作所需要的命令。这些命令按照操作类别分为“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单。2. 文档工具栏
文档工具栏包含一些按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如单击“实时视图”按钮可以将设计视图切换到实时视图）。3. 代码视图
该窗口将显示当前所编辑页面的相应代码，在代码窗口左侧是相应的代码工具，通过使用这些工具，可以在代码中插入注释，简化代码操作。4. 设计视图
该窗口显示当前所制作页面的效果，也是可视化操作的窗口，可以在该窗口中使用各种工具实现输入文字、插入图像等，是所见即所得的视图。5. 标签选择器
标签选择器位于“文档”窗口底部的状态栏左侧，可显示当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。6. “属性”面板
用于查看和更改所选对象或文本的各种属性。选中不同的对象，在“属性”面板中会显示不同的内容。7. 面板组
用于帮助用户完成监控和修改工作，如“插入”面板、“CSS设计器”面板。双击相应的选项卡，可以折叠或展开当前选项卡。
在Dreamweaver的代码视图中会以不同的颜色显示HTML代码，帮助用户区分各种标签，同时用户也可以自己指定标签或代码的显示颜色。总体看来，代码视图更像是一个常规的文本编辑器，只要单击代码的任意位置，就可以开始添加或修改代码了，通过代码视图工具能够非常方便地对HTML代码进行编辑和调整，如图1-6所示。图1-6实战 使用Dreamweaver制作HTML页面最终文件：最终文件\第1章\1-3-2.html 视频：视频\第1章\1-3-2.mp4
01 打开Dreamweaver，执行“文件>新建”命令，将会弹出“新建文档”对话框，选择HTML选项，如图1-7所示。单击“创建”按钮，新建HTML5文档，转换到代码视图中，可以看到文档的HTML代码，如图1-8所示。图1-7 “新建文档”对话框图1-8 网页HTML代码
02 执行“文件>保存”命令，将会弹出“另存为”对话框，将该网页保存为“源文件\第1章\1-3-2.html”，如图1-9所示。在页面的
03 在
标签中添加style属性设置代码，如图1-11所示。在与标签之间编写相应的网页正文内容代码，如图1-12所示。图1-11 添加style属性设置图1-12 编写页面正文内容提示在标签中添加style属性设置，实际上是CSS样式的一种使用方式，称为内联CSS样式。此处通过内联CSS样式设置页面整体的背景颜色、水平对齐方式、文字颜色和顶部边距。04 完成该网页HTML代码的编写，完整的HTML代码如下。
欢迎光临我们的网站>>
05 执行“文件>保存”命令，保存网页，在浏览器中预览该网页，可以看到网页的效果，如图1-13所示。图1-13 在浏览器中预览页面提示Dreamweaver是一款专业的网页制作软件，在Dreamweaver中新建HTML页面，会自动给出HTML文档结构的基础代码，编写HTML代码还具有代码提示等功能，非常适合初学者使用。1.4 HTML5中的标签
通过制作处理所有HTML元素及从错误中恢复的精确规则，HTML5改进了互操作性，减少了开发成本。HTML5中的标签介绍，如表1-1所示。表1-1 HTML5中的标签1.5 关于移动Web应用
各种类型的移动应用程序种类繁多，其开发的方式也存在着差异，有些采用原生SDK进行开发，有些是基于Web的应用开发，不同的开发方式各有优缺点。本节将向读者介绍有关移动Web应用开发的相关基础知识，使读者对移动Web应用有更深入的了解。1.5.1 移动Web应用的发展
自2007年Apple公司发布第一款iPhone手机之后，基于移动终端的Web应用便得到发展。当时Apple公司并不允许第三方开发者开发其iPhone应用软件，只允许他们开发基于Web的应用程序。
2008年，Apple正式推出iPhone SDK，并开放APP Store应用软件市场。SDK的推出，让原来需要开发基于Web应用的第三方开发者几乎都转向iPhone SDK的开发。
现在，移动智能设备之所以能够风靡全球，除了因其具有强大的硬件特性外，更重要的是它们拥有海量的应用软件，特别是在APP Store和Android Market上的应用都是基于两大公司（Apple和Google）提供SDK给第三方开发者进行开发的。Apple公司提供的是基于Object-C语言的iOS SDK应用开发，Google公司提供的是基于Java语言的Android SDK应用开发。
基于原生SDK的开发存在以下几点优势。（1）更好的用户体验和交互操作。（2）不受网络限制，节省带宽成本。（3）可以充分发挥设备硬件和操作系统的特性。
原生SDK在开发应用软件方面的优势非常明显，但仍存在一些不足，如下。（1）平台间移植困难，存在版本间的兼容问题。（2）开发周期长，维护成本高，调试困难。（3）需要依赖第三方应用商店的审核上架，如APP Store。1.5.2 基于Web的应用开发
除了基于SDK开发方式外，移动智能设备还支持Web开发方式。例如，iPhone上的APP Store就是典型的Web APP应用软件。尤其是HTML5和Webkit的不断发展，让移动Web应用变得更加强大。
与原生SDK开发相比，基于Web的应用开发存在以下几点优势。（1）开发效率高，成本低。（2）跨平台应用，界面风格统一。（3）调试和发布方便。（4）无须安装或更新。
基于Web的开发方式虽然在跨平台方面有优势，但并不是所有原生SDK都适合通过Web方式实现，还存在如下3点问题。（1）无法发挥本地硬件和操作系统的优势。（2）受网络环境的限制。（3）难以实现复杂的用户界面效果。
将原生SDK应用和基于Web应用进行比较来看，两种开发模式各有其优点。目前来看，原生SDK应用能发挥出智能手机特性的最大效果，而基于Web应用则更适合一些传统的Web站点建立移动Web版本。1.5.3 基于HTML5的移动应用
基于Webkit内核的浏览器的一个最大特点就是支持HTML5和CSS3标准。基于HTML5、CSS3和JavaScript的移动应用程序将会是未来的趋势。1. canvas绘图
HTML5标准最大的变化就是支持Web绘图功能。canvas绘图功能非常强大，可以实现如图形绘制、路径绘制、变形和像素绘图等。用户可以通过获取HTML中DOM元素canvas，并调用其渲染上下文的context对象，使用JavaScript进行图形绘制。2. 多媒体
Apple的iOS系统默认并不支持播放Flash文件。HTML5的多媒体标准就是Apple公司的最佳解决方案，因为它不需要任何插件，只需要几个页面标签就能实现多媒体的播放。
HTML5标准中的多媒体，Video视频和Audio音频正好弥补了多年来需要插件才能播放Flash的缺陷。现在只需要利用Video元素和Audio通过简单几行页面代码，就能播放互联网上的各种视频和音频文件。
但是，目前各浏览器厂商对多媒体标准所支持的播放格式不一致，如Google的Chrome浏览器支持的多媒体视频格式是Ogg、MPEG4和WebM，而Apple的Safari浏览器则只支持MPEG4。3. 本地存储
为了满足本地存储数据的需要，HTML5标准中新增两种存储机制，Web Storage和Web SQL数据库。前者通过提供“键/值”方式存储数据，后者通过类似关系数据库的形式存储数据。4. 离线应用
HTML5标准规范提供一种离线应用的功能。当支持离线应用的浏览器检测到清单文件（Manifest File）中的任何资源文件时，便会下载对应的资源文件，将它们缓存到本地，同时它也保证本地资源文件的版本和服务器上的版本保持一致。
对于移动设备来说，当无网络状态可用时，Web浏览器便会自动切换到离线状态，并读取本地资源以保证Web应用程序继续可用。5. 使用地理位置
很多现代浏览器中都实了一种神奇的功能，它能够实时获取到用户当前在地图上所在的位置。
虽然地理定位标准严格上来说并不属于HTML5标准规范的一部分，但它已经逐渐得到大部分浏览器的支持。1.5.4 移动应用开发框架
因为了有Webkit和HTML5的支持，越来越多的Web开发者开始研究基于移动平台的Web应用框架，如基于jQuery页面架构的jQuery Mobile、基于ExtJS架构的Sencha Touch，以及能打通Web和Native两者之间通道的PhoneGap框架。
目前基于HTML5移动Web框架存在两种不同的开发模式，一种是基于传统Web的开发，另一种是基于组件式的Web开发。
基于传统Web的开发模式，就是在传统Web网站上，根据移动设备平台的特点展示其移动版的Web站点。目前最能体现该开发模式优势的Web框架是jQuery Mobile。通过使用CSS3的新特性，Media Queries模块可以实现在一个站点同时能自适应任何设备，包括桌面电脑和智能手机。
基于组件式的Web开发有些类似于Ext所提供的富客户端开发模式，在该模式下几乎所有的组件或视图都封装在JavaScript内，然后通过调用这些组件展示Web应用。这种模式的最佳代表是Sencha Touch。
在本书中将会为读者介绍使用jQuery Mobile移动Web应用框架来开发移动设备Web应用程序的相关知识。1.6 本章小结
HTML是一切网页技术的基础，只有学好HTML技术，才能够制作出精美的网站。本章中详细向读者介绍了HTML的相关基础知识及HTML5给设计带来的变化，使读者能够更加了解HTML5的相关规范和标签，为后面的学习打下良好的基础。 第2章 HTML5文字与段落标签
j文字不仅是网页信息传达的一种常用方式，也是视觉传达最直接的方式，运用经过精心处理的文字内容完全可以制作出效果很好的版面。输入完文本内容后就可以对其进行格式化操作，而设置文本样式是实现快速编辑文档的有效操作，让文字看上去编排有序、整齐美观。本章将向读者介绍在HTML代码中用于设置文字与段落的相关标签和属性，使读者轻松掌握在HTML页面中合理的设置文字效果的方法。本章知识点
• 掌握用于设置文本效果的各种基本标签和属性的设置方法
• 掌握其他文字标签的使用方法
• 掌握网页中文本换行、分段标签及相关 属性的设置方法
• 掌握HTML页面中各种列表标签的使用方法2.1 设置文字效果
设计网页离不开字体的设置，恰当的字体运用能够丰富网页的内容，美化文字的视觉效果。本节从文字的细节修饰着手，使读者轻松把握HTML的各种字体格式的变化，制作出更加精美的网页。2.1.1 文字样式标签
标签可以用来设置文字的颜色、字体和大小，是网页设计的常用标签。可以通过标签中的face属性设置不同的字体，可以通过标签中的size属性来设置文字的字体大小，还可以通过标签中的color属性来设置文字的颜色。1. 设置字体
face属性规定的是字体的名称，如中文字体的“宋体”“楷体”和“微软雅黑”等。可以通过字体的face属性设置不同的字体，设置的字体效果必须在浏览器中安装相应的字体才可以正确浏览，否则有些特殊字体会被浏览器中的普通字体所代替。
设置字体的基本语法如下。……
face属性用于设置文本所采用的字体。如果浏览器能够在当前系统中找到该字体，则使用所设置的字体显示，如果在当前系统中找不到该字体，则会使用默认的字体显示文字。
如下面的HTML网页代码，分别为文字设置不同的字体。…
字体为宋体：欢迎光临我们的网站字体为楷体：欢迎光临我们的网站
字体为黑体：欢迎光临我们的网站
…2. 设置字体大小
文字的大小也是字体的重要属性之一。除了使用标题文字标签设置固定大小的字号外，HTML语言还提供了用标签的size属性来设置普通文字的字号的方法。
设置文字大小的基本语法如下。……
size的属性值为1~7，默认值为3，也可以在属性值之前加上+或-字符，来指定相对于初始值的增量或减量。文字的字号可以设置为1~7，也可以是+1~+7或者-1~-7。这些字号并没有固定的大小值，而是相对于默认文字大小来设定的，默认文字的大小与3号字相同，数值越大，文字也越大。
如下面的HTML网页代码，分别为文字设置不同的字体大小。…
size为1：网页设计size为2：网页设计
size为3：网页设计
size为4：网页设计
size为5：网页设计
size为6：网页设计
size为7：网页设计
…3. 设置文字颜色
在HTML页面中，可以设置字体的不同颜色，使页面看起来更加的丰富多彩，吸引浏览者的注意。
设置字体颜色的基本语法如下。……
color属性的颜色值可以用浏览器能够识别的颜色名称或十六进制颜色值表示。
如下面的HTML网页代码，分别使用颜色名称和十六进制颜色值设置文字颜色。…
红色文字：网页设计蓝色文字： 网页设计
…实战 使用标签设置网页文字效果最终文件：最终文件\第2章\2-1-1.html 视频：视频\第2章\2-1-1.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-1-1.html”，效果如图2-1所示，切换到代码视图中，可以看到相应的HTML代码，如图2-2所示。图2-1 打开页面图2-2 网页HTML代码
02 为页面中相应的文字添加标签，并在该标签中添加相应的属性设置，如图2-3所示。保存页面，在浏览器中预览页面，可以看到设置后文字的效果，如图2-4所示。图2-3 设置文字的基本属性
试读结束[说明：试读内容隐藏了图片]