HTML5秘籍

目 　录

第一部分 　认识新语言

第1章 　HTML5简介2

1.1 　HTML5的故事2

1.1.1 　XHTML 1.0：更严格的标准...

目 　录

第一部分 　认识新语言

第1章 　HTML5简介2

1.1 　HTML5的故事2

1.1.1 　XHTML 1.0：更严格的标准2

1.1.2 　XHTML 2：意想不到的失败3

1.1.3 　HTML5：起死回生3

1.1.4 　HTML：活着的语言5

1.2 　HTML5的三个主要原理6

1.2.1 　不破坏Web6

1.2.2 　修补牛蹄子路7

1.2.3 　实用至上8

1.3 　HTML5标记初体验8

1.3.1 　HTML5文档类型10

1.3.2 　字符编码11

1.3.3 　页面语言11

1.3.4 　添加样式表12

1.3.5 　添加JavaScript12

1.3.6 　最终结果13

1.4 　HTML5语法13

1.4.1 　放松的规则14

1.4.2 　HTML5验证15

1.4.3 　XHTML的回归17

1.5 　HTML5元素家族18

1.5.1 　新增的元素18

1.5.2 　删除的元素18

1.5.3 　改变的元素19

1.5.4 　调整的元素20

1.5.5 　标准化的元素21

1.6 　今天开始用HTML522

1.6.1 　了解浏览器支持情况23

1.6.2 　浏览器装机情况统计24

1.6.3 　通过Modernizr检测功能26

1.6.4 　使用“腻子脚本”填补功能

缺陷28

第2章 　构造网页的新方式30

2.1 　语义元素30

2.2 　改造传统的HTML页面32

2.2.1 　构造页面的老办法32

2.2.2 　使用HTML5构造页面36

2.2.3 　用<hgroup>标注副标题39

2.2.4 　用<figure>添加插图40

2.2.5 　用<aside>添加附注42

2.3 　浏览器对语义元素的支持情况43

2.4 　使用语义元素设计站点45

2.4.1 　理解<header>46

2.4.2 　用<nav>标注导航链接48

2.4.3 　理解<footer>52

2.4.4 　理解区块54

2.5 　HTML5纲要55

2.5.1 　如何查看纲要55

2.5.2 　基本纲要56

2.5.3 　分块元素58

2.5.4 　解决一个纲要问题60

第3章 　有意义的标记64

3.1 　回顾语义元素64

3.1.1 　使用<time>标注日期和时间65

3.1.2 　使用<output>标注JavaScript返

回值66

3.1.3 　使用<mark>标注突显文本68

3.2 　其他语义标准69

3.2.1 　ARIA70

3.2.2 　RDFa71

3.2.3 　Microformats71

3.2.4 　Microdata76

3.3 　Google Rich Snippets79

3.3.1 　增强搜索结果79

3.3.2 　菜谱搜索引擎82

第二部分 　制作新网页

第4章 　Web表单86

4.1 　理解表单86

4.2 　传统表单翻新88

4.2.1 　通过占位符文本添加提示91

4.2.2 　焦点：挑选正确的起点93

4.3 　验证：阻止错误93

4.3.1 　HTML5验证的原理94

4.3.2 　关闭验证95

4.3.3 　验证样式挂钩96

4.3.4 　使用正则表达式97

4.3.5 　自定义验证98

4.3.6 　浏览器对验证的支持99

4.4 　新的输入控件102

4.4.1 　电子邮件地址104

4.4.2 　网址105

4.4.3 　搜索框105

4.4.4 　电话号码105

4.4.5 　数值105

4.4.6 　滑动条106

4.4.7 　日期和时间107

4.4.8 　颜色108

4.5 　新元素108

4.5.1 　使用<datalist>显示输入建议109

4.5.2 　进度条和计量条111

4.5.3 　使用<command>和<menu>创建工具条和菜单113

4.6 　网页中的HTML编辑器113

4.6.1 　使用contentEditable编辑

元素114

4.6.2 　使用designMode编辑页面116

第5章 　音频与视频118

5.1 　理解今天的视频118

5.2 　HTML5音频与视频119

5.2.1 　使用<audio>播放点噪音120

5.2.2 　了解<video>122

5.3 　格式之争与后备措施123

5.3.1 　谈谈格式124

5.3.2 　浏览器对媒体格式的支持

情况125

5.3.3 　多种格式：如何讨好每一款浏览器127

5.3.4 　使用<source>元素128

5.3.5 　以Flash作后备129

5.4 　使用JavaScript控制播放器132

5.4.1 　添加音效133

5.4.2 　创建自定义视频播放器136

5.4.3 　JavaScript媒体播放器138

5.4.4 　字幕与无障碍性140

第6章 　基本Canvas绘图142

6.1 　Canvas起步142

6.1.1 　画直线145

6.1.2 　路径与形状148

6.1.3 　绘制曲线149

6.1.4 　变换152

6.1.5 　透明度155

6.2 　构建基本的画图程序157

6.2.1 　准备工作158

6.2.2 　在画布上绘图160

6.2.3 　将画布保存为图像161

6.3 　浏览器对Canvas的支持情况164

6.3.1 　填平补齐Canvas164

6.3.2 　Canvas后备及功能检测166

第7章 　高级Canvas技术168

7.1 　高级Canvas绘图168

7.1.1 　绘制图像168

7.1.2 　裁剪、切割和伸缩图片170

7.1.3 　绘制文本172

7.2 　阴影与填充173

7.2.1 　添加阴影173

7.2.2 　填充图案175

7.2.3 　填充渐变176

7.2.4 　综合示例：绘制图解180

7.3 　赋予图形交互能力184

7.3.1 　记录绘制的内容184

7.3.2 　基于坐标的碰撞检测187

7.4 　给Canvas添加动画189

7.4.1 　基本的动画190

7.4.2 　多物体动画191

7.5 　实例：迷宫游戏195

7.5.1 　布置迷宫196

7.5.2 　让笑脸动起来198

7.5.3 　基于像素颜色的碰撞检测199

第8章 　使用CSS3203

8.1 　使用CSS3203

8.1.1 　选择一：用能用的204

8.1.2 　选择二：将CSS功能作为

增强204

8.1.3 　选择三：Modernizr205

8.1.4 　特定于浏览器的样式208

8.2 　Web排版209

8.2.1 　Web字体格式211

8.2.2 　使用字体包212

8.2.3 　使用谷歌的Web字体214

8.2.4 　使用自己的字体216

8.2.5 　多栏文本218

8.3 　适用不同的设备220

8.3.1 　媒体查询220

8.3.2 　高级媒体查询224

8.3.3 　替换整个样式表225

8.3.4 　识别移动设备226

8.4 　多变的盒子227

8.4.1 　透明盒子227

8.4.2 　圆角盒子229

8.4.3 　背景盒子230

8.4.4 　阴影盒子231

8.4.5 　渐变盒子232

8.5 　创建过渡效果234

8.5.1 　基本的颜色过渡235

8.5.2 　更多的过渡思路237

8.5.3 　变换237

第三部分 　构建桌面式Web应用

第9章 　数据存储242

9.1 　Web存储简介242

9.1.1 　存储数据244

9.1.2 　实战：保存游戏中的最后

位置246

9.1.3 　浏览器对Web存储的支持

情况247

9.2 　深入Web存储248

9.2.1 　删除数据项248

9.2.2 　查找所有数据项248

9.2.3 　保存数值和日期249

9.2.4 　保存对象250

9.2.5 　响应存储变化251

9.3 　读取文件253

9.3.1 　取得文件254

9.3.2 　浏览器对File API的支持

情况254

9.3.3 　读取文本文件255

9.3.4 　替换标准上传控件257

9.3.5 　一次读取多个文件257

9.3.6 　读取图片文件258

第10章 　离线应用261

10.1 　通过描述文件缓存资源262

10.1.1 　创建描述文件262

10.1.2 　使用描述文件264

10.1.3 　把描述文件放到Web

服务器265

10.1.4 　更新描述文件267

10.1.5 　浏览器对离线应用的支持

情况269

10.2 　实用缓存技术270

10.2.1 　访问未缓存的文件270

10.2.2 　添加后备内容271

10.2.3 　检测连接273

10.2.4 　通过JavaScript指定更新274

第11章 　与Web服务器通信277

11.1 　向Web服务器发送消息277

11.1.1 　XMLHttpRequest对象278

11.1.2 　向Web服务器提问279

11.1.3 　取得新内容283

11.2 　服务器发送事件286

11.2.1 　消息格式287

11.2.2 　通过服务器脚本发送消息288

11.2.3 　在网页中处理消息289

11.2.4 　轮询服务器端事件291

11.3 　Web Socket292

11.3.1 　访问Web Socket293

11.3.2 　简单的Web Socket客户端294

11.3.3 　使用现成的Web Socket

服务器295

第12章 　更酷的JavaScript技术298

12.1 　地理定位298

12.1.1 　地理定位的基本原理299

12.1.2 　查找访客的坐标301

12.1.3 　处理错误303

12.1.4 　设置地理定位选项305

12.1.5 　显示地图306

12.1.6 　跟踪访客移动309

12.2 　Web Workers309

12.2.1 　费时的任务311

12.2.2 　把任务放在后台313

12.2.3 　处理Worker错误316

12.2.4 　取消后台任务316

12.2.5 　传递复杂消息317

12.3 　历史管理320

12.3.1 　URL问题320

12.3.2 　以往的解决方案：Hashbang

URL321

12.3.3 　HTML5的方案：会话历史322

12.3.4 　浏览器对会话历史的支持

情况325

第四部分 　附录

附录A 　CSS简明教程328

附录B 　JavaScript简明教程342

...

(查看全部试读)