HTML5 Web开发最佳实践-使用CSS JavaScript和多媒体

第Ⅰ部分　HTML5技术 第1章 超文本标记语言 3 1.1 HTML文档 3 1.1.1 元素 4 1.1.2 DOCTYPE 4 1.1.3 特性 5 1.1.4 各种各样的结构规则 5 1.1.5 html元素 6 1.2 head元素 6 1.2.1 title元素 6 1.2.2 meta元素 7 1.2.3 script元素 8 1.2.4 link元素 8 1.2.5 style元素 11 1.2.6 base元素 12 1.3 小结 12 第2章 级联样式表 15 2.1 样式设计指导 15 2.1.1 组织内容 15 2.1.2 应用样式 16 2.1.3 CSS3规范 17 2.2 CSS概念 17 2.2.1 选择器 17 2.2.2 声明 18 2.2.3 单位 18 2.3 优先级 21 2.3.1 样式表来源 21 2.3.2 特殊性规则 22 2.3.3 关键字!important 23 2.4 盒子模型 23 2.5 厂商前缀 24 2.6 style特性 25 2.7 小结 25 第3章 JavaScript要素 29 3.1 JavaScript介绍 29 3.1.1 对象 29 3.1.2 构造函数 30 3.1.3 原型 32 3.2 继承 32 3.2.1 使用原型 33 3.2.2 使用Create 34 3.2.3 使用类关键字 35 3.2.4 重写成员 36 3.3 属性 37 3.3.1 数组 37 3.3.2 特性 38 3.3.3 特殊类型 39 3.4 其他主题 39 3.4.1 比较运算符 39 3.4.2 变量作用域 40 3.4.3 严格模式 41 3.4.4 函数 42 3.4.5 上下文 43 3.4.6 立即调用的函数 45 3.4.7 命名空间 45 3.4.8 异常 47 3.4.9 承诺 47 3.5 数组方法 49 3.5.1 访问元素 49 3.5.2 输出数组 50 3.5.3 操作元素 50 3.5.4 搜索 52 3.5.5 创建子集 53 3.5.6 处理 54 3.6 小结 55第Ⅱ部分 HTML第4章 结构化HTML元素 59 4.1 内容类别 59 4.2 节内容 60 4.2.1 section 60 4.2.2 article 60 4.2.3 aside 61 4.2.4 nav 61 4.2.5 address 61 4.3 大纲 62 4.3.1 显性节 62 4.3.2 文档标题 64 4.3.3 header和footer 65 4.3.4 规划页面布局 65 4.4 节根 66 4.4.1 blockquote 66 4.4.2 details 66 4.4.3 figure 67 4.5 分组元素 68 4.5.1 段落 68 4.5.2 水平规则 68 4.5.3 预格式化(pre) 68 4.5.4 main 69 4.5.5 div 69 4.6 列表元素 70 4.6.1 列表 70 4.6.2 描述列表 72 4.7 内联框架 74 4.8 已弃用的元素 75 4.8.1 hgroup 75 4.8.2 dir 75 4.8.3 frame和frameset 75 4.9 小结 76 第5章 短语HTML元素 81 5.1 突出显示文本 81 5.1.1 重要性(strong) 82 5.1.2 强调(em) 82 5.1.3 关联(mark) 82 5.1.4 交替声音(i) 83 5.1.5 细则(small) 84 5.1.6 删除线(s) 84 5.1.7 文体突出(b) 85 5.1.8 无法明确表达(u) 86 5.1.9 元素复习 86 5.2 其他语义短语 87 5.2.1 代码、样本、键盘和变量 87 5.2.2 缩写和定义 88 5.2.3 下标和上标 89 5.2.4 time 90 5.3 编辑 90 5.4 引用 91 5.5 span 93 5.6 添加回车 93 5.6.1 换行 93 5.6.2 单词换行时机 94 5.6.3 连字符 95 5.7 双向文本 96 5.7.1 文本方向 96 5.7.2 流动方向 96 5.7.3 紧紧包裹 98 5.7.4 使用隔离 98 5.7.5 覆盖方向 99 5.8 ruby 99 5.9 小结 100 第6章 表格HTML元素 101 6.1 简单表格 101 6.2 列和行标题 102 6.3 列组 103 6.4 表标题和页脚 105 6.5 跨越单元格 106 6.6 小结 110 第7章 嵌入式HTML元素 111 7.1 锚 111 7.2 图像 112 7.2.1 多个来源 113 7.2.2 图像映射 116 7.3 音频 117 7.3.1 使用本机控件 118 7.3.2 文件格式 119 7.4 视频 120 7.5 轨道 122 7.6 HTML5插件 124 7.7 小结 125 第8章 HTML表单元素 127 8.1 概述 127 8.2 表单元素 127 8.2.1 表单动作 128 8.2.2 表单方法 129 8.2.3 附加特性 130 8.3 输入元素 130 8.3.1 文本表单数据 130 8.3.2 选择元素 135 8.3.3 其他类型 138 8.3.4 日期和时间数据 142 8.4 其他可视元素 145 8.4.1 label 145 8.4.2 output元素 146 8.4.3 meter元素 146 8.4.4 progress元素 148 8.5 按钮类型 148 8.6 组织表单 149 8.7 验证 150 8.8 小结 151 第Ⅲ部分 CSS第9章 CSS选择器 155 9.1 选择器概述 155 9.1.1 元素选择器 155 9.1.2 类选择器 156 9.1.3 ID选择器 156 9.1.4 特性选择器 156 9.1.5 伪类选择器 157 9.1.6 伪元素 159 9.2 使用组合选择符 160 9.2.1 组合元素和类选择器 160 9.2.2 伪类选择器 160 9.2.3 组合运算符 160 9.2.4 not选择器 161 9.2.5 组运算符 162 9.2.6 解决冲突 162 9.3 媒体查询 162 9.3.1 媒体特性 163 9.3.2 使用媒体查询 164 9.4 小结 164 第10章 定位内容 165 10.1 display 165 10.2 定义大小 167 10.2.1 绝对大小 167 10.2.2 相对大小 168 10.2.3 设置*大值 168 10.2.4 基于内容 169 10.2.5 IE的变通方法 170 10.2.6 min-content示例 171 10.2.7 盒子大小调整 172 10.3 float 174 10.3.1 清除浮动 175 10.3.2 包含浮动 177 10.4 内联块 178 10.5 定位 179 10.5.1 相对定位 180 10.5.2 绝对定位 182 10.5.3 固定定位 182 10.6 z-index 183 10.7 内容居中 184 10.8 小结 185 第11章 文本样式 187 11.1 字体 187 11.1.1 获取字体 187 11.1.2 字体系列 189 11.1.3 字体设置 190 11.1.4 简写符号 195 11.2 文本格式化 195 11.2.1 水平对齐 196 11.2.2 缩进 196 11.2.3 溢出 196 11.2.4 引号 197 11.2.5 阴影 197 11.2.6 大小写 198 11.3 间距和对齐 199 11.3.1 基本间距 199 11.3.2 处理空白 199 11.3.3 垂直对齐 200 11.4 break 202 11.4.1 单词换行 202 11.4.2 分页符 203 11.5 光标 203 11.6 小结 204 第12章 边框和背景 205 12.1 边框 205 12.1.1 基本样式 205 12.1.2 单个边 207 12.1.3 半径 208 12.1.4 使用图像 209 12.1.5 渐变 213 12.2 阴影 216 12.3 轮廓 217 12.4 背景 218 12.4.1 图像特性 218 12.4.2 裁剪 220 12.4.3 背景简写 220 12.4.4 示例 221 12.5 小结 223 第13章 对表格进行样式设计 225 13.1 对表格进行样式设计 225 13.1.1 基本表格样式 226 13.1.2 其他表格样式 232 13.2 使用CSS创建表格 235 13.2.1 display特性 236 13.2.2 CSS表格演示 237 13.2.3 应用 239 13.3 样式列表 244 13.3.1 类型 244 13.3.2 图像 245 13.3.3 位置 246 13.3.4 简写 246 13.4 小结 246 第14章 Flexbox 247 14.1 容器配置 247 14.1.1 flex方向 247 14.1.2 flex换行 249 14.1.3 对齐 250 14.1.4 对齐项目 252 14.2 项目配置 252 14.2.1 增长与收缩 253 14.2.2 顺序 257 14.2.3 重写对齐方式 257 14.3 垂直示例 258 14.4 小结 259 第15章 动画与变形 261 15.1 动画 261 15.1.1 关键帧 261 15.1.2 配置动画 262 15.1.3 贝塞尔曲线 265 15.2 过渡 266 15.3 变形 269 15.3.1 移动 269 15.3.2 旋转 269 15.3.3 缩放 270 15.3.4 倾斜 271 15.3.5 演示 271 15.3.6 3D变形 273 15.4 小结 274第Ⅳ部分 JavaScript第16章 浏览器环境 279 16.1 浏览器对象模型 279 16.1.1 screen 280 16.1.2 location 281 16.1.3 history 282 16.1.4 navigator 283 16.2 window对象 284 16.2.1 控制台 285 16.2.2 缓存 288 16.2.3 浏览器界面元素 290 16.2.4 计时器 290 16.3 小结 291 第17章 窗口对象 293 17.1 创建窗口 293 17.1.1 弹出窗口阻止程序 294 17.1.2 重新使用窗口 295 17.1.3 配置参数 295 17.1.4 操作窗口 297 17.2 模态对话框窗口 300 17.2.1 标准的弹出对话框 300 17.2.2 自定义模态对话框 301 17.3 框架 303 17.3.1 简单示例 304 17.3.2 访问框架 305 17.3.3 使用sandbox 305 17.4 小结 306 第18章 DOM元素 307 18.1 文档对象模型 307 18.1.1 元素继承 308 18.1.2 简单示例 309 18.2 基本的DOM操作 309 18.2.1 查找元素 309 18.2.2 创建元素 310 18.2.3 移动元素 311 18.2.4 修改元素 312 18.3 相关元素 313 18.4 使用jQuery 314 18.4.1 基本知识 314 18.4.2 操作DOM元素 315 18.5 小结 317 第19章 动态样式设计 319 19.1 更改样式表 319 19.1.1 启用样式表 319 19.1.2 选择样式表 321 19.1.3 备用样式表 322 19.1.4 使用样式元素 323 19.2 修改规则 324 19.3 修改类 326 19.4 修改内联样式 327 19.4.1 使用CSSStyleDeclaration 327 19.4.2 设置样式属性 328 19.4.3 使用setAttribute 329 19.5 计算的样式 329 19.6 小结 330 第20章 事件 331 20.1 初始示例 331 20.2 事件传播 333 20.3 未注册事件 336 20.4 事件接口 336 20.4.1 常用的事件属性 337 20.4.2 取消事件 337 20.5 探索事件 338 20.6 小结 339第Ⅴ部分 高级应用第21章 音频和视频 343 21.1 概述 343 21.2 自定义音频控件 344 21.2.1 支持播放和暂停 345 21.2.2 支持进度和查找 346 21.2.3 控制音量 347 21.2.4 调整样式 348 21.2.5 更改音频源 349 21.3 自定义视频控件 349 21.4 小结 351 第22章 可缩放矢量图形 353 22.1 SVG介绍 353 22.1.1 添加一些简单的形状 353 22.1.2 添加样式 354 22.2 使用SVG图像文件 355 22.2.1 创建SVG图像 356 22.2.2 使用SVG背景 356 22.3 创建交互式地图 357 22.3.1 使用path元素 357 22.3.2 实现初始地图 360 22.4 对州元素进行样式设计 361 22.4.1 使用基本填充颜色 361 22.4.2 使用渐变填充 363 22.4.3 使用背景图像 364 22.4.4 使用JavaScript更改 样式 365 22.5 添加动画 367 22.6 小结 369 第23章 画布 371 23.1 创建一个国际象棋棋盘 371 23.1.1 绘制矩形 372 23.1.2 使用渐变 374 23.1.3 使用图像 374 23.1.4 添加简单动画 380 23.2 建立太阳系模型 382 23.2.1 使用路径 383 23.2.2 绘制圆弧 383 23.2.3 使用变换 384 23.2.4 保存上下文状态 385 23.2.5 绘制太阳系 386 23.2.6 应用缩放 389 23.3 裁剪画布 390 23.4 了解合成 391 23.5 小结 394 第24章 拖放 397 24.1 理解拖动和放置 397 24.1.1 处理事件 397 24.1.2 使用数据传输对象 399 24.1.3 启用可拖动元素 400 24.2 创建跳棋应用程序 401 24.2.1 创建项目 401 24.2.2 绘制跳棋棋盘 401 24.3 添加拖放功能 404 24.3.1 允许放置 405 24.3.2 执行自定义放置操作 405 24.3.3 提供视觉反馈 407 24.4 执行游戏规则 409 24.4.1 验证移动 409 24.4.2 晋升为王 413 24.4.3 依次移动 414 24.5 使用高级功能 418 24.5.1 更改拖动图像 418 24.5.2 在窗口之间拖动 419 24.6 小结 420 第25章 Indexed DB 421 25.1 介绍Indexed DB 421 25.1.1 使用对象存储 422 25.1.2 定义数据库 423 25.1.3 异步处理 423 25.1.4 使用事务 425 25.2 创建应用程序 425 25.2.1 创建Web项目 425 25.2.2 绘制画布 426 25.2.3 配置棋子 427 25.3 创建数据库 429 25.3.1 打开数据库 429 25.3.2 定义数据库结构 430 25.4 绘制棋子 433 25.4.1 使用游标 433 25.4.2 获取单个对象 435 25.4.3 测试应用程序 43525.5 移动棋子 437 25.5.1 定义移动 437 25.5.2 转换位置 438 25.5.3 完成一次移动 439 25.5.4 获取对象键 440 25.5.5 执行更新 441 25.5.6 启动动画 442 25.6 跟踪被捕获的棋子 443 25.7 小结 444 第26章 地理定位和映射 447 26.1 理解地理定位 447 26.1.1 测量地理位置技术 447 26.1.2 使用地理位置数据 448 26.2 使用地理定位API 448 26.2.1 创建Web项目 448 26.2.2 使用地理定位对象 449 26.2.3 显示位置 451 26.3 使用映射平台 452 26.3.1 创建Bing Maps账户 453 26.3.2 添加地图 454 26.3.3 添加图钉 456 26.4 小结 459 附录A Ajax 461 附录B 拖放源代码 465 附录C 参考资料 471