移动与嵌入式开发技术
新手学 HTML5 移动开发
—面向 iOS 和 Android 平台
[英] Robin Nixon
著
孙丰垒
译
李响
北 京
Robin Nixon
HTML5 for iOS and Android: A Beginner's Guide
EISBN：978-0-07-175633-4
Copyright © 2011 by The McGraw-Hill Companies, Inc.
All Rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including without limitation photocopying, recording, taping, or any database, information
or retrieval system, without the prior written permission of the publisher.
This authorized Chinese translation is jointly published by McGraw-Hill Education (Asia) and Tsinghua University
Press. This edition is authorized for sale in the People’s Republic of China only, excluding Hong Kong, Macao SAR
and Taiwan.
Copyright © 2011 by McGraw-Hill Education (Asia), a division of the Singapore Branch of The McGraw-Hill
Companies, Inc. and Tsinghua University Press.
版权所有。未经出版人事先书面许可，对本出版物的任何部分不得以任何方式或途径复制或传播，包括但不限
于复印、录制、录音，或通过任何数据库、信息或可检索的系统。
本授权中文简体字翻译版由麦格劳-希尔(亚洲)教育出版公司和清华大学出版社合作出版。此版本经授权仅限在
中华人民共和国境内(不包括香港特别行政区、澳门特别行政区和台湾)销售。
版权©2012 由麦格劳-希尔(亚洲)教育出版公司与清华大学出版社所有。
北京市版权局著作权合同登记号
图字：01-2011-5684
本书封面贴有 McGraw-Hill 公司防伪标签，无标签者不得销售。
版权所有，侵权必究。侵权举报电话：010-62782989 13701121933
图书在版编目(CIP)数据
新手学 HTML5 移动开发——面向 iOS 和 Android 平台/(英) 尼克松(Nixon, R.) 著；孙丰垒，李响 译.
—北京：清华大学出版社，2012.6
(移动与嵌入式开发技术)
书名原文：HTML5 for iOS and Android: A Beginner’ s Guide
ISBN 978-7-302-28679-0
Ⅰ. ①新… Ⅱ. ①尼… ②孙… ③李… Ⅲ. ①超文本标记语言，HTML5—程序设计 Ⅳ. ①TP312
中国版本图书馆 CIP 数据核字(2012)第 077608 号
责任编辑：王 军
装帧设计：牛艳敏
责任校对：蔡 娟
责任印制：
于
平
出版发行：清华大学出版社
网
址：http://www.tup.com.cn，http://www.wqbook.com
地
址：北京清华大学学研大厦 A 座
邮
编：100084
社 总 机：010-62770175
邮
购：010-62786544
投稿与读者服务：010-62776969，c-service@tup.tsinghua.edu.cn
质 量 反 馈：010-62772015，zhiliang@tup.tsinghua.edu.cn
印 刷 者：
装 订 者：
经
销：全国新华书店
开
本：185mm×260mm
印
张：23.75
字
数：578 千字
版
次：2012 年 6 月第 1 版
印
次：2012 年 6 月第 1 次印刷
印
数：1~3000
定
价：49.80 元
——————————————————————————————————————————————
产品编号：
作者简介
Robin Nixon 20世纪80年代就开始从事计算机方面的写作(他的第一台计算机是
Tandy TRS 80 Model 1，配备有4KB超大容量的RAM！)。至今他已在多个英国顶尖计算
机杂志上发表了500多篇文章。《新手学HTML5移动开发——面向iOS和Android平台》
是他的第8本书。
Robin的妻子是一位训练有素的护士，他和他的妻子、5个孩子以及3个寄养残疾儿
童生活在英国东南海岸。Robin在那里全职写作。
Robin Nixon的其他著作：
Learning PHP, MySQL, and JavaScript (O’ Reilly, 2009)
ISBN 978-0596157135
Ubuntu: Up and Running (O’ Reilly, 2010)
ISBN 978-0596804848
Plug-in PHP (McGraw-Hill Professional, 2010)
ISBN 978-0071666596
Plug-in JavaScript (McGraw-Hill Professional, 2010)
ISBN 978-0071738613
Plug-in CSS (McGraw-Hill Professional, 2010)
ISBN 978-0071748766
技术编辑简介
Jim McLeod和他可爱的妻子Paula在南佛罗里达州生活了11年。他对计算机语言的
兴趣始于20世纪80年代初对CP/M的热爱，并且至今仍旧在这个领域孜孜不倦地探索。
他的爱好是潜水，他于2000年在罗德岱堡获得PADI教练证书，并已经带领了很多人领
略了奇妙的海底世界。
致 谢
我想感谢策划和编辑本书的Roger Stewart，以及Joya、Jim、Melinda、Aloysius等在
编写本书时无私给予过我帮助的每个人，没有你们这本书难以完成。这是我在McGraw
-Hill出版的第4本书，和出版前3本书一样，整个合作过程非常愉快。
前 言
《新手学HTML5移动开发——面向iOS和Android平台》一书为您讲解了如何使用
HTML5和CSS3等最新的技术在苹果公司iOS和谷歌公司Android设备上开发Web和独立
应用程序。本书假定您之前并无这方面的编程知识，因此会介绍这两种技术(HTML5和
CSS3)的基本原理，以及JavaScript、MySQL和PHP等支撑技术。
尽管iOS需要使用Objective C编写应用程序，而Android需要使用Java来编写，但是
合作网站上已提供了所需的代码。这样您就不必再学习这两种语言了。
此外您可以使用Web技术创建高级网站、Web应用程序和独立应用程序，它们和桌
面应用程序一样可以在iOS和Android设备上运行。
本书主要内容
本书的第I部分从第1章～第8章。第1章首先介绍了HTML4.01的基本原理，第2章通
过生动且复杂的教程介绍了HTML5，其中包含了大量实例和屏幕截图。第3章详细介绍了
CSS。在这之后，第4章进一步介绍了CSS最新版本——CSS 3的强大功能。
VIII 新手学HTML5移动开发——面向iOS和Android平台
前面4章奠定了HTML和CSS的基础，第5章～第7章将从基础开始介绍JavaScript和
PHP语言，可以使用它们随时编写您自己的程序。然后第8章介绍了支持PHP的MySQL
数据库程序，这样就可以通过Ajax通信协议访问客户端和服务器端。现在大部分网络架
构后台都采用了Ajax。
本书第II部分从第9章～第11章。这部分介绍了如何使用您刚刚学到的新知识
创建用户体验良好的移动网站和移动Web应用程序。第III部分介绍了iOS和Android
SDK(Software Development Kits，软件开发包)，并且向您展示如何将第II部分的Web应
用程序转换成独立的应用程序，该应用程序可以分发到苹果公司的和谷歌公司的应用程
序商店中。
本书所涵盖的和未涵盖的内容
本书包括了如何使用标准的Web技术在苹果公司的iOS和谷歌公司的Android设备上
创建界面美观的网站、Web应用程序和独立应用程序的所有知识。
本书不包括在iOS和Android上使用功能强大但相对复杂的Objective C和Java语言的
教程，因为在合作网站上提供的软件包可以让标准的HTML网站和Web应用程序变成直
接和智能设备操作系统进行通信的“Wrapper”程序。
当然，出于性能的考虑，例如需要编写那种快速响应的赛车游戏程序。您将需要编写
本机应用程序，但是对于任何对性能要求并不高的应用程序编写，本书所提供的信息将非
常有帮助。因为本书所描述的技术是标准的Web技术，它们可以非常快速和简单地实现。
代码许可
您可以在您的项目中免费使用本书的任何代码，也可以根据需要修改本书代码而不
必再提及本书——虽然我非常感谢您乐意将其归为本书的功劳。
合作网站
本书的合作网站(http://html5formobile.com)上可以免费下载到本书的所有示例和
“wrapper”代码，也可以访问www.mhprofessional.com/computingdownload获得随书附
带的代码和示例以及McGraw-Hill出版社的其他书籍。
目
第Ⅰ部分
核心技术
第1章 HTML介绍 ··································3
1.1
1.2
1.3
HTML的由来 ································· 4
HTML标签 ····································· 4
HTML文档的组成 ························· 5
1.3.1 <!DOCTYPE>标签 ·················· 5
1.3.2 IE带来的苦恼 ·························· 6
1.3.3 <html>标签 ······························ 6
1.3.4 <head>标签 ······························ 7
1.3.5 Web文档标题行小结 ··············· 8
1.3.6 <body>标签······························ 9
1.3.7 使用注释 ·································· 9
1.3.8 文本格式化 ······························ 9
1.3.9 嵌入图片 ································ 13
录
1.3.10
创建链接 ······························ 14
1.3.11
表 ·········································· 15
1.3.12
列表 ······································ 17
1.3.13
表单 ······································ 20
1.3.14
<div>和<span>标签············· 23
1.3.15
帧 ·········································· 23
1.4
1.5
所有的HTML4.01标签 ················ 25
本章小结 ······································· 27
第2章
HTML5新特性 ··························29
2.1 画布(Canvas) ································ 30
2.2 地理位置 ······································· 31
2.3 表单 ··············································· 33
2.3.1 表单属性 ································ 33
2.3.2 表单输入类型 ························ 38
X 新手学HTML5移动开发——面向iOS和Android平台
2.4
2.5
本地存储 ······································· 42
媒体 ··············································· 43
2.5.1 Codecs ···································· 43
2.5.2 媒体播放 ································ 45
2.6 Microdata、Web Workers
与离线 Web 应用程序··················· 49
2.6.1 Microdata································ 49
2.6.2 Web Workers ·························· 49
2.6.3 离线Web应用程序 ················· 49
2.7 其他HTML5标签 ························· 50
2.8 本章小结 ······································· 50
第3章
CSS介绍 ··································51
3.1
3.2
3.3
文档对象模型的工作原理 ··········· 52
修正 HTML结构 ·························· 54
关于层叠样式表 ··························· 54
3.3.1 导入样式表 ···························· 55
3.3.2 本地样式设置 ························ 56
3.3.3 使用Id ····································· 56
3.3.4 使用类 ···································· 56
CSS规则········································ 57
3.4.1 多属性赋值 ···························· 57
3.4.2 注释 ········································ 57
样式类型 ······································· 58
3.5.1 默认样式 ································ 58
3.5.2 用户样式 ································ 58
3.5.3 外部样式表 ···························· 59
3.5.4 内部样式 ································ 59
3.5.5 内联样式 ································ 59
选择器 ··········································· 60
3.6.1 类型选择器 ···························· 60
3.6.2 descendant 选择器 ················· 60
3.6.3 child选择器 ···························· 60
3.6.4 ID选择器 ································ 61
3.6.5 类选择器 ································ 61
3.6.6 属性选择器 ···························· 62
3.6.7 通用选择器 ···························· 62
3.6.8 按组选择 ································ 63
层叠 ··············································· 63
3.7.1 样式表创建者 ························ 63
3.4
3.5
3.6
3.7
3.7.2
样式表方法 ···························· 63
3.7.3
样式表选择器 ························ 64
3.7.4 特殊优待的规则 ···················· 65
3.8 Divs 和 Spans的区别···················· 65
3.9 度量单位 ······································· 67
3.10 字体 ············································· 68
3.10.1 字体族 ································ 68
3.10.2 字体样式 ···························· 68
3.10.3 字体大小 ···························· 68
3.10.4 字体粗细 ···························· 69
3.11 管理文本样式 ····························· 69
3.11.1 装饰 ···································· 69
3.11.2 间隔 ···································· 69
3.11.3 对齐方式 ···························· 70
3.11.4 变换 ···································· 70
3.11.5 缩进 ···································· 70
3.12 颜色 ············································· 70
3.13 定位元素 ····································· 71
3.14 伪类 ············································· 72
3.15 缩写规则 ····································· 73
3.16 盒子模型 ····································· 74
3.16.1 Margin 属性 ······················· 75
3.16.2 Border属性 ························· 75
3.16.3 Padding属性 ······················· 75
3.16.4 元素内容 ···························· 76
3.17 本章小结 ····································· 76
第4章 CSS3的增强特性 ·····················77
4.1
4.2
属性选择器 ··································· 78
背景 ··············································· 79
4.2.1 background-clip 属性 ············· 79
4.2.2 background-origin 属性 ········· 81
4.2.3 兼容性问题 ···························· 81
4.2.4 background-size 属性············· 82
4.2.5 多个背景 ································ 83
4.3 边框 ··············································· 84
4.3.1 border-color 属性 ··················· 84
4.3.2 border-image 属性·················· 85
4.3.3 border-radius 属性·················· 86
4.3.4 box-shadow 属性 ··················· 87
目
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12
4.13
第5章
元素溢出 ······································· 88
颜色 ··············································· 89
4.5.1 HSL 颜色································ 89
4.5.2 RGB 颜色 ······························· 90
4.5.3 opacity 属性 ··························· 91
多列布局 ······································· 91
文本效果 ······································· 92
4.7.1 text-shadow 属性 ··················· 92
4.7.2 text-overflow 属性 ················· 93
4.7.3 word-wrap 属性 ····················· 93
box-sizing 属性 ····························· 94
resize属性 ····································· 96
outline-offset属性 ······················· 96
Web字体 ······································ 97
其他CSS3附件···························· 98
本章小结 ····································· 98
JavaScript简介 ·························99
5.1 在网页中插入JavaScript ············ 100
5.2 使用注释 ····································· 101
5.3 使用分号 ····································· 101
5.4 JavaScript变量 ···························· 101
5.4.1 变量和对象命名 ·················· 101
5.4.2 数值型变量 ·························· 102
5.4.3 字符串变量 ·························· 104
5.4.4 数组 ······································ 105
5.5 JavaScript运算符 ························ 110
5.5.1 算术运算符 ·························· 110
5.5.2 赋值运算符 ·························· 112
5.5.3 比较运算符 ·························· 113
5.5.4 逻辑运算符 ·························· 114
5.5.5 三元运算符 ·························· 114
5.5.6 自动变量类型 ······················ 115
5.5.7 运算符优先级 ······················ 116
5.6 JavaScript函数 ···························· 117
5.6.1 全局变量 ······························ 118
5.6.2 局部变量 ······························ 118
5.7 条件表达式 ································· 119
5.7.1 if()语句 ································· 119
5.7.2 else语句 ································ 120
5.7.3
录 XI
switch()语句 ························· 120
5.8
代码的循环部分 ························· 121
5.8.1 while()循环 ·························· 121
5.8.2 do...while()循环 ··················· 122
5.8.3 for()循环 ······························· 122
5.9 获取并且显示JavaScript错误 ··· 125
5.10 本章小结 ··································· 126
第6章
在HTML5中应用JavaScript ···127
6.1
6.2
6.3
JavaScript访问DOM ··················· 128
JavaScript访问CSS样式 ············· 129
画布 ············································· 131
6.3.1 JavaScript访问画布 ············· 132
6.3.2 画布转换为图片 ·················· 132
6.3.3 管理矩形 ······························ 135
6.3.4 颜色、渐变和图案 ·············· 136
6.3.5 写入文本 ······························ 141
6.3.6 直线和路径 ·························· 143
6.3.7 使用路径画图 ······················ 144
6.3.8 绘制曲线 ······························ 147
6.3.9 绘制图片 ······························ 149
6.3.10 添加阴影 ···························· 151
6.3.11 直接像素处理 ···················· 152
6.3.12 合成与透明度 ···················· 155
6.3.13 变换 ···································· 157
6.3.14 保存、恢复当前上下文 ··· 161
6.4 地理位置 ····································· 161
6.5 本地存储 ····································· 164
6.5.1 存储、获取本地数据 ·········· 165
6.5.2 删除本地数据 ······················ 165
6.6 本章小结 ····································· 166
第7章 PHP介绍 ································167
7.1
7.2
7.3
在Web服务器上检查PHP ·········· 168
PHP基础知识 ····························· 169
7.2.1 echo关键字 ·························· 170
7.2.2 单引号和双引号的区别 ······ 170
7.2.3 使用注释 ······························ 171
7.2.4 分号 ······································ 171
PHP变量 ····································· 171
XII 新手学HTML5移动开发——面向iOS和Android平台
7.3.1
数值型变量 ·························· 172
7.3.2
字符串变量 ·························· 173
7.3.3
超级全局变量 ······················ 174
7.3.4
数组 ······································ 174
7.3.5
常量 ······································ 177
PHP运算符 ································· 178
7.4.1 算术函数 ······························ 178
7.4.2 赋值运算符 ·························· 178
7.4.3 比较运算符 ·························· 178
7.4.4 逻辑运算符 ·························· 178
7.4.5 三元运算符 ·························· 180
7.4.6 自动变量类型 ······················ 180
7.4.7 运算符优先级 ······················ 181
7.5 PHP函数 ····································· 181
7.5.1 局部变量 ······························ 181
7.5.2 全局变量 ······························ 182
7.5.3 静态变量 ······························ 182
7.6 条件表达式 ································· 182
7.6.1 if()语句 ································· 183
7.6.2 else语句 ································ 183
7.6.3 switch()语句 ························· 184
7.7 循环代码段 ································· 184
7.7.1 使用while()循环 ·················· 184
7.7.2 使用do...while()循环 ··········· 185
7.7.3 使用for()循环 ······················· 185
7.8 处理Web表单数据 ····················· 185
7.8.1 Post请求 ······························· 186
7.8.2 GET请求 ······························ 187
7.9 通过JavaScript和PHP实现Ajax
调用 ············································· 188
7.9.1 创建Ajax对象 ······················ 189
7.9.2 初始化POST请求 ················ 189
7.9.3 初始化GET请求 ·················· 192
7.10 本章小结 ··································· 192
8.2
7.4
第8章
MySQL介绍····························193
8.1
创建MySQL用户账户················ 194
8.1.1 授予用户权限 ······················ 196
8.1.2 创建数据库 ·························· 197
8.3
使用PHP访问MySQL ················ 198
8.2.1 MySQL基本命令 ················· 199
8.2.2 MySQL数据类型 ················· 199
8.2.3 使用索引 ······························ 201
8.2.4 创建表 ·································· 202
8.2.5 组合在一个程序中 ·············· 208
8.2.6 安全和防黑客措施 ·············· 209
本章小结 ····································· 212
第Ⅱ部分
移动设备开发
第9章 开发友好的移动网站 ··············215
9.1 屏幕大小 ····································· 216
9.2 字体大小 ····································· 220
9.2.1 图片大小 ······························ 222
9.2.2 Liquid Flow ·························· 225
9.3 使用滚动和提示 ························· 226
9.4 交互性导航与用户输入 ············· 226
9.4.1 使用sms: 和 tel: URL··········· 227
9.4.2 苹果桌面图标 ······················ 227
9.4.3
在全屏模式下运行iOS
桌面网页 ······························ 228
9.4.4
9.5
创建iOS闪屏 ························ 229
本章小结 ····································· 230
第10章 使用eML电子书平台·············231
10.1
eML文档的基本结构 ··············· 233
10.1.1
提供出版物标题和
其他细节 ·························· 233
10.2
10.3
10.1.2
创建菜单 ·························· 234
10.1.3
添加章节 ·························· 234
10.1.4
eML子文件夹 ·················· 235
10.1.5
组合以上功能 ·················· 235
使用eML标签 ··························· 237
eML标签 ··································· 240
10.3.1 管理字体 ·························· 240
10.3.2 改变颜色 ·························· 242
10.3.3 显示非常用符号 ·············· 243
10.3.4 基本格式 ·························· 243
10.3.5 高级格式 ·························· 244
目
10.3.6
11.6.2
在iOS和Android上覆盖
字体大小 ·························· 245
10.4
本章小结 ··································· 245
11.5.10
RemovePMWindow()
函数 ································ 271
11.7
11.8
PHP程序 ··································· 284
11.7.1 login.php程序 ··················· 284
11.7.2 robslogin.php程序 ············ 284
11.7.3 robsgetchat.php程序········· 286
11.7.4 robspost.php程序 ············· 288
本章小结 ··································· 289
第Ⅲ部分
创建独立的应用程序
第12章 安装Apple SDK ····················293
12.1 注册成为Apple Developer ······· 294
12.2 会员中心 ··································· 298
12.3 安装Xcode ································ 301
12.3.1 配置iOS设备进行开发 ··· 301
12.3.2
使用Xcode Organizer
抓取屏幕 ·························· 310
12.4
本章小结 ··································· 311
第13章 创建独立的iOS应用程序 ······313
11.5.11
GetInput()函数 ··············· 271
11.5.12
ProcessKey()函数 ·········· 272
为Xcode Wrapper项目文件
准备好您的Mac························ 314
11.5.13
DoToUpper()函数 ·········· 274
13.1.1
11.5.14
DoToLower()函数 ·········· 275
11.5.15
DoToNumbers()函数······ 275
11.5.16
HighlightButton()函数 ··· 276
11.5.17
Logout()函数 ·················· 276
13.1.3
修改应用程序的标题 ······ 317
11.5.18
NavCheck()函数 ············ 278
13.1.4
修改应用程序的图标 ······ 318
11.5.19 ActivateObject()函数······ 278
11.5.20
13.1
SetUpClearBut()函数 ······ 279
11.5.22
O()函数 ·························· 279
11.5.23
S()函数 ··························· 280
11.5.24
CreateAjaxObject()函数··· 280
11.5.25
PostAjaxRequest()函数··· 280
11.5.26
ProcessCookie()函数······ 281
使用网页 ··································· 282
11.6.1 使用桌面图标 ·················· 283
在真实设备上运行应用
程序 ·································· 317
13.2
StopDefaultAction()
11.5.21
在Xcode模拟器上运行
应用程序 ·························· 315
13.1.2
函数 ································ 279
11.6
为Web应用程序提供
额外的屏幕空间 ·············· 284
第11章 开发Web应用程序 ················247
11.1 关于项目 ··································· 248
11.2 建立MySQL 数据库 ················· 249
11.3 HTML········································ 251
11.4 CSS ············································ 253
11.5 JavaScript程序 ·························· 257
11.5.1 全局变量 ·························· 258
11.5.2 DoLogin()函数 ················· 263
11.5.3 LoginCheck()函数············ 264
11.5.4 Login()函数 ······················ 265
11.5.5 GetChat()函数 ·················· 266
11.5.6 ShowChat()函数 ··············· 267
11.5.7 SetPostRecipient()函数 ··· 268
11.5.8 PostMessage()函数 ·········· 269
11.5.9 SendPM()函数·················· 269
录 XIII
13.3
13.4
将eML Web应用程序转换成
独立应用程序 ··························· 318
13.2.1 处理.js文件 ······················ 320
13.2.2 给应用程序重命名 ·········· 321
13.2.3 构建应用程序 ·················· 321
将Rob’ s Place Web应用程序
转换成iOS应用程序 ················ 322
13.3.1 关于index.htm文件 ·········· 322
13.3.2 构建应用程序 ·················· 322
调整应用程序 ··························· 323
13.4.1 禁用自动旋转 ·················· 324
XIV 新手学HTML5移动开发——面向iOS和Android平台
13.4.2
13.5
禁用缩放和修改背景颜色··· 324
在iTunes上发布应用程序 ········ 325
13.5.1
构建分发配置文件(Distribution
Provision Profile)·············· 328
13.6
13.5.2
为分发构建应用程序 ······ 330
13.5.3
分发iOS应用程序············ 330
13.5.4 上传应用程序 ·················· 335
本章小结 ··································· 336
第14章 安装Android SDK ·················337
14.1 下载安装 Android SDK············ 338
14.2 下载安装Eclipse IDE ··············· 339
14.3 在Eclipse中添加Android
插件 ··········································· 341
14.4 本章小结 ··································· 343
第15章
创建独立的Android应用程序···345
15.1
为Android Wrapper项目文件
做准备 ······································· 346
15.1.1
从Wrapper中创建一个
新的Android项目 ············ 346
15.1.2
15.2
15.3
运行应用程序 ·················· 351
连接Android设备 ····················· 352
将应用程序保存至Android
设备 ··········································· 352
15.4 创建eML电子书应用程序 ······· 353
15.4.1 将eML文件复制到项目··· 353
15.4.2 运行应用程序 ·················· 354
15.4.3 更新主屏幕图标 ·············· 355
15.5 创建Rob’s Place应用程序 ······ 355
15.5.1 复制Rob’s Place文件至
项目 ·································· 355
15.5.2 更新主屏幕图标 ·············· 355
15.5.3 编译运行应用程序 ·········· 355
15.6 分发应用程序 ··························· 356
15.7 从网站下载应用程序 ··············· 359
15.8 上传应用程序至Android
Market······································· 359
15.8.1 更新应用程序 ·················· 363
15.8.2 清楚标记测试应用程序 ··· 364
15.9 本章小结 ··································· 364
第Ⅰ部分
核心技术
第1章
第2章
第3章
第4章
第5章
第6章
第7章
第8章
HTML介绍
HTML5新特性
CSS介绍
CSS3的增强特性
JavaScript简介
在HTML5中应用JavaScript
PHP介绍
MySQL介绍
2 新手学HTML5移动开发——面向iOS和Android平台
本书介绍了多种核心技术，主要包括HTML、CSS、JavaScript、PHP及MySQL。您
将学习到如何利用这些技术创建网站、Web应用程序以及iOS 和 Android设备上的可下
载应用程序。当然，您不可能同时应用到所有这些技术，但是您肯定会在大多数移动应
用程序开发中应用到其中的一些组合。
在阅读本书之前不必熟知任何技术语言，因为所有需要学习的语言都在本书第Ⅰ部
分中进行了详细的介绍，其中包括每种技术的速成课程——这些信息已经足够搭建复杂
的Web和移动应用程序，如图1所示的电子书
应用程序。该应用程序完全应用了本书中所
介绍的技术编写，可以在iOS和 Android 设备
上运行，也可以作为一个网站在所有浏览器
中运行。
在第1章和第2章中将会介绍如何使用
标准HTML和最新的HTML5特性达到最好
效果。第3章和第4章全面介绍了层叠样式
表(Cascading Style Sheets，CSS)，包括最新
的CSS3属性，比如transitions。第5章和第6
章介绍了JavaScript编程，以及整合流行的
JavaScript框架过程的细节。第Ⅰ部分的最后
两章——第7章和第8章介绍了服务器端的相
关技术，如PHP和MySQL，通过这些技术可
以管理服务器端的Ajax通信机制——后台服
务器与Web客户端之间的信息传输过程，用
户则无须了解此过程。
一旦阅读完本书第Ⅰ部分，您将会对本
书剩下部分所用到的技术有了完整的了解，
图 1 应用本书中的技术所编写的电子书
也可以对本书的示例进行微调或者改进，甚
应用程序
至编写属于您自己的功能强大的网站和移动
应用程序。
提示
如果有兴趣，可以通过苹果公司的 App Store或者是Android Market免
费下载如图1所示的应用程序；只需要输入eml ebook搜索词即可，或者登
录nixonpublishing.com使用该应用程序的在线版本。
第1章
HTML介绍
关键技术与概念
●
●
●
●
●
●
●
●
HTML标签和属性
合并样式表与JavaScript
标题和段落
字体、强调方式和颜色
内嵌图片和超链接
表、列表和表单
使用<div>和<span>标签
帧集及iframe
4 第Ⅰ部分 核 心 技 术
HTML是HyperText Markup Language(超文本标记语言)的缩写，是构成所有网页基
本结构的文本及标签的组合。本书将介绍最常用的HTML4.01标签，并提供一些关于它
们用法的示例。
如果对HTML已经相当熟悉，可以跳过本章。不过在学习HTML5的新标签(在第2章
详细介绍)之前，也可以浏览表1-2中的HTML4标签作为一个快速的复习过程。
1.1
HTML的由来
因特网发展初期，要使接入因特网的计算机之间连接和传送数据通常有多种实现方
法，比如GOPHER1(一个以菜单和相关文档组成的信息查找系统)和TELNET2(一种登录
其他计算机的方法)以及其他一些方法。
但是万维网的发明者Tim Berners-Lee先生意识到，如果每个文档都能够通过一次
按键或者鼠标单击与其他相关文档连接(即后来的超链接)，网络通信将会更加有效。因
此HTML应运而生，HTML使用尖括号包含标签，例如使用<a href='http://example.com'>
click here </a>创建超链接，使用<b>emphasis</b>加粗字体等。
多年来HTML不断发展，大约在2010年推出的HTML4.01已经能被大多数现代浏览
器支持。从那时起，HTML5得到了越来越多的支持，开源的WebKit浏览器引擎是最早
的支持者之一，Apple iOS、Safari浏览器、Google Android以及Chrome浏览器都是基于
WebKit浏览器引擎开发的。在探寻HTML5所能提供的新特性之前，先来了解一下使用
HTML4能够做些什么。
提示
当提到HTML4时，通常在缩写HTML后加上一个空格。但是HTML5
通常将空格省略，在进行Web搜索时应该注意这一点。
1.2
HTML标签
HTML标签以符号“<”开始，并以符号“>”结束。例如，标签<i>告诉Web浏览
器该标签内的文本以斜体显示。大多数标签以重复的标签名并在其前面加上符号“/”
表示结束，例如</i>表示结束斜体显示的文本。
有些标签的结束方式与此不同，比如换行标签<br>。因为换行是一个单独的整体，
因此不需要结束，但为了与HTML的更严格版本XHTML(eXtensible HTML)一致，像这
种自关闭标签仍然需要符号“/”，但只需要直接放在最后的符号“>”之前，比如<br
/>。这样做能够保证您的网页能被更多的Web浏览器及客户端读取，并且更容易转换
1. GOPHER是一个在因特网上使用的分布型的文件搜集获取网络协议。它是1991年由明尼苏达大学的Paul
Lindner和Mark McCahill(Mark P. McCahill)发明的。详细信息参见http://zh.wikipedia.org/wiki/Gopher。
2. 关于TELNET的详细信息请参见http://zh.wikipedia.org/wiki/Telnet。
第1章
HTML介绍 5
为XML(extensible Markup Language，可扩展标记语言)，XML是一种被许多RSS(Really
Simple Syndication，简易信息聚合)阅读器所使用的格式。
标签属性
HTML不只是简单的标记标签，因为许多标签支持(或要求)使用属性，而属性是用
来为浏览器提供额外信息的数据项(也叫参数)。
属性包括属性名以及紧接其后的符号“=”，最后是属性数据，属性数据必须包含
在单引号或双引号中。例如，下面是一个锚点的第一部分，其中属性是href，数据包括
在单引号之间：
<a href='http://google.com'>
属性的类型非常多，不同的标签支持不同的属性。但有一小部分属性是所有标签都
支持的：
● id
该属性为标签所指对象提供一个名字，从而该对象可以被层叠样式表(CSS)
或者JavaScript访问。例如，<h1 id='MainHeader'>为标签<h1>提供名称或者id
为'MainHeader'。该标签的内容只有在CSS或JavaScript对其进行操作时才会发生
变化，如对其内容应用一种特定的字体样式。
● class
该属性为对象提供一个类名，能够用于对象本身或者其他对象。例如，
<p class='indent'>为标签<p>提供了类名'indent'，所有使用该类名的对象都可以
在样式表的控制下缩进首行。
● style
该属性为某对象应用一个对应的CSS样式，方法是将样式值置于引号
之间。例如，为某个段落对象应用Arial字体，可以使用style属性如下：<p
style='font-family:Arial'>。
● title
任何具有该属性的对象都会被赋予一个标题，大多数浏览器在鼠标经过
时会将该属性作为一个提示显示。例如，下面的锚点在鼠标经过时会显示提
示'Go to the Home page'：<a href='/' title='Go to the Home page'>。
如有需要，每个标签所需要的属性将在下面的章节解释。
1.3
HTML文档的组成
在开始认真考虑一个页面的具体细节之前，需要在HTML网页开头部分添加许多条
目。这些条目包括所使用文档类型的详细说明、页面标题、元标签、样式等。
1.3.1
<!DOCTYPE>标签
可以使用该标签精确地告诉浏览器希望如何显示网页。例如，是否仅支持严格格式
化的HTML——网页应该以<!DOCTYPE>标签开始，该标签表示文档类型声明。
<!DOCTYPE>标签有许多不同的参数可用，在doctype.org中列举了这些参数，
并在wikipedia.org/wiki/Doctype中对其进行了详尽的解释。然而本书所有示例都使用
Transitional类型，这要求在每个文档的开始处添加下面两行文本：
6 第Ⅰ部分 核 心 技 术
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
1.3.2
IE带来的苦恼
由于微软公司的IE浏览器将本地文档放置在一个受信任的安全区域，所以当您打
开一个包含动态内容(如JavaScript)的网页时，必须经过几步验证操作来确定您是否允许
网页访问自己的计算机。很显然，当您只是在上传一个文档或者在某个应用程序中使
用该网页之前对其进行简单的测试时，这种情况是相当令人恼火的。例如，图1-1显示
了一些被访问的本地动态内容，在消息和选项菜单显示之后，如果单击Allow Blocked
Content，另外一个仍然会出现并要求您进行确认。
图 1-1
IE如何响应本地驱动器的动态内容
幸运的是，解决这个问题非常容易，只需要告诉IE这个文档是从因特网上保存的
(即使它不是)，这样IE会自动赋予正确的安全限制而不会再次给出提示。因此，本书所
有的示例都包含下面的IE专用标签：
<!-- saved from url=(0014)about:internet -->
因为该行文本包括在注释标签内(见“使用注释”一节，在本章后面部分)，除IE外
的所有浏览器都会忽略这一行。
1.3.3
<html>标签
上文讲到的三行文本对HTML非常重要，接下来网页需要一个<html>标签，用来告
诉浏览器HTML内容从此处开始，并以</html>标签结束。
大多数浏览器都将这两个标签以外的内容以文本的方式简单处理，除非这些文本
处在其他标签或注释中。许多浏览器都有很好的容错机制，甚至在<html>或其他标签丢
失、放错位置的情况下也能够竭尽所能将页面表现完美。但是最好将各种标签放置在正
确的位置及顺序上，以确保所有浏览器都能够正常显示您的网页内容。
在<html>和</html>标签内部，通常只包括两种标签，它们是<head>和<body>标签。
第1章
1.3.4
HTML介绍 7
<head>标签
在Web文档中，<head>与</head>之间的内容用来放置文档信息，例如标题、所有
元数据、风格样式信息等，将在下面进行介绍。
1. 创建文档标题
定义Web文档标题的方法是将标题放置在<title>和</title>标签中，如下所示：
<title>Rob's Place Chat</title>
为页面选择一个能够清楚地表达该网页内容的标题是非常重要的，这样搜索引擎可
以正确索引到网页，访问者也可以使用标题将网页存为书签以便于下次查找。
2. 提供元数据
元数据是关于文档的一些附加数据，它有多种类型。例如，可以将某个文档设置为
在一段时间过后用另外某个文档替换该文档，方法如下：
<meta http-equiv='refresh' content='10;url=http://othersite.com' />
该行代码在10秒钟后将现在的网页替换为网页othersite.com，它是命令中的一种，
用来在某个网页位置移动后的快速重定向(虽然服务器端设置是一种实现永久重定向的
更好方式)。
也可以把元标签置于<head>标签外部，但放置在<head>标签内部更容易被读者理
解，并且其他可能对网页进行更新的人也可以轻松找到它们。
设置视口 在本书中，浏览器的视口通常被设置为默认的980像素宽，使用的
<meta>标签如下所示：
<meta name='viewport' content='width=980' />
该行代码的目的是告诉移动设备(如苹果和Android手机)网页的宽度是980像素，因
此设备可以正确地设置其中的视图。选择980像素值是因为该宽度已经成为一个标准，
手机浏览器可以很好地处理该宽度的网页。
3. 包含样式表
将一个样式表加载到Web文档中有多种实现方式。可以在<style>和</style>标签中
嵌入一段CSS，也可以使用<link>标签从一个单独的文件中加载进来，例如：
<link rel='stylesheet' href='styles.css' type='text/css' />
在第3章中将会了解到CSS规则如何工作，以及如何通过上述方法将这些规则嵌入
到网页中。
4. 插入JavaScript
在网页中经常需要尽快加载JavaScript，从而使网页在准备完毕时可以快速运行
各项功能。通常，最好将JavaScript放置在网页中<head>部分的<script>和</script>
标签中。
8 第Ⅰ部分 核 心 技 术
在HTML中插入JavaScript的最常见的方法有两种。可以在<script>和</script>标签中
直接嵌入JavaScript代码，也可以把JavaScript代码放在另外的文件中单独进行加载。下
面的示例说明如何加载ProgramCode.js文件：
<script src='ProgramCode.js'></script>
第5章将会详细介绍JavaScript的用法。
警告：
不要试图在第一个<script>标签中的“>”之前直接放置“/”来表示
结束，例如<script src='...' />。虽然许多浏览器允许这么做，但本书不
建议使用这种方式，因为许多浏览器都要求<script>标签必须具备对应的
</script>标签。
5. 包含其他文件
有时您希望告诉浏览器一些其他文件。例如，本书中的部分示例如果以应用程序的
方式被保存(或者存为书签)在移动设备上，这些示例将会以图标的形式显示在移动设备
上。这主要通过以下方法实现，该语句告诉浏览器使用图标appicon.png代表应用程序或
者是书签缩略图：
<link rel='apple-touch-icon' href='appicon.png' />
幸运的是，Android设备也可以识别这个命令(虽然该命令包含了词apple)，因此在
苹果公司的设备和Android设备上都可以这样定义图标。
提示
如果想要了解如何为更多设备创建缩略图的相关信息，例如iPod
Touch、 iPhone、iPad、Android手机以及平板电脑，请参阅本书第Ⅲ部分。
1.3.5
Web文档标题行小结
对迄今为止所介绍的标签进行总结，每个Web文档(书中所使用的)都必须包括一个
<!DOCTYPE>标签，接下来是一个注释行，可以使IE浏览器从本地计算机上加载一个动
态页面而不会弹出警告对话框，再下面就是<html>标签，然后是<head>、</head>标签
以及它们中的内容。
因此，本书中许多示例的开始部分都与以下HTML非常相似：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>The Web Page's Title</title>
<meta name='viewport' content='width=980' />
<link rel='stylesheet' href='styles.css' type='text/css' />
<link rel='apple-touch-icon' href='appicon.png' />
第1章
HTML介绍 9
<script src='ProgramCode.js'></script>
</head>
<body>
示例中的最后一个标签是文档主体部分的开始，下文将对其进行介绍。
1.3.6
<body>标签
HTML中的<body>部分放置Web浏览器所要显示的内容。最简单的示例是可以在
<body>和</body>标签中放置纯文本，浏览器会显示这些文本。
然而，不论在这些文本里放置多少空格、回车或者其他字符，浏览器都会忽略它
们，只会以长字符串的方式显示这些文本。因此让我们来了解一下如何为这些文本添加
格式使它们看起来更加有趣。
1.3.7
使用注释
HTML中最简单的格式化标签可能是<!--和-->。无论在其中放置什么，浏览器都会
忽略它们，因此被称为注释标签。它们主要用来在网页中放置注释，用来提醒用户(或
者是其他维护网页的人)需要加以注意的地方。
下面是一个典型的单行注释示例：
<!-- Created by Joe Smith, January 27th 2012 -->
注释可以随自己喜好包含少数几行或者多行，如果想要快速删除HTML中的某部分
内容，但可能在一段时间后还希望恢复这部分内容，注释将会很有用。
1.3.8
文本格式化
HTML4.01包含100多种可用的标签，对所有标签进行介绍已远远超出了本书的范
围。然而，其中有一部分标签是经常用到的，因此本书会对它们进行介绍，我们将从最
基本的格式化标签开始。
1. 标题
在网页中声明标题的方法是使用<h1>、<h2>、<h3>、<h4>、<h5>或<h6>标签，并
以相应的</h1>～</h6>结束。
<h1>表示最高级的标题，通常将文本以最大字体及加粗模式显示。子标题或下一
级子标题以<h2>、<h3>等标签开始，字体通常较小。您会发现网页大多使用前4种级别
的标题，剩下的两级标题在需要的时候也可以使用。
下面是使用这些标签的示例：
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
图1-2是以上6种级别的标题在IE中默认显示的示例以及一些标准大小的正文内容。有
趣的是，尽管这些正文内容没有加粗，但是其大小通常要比第5级、第6级的标题还要大。
10 第Ⅰ部分 核 心 技 术
在文档中合理地使用这些标签，而不是在每行中直接指定字体和大小(或其他属
性)，可以为这些不同的标签指定不同的CSS规则，通过简单的CSS规则来改变标题的外
观和感觉。您将会在第3章中了解CSS的强大之处。
图 1-2 6种级别的标题及普通正文内容
2. 段落
HTML段落包含在<p>和</p>标签中。如果没有它们，各个段落将会拥挤在一块儿，
阅读起来非常困难。默认情况下，标签<p>在每个段落之间设置了固定的间隔空间。
您将在第3章看到，一旦Web文档被这些标签分割为不同的段落，就可以通过CSS
进一步增强段落的显示方式，如使用首字下沉来表示每个段落的第1行等。
3. 改变文本的强调方式
下面是一些用来对文本进行强调的主要标签。有些标签已经不建议使用了，这意味
着HTML开发者想要在将来的某个时间淘汰掉这些标签，因为已出现了更好的替代方法。
对那些不建议使用的标签，本书介绍了相应的替代标签，假定您已经习惯使用或者
是想要开始使用这些替代标签。
● <b> ... </b> 标签中的文本将被加粗显示。
● <big> ... </big> 标签中的文本字体大小将会比外面的文本字体大。
● <center> ... </center>
标签中的文本将会居中显示。这个标签已经不再建议
使用，可以使用CSS来设置文本居中显示。
● <del> ... </del> 为标签中的文本添加一条删除线。
● <em> ... </em> 正常情况下，标签中的文本显示为斜体，因此与使用<i> ... </
i>效果是一样的，但通过使用CSS可以使该标签与<i> ... </i>有所区别。
第1章
●
●
●
●
●
●
●
●
HTML介绍 11
<i> ... </i> 标签中的文本显示为斜体。
<s> ... </s> 为标签中的文本添加一条删除线。该标签已不建议使用，推荐使
用CSS或者<del> ... </del>进行替代。
<small> ... </small> 标签中的文本字体将会比标签外的文本字体小。
<strike> ... </strike> 同<s> ... </s>。
<strong> ... </strong> 通常情况下，该标签中的文本会加粗显示，因此与使用
<b> ... </b>效果一样，但通过使用CSS可以使该标签与<b> ... </b>有所区别。
_... 标签中的文本将会显示为下标。
^... 标签中的文本将会显示为上标。
<u> ... </u> 标签中的文本将会添加一条下划线。不建议使用这个标签，可以
使用CSS进行替代。
4. 改变字体及颜色
使用HTML标签改变字体及颜色的方法有很多，虽然这些标签都已经不建议使用且
本书建议使用CSS进行替代。然而，这些标签仍然在数百万的网站中使用，因此需要了
解这些标签，以便对所要维护的代码进行更新。
● <font> ... </font> 标签中的文本通过下面介绍的属性及其参数进行更改：
◆ color='...'
文本的颜色值改变为单引号中设置的颜色值。该值可以是颜色
名或是颜色数值。
◆ face='...'
文本的字体改变为单引号中设置的值，该值可以是浏览器支持的
字体名。如果没有发现该字体，浏览器会选择一个替代字体。
◆ size='...'
文本的字体大小改变为单引号中设置的值。该值从1～7中进行选
择(从最小到最大，默认为3)。该值前面可以添加一个+或–符号表示字体大
小发生相对变化而不是绝对变化。
● <basefont> ... </basefont>
这两个标签包含的属性与<font>标签相同，通常
用来改变整个文档的默认字体值。特别是当基准字体的大小改变时，任何使用
“+”或“–”符号的<font>标签都会相对于基准字体发生改变。标题不受该标
签影响，许多浏览器的表格也不受这个标签值的影响。
另外，可以使用bgcolor='...'属性来改变<body>标签或是表格的背景颜色，只需要在
属性值中赋予相应的名字或数字值，如下所述。
通过名称指定颜色 可以使用16种颜色名来为color属性赋值，它们分别是：aqua、
black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、
teal、white和 yellow。
许多浏览器支持更多的颜色名，但这些名称并不属于HTML4.01标准；如果需要更
多的颜色选择，应该使用十六进制的颜色数，这样可以提供精确的颜色， 如下所述。
通过数值指定颜色 可以为color属性提供一个颜色数值而不是颜色名，该颜色数值
以“#”开始，紧接着一个6位的十六进制数，分别代表3种主要的颜色：红、绿、蓝。
例如，值#000000代表黑色，因为它赋予红、绿、蓝3种颜色的值都是00。而#ffff00
代表黄色，因为它为红色和绿色赋值ff，而为蓝色赋值00(在计算机上，红色和绿色混合
在一起就生成了黄色)。
12 第Ⅰ部分 核 心 技 术
虽然<font>和<basefont>标签已不被推荐使用，但颜色名及颜色数值仍然在CSS规则
中继续使用。
提示
值00在十进制和十六进制中都表示0，十六进制中的值ff与十进制中的
256相等。因此，每种主要颜色都有256种渐变色，可以创建包含超过1 600
万种颜色的调色板(256×256×256)。
字体 浏览器支持的字体取决于计算机所安装的操作系统。因此，可以在font='...'
属性中指定几种字体名，并以逗号进行分隔。这意味着可以选择表1-1中的任何字符作
为参数值，浏览器会以您选择的字体(或者相似的字体)显示文本。
我选择将这些字体名放在双引号中，因为这样可以将任何包括空格的字体名包含在
单引号中。这样做的好处是在CSS规则中也可以使用这些相同的字符串，同样可以保证
浏览器以最接近的字体来显示文本。
例如，想要将字体变换为Courier New字体，可以使用下面的HTML，如果没有可用
的字体，计算机会退而求其次选择系统的标准等宽字体。
<font face="'Courier New', monospace">
表 1-1
"Arial, sans-serif"
"'Arial Black', sans-serif"
"'Arial Narrow', sans-serif"
"'Avant Garde', sans-serif"
"Bookman, 'Bookman Old Style', serif"
"'Century Gothic', sans-serif"
"Copperplate, 'Copperplate Gothic Light', serif"
"'Comic Sans MS', cursive"
"Courier, monospace"
"'Courier New', monospace"
"Garamond, serif"
"'Gill Sans', 'Gill Sans MT', sans-serif"
"Georgia, serif"
"Helvetica, sans-serif"
"Impact, fantasy"
"'Lucida Grande', 'Lucida Sans Unicode', sans-serif"
"'Lucida Console', monospace"
"Palatino, 'Palatino Linotype', serif"
"Tahoma, sans-serif"
"Times, serif"
"'Times New Roman', serif"
"Trebuchet, sans-serif"
"Verdana, sans-serif"
设置字体的推荐字符串
第1章
1.3.9
HTML介绍 13
嵌入图片
除文本外，网页中最常用的元素可能就是图片了，它们通过<img>标签嵌入在网页
中，该标签支持一系列属性——这些属性将要在下文中进行介绍，图1-3是嵌入图片的
一个示例。
图 1-3
●
●
●
不同边框的4幅图片(其中一幅图片路径定位错误)
src='...' 单引号中的值是告诉浏览器图片的位置所在。如果该值以字符串
http://开头，首先要从http://后的网站中下载图片。否则该图片会被认为位于当
前网站(或在本地计算机上)并从其所在位置加载。
alt='...' 有些浏览器不显示图片或者禁止显示图片，因此可以使用该属性提供一
个替代的文本来描述相应图片。在图片加载缓慢或失败的情况下该属性也非常有
用，就像在图1-3中显示的那样，因为没有找到图片，所以只能显示替代文本。
width='...'和 height='...' 默认情况下，浏览器会查询图片的尺寸并按照尺寸进
行显示。但有时用户希望以不同的宽度和高度进行显示，这时可以指定上述一
个或全部属性。如果只使用了一个属性，浏览器会计算另外一个尺寸，使图片
保持原来的长宽比例。为图片指定宽度和高度的另外一个原因是确保图片加载
14 第Ⅰ部分 核 心 技 术
前页面的布局分布合理。提前指定图片的高度和宽度，浏览器可以立刻为图片
分配相应的空间。
● border='...'
使用该属性可以为图片指定边框(如果有边框的话)的宽度。边框值
可以是0或任何正数。如果图片具有边框并且放置在某个锚点中，除非在CSS中
进行了修改，否则在鼠标经过时边框的颜色会发生改变。图1-3中能够显示的3
个图片分别代表没有边框、1个像素及5个像素的边框。
● align='...'
该属性设置图片在垂直位置上的排列方式，可以在当前行中为图片
的align属性指定以下值：top、middle、bottom、absmiddle或者absbottom。也可
以使用值left 或right将图片与当前行左对齐或右对齐。
例如，从当前文件夹中加载图片pic.jpg，为该图片指定高度和宽度，并设置替代文
本，最后设置图片与当前行左对齐，可以使用下面的HTML：
<imgsrc='pic.jpg' width='320' height='240' alt='Photo' align='left' />
任何紧接着图片的文本或其他元素都会被放置在图片的右侧，并围绕在图片周围。
专家问答
问题：如果将一个元素左对齐或右对齐后，我该如何对接下来的元素进行重新布局？
答案： 一旦文本或其他HTML元素在某个位置已经确定的对象之后出现时，左对
齐或右对齐都将会被取消。如果想要清除对象的排列，可以使用下面的某个<br />标
签变量，这些标签变量将会(按照顺序)清除左对齐、右对齐或以上两种对齐方式：<br
clear='left' />、<br clear='right' />或<br clear='all' />。当排列方式被清除时，接下来的元
素将不会沿着前一个对象排列，而是强制在其下面进行显示。
1.3.10 创建链接
在网页中几乎可以为所有的元素设置超链接，设置超链接时需要用到<a>标签，该
标签支持以下3种主要的属性：
● href='...'
单引号中的值是锚点所链接的条目。如果以字符串http://开头，超链
接的终点指向外部网络；否则指向当前网站(或是本地计算机位置)。一个典型
的超链接形式如下所示：
<a href='http://google.com'>Visit Google</a>
●
●
target='...' 可以使用该属性指定承载目标文档的元素。该属性的值通常是某个
已经存在的<frame>或<iframe>标签的名字，或者是特殊的名字'_blank'，从而在
一个新的窗口(或是tab，取决于您的浏览器设置)中打开目标。
name='...' 该属性为网页中的链接提供一个命名的目标。例如，可以在任何网
站中链接至某个具体位置，也可以链接至您的网站(或其他网站)的其他页面。
当设置这种链接时，浏览器会自动滚动至相应部分。为了使用这个特征，首先
要创建下面的页面内锚点：
<a name='jumptohere'></a>
第1章
HTML介绍 15
现在可以链接至该部分：
<a href='#jumptohere'></a>
或者，如果该锚点在另外一个不同的文档中，可以用如下方式进行链接：
<a href='http://othersite.com/doc.htm#jumptohere'></a>
专家问答
问题：您能举出一个使用页面内锚点的网站示例吗？
答案：维基(wikipedia.org)网站是一个使用标准或页面内锚点的成功示例，它包括
数百万的内部交叉引用，以及差不多同等数量的外部引用。
例如，在维基入口的内容框中输入下面的链接，可以了解页面内锚点的工作原
理。有趣的是，在维基搜索框中输入“html anchor”可以直接链接到该主题的维基文章
的页面内锚点处，如图1-4所示：
图 1-4 维基文章的页面内锚点
1.3.11 表
最近一段时间以来，表经常遭到CSS用户的轻视，他们认为通过CSS可以获得更为
精确的位置。但事实上表仍然非常适合显示表格类型的数据。
16 第Ⅰ部分 核 心 技 术
当需要设计一个快速简单的网页时，表可以迅速地实现目标。如果对设计非常感兴
趣，可以将它转换为CSS(如果您这样选择的话)。
<table>标签支持许多属性，主要属性如下：
● align='...'
该属性支持的值包括左、右和居中，根据周围的文本将表排列在相
应位置上。该属性现在已不建议使用，可以使用CSS替代。
● bgcolor='...'
通过使用该属性可以设置表的背景颜色。然而该属性已不建议使
用，推荐使用CSS替代。
● border='...'
可以使用该属性指定表的边框宽度，其值可以是0或任何正数的
像素数。
● cellpadding='...'
该属性指定表的单元格与内容之间的像素数，可以是0或任何
正数的像素数。
● cellspacing='...'
该属性指定表单元与表外围边框之间的像素数，可以是0或任
何正数的像素数。
● height='...' 及 width='...'
这两个属性指定表的宽度和高度。如果没有指定，浏
览器会根据表的内容自动调整表的大小。
<table>标签非常有趣，它需要使用更多的嵌入其中的HTML标签来定义表的行和
列。下面是用到的主要标签：
● <caption> ... </caption>
这两个标签显示表的标题，标题的宽度与表的宽
度一致。
● <tr> ... </tr>
这两个标签创建一个表行，通常是紧接着<table>标签的下一
级标签。
● <td> ... </td> 通过这两个标签可以在表行中创建单个的成员(列)。
● <th> ... </th>
这两个标签的使用方法与<td>和</td>相同，目的是向Web浏览
器表示该标签中的内容是标题。
如果以前从来没有接触过这些标签，那创建表好像会非常复杂，其实不然。例如，
下面创建了一个简单的表，用来列举几个主要Web浏览器在2010年8月份的市场份额(来
源于维基)，该表如图1-5所示：
<table border='1'>
<caption>
<i>Web Browser Market Share August 2010</i>
</caption>
<tr>
<th>Browser</th>
<th>Share</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>51.34%</td>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td>30.82%</td>
第1章
HTML介绍 17
</tr>
<tr>
<td>Google Chrome</td>
<td>10.70%</td>
</tr>
<tr>
<td>Apple Safari</td>
<td>5.16%</td>
</tr>
<tr>
<td>Opera</td>
<td>1.40%</td>
</tr>
<tr>
<td>Others</td>
<td>0.58%</td>
</tr>
</table>
图 1-5
使用简单HTML标签创建的表
表单元中的内容不仅仅局限于文本或者数字；可以在其中放置任何需要的内容，比
如图片、按钮、iframe甚至是其他表。
1.3.12 列表
当需要显示列表及子列表时，HTML的优势非常明显，它支持的列表类型众多，图1-6
显示了多种类型的列表。
18 第Ⅰ部分 核 心 技 术
图 1-6
HTML支持多种不同类型的列表
HTML主要支持两种类型的列表：排序列表和非排序列表。排序列表使用<ol>标
签，列表中的每个元素都以数字开始，数字根据条目逐渐增加。非排序列表使用<ul>标
签，每个元素都以一种类型的符号(共3种不同类型的符号)开始。
这些标签支持一系列可以改变列表显示方式的属性：
●
start='...' 在默认情况下，排序列表从数字1开始，列表中剩下的每个条目都以
递增的数字开始，可以选择其他开始值——正数、负数或者零。非排序列表不
使用该属性，总是在每个条目前显示同样的字符。
● type='...'
排序列表中每个条目都默认以数字开头，但也可以改变这一传
统，例如可以为type属性分别赋值'A'、 'a'、 'I' 或'i'，从而显示大写、小写
字母或者是大写、小写的罗马数字。非顺序列表的type属性需要下面3个
值：'disc'、'square'或者 'circle'，默认情况下指定为'disc'。
列表中的每个元素都包含在<li>和</li>标签中。例如，下面显示了图1-6中的第1个
列表：
<ol>
<li>Apple</li>
<li>Pear</li>
<li>Banana</li>
<li>Plum</li>
<li>Orange</li>
</ol>
下面是一个以正方形开头的非排序列表，显示效果见图1-6中的第7个列表：
<ul type='square'>
第1章
HTML介绍 19
<li>Apple</li>
<li>Pear</li>
<li>Banana</li>
<li>Plum</li>
<li>Orange</li>
</ul>
列表中可以包括子列表，如下所示：
<ul>
<li>Apple</li>
<ul>
<li>Bramley</li>
<li>Cox</li>
<li>Golden Delicious</li>
</ul>
<li>Pear</li>
<li>Banana</li>
<li>Plum</li>
<li>Orange</li>
</ul>
提示
在嵌套非排序列表的示例中，默认情况下每个子级别的列表都以一个
不同的字符开头，从disc、square、circle依次开始，如果还有下一级别的
子列表，则继续从disc、square、circle开始。
HTML还支持另一种类型的列表，被称为定义列表，该列表使用<dl>标签。列表中
的元素不是以符号开始，而使用一个单词或短语(称为术语)，并在列表元素部分中进行
定义(称为定义)。
例如，下面的示例显示如何创建一个关于不同类型食物的定义列表：
<dl>
<dt>Apple</dt>
<dd>A fruit with red, yellow, or green skin</dd>
<dt>Cabbage</dt>
<dd>Any of several forms of a European vegetable</dd>
<dt>Peanut</dt>
<dd>The underground pod of the peanut vine</dd>
</dl>
这个示例显示如下：
Apple
A fruit with red, yellow, or green skin
Cabbage
Any of several forms of a European vegetable
Peanut
The underground pod of the peanut vine
20 第Ⅰ部分 核 心 技 术
1.3.13 表单
通常情况下，用户通过表单向网站提交数据。第7章会介绍如何在Web服务器上使
用PHP翻译发送的数据，本节首先介绍如何收集数据。
<form>和</form>标签组成了一个Web表单，支持多种属性，主要属性有如下
两种：
● method='…' 该属性只接受两个属性值：'post' 或者 'get'。如果选择'post'，所有
的表单数据都将会无声无息地发送至Web服务器；如果选择'get'，数据被添加在
符号“？”之后并追加在一个HTML请求上，符号“？”之后的文本串被称为
查询字符串。这会导致URL看起来凌乱，但相对于其他方法，该方法确实能够
将表单发送至某个本地JavaScript程序而不是Web服务器。
● action='...'
该属性应当包括表单被提交的目标URL。如果表单使用'get'请求发
送，那么“?”后面紧跟着的表单数据就会附加到该值上。
图1-7列举了某个页面上所包含的一系列表单元素，每个元素将在下文中介绍。
图 1-7
<form>标签能够包含的主要元素
第1章
HTML介绍 21
1. <input />标签
与<table>标签一样，<form>标签内部也可以包含其他标签。可以想象，有许多不
同的标签可以在其内部使用，比如最常用的标签<input />。<input />标签能够接受许多
参数，其中第一个是type='…'，该参数可以包含下列值：
●
'text' 该值创建一个输入栏，方便用户输入文本。可以通过size='...'属性改变输
入栏的宽度，可以通过设置maxlength='...'属性限制输入的最大字符数。
●
'password' 该值创建一个用来输入密码的输入栏，在该输入栏中输入的所
有字符都将以“*”代替显示，但可以在内部合理存储。可以通过size='...'属
性改变输入栏的宽度，可以通过设置maxlength='...'属性限制输入的最大字
符数。
●
'radio' 每个表单都可能包含一定数量的单选按钮，为<input>标签的type='...'属
性赋值'radio'就能够创建单选按钮，但每次只有一个处于激活状态。另外一个单
选按钮被单击时，原先选择的单选按钮就会被放弃选择。单选按钮是圆形的。
●
'checkbox' 使用该属性值创建复选框，与单选按钮相似，但复选框是方形
的，一次可以选择多个复选框。
●
'hidden' 有时要在Web表单中传送一些不希望用户看到的数据，比如认证码或其
他数据，可以通过'hidden'属性来实现，同时需要提供传递的value='...'的属性值。
●
'submit' 该属性值创建一个按钮，用来提交表单。默认情况下，按钮被标记
为Submit 或 Submit Query。
2. value='...'属性
<input />标签可能包括一些其他属性，其中主要的属性为value='...'，可以使用该属
性为某个字段预设默认数据，该属性与type='hidden'属性共同使用传递隐藏数据时效果
更加明显。
3. <textarea>标签
该标签创建一个多行的输入框，用户可以更加自由地输入数据，特别适合提交用户
bios或其他不适合单行输入的信息。
为了指定所要显示的行和列的数量，可以设置rows='...' 及cols='...' 属性。<textarea>
标签以</textarea>标签结束。
4. <select>标签
该标签创建一个下拉列表框，用户可以在众多选择条目中选择某个选项。必须为
该标签指定一个名字，因为只有这样传送数据才能被识别，所有的选项都必须放置在
<option>和</option>标签中，如下所示：
<select name='chocolate'>
<option value='plain'>Plain</option>
<option value='dark'>Dark</option>
<option value='milk' selected='selected'>Milk</option>
<option value='white'>White</option>
</select>
22 第Ⅰ部分 核 心 技 术
无论选择哪种巧克力，都会显示plain、dark、milk或white中的一个，还包
括'chocolate'的字段名。
技巧
您看到示例中第3个选项的selected='selected'属性了吗？这说明除非用
户改变选择项，否则这个选项会是默认的选择项。
5. <button>标签
该标签显示一个可单击的按钮，但不推荐使用它，因为IE提交<button>和</button>
标签之间的内容，而其他浏览器提交value='...'属性中的内容。因此，除非使用JavaScript
为其添加单击事件，否则很难对二者协调使用。
6. <label>标签
<label>标签最大的用途是与单选按钮或者复选框结合使用，可以放置某个单选按
钮或者复选框，并在其后面添加解释性的文本，这些文本放置在<label>和</label>标签
中间，用户可以单击单选按钮/复选框或者是文本来激活某个选项。
下面是一个常用的示例：
<label>
<input type='checkbox' name='agree' value='yes' />
I agree to these terms and conditions.
</label>
上面的示例显示结果如下，单击其中任何部分都会选中或放弃选中这个选项：
□ I agree to these terms and conditions.
7. 组合表单
下文是创建图1-7所显示表单的HTML。因为只是用来证明不同输入框的外表和运
行状况，因此没有为<form>标签提供任何属性，因此该标签不会被提交，或者是提交
给表单自己，但是发送的数据会被忽略。<pre>标签(使用等宽字体，不显示空格)只是
简单地排列其中的所有元素，而不需要额外的样式。
<form><pre>
Input type: text
<input type='text' name='f1' size='26' />
Input type: password <input type='password' name='f2' size='26' />
Input type: radio
Input type: radio
<input type='radio' name='f3' value='1' />1
<input type='radio' name='f3' value='2' />2
Input type: checkbox <input type='checkbox' name='f4' value='1' />1
Input type: checkbox <input type='checkbox' name='f4' value='2' />2
Input type: hidden
<input type='hidden' name='f5' />
第1章
HTML介绍 23
Textarea:
<textarea name='f6' rows='3' cols='20'>
</textarea>
Select:
<select name='f7'>
<option value='1'>First option</option>
<option value='1' selected='selected'>
Second option</option>
<option value='3'>Third option</option>
</select>
Button:
<button name= 'f8' value='f8'>Button </button>
Label:
<label><input type='checkbox' name='agree'
value='yes' /> I agree to the terms</label>
<input type='submit' />
Input type: submit
</pre></form>
技巧
本书中的示例HTML文件可以从合作网站html5formobile.com上进行下
载，读者不需要手动输入这些代码。
1.3.14 <div>和<span>标签
<div>和<span>标签主要用来将元素合并成组，类似于将这些元素放置于某个表单
元中，其目的是使其中所包含的元素能够同时使用样式表操作。
<div>标签在其中创建了被称为块的元素，默认情况下，它的宽度延伸至浏览器的
右边界，迫使其后的所有元素都放置在下一行。因此，<div>标签创建的所有块元素都
具有4个边并且是矩形。
另一方面，<span>标签创建了一个满是文本的内部元素，因此特别适合于为该部分
文本应用样式。
第3章将会了解到这两种容器是如何帮助应用CSS规则的，每个容器都有其自己的
方式。
1.3.15 帧
最后的HTML4.01标签与在帧中放置内容有关。第一种同时也是最少推荐的实现方
式是将网页分割成多个部分，然后将它们放置在<frameset>标签中，例如：
<frameset cols='20%, *, 20%'>
<frame src='header.htm' />
<frame src='body.htm' />
<frame src='footer.htm' />
</frameset>
<noframes>
24 第Ⅰ部分 核 心 技 术
<!-- Alternative content goes here -->
</noframes>
提示
示例中的<noframes>和</noframes>标签向那些浏览器不支持框架的用
户显示替换内容。虽然所有现代的主流浏览器都支持框架，但像盲人使用
的音频浏览器或纯文本浏览器等特殊浏览器都会从这两个标签中受益。
这段代码创建了一个位于顶端的框架，它占整个浏览器高度的20%，并使用文件
header.htm进行装载。其后是主框架，除非主框架大小固定，否则主框架将会占用剩
下的所有空间(原因是cols='...'属性中的参数*)。主框架使用文件body.htm进行加载。最
后，底部框架使用footer.htm进行加载，占用网页底部20%的空间。
这种方法的问题在于整个网页都是由框架组成，网页中没有自己的内容。显然这并
不完美，不利于网页在搜索引擎中的排名，因为搜索引擎会发现该网页不是很有趣。
反之我建议，当需要框架时使用<iframe>标签，如图1-8所示。因为它可以在文档
中放置一个任意宽度和高度的框架，就像放置图片一样简单，例如：
<!-- Various HTML content here -->
<iframe src='framecontent.htm' width='200' height='200'></iframe>
<!-- More HTML content here -->
图 1-8
使用<iframe>标签在某个网页中显示另外一个网页
第1章
1.4
HTML介绍 25
所有的HTML4.01标签
考虑到新手可能需要温故而知新，或者需要一些建议，表1-2列举了所有的HTML4.01
标签以及一些简单的描述。同时也提醒您某个标签是否已经不建议使用，并且可能在未
来的HTML版本中淘汰——在这种情况下，为了保证网站能够长期保持稳定，应该使用
表中提到的替代标签。
表 1-2
标
所有的HTML4.01标签
签
说
明
<!-- ... -->
注释
<!DOCTYPE>
文档类型
<a> ... </a>
链接锚点
<abbr> ... </abbr>
缩写
<acronym> ... </acronym>
首字母缩略词
<address> ... </address>
作者联系信息
<applet> ... <applet>
嵌入applet
<area />
图像地图区域
<b> ... </b>
加粗文本
<base />
默认链接地址或者目标
<basefont />
默认字体、颜色或大小
<bdo> ... </bdo>
文本方向
<big> ... </big>
大文本
<blockquote> ... </blockquote>
长引用
<body> ... </body>
文档主体
<br />
换行
<button> ... </button>
可单击按钮
<caption> ... </caption>
表格标题
<center> ... </center>
文本居中
<cite> ... </cite>
引用
<code> ... </code>
计算机代码文本
<col />
表格列属性
<colgroup> ... </colgroup>
表格列组
<dd> ... </dd>
定义列表说明
<del> ... </del>
删除文本
<dfn> ... </dfn>
定义术语
<dir> ... </dir>
目录列表
<div> ... </div>
文档中的块部分
<dl> ... </dl>
定义列表
<dt> ... </dt>
定义列表术语
<em> ... </em>
强调文本
<fieldset> ... </fieldset>
表单元素周围的边框
<font> ... </font>
字体名称、颜色和大小
弃用/替代
不推荐使用，使用<object>代替
不推荐使用，使用CSS代替
不推荐使用，使用CSS代替
不推荐使用，使用<ul>代替
不推荐使用，使用CSS代替
26 第Ⅰ部分 核 心 技 术
(续表)
标
签
说
<form> ... </form>
表单
<frame />
Frameset帧
<frameset> ... </frameset>
帧集
<h1> ... </h1> <h6> ... </h6>
标题
<head> ... </head>
文档标题
<hr />
水平规则
<html> ... </html>
HTML文档
<i> ... </i>
斜体文本
<iframe> ... </iframe>
内联帧
<img />
图片
<input />
输入字段
<ins> ... </ins>
插入的文本
明
<isindex> ... </isindex>
可搜索索引
<kbd> ... </kbd>
键盘文本
<label> ... </label>
输入元素的标注
<legend> ... </legend>
Fieldset元素标题
<li> ... </li>
列表条目
<link />
支持文件的链接
<map> ... </map>
图像地图
<menu> ... </menu>
菜单列表
<meta />
文档元数据
<noframes> ... </noframes>
Frame的替代内容
<noscript> ... </noscript>
Script的替代内容
<object> ... </object>
嵌入式对象
<ol> ... </ol>
按顺序排列的列表
<optgroup> ... </optgroup>
列表选项组
<option> ... </option>
选择列表中的选项
<p> ... </p>
定义段落
<param />
对象参数
<pre> ... </pre>
预先格式化文本
<q> ... </q>
定义一个简短的引用
<s> ... </s>
添加删除线的文本
<samp> ... </samp>
计算机代码
<script> ... </script>
脚本(通常是JavaScript)
<select> ... </select>
选择下拉列表
<small> ... </small>
定义小文本
<span> ... </span>
文档中的内联部分
<strike> ... </strike>
添加删除线的文本
<strong> ... </strong>
重要文本
弃用/替代
不推荐使用，使用<input>代替
不推荐使用，使用<ul>代替
不推荐使用，使用<del>或者CSS代替
不推荐使用，使用<del>或者CSS代替
第1章
HTML介绍 27
(续表)
标
签
说
明
<style> ... </style>
样式信息
_...
脚注文本
^...
上标文本
<table> ... </table>
表格
<tbody> ... </tbody>
表格主体内容组
<td> ... </td>
表格单元
<textarea> ... </textarea>
多行文本输入
<tfoot> ... </tfoot>
表格页脚单元组
<th> ... </th>
表格标题
<thead> ... </thead>
表格标题单元组
<title> ... </title>
文档标题
<tr> ... </tr>
表格行
<tt> ... </tt>
电传打字机文本
<u> ... </u>
下划线文本
<ul> ... </ul>
不按顺序排列的列表
<var> ... </var>
变量文本
1.5
弃用/替代
不推荐使用，使用CSS代替
本章小结
如果您是一位HTML新手，我建议您针对示例文件(可以从合作网站html5formobile.
com上下载)进行一些简单的练习，这样可以使您对HTML有一个更加深入的了解。
不管是不是新手，本章都会带您快速了解如何使用HTML4.01。现在您已经准备好
了，第2章将要详细介绍HTML5提供的新特性。
第2章
HTML5新特性
关键技术与概念
●
●
●
●
●
●
●
●
HTML5 画布
地理位置
增强的表单处理
模式匹配与时间、日期输入
本地存储
嵌入媒体
音频和视频编码解码器
Microdata、Web Workers以及Web 应用程序
30 第Ⅰ部分 核 心 技 术
虽然本书是一本介绍运行在iOS 和Android系统移动平台上的HTML5书籍，但是由
于 HTML5仍然在不断发展之中，其发展过程在2012 年或 2013年不会结束，因此了解所
有标签(现在及将来的)及其在其他平台和浏览器上的工作方式是非常重要的。
您可能并不希望您的HTML5网页、Web应用程序以及设备程序仅仅运行在iOS 和
Android上，因为HTML可以在其他绝大多数设备上显示，我想您不希望错过在这些设
备上运行您的创作成果的机会。
因此，本章更多的是介绍HTML5在通常情况下能够实现什么，而不仅局限于iOS
和 Android系统。当然，本章也涉及了特定于以上操作系统的内容，但是您应该将下面
的内容看成现阶段HTML5的总结。在本书稍后的章节中，特别是第Ⅱ部分的第1章～第
9章将会介绍如何在移动设备上应用这些特性。
那么闲话少说，言归正传，下面是您所期待的HTML5 。
提示
当旧浏览器遇到不识别的HTML5标签时，它会简单地忽略标签，就
如同使用组合标签名<madeupnametag> 和</madeupnametag>一样。但浏览
器会显示标签中的任何文本或HTML。
2.1
画布(Canvas)
<canvas>元素是由苹果公司为WebKit渲染引擎(WebKit rendering engine，默认iOS
和Android Web浏览器的后台支持，Apple Safari 和 Google Chrome也使用它)提出的，在
网页上它提供一种绘制图形的方法，且不需要加载如Java或Flash的插件。随后Canvas实
现了标准化，被Opera和基于Gecko的浏览器(在Mozilla Firefox浏览器中使用)所采用，并
且Google Chrome 和 Microsoft Internet Explorer 9也包含<canvas>元素。
画布是网页中的一块区域，可使用JavaScript在上面绘图。为创建画布，可以使用
下面的HTML创建一个ID为'mycanvas'的320×240像素大小的画布：
<canvas id='mycanvas' width='320' height='240'>
This section is displayed on browsers that don't support canvas
</canvas>
由于在一个网页中可以包含多个画布，因此有必要为每个画布提供一个ID，这样就
会知道在哪个画布上应用绘制命令。
在图2-1中，可以看到在Chrome浏览器画布上绘制的一系列圆形和方形，这些图形
的亮度级别逐渐增强，并且在上面叠加了一些文本。
在画布上绘图需要使用JavaScript编程语言，具体细节将在第6章中介绍。在此
期间，如果想查看图2-1的源代码，请参阅examples.zip文件中的canvas.htm文件，
examples.zip文件可在合作网站html5formobile.com上下载。
第2章
HTML5新特性 31
图 2-1 在画布上绘制同中心的圆、方形及文字
2.2
地理位置
HTML5的地理位置特性可以返回网页访问者的地理位置(或最接近的位置)，如图2-2
所示，某个站在巴黎埃菲尔铁塔附近的用户位置已经返回。如果已经返回了地理位置，
那么将会在iframe中的地图中进行显示，否则会返回一个报错信息。可以从合作网站中下
载examples.zip文件， 其中geolocation.htm是本示例的代码文件。
32 第Ⅰ部分 核 心 技 术
图 2-2
应用HTML5的地理定位特性可以非常简单地查找用户的位置
由于可以通过表单或者使用Ajax将网站访问者的位置发送至Web服务器，默认情况
下，所有浏览器都会禁止泄露位置信息，除非已经得到访问者的允许。
浏览器虽各有不同，但它们都提供了相同的安全控制：在第一次访问某个要求提供
您位置的网站时，Web浏览器会询问是否希望提供位置信息。如果允许，通常还会弹出
一个提示框，询问是否总是允许这么做。如果允许访问并且没有选中复选框，那么仅仅
这次会提供位置信息，下一次您访问网站时将会再次提示您。但是如果选中复选框，那
么网站就不会再次提示，然后网站始终能够得到您的位置信息。
同样，如果不想向网站暴露行踪，可以禁止访问，也可以正常选中相应的设置项，
防止当前网站得到位置信息。
为了获取浏览器的位置，必须进行JavaScript调用，详细信息将在第6章中讨论。
专家问答
问题：Web浏览器如何确定我的位置？
答案：确定位置有很多种方法。首先，您的IP地址已经透露了您所在的国家，这类
程序往往可以得到与您非常接近的位置。通常情况下，您对此无能为力，因为所有的网
站都需要知道您的IP地址以便向您发送数据。不过也有第三方的代理服务，当您与Web
服务器通信时它们会与您更换IP地址。
第2章
HTML5新特性 33
如果您的计算机上启用了Wi-Fi，那么定位程序应用HTML5的地理位置特性通过扫
描本地可访问的Wi-Fi热点以及使用包含数以百万计的热点名称、MAC地址以及位置信
息的数据库，就能够找到您的位置。
此外，如果您使用的是移动设备，那么通过移动基站三角公式计算定位，也可以
非常准确地找到您的位置，或者如果您的电脑具有GPS(Global Positioning System，全
球定位系统)功能，那么就可以在非常短的时间内得到您的准确位置，误差在几英尺
范围内。
2.3
表单
Web表单可能是因特网上最重要和最常用的部件之一，因此了解HTML5提供的表
单增强特性是非常有益的，这些功能之前是由复杂的JavaScript编写实现的，以便于能
在所有浏览器上工作。
HTML5总共提供了近20个新的属性和十几种新的输入类型，这些可以用来提高
Web表单的功能。
2.3.1
表单属性
HTML5仍然是一个发展中的规范，浏览器只能执行其中一部分。因此，不同浏览
器对这些新特性的支持是不同的，某些浏览器甚至不支持任何新特性。并不总是老版本
的浏览器达不到HTML5的相应规范，撰写本书时，所有最新版本的主流浏览器都至少
忽略了其中3个属性，有的则多达10个。
然而在未来的几年中，大多数浏览器都将实现更多的HTML5规范，这里将介绍使
用这些新特性的信息。
1. autocomplete 属性
autocomplete属性可以应用于<form>标签或者是以下<input>标签：color、date、
email、password、range、search、teleophone、text或url。该属性的有效参数是'on'(默认)
和'off '。
当autocomplete属性设置为'on'时，先前已经获得输入的任何字段都会记得之前输入
的值，并将这些值作为建议提供给用户，用户不必再次进行输入。
当autocomplete属性设置为'off '时，该功能是被禁止的。在<form>标签中应用该属
性时，表单中的所有相关字段都会受到影响。当应用于一个<input>标签时，则只会影
响<input>标签对应的字段。下面是使用该属性的两个例子：
<form action='prog.php' method='post' autocomplete='on'>
<input type='text' name='field1' autocomplete='off' />
</form>
所有主流浏览器的最新版本都支持autocomplete属性。
34 第Ⅰ部分 核 心 技 术
2. autofocus属性
autofocus属性可以应用于任何<input>标签，在页面加载时自动获得输入焦点。这
与将光标放置于输入字段之上具有相同效果，可以方便用户输入，或者选择任何其他类
型的字段为用户的操作做准备，该属性的激活方式如下所示：
<input type='text' name='field' autofocus='autofocus' />
除了IE，所有主流浏览器的最新版本都支持autofocus特性，但可以在网页中安全地
使用autofocus属性，因为IE仍然可以运行地很好——只是不提供自动获得任何字段焦点
的功能而已。
3. form 属性
应用form属性就没有必要在表单中放置<input>标签。只要赋予表单一个ID，就可
以将该表单指定为form属性的参数。
例如，下面的代码打开然后关闭ID为form1的表单，在该表单后 <input>标签链接了
该表单：
<form id='form1' action='prog.php' method='post'>
<input type='submit' />
</form>
<input type='text' name='field' form='form1' />
该特性目前仅在Opera浏览器中可用，因此在其他主流浏览器能够支持该特性之前
建议不要使用。
4. formaction属性
formaction属性是一种表单重载，可以使用它将表单的action属性改为不同的目标。
例如在下面的代码中，表单不会发送至<form>标签中指定的prog.php程序，而是发送至
prog2.php：
<form action='prog.php' method='post'>
<input type='text' name='field' />
<input type='submit' formaction='prog2.php' />
</form>
当希望提供不止一个提交按钮时，formaction属性特别有用，这样需要提交至不同
目标的表单都可以和不同程序相关联。
表单重载可以在submit 或者image 类型的<input>标签上运行，但目前只有Opera浏
览器支持该特性，因此在其他主要浏览器支持该特性之前建议不要使用。
5. formenctype 属性
formenctype属性是一种可以改变表单的编码类型(enctype属性)的表单重载，与
formaction使用方式相似 (目前仅Opera支持该属性，因此目前不建议使用)。
第2章
HTML5新特性 35
6. formmethod 属性
formmethod属性是一种可以改变传送方法(method属性的参数'post'或者 'get')的表单
重载，使用方法与formaction相似 (该属性目前只能在Opera上运行)。
7. formnovalidate 属性
formnovalidate属性是一种表单重载，可以使用formnovalidate属性改变novalidate属
性的值，使用方法与formaction相似 (该属性目前只能在Opera上运行)。
8. formtarget属性
formtarget属性是一种可以改变target属性值的表单重载，使用方法与formaction相似
(该属性目前只能在Opera上运行)。
9. height属性和width属性
height属性和width属性可以应用于image 类型的<input>标签，用来改变图像的高度
和宽度。这两个属性可以在所有最新版本的主要浏览器上使用，使用方法如下：
<input type='image' src='image.png' height='20' width='60' />
10. list 属性、<datalist> 标签和 <option> 标签
有些输入字段支持列表，可以使用list属性来引用这些输入字段。例如，下面的代
码使用list属性与新的<datalist>标签一起提供一个供选择的URL组合：
Choose a web page: <input type='url' name='links' list='sites' />
<datalist id='links'>
<option label='Google' value='http://google.com' />
<option label='Yahoo!' value='http://yahoo.com' />
<option label='Bing' value='http://bing.com' />
<option label='Ask' value='http://ask.com' />
</datalist>
该特性与autocomplete属性的运行方式相似，不同之处是当输入获得焦点时将会显
示您定义的建议选择列表。
目前仅Opera浏览器支持该特性，但是您仍然可以在网页中使用，因为其他浏览器
根本无法显示建议列表。随着时间的推移，当其他浏览器都支持该属性时使用该特性的
Web表单将会变得更快，能够满足大多数访问者的要求。
11. min 属性
min属性用来指定包含数字或者日期的输入类型的最小值。不建议您依赖于该类型的
验证，因为只有Chrome和Opera浏览器支持该属性，下面是使用min属性的一个示例：
<input type='time' name='deliver' value='09:00' min='09:00' />
12. max 属性
max属性用来指定包含数字或者日期的输入类型的最大值，目前只有Chrome浏览器
36 第Ⅰ部分 核 心 技 术
和Opera浏览器支持max属性。可以将min属性和max属性组合使用，如下所示：
<input type='time' name='deliver' value='09:00' min='09:00' max='17:00' />
13. multiple 属性
multiple属性允许您在email或者file类型的<input>标签中选择多个值。除了Internet
Explorer和Opera，该属性可以在所有主要浏览器的最新版本上运行。使用方式如下：
<input type='file' name='images' multiple='multiple'/>
然后，当浏览对话框弹出时，可以同时选择多个文件(通常配合使用CTRL键)。而
在不支持该特性的浏览器上一次只能选择一个文件。
14. novalidate 属性
novalidate属性指定某个表单在提交时不应得到验证。novalidate属性的值可以是
‘true’或者‘false’。目前所有主流浏览器都不支持novalidate属性，因此不能使用。
在支持novalidate属性的浏览器上，该属性可以应用于<form>标签以及如下类型的
<input>标签：color、date、email、password、range、 search、telephone、text或url。使
用方式如下：
<input type='text' name='field' novalidate='true'/>
一旦该属性得到支持，您随时都可以选择使用它，至少HTML5的验证特性要优于
目前能够提供的验证。如果您正在寻找可靠的浏览器内部表单验证，有许多的库可以使
用如livevalidation.com中的开源工具。
15. pattern 属性
可以使用pattern属性在某个输入字段中指定一个正则表达式，之后将会计算该输
入字段的值。该属性可以应用于下面类型的<input>标签：email、password、search、
telephone、text或 url 。例如，如果在某个字段中只允许输入字母数字字符、连字符、下
划线字符，那么可以使用下面的HTML：
<input type='text' name='username' pattern='[\w\-]{6,16}' />
格式'[\w\-\_]{6,16}'告诉浏览器只接受下面的字符：
\w a～z 和A~Z的字母、0～9的数字和下划线
● \连字符
● {6,16}
字符长度在6～16之间
然而，目前仅Opera浏览器和Chrome浏览器支持该特性，因此不能依靠该特性进行
浏览器内部验证，并且为了保证该特性能够运行，网页的!DOCTYPE必须如下所示(而
不是某个HTML4.01文档类型之一)：
●
<!DOCTYPE HTML>
在这里还需要补充的是，当格式不匹配时Chrome浏览器将会简单地拒绝提交表
第2章
HTML5新特性 37
单——您不知道为什么——Opera浏览器将会提示：“[input]不是本页面要求的格式！”
在我看来这真是粗心的验证，对任何人都没有太大的用处，因此建议忽略该特性，直到
所有浏览器都支持该特性，并且足够成熟能够实际通知用户它们所需要的输入内容。
16. placeholder 属性
placeholder属性可以在一个空白输入字段上放置有用的提示，使用该属性可以帮助
用户输入有效的内容。使用方式如下：
<input type='text' name='username' size='35'
placeholder='Enter your 6-16 character username' />
size属性的值为35，可以确保占位符文本拥有足够的空间。在向字段中输入内容之
前以浅色显示占位符文本，如图2-3所示。
图 2-3
在苹果 Safari Web浏览器中显示占位符
只要字段获得焦点，提示消息将会消失，准备输入文本。该属性可以应用于以下类
型的<input>标签：email、password、search、telephone、text和url。
placeholder属性可以在所有主流浏览器的最新版本上使用，除了IE和Opera。但是该
属性可以安全使用，因为IE和Opera会简单地忽略该属性。
17. required属性
required属性用来确保在表单提交之前字段已经输入完毕，使用方式如下：
<input type='number' name='age' required='required'/>
为了使required属性正常运行，网页的!DOCTYPE必须如下所示(而不是使用任何的
HTML4.01文档类型)：
<！DOCTYPE HTML>
与许多其他的验证特性一样，目前只有Chrome和Opera Web浏览器支持该特性，因
此对所有Web表单的浏览器内部验证来说required属性是不可靠的。
18. step 属性
step属性用来为包含数字或者日期的输入类型指定步长值，目前只有Chrome浏览器
38 第Ⅰ部分 核 心 技 术
和Opera浏览器支持该属性。下面是将step属性与min 和max属性组合使用的示例：
<input type='time' name='deliver' value='09:00' min='09:00'
max='17:00' step='3600'/>
step属性的值可以是任何正整数，上例中step值的单位是时间秒。前面的HTML在
Opera中的结果如图2-4所示。通过单击旋转框旁边的向上和向下箭头图标或者使用键盘
上的UP和DOWN按键，可以滚动时间进行选择。
图 2-4 在Opera Web浏览器中使用min、max和step属性
2.3.2
表单输入类型
多年来，Web开发人员发现HTML4.01支持的选择类型较为简单，而网站需要更多
类型的输入框。事实上，现在HTML5拥有16种新的不同类型的输入框。
这些新的输入类型在用户输入上提供轻量级控制以及内置验证。唯一不足是除了
Opera浏览器，这些新的输入类型还没有被大多数浏览器支持。但仍然可以在不支持这
些输入类型的浏览器上使用所有这些新的输入类型，因为如果浏览器不支持，这些输入
类型将会恢复为浏览器支持的普通文本域。
当然，这意味着您还不能依赖这些浏览器(除了Opera)进行验证，但是如果您使用
这些类型，那么随着时间的推移其他浏览器发展变化并且最终支持这些输入类型，那么
您的表单将会自动变得更容易被大多数用户接受。
当使用其中任何一种输入类型时，必须使用以下的HTML5文档类型来确保证这些
输入类型能正常运行：
<!DOCTYPE HTML>
提示
苹果公司的iOS设备能够部分识别这些输入类型，这表现在它们会相
应地改变呈现给您的键盘类型。例如，email输入类型能够确保在主字符
集中包括一个“@”符号，number类型能够确保数字键可见，tel类型将会
显示电话键盘。目前还没有其他方面的发展。我所接触的Android设备都
没有提供这种额外的输入帮助。
第2章
HTML5新特性 39
1. color输入类型
该输入类型最终将会调用一个取色器，可以在其中简单地单击选择颜色，但是现在有
一些限制，即必须输入颜色名并且只能在Chrome浏览器中使用。使用方式如下：
Enter your preferred color <input type='color' name='favcolor' />
2. date 和 time 输入类型
日期、时间选择器与颜色选择器非常相似，单击之后将会弹出一个日历，可以从中
选择一个日期或时间。
目前，date 和 time输入类型只能在Opera和Chrome上工作，但在Chrome上的运行还
有些问题，默认情况下总是选择1582年(如图2-5所示)，必须重新输入一个日期——这是
一个让人非常讨厌的问题，因为：
图 2-5 Google Chrome中的日期选择器仍然存在瑕疵
在浏览器中使用当前时间设置时间和日期很常见，为什么不这样做呢？
除非在Web服务器上或者用JavaScript创建输入栏，否则将无法设置当前日期，必
须输入一个默认的开始日期，并且该日期不会随着时间的推移发生改变。
此外，Chrome浏览器不会弹出任何类型的选择器，可以单击向上和向下图标(或者
按下UP和DOWN按键)来改变当前选择。
另一方面，Opera总是会弹出一个选择日历，如图2-6所示。
如果使用除时间选择器以外的其他选择器，将会遇到一个问题，因为虽然默认情况
下Opera能够正常工作，Chrome会要求在value字段中输入一个类似2012-06-07的日期，
否则将会显示过去几百年前的某个日期。然而，如果输入了这样的日期，Opera就会使
用该日期而不是当前日期作为它的起始值 。
所以我建议不要使用日期、时间选择器特性，除非它们已成熟并且能在所有主流浏
览器上正常工作；在此期间可以通过搜索引擎找到大量的JavaScript日期选择器。
●
●
40 第Ⅰ部分 核 心 技 术
提示
图2-5和图2-6中使用的HTML示例文件在dateandtime.htm中，该文件
存储于examples.zip中，可以从网站html5formobiles.com上进行下载。
图 2-6
日期输入类型
Opera充分利用了日期选择器
该输入类型选择一个日期，使用方式如下：
<input type='date' name='thedate'/>
返回值的格式为YYYY - MM- DD。如果希望确保其能够在Chrome上正常工作，那
么需要使用如下HTML(虽然Opera还是使用起始日期作为默认日期)：
<input type='date' name='thedate' value='2012-03-17' />
月份输入类型
该输入类型选择某个月份，使用方式如下：
<input type='month' name='themonth'/>
返回值的格式为YYYY-MM。除非该输入类型已经固定，否则需要为Chrome设置
输入value属性来保证其正常工作。
时间输入类型 该输入类型返回一个24H格式(HH：MM)的时间，使用方式如下：
<input type='time' name='thetime'/>
周输入类型
式如下：
该输入类型返回格式为YYYY-WNN的星期(如2011－W06)。使用方
<input type='week' name='theweek'/>
除非该输入类型已经固定，否则需要为Chrome设置输入value来保证其正常工作。
第2章
HTML5新特性 41
日期时间输入类型 该输入类型返回UTC(Coordinated Universal Time，协调世界时)
的日期和时间，UTC几乎与格林威治标准时间相同，相差不会超过一秒。返回值的格式
为YYYY - MM- DDTHH：MMZ(如2011-10-15T15：35Z)。使用方式如下：
<input type='datetime' name='dateandtime'/>
除非该输入类型已经固定，否则需要为Chrome设置输入value来保证其正常工作。
本地日期时间输入类型 该输入类型返回用户的本地日期和时间。返回值的格式为
YYYY - MM- DDTHH：MM(如2011-10-15T15：35)。使用方式如下：
<input type='datetime-local' name='localdateandtime'/>
除非该输入类型已经固定，否则需要为Chrome设置输入value来保证其正常工作。
3. email 输入类型
目前仅Chrome和Opera支持该验证类型，只能输入有效的电子邮件地址。使用方式
如下：
<input type='email' name='emailaddress' />
4. number 输入类型
目前仅Chrome和Opera支持该验证类型，只能输入数字。使用方式如下：
<input type='number' name='age'/>
在以上两种浏览器上，可以单击输入框旁边的向上、向下箭头或者使用UP、
DOWN按键改变默认值。
5. range 输入类型
该输入类型可以显示一个范围构件，该构件具有确定的开始值和步长值，可以在最
小值和最大值之间滑动选择任意值，如图2-7所示。
图 2-7
在Safari上创建一个范围构件
42 第Ⅰ部分 核 心 技 术
最新版本的Opera、Chrome和Safari都支持该输入类型，使用方式如下：
<input type='range' name='num' min='0' max='255'
value='128' step='1'/>
在其他浏览器上将会显示一个普通的文本输入栏，用户可以直接键入一个数字。
6. search 输入类型
通过指定搜索类型，浏览器可以调整输入框来提供许多特性如搜索建议(类似于
Google Search)、清除字段内容的图标，以及可能的样式变化用来提醒您的输入类型。然
而，目前仅Safari和Chrome支持该输入类型，唯一改进的是一个用来清除输入的“×”
图标以及圆角的输入域(仅限于OS X Safari)。但是现在使用该输入类型也没有坏处，其
他浏览器只会简单地显示一个文本字段，当未来大多数浏览器支持该特性时您的网页将
会受益于此。
该属性的使用方式如下：
<input type='search' name='searchphrase' />
7. tel输入类型
tel输入类型通知浏览器希望获得一个电话
号码，目前仅iOS设备使用该输入类型。当该输
入类型的区域被选中时，在键盘的位置上会弹
出一个电话数字键盘，如图2-8所示，使用方法
如下：
Telephone <br />
name='phone' />
<input
type='tel'
8. url输入类型
与tel输入类型相似，该输入类型告诉浏览
器希望得到的数据类型。在iPhone和其他iOS
设备上，该输入类型确保显示 “.”、“/”和
“.com”按钮。
其他浏览器将来可能会对此输入类型进行
改进，创建该输入类型的HTML如下所示：
<input type='url' name='webpage' />
2.4
图 2-8
在iPhone的tel输入类型中键入数据
本地存储
您可能对cookies非常熟悉，它是浏览器存储在本机上的小块儿数据。cookies包含
对使用网站很有帮助的信息如登录信息(每次访问时不必重新输入)，而且使用方式往往
更加主动，例如可以跟踪您的上网习惯。
第2章
HTML5新特性 43
本地存储类似于cookies，但它支持存储的数据量更大，并且提供了一个本地数据库
引擎，从而使保存和获取数据更加容易。本地存储的主要优势是能够提供一个更为强大
的Web应用程序，并且在您的计算机上存储大量的数据，而不是在世界其他地方的服务
器上。例如，管理您的电视节目的网站可以在本地数据库中存储所有您喜爱的节目，因
此当您打开应用程序时，只需要检查网站的列表项目就可以查看这些节目的播放时间以
及频道。这种方式通过将数据分发给用户缓解与服务器连接的压力。
另一个好处是：可以使用JavaScript从本地Web页面中访问本地数据库，这意味着应
用程序可以在没有Internet连接的情况下使用数据(在前面的例子中，只要已经下载了电
视节目表)。
因此可以看到，仅仅通过使用HTML和JavaScript，本地存储在创建移动设备应用程
序方面拥有巨大的潜力，因此本地存储是本书的重点之一。
合作网站(html5formobile.com)提供了Objective C (面向 iOS) 和 Java (面向Android)
包装器，本书第II部分也对其进行了介绍。结合使用这些技术将能够创建具有专业外
观、灵活、快速的应用程序，然后可以通过很小的改动将应用程序转换为网站。在未
来，创建包装器并使Web应用程序运行于Windows Phone 7、MeeGo和黑莓OS等其他移
动操作系统上是完全可能的。
不要担心，您不需要学习这些语言，因为本书第III部分会一步一步地向您介绍如
何将Web应用程序放置于已经准备好的包装器中，这些包装器可以从合作网站上进行下
载。因为需要使用JavaScript来访问本地存储，所以第6章提供了JavaScript的相关知识。
2.5
媒体
HTML5规范(<canvas>标记除外)中最具亮点的部分也许就是HTML5浏览器内置的多
媒体播放能力，不需要任何诸如Flash、QuickTime或Microsoft Media Player插件。
当然，该技术仍处于初级阶段，由于专利的原因，支持的文件格式因浏览器不同而
不同，本节将介绍所有应该知道的如何使用HTML5内置多媒体的相关知识。
2.5.1 Codecs
术语codec代表enCOder/DECoder，它描述了软件提供的对诸如音频、视频等多媒
体的编码以及解码功能。在HTML5中，根据浏览器的不同，目前拥有多套不同的编
解码器：
● H.264 这是一个拥有专利的视频编解码器，最终用户可以免费使用回放功能，
但是在编码及传输过程中的任何部分都可能需要专利费。因此Safari和Internet
Explorer支持该编解码器，但是那些开源使用以及不具备财力为其授权的浏览器
不能使用该编解码器。
● Theora
这是一个不受专利限制，并且对所有等级的编码、传输以及回放免费
的视频编解码器。Chrome、 Firefox以及Opera支持该编解码器。
● VP8 该视频编解码器与Theora相似，但是其拥有者是谷歌公司，谷歌公司已经
44 第Ⅰ部分 核 心 技 术
将其开源发布，因此不需要专利费用。Chrome、Firefox以及Opera都支持该编
解码器。
● AAC 该音频编解码器代表Advanced Audio Encoding(高级音频编码)，其使用者
为Apple’ s iTunes Store。与H.264相同，该音频编解码器拥有专利限制，Safari、
Chrome和Internet Explorer支持该音频编解码器。
● MP3 该音频编解码器代表MPEG Audio Layer 3，已经使用了多年，虽然这个
词经常(错误地)用来指代所有类型的数字音频，但它其实是一个专利技术，
Safari、Chrome和Internet Explorer支持该音频编解码器。
● PCM 该音频编解码器代表Pulse Code Modulation，存储由模拟到数字转换器编
码的完整数据，是在音频CD上存储数据的一种格式。因为PCM不使用压缩，所
以也被称为无损编解码器，它的文件大小一般都是AAC或者MP3文件的几倍。
Safari、Firefox和Opera支持该音频编解码器。
● Vorbis 因为通常使用文件扩展名.ogg，有时也被称为Ogg Vorbis，该音频编
解码器不受专利保护，因此版权免费。支持的浏览器包括Chrome 、Firefox和
Opera。
这些音频和视频编解码器通常包含在一个包装器或者容器中，包装器或者容器的类
型主要有以下3种：MP4、OGG和WebM。表2-1列出了主流浏览器所使用的容器类型和
编解码器的完整列表。
表 2-1
浏
览 器
主流浏览器和设备支持的视频和音频
容
器
视
频
音
频
Apple iOS
MP4
H.264
AAC、MP3、 PCM
Apple Safari
MP4
H.264
AAC、 MP3、 PCM
Google Android (Pre v. 3)
—
—
—
Google Chrome*
MP4, OGG, WebM
Theora, VP8
AAC、 MP3、 Vorbis
Microsoft Internet Explorer
MP4
H.264
AAC、 MP3
Mozilla Firefox*
OGG, WebM
Theora, VP8
PCM、 Vorbis
Opera
OGG, WebM
Theora, VP8
PCM、 Vorbis
提示
微软已经发布了Chrome和Firefox的插件使H.264视频支持回放功能，
所以如果希望使用这些浏览器的用户能访问H.264内容，您可以指导他们
从以下URL中下载并安装这些插件：
interoperabilitybridges.com/wmp-extension-for-chrome
interoperabilitybridges.com/html5-extension-for-wmp-plugin
获得HTML5安装更新的最佳方式是使用目标浏览器和操作系统访问html5test.com。
然后网站将精确地报告哪些HTML5特性已经实施，如图2-9所示，图中的iPhone 4 正在
接受测试，图2-10中的Android 2.1设备正在显示该网站。
第2章
图 2-9
测试iPhone 4对HTML5视频的安装
图 2-10
HTML5新特性 45
正在对HTML5视频支持能力进行
测试的Android 2.1设备
专家问答
问题：我对所有这些不同的标准感到困惑。作为一名Web开发人员来说，这对我意
味着什么呢？
答案： 遗憾的是，至今还没有一个单独的容器以及编解码器组合能在所有的
HTML5浏览器上工作。因此目前要求在浏览器上显示的内容必须至少有两个不同格式
的编码。
更糟的是，如果希望在Android设备上播放多媒体，那么将会有问题，因为虽然
<audio>标签是公认的，但是目前仍然没有能被所有Android版本(包括2.2)支持的音频格
式。据报道，Android 3已经解决了这个问题。此外，<video>标签在Android上有点儿问
题，但是可以解决。
在本书编写过程中，这些问题有望得到解决，希望能够出现一个单一的标准(可能
会是WebM，因为其后台是谷歌公司)可以在所有HTML5的浏览器和操作系统上播放多
媒体。
2.5.2
媒体播放
可以使用<audio>或者<video>标签播放HTML5媒体，使用方式如下：
<audio src='music.aac'>
46 第Ⅰ部分 核 心 技 术
Only non-HTML5 Browsers display what appears here
</audio>
或者:
<video src='video.mp4' width='320' height='240'>
Only non-HTML5 Browsers display what appears here
</video>
HTML5浏览器将会忽略放置在这两个标签中的任何HTML，但是其他浏览器会对
其进行处理，因此可以使用它们来包含Flash或者其他格式的媒体，在这些浏览器中作
为后备使用。
由于Android设备上存在一个问题，因此必须添加以下JavaScript调用标签来播放多
媒体，(虽然<video>标签不做任何工作)：
<video src='video.mp4' width='320' height='240'
onclick='this.play()'>
</video>
但这会导致在其他浏览器中播放按钮工作异常，因为每次单击按钮时，将会发送两
次播放命令，后一次命令作为暂停播放命令使用——几乎在瞬间停止播放。因此在使用
<video>标签前，可能需要执行一些浏览器检测，如果发现浏览器在Android上，那么就
应该连接onclick事件。第7章将介绍实现的方式。
1. <source> 标签
当调用一个媒体文件时，默认情况下浏览器会自动启动下载文件以确定其类型，只
有当它支持文件类型时才允许回放。由于这可能造成带宽浪费，可以使用<source>标签
告诉浏览器关于文件的更多信息，如下所示。这样如果浏览器不能播放该文件，就不会
尝试下载该文件：
<audio>
<source='music.aac' type='audio/aac' />
</audio>
也可以为视频提供如下文件信息：
<video width='320' height='240'>
<source src='movie.mp4' type='video/mp4' />
</video>
警告：
由于存在bug，如果使用type属性，Android 2.1和2.2将不会显示视
频，因此在该平台上将省略type属性。第7章详细介绍了在这种情况下的
浏览器检测以及为传统HTML提供服务的信息。
如果知道所使用的编解码器，在无法识别编解码器的情况下甚至可以在type属性内
部提供信息以进一步节省带宽资源，使用方式如下：
第2章
HTML5新特性 47
<video>
<source src='video.ogv'
type="video/ogg; codecs='theora, vorbis'" />
</video>
为了支持不同的浏览器，可以为不同编码方式的文件多次使用<source>标签，方法
如下：
<audio>
<source src='music.aac' type='audio/aac' />
<source src='music.mp3' type='audio/mp3' />
<source src='music.ogg' type='audio/ogg' />
</audio>
此时，如果浏览器能够识别其中的文件，那么将会播放其识别的第一个文件。
2. Audio属性和 Video 属性
为了控制媒体文件的播放方式，可以为<audio> 标签或 <video>标签提供一系列不
同的属性，从而显示回放控制，使媒体能够自动播放等等。
● autoplay
该属性可以使文件在加载以后尽快播放。使用方式如下：
<audio src='music.aac' autoplay></audio>
●
controls 如果希望为用户提供回放控制，只需要简单地使用controls属性，使
用方式如下：
<audio src='music.aac' controls></audio>
当然，也可以对这些属性组合和匹配，所以下面的代码是完全合理的：
<audio src='music.aac' controls autoplay></audio>
●
height和width 这两个属性仅用于<video>标签，以指定播放时的尺寸大小。如
果省略了这两个属性，那么将会使用视频所编码的尺寸显示。使用方式如下：
<video src='movie.mp4' height='240' width='320'></video>
●
loop
如果希望文件循环播放，可以使用下面的HTML：
<audio src='music.aac' loop autoplay></audio>
当循环播放音乐时，通常是将其作为背景效果，所以该示例还包括一个autoplay属
性，但是也可以单独使用loop属性。
● poster
使用该属性可以选择一个图像，并且在视频播放的位置进行显示。如果
希望显示正确的比例，那么图像的尺寸大小必须与视频相同。使用方式如下：
<video src='movie.mp4' poster='movie.png'></video>
●
preload 如果希望使您的用户能够更快地访问媒体文件，那么可以告诉浏览器
尽快开始下载文件，如下所示。当用户单击播放按钮时文件能够立即播放：
<video src='movie.mp4' preload></video>
48 第Ⅰ部分 核 心 技 术
或者，如果希望明确禁止浏览器预先下载文件，使用方式如下：
<video src='movie.mp4' preload='none'></video>
●
src <audio>、<video>和<source>标签的src属性提供所要播放媒体文件的路径
和(或)文件名。使用方式如下(您可能已经遇见了很多次)：
<video src='movie.mp4'></video>
3. <embed> 标签
虽然<embed>标签已经使用了很多年，
但是在HTML4.01中该标签正式淘汰，换句话
说，该标签计划被清除，但是剩下的这段时
间仍会继续存在。计划使用<object>标签来代
替<embed>，但是由于几乎没有人意识到这一
点且继续使用<embed>标签，所以在HTML5
中已经恢复使用<embed>标签。
因此现在它是正式的(第二次)，下面是使
用<embed>标签嵌入一个非标准对象(如Flash
文件)的方法，例如：
<embed src='flashanimation.swf' />
<embed>标签是自关闭的(使用/>)，支持
的属性包括height、width、src和type。下面
是为YouTube视频选择“嵌入”选项的使用
方法，也是屡获殊荣的Horrible博士的SingAlong博客(如图2-11所示)的第1部分：
图 2-11
在iPhone上播放YouTube视频
<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/apEZpYnN_1g">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src=http://www.youtube.com/v/apEZpYnN_1g
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true" width="480" height="385">
</embed>
</object>
如果用以上方式为YouTube视频使用<embed>标签，会发现它在iOS设备上运行良
好，与YouTube进行通信并且使用兼容的编解码器播放文件。
在iPad上，嵌入的YouTube视频从某个网页内部进行播放，而其他iOS设备推出一个
单独的视频播放器应用程序，一些Android设备也是如此。当您观看完一个视频后，可
以从播放器中重新播放，这需要使用iOS的Done按钮或者Android的Back按钮。
第2章
2.6
HTML5新特性 49
Microdata、Web Workers与离线 Web 应用程序
HTML5中有3个高级特性刚刚开始使用。例如，当前浏览器都不包括Microdata，这
也可能需要一段时间。另一方面，Chrome、Firefox、Safari、Opera以及iOS现在都可
以支持Web Workers，但是不能在Internet Explorer或者Android设备上运行。所有的浏
览器都支持使用Web应用程序，但是有一半的网民不能使用它们，因为Internet Explorer
还不支持此功能。
所以，虽然您现在不需要知道如何使用这些特性，但是本节仍然对这些高级特性进
行了介绍，当它们完全可用时您可以随时使用这些高级特性。
2.6.1 Microdata
Microdata是HTML的一个子集，和为读者提供文档一样，它是给机器提供类似
文档的元数据，旨在使机器能够识别信息。它的作用是使以下的新标签属性可用：
itemscope、itemtype、itemid、itemref和itemprop。通过使用这些标签属性，将能清楚地
定义诸如一本书的某个条目的属性，为其提供计算机能够使用的各种信息如作者、出版
者和内容等。
2.6.2 Web Workers
通常情况下，如果希望实现JavaScript后台处理，需要建立一个不断调用的定时
器，为一个或多个函数提供处理程序的时间片。然后，为了防止浏览器速度减慢或者变
得迟钝，这些函数必须迅速做完小块工作然后返回。
然 而 ， We b Wo r k e r s 为 浏 览 器 提 供 一 种 标 准 的 方 式 ， 可 以 在 后 台 运 行 多 个
JavaScript线程，并可以彼此传递信息，与操作系统中线程的运行方式几乎相同。只需
要调用一个新的worker脚本，该脚本在后台中等待发送给它的消息，收到消息后就会
立刻执行动作。
从总体上看，这项技术旨在提高普通后台JavaScript代码的执行速度，现在的速度
可以提高两到三倍，但是掌握该技术可能需要较长的时间。
2.6.3
离线Web应用程序
离线Web应用程序的特点是：一旦访问一个网站，该网站将会告诉浏览器所使用的
所有文件，因此浏览器可以下载所有这些文件，即使没有连接至因特网，也可以在本地
运行Web应用程序。实际上这是第11章中所讲述的知识点，用户可以将所有文件直接放
置于一个包装器中从而创建一个包，而不是从网站下载到设备上。
同时Web 应用程序具有复杂性，原因是它们需要使用正确的MIME类型(前身为多
用途Internet邮件扩展，但是单词 “Mail”已经被替换为“Media”)来配置一个Web服务
器，以便为理解Web 应用程序的浏览器使用该特性，并且获取它需要的文件。出于这个
50 第Ⅰ部分 核 心 技 术
原因，同时也由于Internet Explorer不支持Web应用程序，本书将忽略该特性，并提供一
个简单的替代方法用来创建一个可以作为本地应用程序运行的Web应用程序。
2.7
其他HTML5标签
还有一些其他的新HTML5标签，但是浏览器还没有支持这些特性，因此我将不做
介绍(特别是因为它们的规格可能会改变)。然而考虑到完整性，这里将会列举这些标
签：<article>、<aside>、<command>、<details>、 <figcaption>、<figure>、<footer>、
<header>、<hgroup>、<keygen>、<mark>、<meter>、<nav>、<output>、<progress>、
<rp>、<rt>、<ruby>、<section>、<summary>、<time>和<wbr>。可以在网站dev.w3.org/
html5/markup上得到所有这些标签的信息。
2.8
本章小结
本章介绍了读者需要知道的关于HTML5的知识，现在就可以使用HTML5(至少一部
分)。然而，HTML5规范可能会不断演变，直到2012年或者2013年，其中一些细节可能
会改变，当然也会逐步纳入一些标签和属性，这些标签和属性现在没有(或者仅部分)被
所有浏览器支持。
现在，您已经知道HTML5能够做什么，第3章将介绍层叠样式表(CSS)。如果您已
经使用过这项技术，那么建议简单浏览第3章作为该知识点的复习，在第4章中将会介绍
新的CSS3标签。如果CSS对您来说是全新的，您会发现从第3章中能够学到很多CSS入
门知识。
第3章
CSS介绍
关键技术与概念
●
●
●
●
●
●
●
●
文档对象模型(DOM)
使用层叠样式表
构建CSS规则
层叠
度量单位
字体、文本样式和颜色
元素位置
盒子模型
52 第Ⅰ部分 核 心 技 术
最初发明HTML时，它是基于文档对象模型(Document Object Model，DOM)的，
DOM是一种将网页中的所有不同元素分离为离散对象的工具，其中每个对象都具有自
己的属性和值。自然而然产生了样式表，使网页的内容与样式完全分开。使用样式表可
以更加容易地使用诸如JavaScript的语言修改HTML文档，并提供动态用户交互 。
由于网页使用DOM，因此可以通过CSS轻松地设置网页的各个部分。每个标题都
会放置在一对标签中 ，例如 <H1> ... </ H1>。因此一个CSS指令就可以对文档中的所有
标题进行风格样式设置，例如改变使用的字体、大小或者字体装饰等。
可以在不改变HTML的情况下彻底改变网页的设计。一些样式设置甚至可以为页面
元素带来动态效果，例如在鼠标滑过时改变颜色或者其他属性，甚至可以使用专属浏览
器扩展来创建过渡效果。
3.1
文档对象模型的工作原理
DOM将HTML文档的不同部分分离为一个对象体系，其中每个对象都有自己的属
性。术语“property”用来指代对象的某个性质，例如所包含的HTML、宽度和高度等。
window对象可能是该体系结构中最外层的对象，它可以是当前浏览器窗口、tab、
iframe或者弹出窗口。window对象下面是document对象，其中可以包含多个document对
象(例如在网页的不同iframe中加载多个文档)。文档内部还可以包含其他对象，例如网
页中的head和body。
head内部可以包含其他对象，例如title和meta对象， 而body对象内部可以包含其他
许多对象，包括heading、anchor和form等。 例如，图3-1是一个示例文档的DOM表示，
其中head部分包含文档标题“Hello”和一个meta标签，body部分包含3个HTML元素(链
接、表单和图片)。
图 3-1
显示head和body部分的一个DOM示例
当然与图3-1中的网页相比，最简单的网页将会具有更为复杂的结构。这里仅用来
说明DOM的运行机制；从最外面的window开始，接着是window内部的一个文档，文档
内部包含多种元素或者对象，这些元素或者对象之间互相联系。
第3章
CSS介绍 53
在图3-1中，属性值使用较暗的背景以及斜体表示。例如，值robots是属性name的值，
而属性name是meta的一个属性。虽然没有在图中显示，但是meta标签应该包含另外一个叫
做content的配对属性，该属性应该包含一个字符串用来指定哪一个robots可以访问该网页。
其他属性包括href和title，href的值为http://google.com(href本身是a的一个属性)，
title的值为Hello。其他所有的条目是对象或者对象参数名。如果将图3-1进一步向下并
且向两侧进行扩展，那么其他对象和属性将映入眼帘。图中type和name部分下面分别有
一条虚线，上述所有没有显示的对象和属性都位于这两个位置。
将图3-1表示为HTML代码，其head部分的结构如下所示：
<head>
<meta name="robots" content="index, follow" />
<title>Hello</title>
</head>
HTML中的body部分如下所示：
<body>
<img src="/images/welcome.jpg" />
<a href="http://google.com">Visit Google</a>
or enter your username and password to continue. . .
<form id="login" method="post" action="login.php">
<input type="text" name="name" />
<input type="password" name="password" />
<input type="submit" />
</form>
</body>
请注意，上述两个部分属于同一个HTML文档，可以将它们组合在一个<html>标签
中，如下所示：
<html>
<head>
<meta name="robots" content="index, follow" />
<title>Hello</title>
</head>
<body>
<img src="/images/welcome.jpg" />
<a href="http://google.com">Visit Google</a>,
or enter your username and password to continue. . .
<form id="login" method="post" action="login.php">
<input type="text" name="name" />
<input type="password" name="password" />
<input type="submit" />
</form>
</body>
</html>
当然，所有的网页都是不同的，但是它们都与上面的网页具有相同的格式。
54 第Ⅰ部分 核 心 技 术
3.2
修正 HTML结构
为了遵循推荐的HTML结构，并且确保文档能够最大限度地被浏览器和其他客户端
读取，标签中的参数应该包含在单引号或者双引号中，如<a href='http://yahoo.com'>所
示，但是几乎所有的浏览器都允许忽略单引号或者双引号，如<a href=http://yahoo.com>
所示。
应该以正确的顺序关闭每个标签。例如，不能将</html>放置于</body>的前面来关
闭一个文档，因为这两个标签的倒序放置破坏了正确的标签嵌套规则，正确方法是将</
body> 放置于</html>的前面。
此外，出于同样的原因，应该自我结束任何没有结束版本的标签，例如<img src=". . ." />
(没有匹配的</ img>标签)，需要在最后的“>”之前添加一个“/”来正确结束标签。同
样，<br> 变为<br />等。
只要遵循以上规则，您的文档将会更加容易地被程序理解，也更容易转换为
XML(eXtensible Markup Language，可扩展标记语言)。XML是一个严格的标记语言，用
来处理诸如RSS的数据。
3.3
关于层叠样式表
使用CSS可以将样式应用在网页中，使网页按照要求精确显示。这是由于CSS被连
接至DOM，因此能够快速简单地为任何元素重新定义样式。例如，如果不喜欢<h1>、
<h2>或其他标题标签的默认外观，则可以为其分配新的样式以覆盖默认设置使用的字
体和大小或指定是否设置加粗字体或者斜体，也可以改变更多的属性。
可以为某个网页添加样式，方法之一是在网页head中的<head>和</ head>标记之间
插入必要的声明。例如，如果希望改变<h1>标签的样式，可以使用下面的代码：
<style>
h1 { color:red; font-size:3em; font-family:Arial; }
</style>
在HTML页面内部，其形式如下所示(见图3-2)：
<html>
<head>
<style>
h1 { color:red; font-size:3em; font-family:Arial; }
</style>
</head>
<title>Hello World</title>
<body>
<h1>Hello there</h1>
</body>
</html>
第3章
图 3-2
3.3.1
CSS介绍 55
为<h1>标签设置样式，小窗口中为<h1>原来的样式
导入样式表
如果想为整个网站而不是某个单一的页面提供样式，那么管理样式表的更好方法是
将它们从您的网页中完全移除，并存储为单独的文件，然后导入所需要的样式文件。这
样可以为不同的布局(例如Web和打印)提供不同的样式表，而不用更改HTML。
实现上述功能的方法有多种，其中第一个是使用CSS 中的@import指令，如下
所示：
<style>
@import url("/css/styles.css");
</style>
该语句告诉浏览器需要从/ css文件夹中获取名为styles.css的样式表。@import命令非
常灵活，利用它可以从其他样式表中提取并创建自己的样式表等。只要保证任何外部样
式表中都没有<style> 或</style>标签，否则将不能正常工作。
从HTML内部导入CSS
也可以在HTML<link>标签中包含一个样式表，方法如下：
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
上述语句与@import指令效果相同，但是<link>标签是HTML特有的标签且不是有
效样式指令，所以不能用来从一个样式表提取到另一个样式表，并且也不能放置在一对
<style> . . .</style>标签内部。
正如可以在CSS中使用多个@import指令包括多个外部样式表一样，也可以在
HTML中使用多个<link>声明语句。
56 第Ⅰ部分 核 心 技 术
3.3.2
本地样式设置
现在已经准备好对当前页面进行个人设置或者覆盖特定样式了，可以视具体情况在
HTML内部直接插入样式声明，如下所示(标签内的文本以斜体蓝色显示)：
<div style="font-style:italic; color:blue;">Hello</div>
但应当在最特殊的情况下才使用该方法，因为它破坏了内容和布局的分离。
3.3.3
使用Id
为元素设置样式的更好的解决方案是在HTML中为其分配一个ID，方法如下所示
(记住，通常可以交替使用成对的单引号和双引号)：
<div id='iblue'>Hello</div>
这样做的目的是声明对ID为“iblue”的div内容应用样式，该样式在“iblue”的样
式设置中定义，与其相匹配的CSS声明如下：
#iblue { font-style:italic; color:blue; }
请注意符号#的使用，该符号指定只有ID为“iblue”的标签才能应用该语句的
样式。
3.3.4
使用类
如果希望为多个元素应用相同的样式，不必为每个元素指定一个不同的ID，因为可
以指定一个类来管理所有这些元素，如下所示：
<div class="iblue">Hello</div>
这样做的目的是声明该元素(或任何其他使用该类的元素)的内容应该应用“iblue”
类中定义的样式。一旦应用某个类，那么可以使用下面的样式对类的样式进行设置，可
以在页面头部或者某个外部样式表中：
.iblue { font-style:italic; color:blue; }
类声明前需要放置一个“.”符号，而不是使用为ID保留的符号“＃”。
专家问答
问题：CSS中使用的分号是必需的吗？或者它与JavaScript中的分号一样是可选的吗？
答案：答案既肯定又否定。为了将同一行中的多个CSS声明语句分开，必须在其中
使用分号。但是如果在一行中只有一条声明语句(或者是在HTML标签内部的内置样式
设置中)，那么可以省略分号，如同一组声明语句中的最后一句那样。
为了防止难以发现的CSS错误，您可能更喜欢在每一条CSS规则之后总是使用分
号，那样的话您可以复制粘贴这些规则，另外还可以改变属性，不需要担心在那些没有
严格要求使用分号的地方删除分号，或者不得不在需要的地方添加分号。
第3章
3.4
CSS介绍 57
CSS规则
CSS规则中的每个声明语句都以一个选择器开始，该选择器指明规则影响的元素。例
如，在下面的声明语句中，h1是选择器，该选择器下的所有字体大小均比默认值大240％：
h1 { font-size:240%; }
为选择器的font-size属性提供一个新值，确保所有<h1> … </h1>标签中的内容以相
当于默认字体大小的240%进行显示。这主要通过在选择器之后的符号{和}中放置一个
或多个赋值来实现(在上例中，实现形式为：font-size:240%;)。符号：(冒号)之前的部分
是属性，冒号后面的部分是赋予该属性的值。
最后，语句以一个；(分号)结束。在上例中，分号不是必要的(如果同一行中包含另
一个赋值语句，那么必须放置一个分号)。在本书中为了避免错误，即使分号不是必须
的，也总是包含分号。
3.4.1
多属性赋值
可以通过多种方式创建多属性赋值。 首先，可以将它们连接于同一行，如下所示：
h1 { font-size:240%; color:blue; }
上面的示例增加了第二个赋值语句，将所有<h1>标题的颜色修改为蓝色。也可以
将每个赋值语句单独放置在一行中，如下所示：
h1 { font-size:240%;
color:blue; }
或者也可以将赋值语句放置于另外一行，每一行赋值语句都位于同一列中，如下所示：
h1 {
font-size:240%;
color:blue;
}
这样就可以很容易地看到每组新规则的开始之处，因为选择器位于第一列，随后的
赋值语句排列整齐，所有属性值都以同样的水平偏移开始。在上面的示例中，两个分号
都不能省略，但是如果希望将这些声明语句连接在同一行中的话，那么可以借助分号，
这样完成起来非常快速。
排列CSS的方法没有正确与错误之分，但是建议至少保持每个CSS块内部一致，因
为这样可以一目了然。
3.4.2
注释
为CSS规则添加注释是个非常好的主意，即使只对主要的声明语句组添加注释，而不
是全部或者大部分语句。添加注释的方法有两种。首先，可以将注释放置在一对/*... */
58 第Ⅰ部分 核 心 技 术
标签中，如下所示：
/* This is a CSS comment */
或者可以将注释扩展至多行中，如下所示：
/* A Multi
line
comment */
警告
如果使用多行注释，请注意不能在注释中嵌入多个单行(或其他)注
释，否则将会导致不可预知的错误。
3.5
样式类型
CSS提供了多种样式类型，首先是浏览器建立的默认样式(以及您已经应用的用户
样式)，其次是内联或嵌入式样式及外部样式表。每种类型中定义的样式都具有从低到
高的优先等级。
3.5.1
默认样式
样式优先级中最低级的样式是Web浏览器提供的默认的样式。当网页没有任何样式
时，这些样式才会作为备选。这些默认样式是一组通用的样式，在大多数情况下都能合
理地显示网页内容。
默认样式是指那些只应用于文档的样式，其中只有一小部分可以被网页改变(例如
字体、颜色、大小以及少数元素大小参数)。
3.5.2
用户样式
用户样式的优先级比默认样式稍高。大多数现代浏览器都支持用户样式，但是每
种浏览器执行用户样式的方式不同。如果想学习创建属于自己的默认样式，那么可以
打开某个搜索引擎并且键入浏览器的名称以及“user styles”(例如键入“firefox”、
“mozilla”、“opera”或者“ ie”并且在其后添加“user styles”)，就会查询到相
关内容。图3-3显示的是应用于微软公司的Internet Explorer的用户样式表。可以选择
Tools | Internet Options并且单击General 选项卡上的Accessibility按钮，之后将会打开
Accessibility对话框。
如果分配的用户样式已经被浏览器定义为默认样式，那么该用户样式将会覆盖浏览
器的默认设置。用户样式表中没有被定义的样式都将会保持浏览器设置的默认样式。
第3章
CSS介绍 59
图 3-3 为IE8应用一个用户样式表
3.5.3
外部样式表
另外一种类型的样式是从某个外部样式表中分配的样式。这些设置将会覆盖所有用
户或者浏览器分配的样式。推荐使用外部样式表来创建您的样式，因为可以针对不同目
的设计样式表——例如针对通用Web应用程序、屏幕较小的移动浏览器、打印等等，然
后为每种类型的媒体应用合适类型的样式表。
3.5.4
内部样式
内部样式在<style>…</style>标签内部创建，内部样式的优先级比以上所有的样式
类型都要高。此时，您开始打破样式与内容的分离关系，因为任何与内部样式表同时载
入的外部样式表都具有较低的优先级别。
3.5.5
内联样式
内联样式可以向某个元素直接分配属性。在所有样式类型中，它具有最高的优先等
60 第Ⅰ部分 核 心 技 术
级，其使用方式如下：
<a href="http://google.com" style="color:green;">Visit Google</a>
在本例中，无论是何种类型的样式表，为其应用何种默认或者其他颜色设置，不论
是直接对该链接进行设置或者对所有链接进行设置，该链接都将显示为绿色。
使用内联样式将会破坏布局与内容之间的分离关系，因此建议只有在必要的情况下
才使用内联样式。
3.6
选择器
访问一个或多个元素的方式被称为选择，CSS规则中实现选择的部分被称为选择器
(Selector)。选择器的类型有多种。
3.6.1
类型选择器
类型选择器运行于HTML元素中，如<p>或者<i>。下面的规则使<p>...</p>标签中
的所有文本都能够两端对齐：
p { text-align:justify; }
3.6.2
descendant 选择器
descendant选择器可以为包含在其他元素中的元素应用样式。例如，下面的规则仅当
文本位于<p>...</p>标签(如<p><b>Hello</b>there</p>)中时才会将<b>...</b>标签中的所有
文本设置为红色：
p b { color:red; }
descendant选择器可以继续无限次地内嵌使用，因此下面是一个完美有效的CSS规
则，该规则设置某个非排序列表中的列表元素中的文本以加粗字体和蓝色显示：
ul li b { color:blue; }
3.6.3
child选择器
child选择器类似于descendant选择器，但是当样式被应用时child选择器的限制更
多，只会选择某个元素的直接子元素。例如，下面的代码使用descendant选择器，
将会改变段落中的所有粗体文本为红色，即使粗体文本本身位于斜体标签中(例如：
<p><i><b>Hello</b> there</i></p>)。
在上面的示例中，单词“Hello”显示为红色。然而，当不需要这种通用类型的选择行
为时，可以使用child选择器缩小选择范围。例如，下面的child选择器仅当元素是某个段落
的直接子元素时才会设置粗体文本为红色，而不是在其本身被其他元素包含的情况下。
第3章
CSS介绍 61
p > b { color:red; }
现在单词“Hello”不会改变颜色，因为它不是该段落的直接子元素。
3.6.4
ID选择器
如果为某个元素赋予ID名(例如<div id='mydiv'>)，那么就可以使用如下方式从CSS
中直接访问该元素，下面的示例将div中的所有文本改变为斜体：
#mydiv { font-style:italic; }
重新使用ID
在某个文档中ID只能使用一次，因此仅仅在第一次发现时才会接收CSS规则分配的
新的属性值。但是在CSS中可以直接引用具有相同名称的任何ID，只要这些ID出现在不
同的元素类型中，例如：
<div id='myid'>Hello</div>
<span id='myid'>Hello</span>
由于ID通常只应用于某个唯一的元素，下面的规则仅仅为第一个ID为myid的元素
应用下划线：
#myid { text-decoration:underline; }
然而，也可以对上面的两个标签应用CSS规则，方法如下：
span#myid { text-decoration:underline; }
div#myid { text-decoration:underline; }
或者更简洁的方式(见本章稍后的“按组选择”部分)如下：
span#myid, div#myid { text-decoration:underline; }
警告
如果使用这种选择方式，那么请注意，任何同样需要访问这些元素的
JavaScript都不能用如上方式简单实现，这是因为常用的getElementByID()
函数仅仅返回具有该ID的第一个元素。为了得到其他元素，程序员必须遍
历文档中的整个元素列表，这种方法实施起来非常困难。
3.6.5
类选择器
如果希望为页面中的多个元素应用相同的样式，那么可以为这些元素分配一个相同
的类名(例如<span class='myclass'>)，然后创建规则就可以立即修改所有这些元素，下面
的规则将使用类名“myclass”的所有元素设置为距离左边距10个像素。
.myclass { margin-left:10px; }
在现代浏览器中，HTML元素同时可以使用不止一个类名，只需要使用空格将各个
类名隔开，例如<span class='thisclass thatclass otherclass'>。老的浏览器只允许一个类名。
62 第Ⅰ部分 核 心 技 术
缩小类范围
您可以缩小某个类的作用范围，方法是指定该类名所要应用元素的类型。例如，下
面的规则只对使用类名“main”的段落应用设置：
p.main { text-indent:30px; }
在本例中，只有那些使用类名“main”的段落才会接受新的属性值。任何使用该类
名的其他类型的元素(例如<div class="main">)都将被忽略。
3.6.6
属性选择器
许多HTML标签支持属性，属性选择器可以帮您引用这些属性，而不必使用ID或者
类。例如，可以直接以如下方式引用属性，将属性类型为“submit”的所有元素的宽度
设置为100像素。
[type="submit"] { width:100px; }
如果希望缩小选择器的选择范围，例如仅对具有该属性的表单输入元素进行设置，
那么可以使用如下规则进行代替：
form input[type="submit"] { width:100px; }
提示
属性选择器也可以在ID和类上进行工作，例如[class="classname"]与
ID选择器.classname(后者有更高的优先级)的执行方式完全相同。同样，
[id="idname"]与使用类选择器.idname是相同的。可以将以“#”或者“.”开始
的类选择器和ID选择器看成属性选择器的简写，但它具有更高的优先等级。
3.6.7
通用选择器
通用(或者叫做通配符)选择器对所有元素进行匹配，因此下面的规则将会对整个文
档的所有元素设置为绿色边框：
*{ border:1px solid green; }
因此不太可能单独使用通用选择器，而将其与其他选择器组合使用将会变得非常强
大。例如，下面的规则与前一个示例应用相同的样式，但是只针对那些ID为boxout元素
的段落的子元素，同时必须是非直接子元素：
#boxout * p { border:1px solid green; }
现在，紧接着#boxout的第一个选择器是符号*，因此它指代boxout对象中的所有元
素。接下来的p选择器缩小了选择范围，改变选择器使其只应用于段落(由p定义)，这些
段落是*选择器返回元素的子元素。因此，这条CSS规则执行下面的动作(其中我交替使
用术语object和element来指代同一个对象)：
(1) 查找ID为boxout的对象。
(2) 查找步骤1返回对象的所有子元素。
第3章
CSS介绍 63
(3) 查找步骤2返回对象的所有p子元素，由于这是组中的最后一个选择器，所以会
查找步骤2返回对象的所有p子元素和孙子元素(以此类推)。
(4) 对步骤3返回对象应用大括号中的样式。
最终结果是仅为段落应用绿色边框样式，而段落必须是主元素的孙子(或者是曾孙
子元素，以此类推)元素。
3.6.8
按组选择
在CSS中通过使用逗号将选择器分隔开来，可以同时为多个元素、类或者任何其他
类型的选择器应用规则。例如，下面的规则将会在所有段落、ID为idname的元素和类名
为classname的所有元素下放置一条橙色的虚线：
p, .idname, #classname { border-bottom:1px dotted orange; }
3.7
层叠
CSS属性的一个基本特征是层叠放置，这也是该技术被称为层叠样式表的原因，但
是这是什么意思呢？
层叠是解决浏览器支持的不同类型样式表之间潜在冲突的方法，并且按照样式表创
建者、用来创建样式的方法和所选择的属性类型优先等级应用这些样式表。
3.7.1
样式表创建者
所有现代浏览器都支持的样式表类型有3种。按照优先等级从高到低依次为：
(1) 文档作者创建的样式表
(2) 用户创建的样式表
(3) 浏览器创建的样式表
上述3种类型的样式表按照倒序进行处理。首先，Web浏览器中的默认样式表被应
用于文档。如果没有默认样式表，那么没有使用样式表的网页看起来将会非常糟糕。默
认样式表包括字体、字体大小、颜色、元素间隔、表边框及间距以及用户希望的其他标
准文档特性。
其次，如果用户创建样式来代替标准样式，那么将会应用这些样式，从而代替与其
冲突的浏览器提供的默认样式。
最后，当前文档作者创建的任何样式都将会被应用，用来代替原先浏览器创建的默
认样式或者用户创建的样式。
3.7.2
样式表方法
有3种不同的方法或者方式创建样式表，按照优先等级由高到低的顺序依次为：
(1) 作为内联样式
64 第Ⅰ部分 核 心 技 术
(2) 在嵌入式样式表中
(3) 作为外部样式表
另外，这些创建样式表的方法按照优先级逆序排列的顺序被应用。因此，首先处理
所有的外部样式表，将其样式应用于文档。
其次，处理嵌入式样式(在<style>...</style>标签内部)，任何与外部规则冲突的样式
都具有较高的优先等级并且会覆盖外部规则。
最后，任何作为内联样式直接应用于元素(例如 <div style="...">...</div>)的样式都具
有最高的优先等级，将会覆盖上文中的所有赋值属性。
3.7.3
样式表选择器
选择需要应用样式的元素有3种不同的方法。按照优先等级由高到低排列依次为：
(1) 通过个别ID引用
(2) 通过类引用某个组
(3) 通过元素标签引用(例如<p> 或者 <b>)
根据受某个规则影响的元素数量和类型处理选择器，这与上面的解决冲突的两个方
法稍有不同。这是因为在某一时刻，规则不仅仅应用于某个类型的选择器，相反可以引
用多个不同的选择器。因此，需要一个方法决定规则的优先等级，这些规则可以包含选
择器的组合。这主要通过按照动作范围从最宽到最窄进行排序，计算每条规则的特异性
来实现。
1. 计算规则特异性(优先权)
规则特异性的计算方法为：基于上面的数字列表中的选择器类型创建一个三部分的
数字。这些组合数字以[0, 0, 0]的形式开始。当处理一个规则时，每个指代ID的选择器
都将第一个数增大1，因此组合数字变为[1, 0, 0]。如果在某个特殊的规则中包含3个ID
引用，那么组合数字应该为[3, 0, 0]。
然后引用某个类的选择器的数字被放置于组合数字的第二部分中。如果有5个选择
器，那么组合数字变为[3, 5, 0]。
最后，所有引用元素标签的选择器都会被计数，该数值被放置于组合数字的最后一
部分中。如果有两个这种类型的选择器，那么最终的组合数字变为[3, 5, 2]，这对于比
较两个规则之间的特异性是必需的。
如果在一个组合数字中每个类型的数目为9个或者少于9个，那么可以将其直接转换
为十进制数，本例为352。比该数字小的规则优先级要低，比该数字大的规则具有较高
的优先级。如果两个规则共享同样的值，那么最近应用的规则胜出。
2. 使用不同的数字进制
如果某个类型的数字大于9，那么必须在更高的数字进制基础上进行工作。例如，
组合数字[11, 7, 19]不能简单的连接3个部分并且转换为十进制数。可以将该数字转换为
更高的数字进制基础，例如20(如果某个类型的数字大于19，那么还需要更高的数字进
制基础)。
将3个部分分别与20进行1到若干次相乘，并将结果相加，如下所示，其中
第3章
20 × 19
20×20 × 7
20×20×20 × 11
数值总和
CSS介绍 65
=
380
= 2800
= 88000
= 91180
不同的数字进制基础都可以替换左边的20，然后将所有的值进行相加，这样就将该
进制转换成十进制的数字。这样就非常容易辨别规则的优先级。
值得庆幸的是，这一切都由CSS代为处理了，但是理解其中的工作原理有利于构建
CSS规则和设定优先级。
提示
如果这样的优先级计算听起来非常复杂的话，在通常情况下可以应用这
个简单的法则：“一般，需要修改的要素越少，其对应的优先级就越高。”
3.7.4
特殊优待的规则
当两个或多个样式规则完全相同时，则最后处理的规则优先级更高。但是可以通
过!important强制设定某个样式规则优先级高于其他相同优先级的规则，如下所示：
p { color:#ff0000 !important; }
作了如上设定后，以前相同优先级条件的规则都会被忽略(即使是前面也通
过!important作了设定的规则)。举例来说，通常下例中第二个样式规则会有更高的优先
级，但是由于设置了!important，因此第二个样式规则会被忽略：
p { color:#ff0000 !important; }
p { color:#ffff00 }
专家问答
问题：用户能在默认浏览器样式表里使用！important关键字么？
回答：可以。如果用户自己也应用了！important关键字，那么用户样式的优先级要
高于当前网页设定的属性。但是使用CSS 1的老版本的浏览器不支持该项特性。
3.8
Divs和Spans的区别
divs和spans都是容器的类型，但是它们具有不同的特性。默认情况下，div没有宽
度限制(至少延伸至浏览器边缘)，为某个div提供边框可以看到它的宽度，例如：
<div style="border:1px solid green;">Hello</div>
而span的宽度仅仅与其所包含文本的宽度相等。因此，下面的HTML只显示了单词
“Hello”周围的边框，不会扩展到浏览器的右边缘：
<span style="border:1px solid green;">Hello</span>
66 第Ⅰ部分 核 心 技 术
此外，由于spans会将文本或者其他对象环绕起来，因此会有一个较复杂的边界。
举例来说，在下面的网页中，使用CSS将所有div的背景颜色设置为黄色，将所有span的
背景颜色设置为青色，并且两者都添加了边框，然后创建了若干个spans和divs：
<html>
<head>
<title>Div and span example</title>
<style>
div, span { border:1px solid black; }
div
{ background-color:yellow; }
span
{ background-color:cyan;
}
</style>
</head>
<body>
<div>This text is within a div tag</div> This isn't.
<div>And this is again.</div><br />
<span>This text is inside a span tag.</span> This isn't.
<span>And this is again.</span><br /><br />
<div>This is a larger amount of text in a div element that
wraps around to the next line of the browser</div><br />
<span>This is a larger amount of text in a span element that
wraps around to the next line of the browser</span>
</body>
</html>
图3-4显示了在Web浏览器中该页面的外观。虽然该图仅仅使用灰度(而非彩色)打
印，但是从图中可以清楚地看到div扩展到了浏览器的右边缘，并且迫使紧接着的内容
在其下面第一个可用位置的开始处进行显示。
图 3-4
不同宽度的一系列div和span
第3章
CSS介绍 67
该图同时显示span仅仅占据能够容纳其内容的空间——而不是强制接下来的内容在
其下面显示。例如，在图中底部的两个示例中，可以看到当div环绕屏幕边缘时，仍然
能够保持矩形形状，但是span只是在其内部简单的接着文本流(或者其他内容)。
专家问答
问题：相对于<span> 标签，在<div>标签中最适合放置什么类型的内容？
答案： 由于<div>标签只能是矩形，所以它们更适合包含诸如图片、boxouts、
quotations等对象，而<span>标签最适合用来放置文本或者其他按照逐行排列的属性，
可以从左到右流动排列。
3.9
度量单位
CSS支持多种度量单位，可以使用户对网页的设计精确到特定值或相对尺寸。我通
常使用(我相信您也会发现该度量单位是最有用的)像素、点、ems以及百分比，下面将
要对上述几种以及其他度量单位进行介绍：
● Pixels
像素(px)的大小取决于用户显示器的尺寸以及像素深度。由于1个像素
等于屏幕上单个点的宽度和高度，所以这种度量方式最适合于显示器。
示例：#classname { margin:5px; }
● Points
一个点(pt)的大小等于1英寸的1/72。这种度量方式来源于打印-设计背
景，最适合于媒体，但同样广泛应用于显示器中。
示例：#classname { font-size:14pt; }
● Inches
一英寸(in)等于72个点，是最适合于打印的度量方式。
示例：#classname { width:3in; }
● 厘米 厘米(cm)是另外一种特别适合于打印的度量方法，一厘米大约等于28个点。
示例：#classname { height:2cm; }
● Millimeters
一毫米(mm)等于1/10厘米(或者大约3个点)。毫米同样是非常适合
于打印的度量方法。
示例：#classname { font-size:5mm; }
● Picas
pica(pc)是另外一种打印度量单位，它等于12个点的长度。
示例：#classname { font-size:1pc; }
● Ems
em(em)等于当前字体大小，因此是CSS中最有用的度量单位之一，em用
来描述相对尺寸大小。
示例：#classname { font-size:2em; }
● Exs ex (ex)同样与当前字体大小相关；与小写字母x的高度相等。Ex的使用范围
较窄，最常用的方式是作为近似值使用，用来帮助设置包含文本的盒子的宽度。
示例：#classname { width:20ex; }
● Percent
该度量单位(%)与em相关，这是因为Percent是em的100倍大小(在用于
字体时)。1 em等于当前的字体大小，同样的大小在百分比中为100。在不涉及
68 第Ⅰ部分 核 心 技 术
字体时，Percent与属性被访问的容器的大小有关。
示例：#classname { height:120%; }
3.10
字体
使用CSS可以对4种主要的字体属性进行设计：名称、样式、大小和粗细。在它们
中间可以对文本在网页中或打印时的外观显示进行微调。
3.10.1 字体族
该属性指定使用的字体。并且支持将大量字体按照优先级顺序从左到右进行排列，
在用户没有安装喜欢的字体时，可以从容地选择字体。例如，可以使用下面的CSS规则
设置段落的默认字体：
p { font-family: Verdana, Arial, Helvetica, sans-serif; }
如果某个字体名是由两个或多个单词组成的，必须将其放置于双引号中，如下所示：
p { font-family: "Times New Roman", Georgia, serif; }
技巧
因为字体名应该在所有浏览器和操作系统上可用，网页中使用最安
全的字体是Arial、Helvetica、Times New Roman、Times、Courier New和
Courier。下面的字体在Mac或者PC上使用是安全的：Verdana、Georgia、
Comic Sans MS、Trebuchet MS、Arial Black以及Impact fonts，但在其他
操作系统上可能不支持，例如Linux。其他经常使用但是安全性稍差的字
体包括：Palatino、Garamond、Bookman以及Avant Garde。如果使用这些
安全性稍差的字体，请务必确保在CSS中提供一个或者多个备用的安全字
体，如果浏览器没有希望使用的字体，那么网页将会自行选择。
3.10.2 字体样式
使用该属性可以选择以下方式显示字体：正常显示、斜体显示或倾斜显示。下面的
规则创建3个类(normal、italic及oblique)，应用这些类可以创建以上3种效果的字体：
.normal { font-style:normal; }
.italic { font-style:italic; }
.oblique { font-style:oblique;
3.10.3 字体大小
如前所述，改变字体大小的方式有多种。但是这些方法最终都归结为两种主要类
第3章
CSS介绍 69
型：固定大小和相对大小。固定设置如下面的规则所示，该规则设置段落的字体大小为
14个点：
p { font-size:14pt; }
另外，您可能希望对当前默认的字体大小进行处理，用来样式化多种类型的文本例
如标题。在下面的规则中，对许多标题的相对大小进行了定义，<h4>标签的字体大小
比默认字体大20%，每种较大的字体都比前一个字体大40%：
h1
h2
h3
h4
{
{
{
{
font-size:240%;
font-size:200%;
font-size:160%;
font-size:120%;
}
}
}
}
3.10.4 字体粗细
可以使用该属性选择字体的粗细程度。该属性支持多个值，但主要有normal和bold
两种类型，如下所示：
.bold { font-weight:bold; }
3.11
管理文本样式
除了上述字体属性，还可以通过设置文本的装饰、间隔以及对齐方式进一步改变文
本的显示效果。在文本和字体属性之间具有一个交叉，例如斜体或者粗体文本通过fontstyle 和font-weight属性实现，其他例如下划线需要text-decoration属性。
3.11.1 装饰
通过text-decoration属性可以为文本应用如下效果：下划线、贯穿线、上划线以及闪
烁。下面的规则创建一个名为over的新类，该类为文本应用上划线(上划线、下划线及
贯穿线的粗细与字体相匹配)装饰效果：
.over { text-decoration:overline; }
3.11.2 间隔
可以通过多个属性改变行、字符以及字母之间的间隔。例如，下面的规则改变段落
的行间距，方法是将lineheight属性增大25%，设置word-spacing属性为30个像素，并且
将letter-spacing设置为3个像素：
p {
line-height:125%;
70 第Ⅰ部分 核 心 技 术
}
word-spacing:30px;
letter-spacing:3px;
3.11.3 对齐方式
CSS共有4种类型的文本对齐方式可用：left、right、center和justify。在下面的规则
中，默认的段落文本被设置为垂直对齐：
p { text-align:justify; }
3.11.4 变换
共有4种可用的变换文本属性：none、capitalize、uppercase及lowercase。下面的规
则创建一个叫做upper的类，该类在使用时能确保所有文本以大写字母显示：
.upper { text-transform:uppercase; }
3.11.5 缩进
使用text-indent属性可以将文本块的首行文本以指定量进行缩进。下面的规则将每
个段落的首行缩进20个像素，当然也可以使用不同的度量单位或者百分比：
P｛text-indent:20px;｝
3.12
颜色
可以为使用color和background-color属性(或者是background属性提供的一个单独的
参数)的文本或对象应用前景色和背景色。指定的颜色可以是下列中的一种：命名颜
色、由十六进制的RGB创建的颜色(例如#ff0000或者#0000ff)，或者是使用rgb()CSS函数
创建的颜色。
W3C (w3.org)标准组织定义的16种标准颜色名包括：aqua、 black、 blue、 fuchsia、
gray、 green、 lime、 maroon、 navy、 olive、 purple、 red、 silver、 teal、 white以及
yellow。下面的规则使用其中的某个颜色名设置ID为object的对象的背景颜色：
#object { background-color:silver; }
下面的规则中，所有div中文本的前景色都被设置为黄色(因为在计算机显示中，
十六进制的红色ff、绿色ff与蓝色00合并创建黄色)：
div { color:#ffff00; }
如果不想在十六进制下工作，那么可以使用rgb()函数指定颜色值，下面的规则将当
第3章
CSS介绍 71
前文档的背景颜色改变为浅绿色：
body { background-color:rgb(0， 255， 255); }
技巧
如果您不喜欢按照256级颜色等级来选择颜色，可以在rgb()函数中使
用百分比来代替，其值从0～100，从主色的最低值0开始直到最高100，如
rgb(58%、 95%、 74%)所示。也可以使用浮点数值用以获得更好的色彩控
制，如rgb(23.4%、 67.6%、 15.5%)所示。
简短颜色字符串
同时还有一种简短形式的十六进制数字字符串，仅仅使用每个2字节对的第一个
字节表示颜色。例如，相对于颜色赋值#fe4692，您使用#f49，省略了每对中的第二个
十六进制数字。这几乎可以产生完全相同的颜色，在那些不需要颜色特别精确的地方特
别有用。6位字符串和3位字符串的区别在于前者支持16 000 000种不同的颜色，而后者
仅支持4 000种颜色。
不管您打算在什么地方使用诸如#803060(其中每个颜色对的第二个数字都是0)的颜
色，颜色#836与#803060是一样的(简短版本中隐藏了0)，可以使用其中任何一个创建完
全相同的颜色。
在本书中，根据需要会选择使用其中一种类型的颜色字符串。
3.13
定位元素
网页中的元素会在文档中的某个位置，但是可以通过将该属性从默认的static变为
absolute、relative或fixed来移动元素。
如果从文档中删除某个具有绝对位置的元素，那么任何其他元素都将会流入该元素
释放的空间。可以使用top、right、bottom或 left属性将元素放在文档中任何您喜欢的位
置，然后该元素就会在其他元素的顶部(或者底部)位置。
例如，如果希望将ID为object的元素移动至距文档开始处100个像素以下、距离左侧
200像素的位置，那么可以为其应用下面的规则(也可以使用CSS支持的任何其他的度量
单位)：
#object {
position:absolute;
top:100px;
left:200px;
}
同样地，也可以在文档流中按照相对位置移动对象。例如，如果希望将对象分别向
下向右移动10个像素，可以使用下面的规则：
#object {
72 第Ⅰ部分 核 心 技 术
}
position:relative;
top:10px;
left:10px;
最后，位置属性设置可以移动对象至一个绝对位置，但是仅限于当前浏览器视口。
当滚动文档时，该对象仍然保持其位置不变，其下的主文档滚动——可以利用这个特点
创建dock bar以及其他相似的设备。如果希望将对象定位于浏览器窗口的左上角，可以
使用下面的规则：
#object {
position:fixed;
top:0px;
left:0px;
}
图3-5是一个简单的dock bar，该dock bar使用固定值的position属性创建，将图标排
列在屏幕底部。通过使用少量的JavaScript或者特定的CSS转换，在鼠标经过时可以重新
设置图标的大小，如图3-5中第二个图标所示。读者可以分别参考我的书籍Plug-in CSS
和Plug-in JavaScript(McGraw-Hill)，使用CSS和JavaScript插件处理这类问题，同时还有
很多有趣的功能。
图 3-5 使用position属性创建一个简单的功能栏
3.14
伪类
许多选择器和类仅仅可以在样式表中使用，在HTML中没有任何对应的标签或者属
性。它们只能是通过特征给元素进行分类，而不是使用无法从文档树中推断的名称、属性
或者内容来给元素进行分类。这包括一些伪类，例如first-line、 first-child以及 first-letter。
第3章
CSS介绍 73
伪类使用字符：(冒号)与元素分开。例如，如果希望创建一个叫做bigfirst的类，该
类强调某个元素的第一个字母，可以使用如下规则：
.bigfirst:first-letter {
font-size:400%;
float:left;
}
当类bigfirst应用于元素时，第一个字母将会放大显示，剩下的文本仍然在其后按照
正常大小显示(由于float属性)，这样看起来首字母像是某个图片或者其他对象。
其他伪类包括hover、 link、 active以及visited，所有这些伪类在应用于锚点元素时
特别有用，例如在下面的规则中，第一个规则将所有链接的默认颜色设置为蓝色，第二
个规则将已经被访问过的链接的默认颜色设置为浅蓝色：
a:link
{ color:blue;
}
a:visited { color:lightblue; }
下面的规则特别有趣，因为它使用了伪类hover，因此仅当鼠标置于元素上方时才
会应用这些规则。在本示例中，链接被改变为红背景加白文本显示，并且提供了一个动
态效果，通常需要使用JavaScript代码实现这些动态效果。
a:hover {
color:white;
background:red;
}
这里为属性background提供了一个参数，用来代替更长的background-color属性。
伪类active也是动态的，因为在使用鼠标按下或释放之间，链接会发生变化，下面
的规则将链接的颜色改变为深蓝：
a:active { color:darkblue; }
另外一个有趣的动态伪类是focus，该伪类仅仅在元素获得焦点时才被应用，用户
通过鼠标或者键盘选择元素使其获得焦点，下面的规则使用通用选择器，在当前获得焦
点的对象周围总是放置一条2像素宽的半灰色的点划线：
*:focus { border:2px dotted #888888; }
3.15
缩写规则
为节省空间，相关的CSS属性可以连接为一个单独的缩写赋值语句。例如，我已经
使用缩写规则多次创建边框，例如前一节中的focus规则，这其实是下面规则集的缩写
连接：
*:focus {
border-width:2px;
border-style:dotted;
border-color:#888888;
}
74 第Ⅰ部分 核 心 技 术
使用缩写规则时，只需要将属性应用至希望改变值的地方。因此可以使用下面的规
则设置边框的宽度和样式，而不是颜色：
*:focus { border:2px dotted; }
警告
缩写规则中属性的放置顺序非常重要，放错位置是一个常见的错误，
将会导致意外结果。由于本章中太多的属性需要详细介绍，如果您希望使
用缩写CSS，那么您需要利用CSS手册或者搜索引擎查询默认属性以及它
们的应用程序顺序，建议您查询网页dustindiaz.com/css-shorthand。
3.16
盒子模型
影响页面布局的最基本CSS属性都是基于盒子模型，即围绕某个元素的一系列嵌套
属性，如图3-6所示。
图 3-6
嵌套的CSS盒子模型
事实上所有元素都具有(或者能够具有)这些属性，包括文档主体，可以使用如下规
则删除文档主体的页边空白：
body { margin:0px; }
一旦掌握了盒子模型，将会非常容易地创建具有专业布局的网页，这些单独的属性
将会组成您的页面样式。
第3章
CSS介绍 75
3.16.1 Margin 属性
盒子模型最外层的属性是margin。Margin属性将各个元素分离开来，其用法非常灵
活。比如，假定已经对一系列元素赋予默认的margin为10像素。当某个元素放置于另外
一个元素上面时，由于两个边的宽度会相加，它们之间的空白将会是20个像素。
然而为了解决这个潜在的问题，当两个拥有边框的元素直接上下放置时，其间隔仅仅
是两个margin中稍大的那一个。如果两个margin宽度相等，那么只使用其中一个宽度，这样
会得到您希望的结果。但是应该注意绝对位置或者内联元素的margin不会重叠。
某个元素的边缘空白可以根据margin属性进行全部更改，或者使用margin-left、
margin-top、 margin-right以及margin-bottom更改其中某一个。设置margin属性时，可以
提供1至4个参数，这些参数的效果如其中的注释所示：
margin:1px;
margin:1px 2px;
/* 设置所有的边缘空白为1像素宽
*/
/* 设置顶部和底部的边缘空白为1像素，
左侧和右侧的页面空白为2像素宽
*/
margin:1px 2px 3px;
/* 设置顶部边缘空白为1像素，左侧和右侧
为2像素，底部为3像素宽
*/
margin:1px 2px 3px 4px; /* 设置顶部边缘空白为1像素，右侧为2像素，
底部为3像素，左侧为4像素
*/
3.16.2 Border属性
盒子模型的border层与margin非常相似，唯一不同之处是没有重叠。用来更改边框
的主要属性包括：border、 border-left、 border-top、 border-right以及border-bottom，其
中每个属性都可以包含其他子属性，这些子属性由前缀加上属性名组成，例如–color、
–style以及 –width。
访问margin属性的4种单个属性设置方法同样适用于border-width属性，因此下面的
规则都是合理的：
border-width:1px;
border-width:1px 2px;
border-width:1px 2px 3px;
border-width:1px 2px 3px 4px;
/*
/*
/*
/*
所有边框
上/下和左/右
上、 左/右,和下
上、右、下,和左
*/
*/
*/
*/
3.16.3 Padding属性
盒子模型中最里面的属性是padding，该属性在border和/或Margin空白内部应用。
改变padding的主要属性包括：padding、 padding-left、 padding-top、 padding-right and
padding-bottom。
访问margin以及border属性的4种单个属性设置方法同样适用于padding属性，因此
下面的规则都是合理的：
padding:1px;
padding:1px 2px;
padding:1px 2px 3px;
padding:1px 2px 3px 4px;
/*所有边框
/*上/下和左/右
/*上、 左/右,和下
/*上、右、下,和左
*/
*/
*/
*/
76 第Ⅰ部分 核 心 技 术
3.16.4 元素内容
盒子模型位于中心位置的是元素，该元素可以使用本章介绍的所有方法对它应用样
式，并且可以包含子元素，子元素还可以包含子元素，以此类推，每个子元素都具有自
己的样式和盒子模型。
3.17
本章小结
虽然本章仅仅涉及CSS的小部分内容(CSS涉及的知识相当广泛，一章内容难以对其
进行详细介绍)，但是本章的目的是带给读者一个学习CSS的完美开始，而不是大量的
CSS知识。
第4章将要使用本章所学内容，并且向读者展示如何使用CSS3中的新知识，这些新
知识支持转换、动画、更多字体、圆角边框、阴影以及其他许多内容。