描述
开 本: 16开纸 张: 胶版纸包 装: 平装是否套装: 否国际标准书号ISBN: 9787302403968
内容简介
《jQuery Mobile移动网站开发》是一本由浅入深、系统地介绍jQuery Mobile移动网站开发知识的指导书。全书以jQuery Mobile框架为主线，把在开发中涉及的HTML 5、CSS 3、jQuery，以及jQuery Mobile框架的定制与扩展等一并介绍，形成一个完整的体系。本书内容涵盖了jQuery Mobile中的各种UI组件、页面布局、事件处理、网页设计策略、浏览器兼容性、移动网站特点、技术标准的发展与适用性等大量理论与实践过程中需要注意的细节，全书的各个知识点均配有实例，以供参考。
本书适合具有初步HTML/CSS/JavaScript网页设计与编程经验，并对开发移动网站有兴趣的读者学习，不要求读者拥有在移动应用和大型网站开发方面的经验，适用于移动网站开发的初学者。
本书适合具有初步HTML/CSS/JavaScript网页设计与编程经验，并对开发移动网站有兴趣的读者学习，不要求读者拥有在移动应用和大型网站开发方面的经验，适用于移动网站开发的初学者。
目 录
第1章 移动Web开发简介
1.1 移动Web的发展
1.2 移动Web的特点和设计策略
1.3 jQuery Mobile
1.4 准备工作
1.5 本章习题
第2章 HTML 5开发基础
2.1 HTML 5的语法结构
2.2 HTML 5常用元素简介
2.3 HTML 5 API
2.4 HTML 5的增强功能
2.5 HTML 5代码的语法验证
2.6 本章习题
第3章 CSS 3设计基础
3.1 CSS简介
3.2 样式选择器
3.3 基本样式
3.4 图形变换与动画效果
3.5 CSS与输出设备
3.6 本章习题
第4章 jQuery入门
4.1 jQuery的基本使用方法
4.2 jQuery选择器
4.3 jQuery网页特效
4.4 jQuery的事件处理
4.5 jQuery网页的动态处理
4.6 jQuery UI简介
4.7 本章习题
第5章 jQuery Mobile开发基础
5.1 jQuery Mobile应用环境
5.2 jQuery Mobile程序的基本组织结构
5.3 屏幕切换动画特效
5.4 本章习题
第6章 UI组件 – 工具栏
6.1 工具栏基础
6.2 工具栏的内容和样式特征
6.3 导航栏
6.4 网页中的网页
6.5 本章习题
第7章 jQuery Mobile的UI组件
7.1 按钮和图标
7.2 表单输入元素
7.3 表格与网格
7.4 本章习题
第8章 jQuery Mobile的UI组件(续)
8.1 滑动条
8.2 列表视图
8.3 可收放的UI组件
8.4 面板
8.5 选择菜单
8.6 选择开关
8.7 本章习题
第9章 jQuery Mobile的样式定制
9.1 jQuery Mobile主题样式系统简介
9.2 使用第三方样式主题
9.3 ThemeRoller工具
9.4 UI组件定制实例
9.5 本章习题
第10章 jQuery Mobile功能的扩展
10.1 图标集的扩展
10.2 网页切换过渡效果扩展
10.3 UI组件扩展
10.4 本章习题
第11章 jQuery Mobile事件处理
11.1 网页与初始化事件
11.2 用户操作事件
11.3 本章习题
第12章 jQuery和jQuery Mobile的
插件
12.1 日期选择器插件 – DateBox
12.2 窗口插件 – Windows
12.3 图片插件 – OWL Carousel
12.4 Google地图
12.5 本章习题
附录A Web服务器设置方法简介
附录B 习题解答
前 言
前 言
本书是一本由浅入深、系统地介绍jQuery Mobile移动网站开发知识的指导书。
1. 针对初级读者
本书的内容和实例是为具有网页开发初步经验，并对开发移动网页有兴趣的读者设计的。本书在写作中力求从最基础的概念开始讲解，逐步展开jQuery Mobile中各种技术的实际应用方法，并在整体介绍jQuery Mobile框架以后，对常用的定制与扩展方法做进一步的介绍。
本书为所介绍的每一个知识点都配备实例，用于更具体地说明以下几个方面：
* 典型的应用方法。
* 技术重点。
* 容易混淆的技术难点。
本书的实例中包含jQuery Mobile网页、HTML 5网页、CSS 3代码和少量的配置文件。所有的HTML 5和CSS 3代码都通过了语法验证，可确保其符合HTML 5和CSS 3规范。
作者建议读者在编写代码的过程中尽可能地让网页代码遵循HTML 5和CSS 3的语法规范。刚刚开始学习网页设计的读者，从起步阶段就应当养成良好的代码编写习惯。同时，本书的前4章对网页设计人员必须具备的基础知识进行了强化。
另外，本书为读者提供了配套光盘，光盘中含有本书所有实例的源代码。每一章的实例都包含运行这些实例所需要的程序库，分别安排在各自的目录中，读者可以根据需要，把各章实例单独部署到服务器中进行测试。
2. 知识妥善划分
本书在内容安排上分为三个部分：
* 学习jQuery Mobile的必备知识(前提条件)。
* jQuery Mobile的核心知识。
* jQuery Mobile框架的延伸知识。
通常，在讲解jQuery Mobile的时候，会把注意力集中到jQuery Mobile框架本身。作者并不反对这样突出重点的讲解，但在实际开发的过程中，就会发现，许多基本概念还需要重新加深理解，这其中包括对HTML 5的语法特点和使用方法的理解、对jQuery与jQuery Mobile的关系的理解，尤其是对事件处理方法差异的理解，以及对样式与UI组件的定制方法的理解等。对以上这些基本概念的熟悉程度，会对项目完成的质量产生相当大的影响。本书特意安排了4章基础知识，作为学习jQuery Mobile的引导。
另一方面，jQuery Mobile框架的扩展，相关的方法在项目开发中十分重要，但由于其中很大一部分内容并非出自jQuery Mobile的标准定制方法，而常常被忽略。
本书以讨论的方式介绍一些行之有效的扩展方法。同时，作者在介绍这些扩展方法的时候，都会提醒读者有关软件版权限制、软件版本兼容性等问题。作为延伸方案的讨论，本书通过实例介绍各种用于选择和评估扩展方案的方法，这是本书的一个要点。对于方案评价方法的掌握比熟悉几种插件重要得多。
对于jQuery Mobile框架本身，本书采用了常用的技术分类方法，但是，对于个别技术，比如自定义样式，则需要与其他相关的自定义方法一起讲解。
3. 总体结构导读
本书的内容按照学习jQuery Mobile的各个知识点之间的相互依赖关系进行顺序排列。
第一部分是学习jQuery Mobile之前必须掌握的基本知识，包括第1~4章，介绍移动Web的特点、用户界面设计原则、HTML 5和CSS 3语法，以及jQuery入门。
第二部分为jQuery Mobile的核心知识，包括第5~8章、第9章的大部分，以及第11章。这一部分详细介绍jQuery Mobile框架范畴内的各种开发方法和技巧。
第三部分可以视为延伸阅读内容，包括第9章的一小部分、第10~12章，介绍对jQuery Mobile框架功能的扩充，包括事件处理及插件等。
4. 各章内容简介
本书的章节安排充分考虑了初学者循序渐进地学习的要求。
第1章：移动Web开发简介。系统地介绍移动Web的技术发展史，由此引出以HTML 5和CSS 3为主导的网页设计方法，以及在技术演化过程中出现的设计策略，包括这些策略对当前网页设计的影响。
第2章：HTML 5开发基础。介绍HTML入门知识，适用于HTML初学者和对HTML 5中各种新的语法特性和新的开发思想还不是很了解的读者。
第3章：CSS 3设计基础。介绍CSS 3的入门知识，适用于CSS初学者和对CSS 3中各种2D/3D效果还不是很了解的读者。CSS 3将在jQuery Mobile的各种定制方法中大量使用。
第4章：jQuery入门。简要介绍jQuery。读者需要注意第3章中的CSS选择器与第4章中jQuery选择器的关系。另外，理解页面加载的时序问题和掌握jQuery提供的各种方法对于后续章节的学习十分重要。
第5章：jQuery Mobile开发基础。对jQuery Mobile框架做整体介绍，并初步介绍jQuery Mobile框架的大致使用方法。
第6章：UI组件-工具栏。介绍移动网页的总体页面布局，以及与页头和页尾相关的开发技巧。
第7章：jQuery Mobile的UI组件。介绍jQuery Mobile中的基本UI组件，包括图标、按钮、各种表单元素、表格和网格等。
第8章：jQuery Mobile的UI组件(续)。延续第7章的内容，对jQuery Mobile框架中比较复杂的UI组件进行详细的介绍，包括滑动条、列表视图、菜单、面板等。
第9章：jQuery Mobile的样式定制。样式主题是保证整个网站风格统一的一种有效手段。这一章从jQuery Mobile的样式系统、样式定制工具的使用方法，到非标准的样式风格定制方法等做一个综合性的说明。
第10章：jQuery Mobile功能的扩展。从实际项目开发需要出发，探讨扩展jQuery Mobile框架功能的不同方法。这些方法包括扩展图标集、扩展网页过渡动画效果、借助已有的jQuery UI等软件对jQuery Mobile进行功能扩展的方法。
第11章：jQuery Mobile事件处理。事件处理是jQuery和jQuery Mobile中的重要一环。在jQuery Mobile中，常常需要借助于事件处理，来达到在静态条件下难以实现的目的。
第12章：jQuery和jQuery Mobile的插件。作为延伸阅读的部分，jQuery和jQuery Mobile的插件从一个完全独立的角度完善了jQuery Mobile的功能，例如，Google地图就是一个对于常规移动应用非常有效的补充。
移动Web正在进入一个崭新的发展时期，新的技术和开发理念层出不穷，新的知识需要不断学习。欢迎读者针对本书涉及的编程方法与作者讨论。对书中的错误，敬请批评指正。
张欣毅
Burlington ON(加拿大)
本书是一本由浅入深、系统地介绍jQuery Mobile移动网站开发知识的指导书。
1. 针对初级读者
本书的内容和实例是为具有网页开发初步经验，并对开发移动网页有兴趣的读者设计的。本书在写作中力求从最基础的概念开始讲解，逐步展开jQuery Mobile中各种技术的实际应用方法，并在整体介绍jQuery Mobile框架以后，对常用的定制与扩展方法做进一步的介绍。
本书为所介绍的每一个知识点都配备实例，用于更具体地说明以下几个方面：
* 典型的应用方法。
* 技术重点。
* 容易混淆的技术难点。
本书的实例中包含jQuery Mobile网页、HTML 5网页、CSS 3代码和少量的配置文件。所有的HTML 5和CSS 3代码都通过了语法验证，可确保其符合HTML 5和CSS 3规范。
作者建议读者在编写代码的过程中尽可能地让网页代码遵循HTML 5和CSS 3的语法规范。刚刚开始学习网页设计的读者，从起步阶段就应当养成良好的代码编写习惯。同时，本书的前4章对网页设计人员必须具备的基础知识进行了强化。
另外，本书为读者提供了配套光盘，光盘中含有本书所有实例的源代码。每一章的实例都包含运行这些实例所需要的程序库，分别安排在各自的目录中，读者可以根据需要，把各章实例单独部署到服务器中进行测试。
2. 知识妥善划分
本书在内容安排上分为三个部分：
* 学习jQuery Mobile的必备知识(前提条件)。
* jQuery Mobile的核心知识。
* jQuery Mobile框架的延伸知识。
通常，在讲解jQuery Mobile的时候，会把注意力集中到jQuery Mobile框架本身。作者并不反对这样突出重点的讲解，但在实际开发的过程中，就会发现，许多基本概念还需要重新加深理解，这其中包括对HTML 5的语法特点和使用方法的理解、对jQuery与jQuery Mobile的关系的理解，尤其是对事件处理方法差异的理解，以及对样式与UI组件的定制方法的理解等。对以上这些基本概念的熟悉程度，会对项目完成的质量产生相当大的影响。本书特意安排了4章基础知识，作为学习jQuery Mobile的引导。
另一方面，jQuery Mobile框架的扩展，相关的方法在项目开发中十分重要，但由于其中很大一部分内容并非出自jQuery Mobile的标准定制方法，而常常被忽略。
本书以讨论的方式介绍一些行之有效的扩展方法。同时，作者在介绍这些扩展方法的时候，都会提醒读者有关软件版权限制、软件版本兼容性等问题。作为延伸方案的讨论，本书通过实例介绍各种用于选择和评估扩展方案的方法，这是本书的一个要点。对于方案评价方法的掌握比熟悉几种插件重要得多。
对于jQuery Mobile框架本身，本书采用了常用的技术分类方法，但是，对于个别技术，比如自定义样式，则需要与其他相关的自定义方法一起讲解。
3. 总体结构导读
本书的内容按照学习jQuery Mobile的各个知识点之间的相互依赖关系进行顺序排列。
第一部分是学习jQuery Mobile之前必须掌握的基本知识，包括第1~4章，介绍移动Web的特点、用户界面设计原则、HTML 5和CSS 3语法，以及jQuery入门。
第二部分为jQuery Mobile的核心知识，包括第5~8章、第9章的大部分，以及第11章。这一部分详细介绍jQuery Mobile框架范畴内的各种开发方法和技巧。
第三部分可以视为延伸阅读内容，包括第9章的一小部分、第10~12章，介绍对jQuery Mobile框架功能的扩充，包括事件处理及插件等。
4. 各章内容简介
本书的章节安排充分考虑了初学者循序渐进地学习的要求。
第1章：移动Web开发简介。系统地介绍移动Web的技术发展史，由此引出以HTML 5和CSS 3为主导的网页设计方法，以及在技术演化过程中出现的设计策略，包括这些策略对当前网页设计的影响。
第2章：HTML 5开发基础。介绍HTML入门知识，适用于HTML初学者和对HTML 5中各种新的语法特性和新的开发思想还不是很了解的读者。
第3章：CSS 3设计基础。介绍CSS 3的入门知识，适用于CSS初学者和对CSS 3中各种2D/3D效果还不是很了解的读者。CSS 3将在jQuery Mobile的各种定制方法中大量使用。
第4章：jQuery入门。简要介绍jQuery。读者需要注意第3章中的CSS选择器与第4章中jQuery选择器的关系。另外，理解页面加载的时序问题和掌握jQuery提供的各种方法对于后续章节的学习十分重要。
第5章：jQuery Mobile开发基础。对jQuery Mobile框架做整体介绍，并初步介绍jQuery Mobile框架的大致使用方法。
第6章：UI组件-工具栏。介绍移动网页的总体页面布局，以及与页头和页尾相关的开发技巧。
第7章：jQuery Mobile的UI组件。介绍jQuery Mobile中的基本UI组件，包括图标、按钮、各种表单元素、表格和网格等。
第8章：jQuery Mobile的UI组件(续)。延续第7章的内容，对jQuery Mobile框架中比较复杂的UI组件进行详细的介绍，包括滑动条、列表视图、菜单、面板等。
第9章：jQuery Mobile的样式定制。样式主题是保证整个网站风格统一的一种有效手段。这一章从jQuery Mobile的样式系统、样式定制工具的使用方法，到非标准的样式风格定制方法等做一个综合性的说明。
第10章：jQuery Mobile功能的扩展。从实际项目开发需要出发，探讨扩展jQuery Mobile框架功能的不同方法。这些方法包括扩展图标集、扩展网页过渡动画效果、借助已有的jQuery UI等软件对jQuery Mobile进行功能扩展的方法。
第11章：jQuery Mobile事件处理。事件处理是jQuery和jQuery Mobile中的重要一环。在jQuery Mobile中，常常需要借助于事件处理，来达到在静态条件下难以实现的目的。
第12章：jQuery和jQuery Mobile的插件。作为延伸阅读的部分，jQuery和jQuery Mobile的插件从一个完全独立的角度完善了jQuery Mobile的功能，例如，Google地图就是一个对于常规移动应用非常有效的补充。
移动Web正在进入一个崭新的发展时期，新的技术和开发理念层出不穷，新的知识需要不断学习。欢迎读者针对本书涉及的编程方法与作者讨论。对书中的错误，敬请批评指正。
张欣毅
Burlington ON(加拿大)
免费在线读
2.1 HTML 5的语法结构
相信HTML对于大多数读者来说应该已经不是什么陌生的新技术了。但我们仍将在这一节中简要介绍HTML网页设计的基本方法和技巧，并在此过程中逐步介绍HTML 5与过去传统HTML在语法结构和设计思想上的不同、HTML 5的优点和特点，以及HTML 5对桌面Web和移动Web在设计理念上带来的变化。
在第1章中，我们介绍了HTML 5在逐步标准化的过程中，WHAT工作组，以及经由W3C参与组建的HTML工作组起到了关键的作用。但是，WHAT工作组与W3C在设计理念和技术标准化方面的看法有很多不同，从2011年起，HTML 5技术标准逐渐出现了一些分支。其中最主要的表现是W3C和WHAT工作组分别发布了HTML 5技术标准的草稿。W3C发布的草稿以WHAT工作组的最新更新为前提，并补充了一部分W3C认为必须马上标准化的内容。而WHAT工作组坚信HTML 5技术的发展是一个漫长的渐进过程，他们更愿意维护一个逐渐发展的版本，而不是一个可以马上实现标准化的版本。分歧使我们可以同时看到两个非常类似、但在某些技术细节上存在着一些显著差异的HTML 5技术规范草稿。
HTML 5的设计与一些正在使用的其他技术标准在个别内容上有冲突。细心的读者在阅读技术规范草稿原文的时候，可能会注意到这些差别。本书将介绍已经被广为接受的HTML 5语法，对于HTML 5在技术理论的层面上不做探讨。
2.1.1 HTML 5网页的基本结构
HTML网页从源代码上看，是由一组标签经过一定的嵌套规则而组成的树状结构代码。HTML的标签嵌套不需要像XML那样严格，也就是说，有一些HTML元素并不要求必须使用结束标签。在HTML 5中，某些元素的结束标签在特定情况下是可有可无的。有关这些元素标签的特殊语法规则，我们将在本章的2.2.7小节中介绍。
HTML 5的语法与传统的HTML相似，同时带有XHTML的特征。作为一种标记语言，HTML 5保留了语法简洁的特点，同时，稍微严格的语法规则使HTML 5更容易以DOM方式处理。代码2.1展示了一个含有基本组成部分的HTML 5网页样本。
代码2.1 一个含有最基本结构的HTML 5样本文件
A web page
你好, HTML5!
代码2.1与平常所见的HTML文档(比如HTML 4.0格式的网页文档)非常相似。它含有HTML文档的最外层的标签。标签是HTML网页文档的根元素，网页开发人员可以在根元素中添加lang属性，用于说明当前网页所用的语言，比如表示当前网页中的内容使用法语。lang属性值为由两个字母组成的国际标准语言代码 。添加了语言描述的网页更易于在线翻译工具准确地识别和翻译。表2.1列举了常用的语言代码。
表2.1 常用的ISO 639-1语言代码
语 言 标准代码
阿拉伯语 ar
中文 zh
简体中文 zh-Hans
繁体中文 zh-Hant
英语 en
法语 fr
德语 de
日语 ja
韩语 ko
俄语 ru
西班牙语 es
标签的内容含有由和分别标记的两部分。标签及其和两大组成部分组成了HTML文档的基本结构。网页的部分的作用在于说明网页的标题、标题图标、附加的脚本语言程序、网页样式，以及有关网页其他属性的描述等。这部分内容除了网页的标题和图标以外，还有其他内容，能够影响到网页的显示方式，例如附加的样式定义；另外还有一些能够影响到网页的动作行为，例如网页自动跳转等，但本身并不直接显示在网页上。网页的部分包含了网页在浏览器中显示的全部内容，这也是本章将要着重介绍的部分。
很多开发人员在网站的开发过程中已经通过DOCTYPE使用了文档类型声明，尤其是CSS的某些功能，比如z-index，要求网页必须含有文档类型声明，才能够在IE浏览器中正确显示。DOCTYPE声明没有结束标签，它必须出现在网页文档的第一行，即在标签之前，用于向浏览器声明当前网页文档所采用的HTML的语法版本。DOCTYPE声明源自于XML中引用DTD验证文档有效性的方法。
在过去的HTML版本中，我们能够看到下面一些文档类型声明：
””>
””>
””>
””>
在HTML 5中，DOCTYPE声明不再引用DTD，只需要简单的即可。但是在HTML 5网页中，DOCTYPE声明不能省略，否则浏览器不会使用HTML 5的语法，而是会自动启用早期版本的HTML语法处理程序来解析当前的HTML 5网页。
HTML是大小写无关的标记语言。包括DOCTYPE声明在内，浏览器不会区分DOCTYPE或者doctype、或者。在HTML 5网页中，混合使用大小写是允许的。从编写HTML 5代码的惯例角度来看，DOCTYPE通常用大写字母来声明，而HTML标签则用小写表示。代码2.1中的源代码编写格式就遵循了这个惯例。
2.1.2 成员元素
网页部分用于定义样式规则、引用样式表和脚本语言，或者用于网页本身属性等相关信息的描述等。
1. 网页的标题
网页标题是显示在浏览器标题栏中的若干主题说明文字，如图2.1所示为清华大学主页上的网页标题。
图2.1 浏览器标题栏中的标题和图标(来源：清华大学网站)
从原则上说，一个HTML 5文档(不是一个Web页面，因为一个HTML 5文档可以表现为多个网页。一个文档也能是一个字符流，而不是一个文件)的部分必须包含一个，并且只能包含一个元素。但是这并不是绝对的，如果一个HTML 5文档被用作电子邮件的内容，则元素部分可以省略。
代码2.2演示了通过元素声明网页内容主题(标题)的方法。元素的使用方法十分简单，只需要把文字放在元素的内容中即可。
代码2.2 通过元素声明网页主题
鲸的世界
2. 网页的图标
在图2.1中，我们在浏览器的标题栏上除了看到网页标题以外，在标题文字的旁边，还很容易找到网页的图标。网页的图标是通过元素实现的。
元素用于链接当前HTML文档和其他资源。元素必须包含rel属性或者itemprop属性中的一个，但是，不允许同时使用这两个属性。这两个属性中的rel是个常用属性，用于说明所链接的资源与当前文档的关系。当使用rel属性时，元素只允许在的范围内使用，而当使用itemprop属性时，元素既可以包含在网页的部分，也可以包含在网页的部分。当我们为一个网页链接网页图标时，应该按照代码2.3所演示的方法，指定rel属性的值为“icon”，并且通过href属性指向实际所链接的图标资源文件，这样就能得到如图2.2所示的效果。
代码2.3 通过元素引用网页图标
鲸的世界
注意： 在Chrome等浏览器中测试代码2.3时，需要Web服务器的支持才能正确显示网页图标，而在Firefox浏览器中，则不需要Web服务器的支持。
图2.2 网页的标题与图标
在不同的使用场合中，网页图标也被称为快捷图标、书签图标，或者标签页图标等。图标文件一般采用16×16像素的ICO文件，也可以采用GIF，或者PNG等图片格式。另外，在元素中，可以通过type属性声明所链接的图标文件的MIME类型。
一些读者可能会注意到一些网页有类似的用法，而shortcut并不是HTML 5中rel属性有效的属性值。实际上，rel=“shortcut icon”的用法在HTML 5中是允许的，但这仅仅是为了满足向过去的HTML版本兼容的要求，如果在rel属性中使用shortcut属性值，另一个属性值icon必须紧随其后，而且两个属性值之间必须使用一个空格来分隔。
3. 网页的样式
层叠式样式表CSS在Web设计中起到了网站风格统一、用户界面美观、优化用户体验等作用。定义和引用样式规则有3种常见的方式：在特定的元素上通过定义style属性值的方法为相应的元素添加样式规则、通过
你好, HTML5!
代码2.5 通过元素引用样式表文件(此处省略样式表文件)
HTML5 – link
你好, HTML5!
图2.3 在部分通过样式定义或引用外部样式表来改变网页内容的表现形式
综合代码2.3和2.5，两者都用到了元素来链接外部资源文件，其中的不同点是在rel属性中所描述的外部资源类型。当使用rel=“stylesheet”链接一个样式表文件时，即使省略MIME类型描述type=“text/css”，浏览器仍然能够正确解析样式表文件，但如果MIME类型描述错误，即使链接的URL正确，浏览器仍不能以正确的MIME类型来处理样式表文件。也就是说，从HTML 5技术标准的角度看，一旦MIME类型描述错误，样式表文件就会失效。在实际应用当中，某些浏览器会优先判断rel属性中的资源类型，即使MIME类型描述不匹配，浏览器仍然能够正确处理样式表文件。需要注意的是，这里的正确处理，是依赖于浏览器容错性能的，而不是HTML 5技术规范所要求的。
4. 脚本程序
当
JavaScript是Web开发中最常用的脚本语言，它的MIME类型用text/javascript来表示。在HTML 5中，如果元素的type属性省略，则元素中所代表的脚本语言是JavaScript。元素中允许使用其他脚本语言，当这种情况出现时，元素必须通过type属性表明所用脚本语言的种类。一些程序员或许会记得，在过去的HTML网页文件中，元素中常常用language属性来说明脚本语言的种类。language属性在HTML 5中已经不再使用，而且HTML 5要求浏览器当检测到元素中使用了type属性时，language属性将被忽略掉。
Web客户端脚本程序通常是由JavaScript等解释型语言开发的。当脚本程序被成功加载以后，就会立即执行，而不需要等到整个网页文件加载完成。HTML 5的元素包括了async和defer两个布尔型(boolean)属性，这两个属性必须与src属性配合使用。async属性表示当前引用的JavaScript程序以异步方式运行。defer属性表示所引用的JavaScript程序延迟到网页文档加载完成以后运行。
相信HTML对于大多数读者来说应该已经不是什么陌生的新技术了。但我们仍将在这一节中简要介绍HTML网页设计的基本方法和技巧，并在此过程中逐步介绍HTML 5与过去传统HTML在语法结构和设计思想上的不同、HTML 5的优点和特点，以及HTML 5对桌面Web和移动Web在设计理念上带来的变化。
在第1章中，我们介绍了HTML 5在逐步标准化的过程中，WHAT工作组，以及经由W3C参与组建的HTML工作组起到了关键的作用。但是，WHAT工作组与W3C在设计理念和技术标准化方面的看法有很多不同，从2011年起，HTML 5技术标准逐渐出现了一些分支。其中最主要的表现是W3C和WHAT工作组分别发布了HTML 5技术标准的草稿。W3C发布的草稿以WHAT工作组的最新更新为前提，并补充了一部分W3C认为必须马上标准化的内容。而WHAT工作组坚信HTML 5技术的发展是一个漫长的渐进过程，他们更愿意维护一个逐渐发展的版本，而不是一个可以马上实现标准化的版本。分歧使我们可以同时看到两个非常类似、但在某些技术细节上存在着一些显著差异的HTML 5技术规范草稿。
HTML 5的设计与一些正在使用的其他技术标准在个别内容上有冲突。细心的读者在阅读技术规范草稿原文的时候，可能会注意到这些差别。本书将介绍已经被广为接受的HTML 5语法，对于HTML 5在技术理论的层面上不做探讨。
2.1.1 HTML 5网页的基本结构
HTML网页从源代码上看，是由一组标签经过一定的嵌套规则而组成的树状结构代码。HTML的标签嵌套不需要像XML那样严格，也就是说，有一些HTML元素并不要求必须使用结束标签。在HTML 5中，某些元素的结束标签在特定情况下是可有可无的。有关这些元素标签的特殊语法规则，我们将在本章的2.2.7小节中介绍。
HTML 5的语法与传统的HTML相似，同时带有XHTML的特征。作为一种标记语言，HTML 5保留了语法简洁的特点，同时，稍微严格的语法规则使HTML 5更容易以DOM方式处理。代码2.1展示了一个含有基本组成部分的HTML 5网页样本。
代码2.1 一个含有最基本结构的HTML 5样本文件
A web page
你好, HTML5!
代码2.1与平常所见的HTML文档(比如HTML 4.0格式的网页文档)非常相似。它含有HTML文档的最外层的标签。标签是HTML网页文档的根元素，网页开发人员可以在根元素中添加lang属性，用于说明当前网页所用的语言，比如表示当前网页中的内容使用法语。lang属性值为由两个字母组成的国际标准语言代码 。添加了语言描述的网页更易于在线翻译工具准确地识别和翻译。表2.1列举了常用的语言代码。
表2.1 常用的ISO 639-1语言代码
语 言 标准代码
阿拉伯语 ar
中文 zh
简体中文 zh-Hans
繁体中文 zh-Hant
英语 en
法语 fr
德语 de
日语 ja
韩语 ko
俄语 ru
西班牙语 es
标签的内容含有由和分别标记的两部分。标签及其和两大组成部分组成了HTML文档的基本结构。网页的部分的作用在于说明网页的标题、标题图标、附加的脚本语言程序、网页样式，以及有关网页其他属性的描述等。这部分内容除了网页的标题和图标以外，还有其他内容，能够影响到网页的显示方式，例如附加的样式定义；另外还有一些能够影响到网页的动作行为，例如网页自动跳转等，但本身并不直接显示在网页上。网页的部分包含了网页在浏览器中显示的全部内容，这也是本章将要着重介绍的部分。
很多开发人员在网站的开发过程中已经通过DOCTYPE使用了文档类型声明，尤其是CSS的某些功能，比如z-index，要求网页必须含有文档类型声明，才能够在IE浏览器中正确显示。DOCTYPE声明没有结束标签，它必须出现在网页文档的第一行，即在标签之前，用于向浏览器声明当前网页文档所采用的HTML的语法版本。DOCTYPE声明源自于XML中引用DTD验证文档有效性的方法。
在过去的HTML版本中，我们能够看到下面一些文档类型声明：
””>
””>
””>
””>
在HTML 5中，DOCTYPE声明不再引用DTD，只需要简单的即可。但是在HTML 5网页中，DOCTYPE声明不能省略，否则浏览器不会使用HTML 5的语法，而是会自动启用早期版本的HTML语法处理程序来解析当前的HTML 5网页。
HTML是大小写无关的标记语言。包括DOCTYPE声明在内，浏览器不会区分DOCTYPE或者doctype、或者。在HTML 5网页中，混合使用大小写是允许的。从编写HTML 5代码的惯例角度来看，DOCTYPE通常用大写字母来声明，而HTML标签则用小写表示。代码2.1中的源代码编写格式就遵循了这个惯例。
2.1.2 成员元素
网页部分用于定义样式规则、引用样式表和脚本语言，或者用于网页本身属性等相关信息的描述等。
1. 网页的标题
网页标题是显示在浏览器标题栏中的若干主题说明文字，如图2.1所示为清华大学主页上的网页标题。
图2.1 浏览器标题栏中的标题和图标(来源：清华大学网站)
从原则上说，一个HTML 5文档(不是一个Web页面，因为一个HTML 5文档可以表现为多个网页。一个文档也能是一个字符流，而不是一个文件)的部分必须包含一个，并且只能包含一个元素。但是这并不是绝对的，如果一个HTML 5文档被用作电子邮件的内容，则元素部分可以省略。
代码2.2演示了通过元素声明网页内容主题(标题)的方法。元素的使用方法十分简单，只需要把文字放在元素的内容中即可。
代码2.2 通过元素声明网页主题
鲸的世界
2. 网页的图标
在图2.1中，我们在浏览器的标题栏上除了看到网页标题以外，在标题文字的旁边，还很容易找到网页的图标。网页的图标是通过元素实现的。
元素用于链接当前HTML文档和其他资源。元素必须包含rel属性或者itemprop属性中的一个，但是，不允许同时使用这两个属性。这两个属性中的rel是个常用属性，用于说明所链接的资源与当前文档的关系。当使用rel属性时，元素只允许在的范围内使用，而当使用itemprop属性时，元素既可以包含在网页的部分，也可以包含在网页的部分。当我们为一个网页链接网页图标时，应该按照代码2.3所演示的方法，指定rel属性的值为“icon”，并且通过href属性指向实际所链接的图标资源文件，这样就能得到如图2.2所示的效果。
代码2.3 通过元素引用网页图标
鲸的世界
注意： 在Chrome等浏览器中测试代码2.3时，需要Web服务器的支持才能正确显示网页图标，而在Firefox浏览器中，则不需要Web服务器的支持。
图2.2 网页的标题与图标
在不同的使用场合中，网页图标也被称为快捷图标、书签图标，或者标签页图标等。图标文件一般采用16×16像素的ICO文件，也可以采用GIF，或者PNG等图片格式。另外，在元素中，可以通过type属性声明所链接的图标文件的MIME类型。
一些读者可能会注意到一些网页有类似的用法，而shortcut并不是HTML 5中rel属性有效的属性值。实际上，rel=“shortcut icon”的用法在HTML 5中是允许的，但这仅仅是为了满足向过去的HTML版本兼容的要求，如果在rel属性中使用shortcut属性值，另一个属性值icon必须紧随其后，而且两个属性值之间必须使用一个空格来分隔。
3. 网页的样式
层叠式样式表CSS在Web设计中起到了网站风格统一、用户界面美观、优化用户体验等作用。定义和引用样式规则有3种常见的方式：在特定的元素上通过定义style属性值的方法为相应的元素添加样式规则、通过
你好, HTML5!
代码2.5 通过元素引用样式表文件(此处省略样式表文件)
HTML5 – link
你好, HTML5!
图2.3 在部分通过样式定义或引用外部样式表来改变网页内容的表现形式
综合代码2.3和2.5，两者都用到了元素来链接外部资源文件，其中的不同点是在rel属性中所描述的外部资源类型。当使用rel=“stylesheet”链接一个样式表文件时，即使省略MIME类型描述type=“text/css”，浏览器仍然能够正确解析样式表文件，但如果MIME类型描述错误，即使链接的URL正确，浏览器仍不能以正确的MIME类型来处理样式表文件。也就是说，从HTML 5技术标准的角度看，一旦MIME类型描述错误，样式表文件就会失效。在实际应用当中，某些浏览器会优先判断rel属性中的资源类型，即使MIME类型描述不匹配，浏览器仍然能够正确处理样式表文件。需要注意的是，这里的正确处理，是依赖于浏览器容错性能的，而不是HTML 5技术规范所要求的。
4. 脚本程序
当
JavaScript是Web开发中最常用的脚本语言，它的MIME类型用text/javascript来表示。在HTML 5中，如果元素的type属性省略，则元素中所代表的脚本语言是JavaScript。元素中允许使用其他脚本语言，当这种情况出现时，元素必须通过type属性表明所用脚本语言的种类。一些程序员或许会记得，在过去的HTML网页文件中，元素中常常用language属性来说明脚本语言的种类。language属性在HTML 5中已经不再使用，而且HTML 5要求浏览器当检测到元素中使用了type属性时，language属性将被忽略掉。
Web客户端脚本程序通常是由JavaScript等解释型语言开发的。当脚本程序被成功加载以后，就会立即执行，而不需要等到整个网页文件加载完成。HTML 5的元素包括了async和defer两个布尔型(boolean)属性，这两个属性必须与src属性配合使用。async属性表示当前引用的JavaScript程序以异步方式运行。defer属性表示所引用的JavaScript程序延迟到网页文档加载完成以后运行。
评论
还没有评论。