HTML5与CSS3从入门到精通-第3版

目 录 第1章 互联网和万维网基础 1 1.1 互联网和万维网 2 互联网 2 互联网的诞生 2 互联网的发展 2 万维网的诞生 2 **个图形化浏览器 3 各种技术的聚合 3 1.2 网页标准和无障碍访问 4 W3C推荐标准 4 网页标准和无障碍访问 4 无障碍访问和法律 4 网页通用设计 5 1.3 浏览器和服务器 6 网络概述 6 客户端/服务器模型 6 1.4 Internet协议 8 电子邮件协议 8 超文本传输协议 8 文件传输协议 8 传输控制协议/Internet协议 8 IP地址 9 1.5 统一资源标识符(URI)和域名 10 URI和URL 10 域名 10 顶级域名 11 通用顶级域名 11 国家代码顶级域名 12 域名系统DNS 13 1.6 网上的信息 14 网上的信息可靠吗？ 14 网上的信息是*新的吗？ 15 有没有指向其他资源的外部链接？ 15 1.7 HTML概述 16 什么是HTML？ 16 什么是XML？ 17 什么是XHTML？ 17 HTML的*新版本HTML5 17 1.8 网页幕后揭秘 18 文档类型定义(DTD) 18 网页模板 18 html元素 18 页头区域 19 主体区域 19 1.9 **个网页 20 动手实作1.1 20 新建文件夹 20 保存文件 21 测试网页 22 复习和练习 23 复习题 23 动手练习 23 网上调研 24 聚焦网页设计 24 第2章 HTML基础 25 2.1 标题元素 26 动手实作2.1 26 无障碍访问和标题 27 HTML5更多的标题选项 27 2.2 段落元素 28 动手实作2.2 28 对齐 29 2.3 换行和水平标尺 30 换行元素 30 动手实作2.3 30 水平标尺元素 31 动手实作2.4 31 2.4 块引用元素 32 动手实作2.5 33 2.5 短语元素 34 2.6 有序列表 36 type属性，start属性和 reversed属性 36 动手实作2.6 37 2.7 无序列表 38 动手实作2.7 39 2.8 描述列表 40 动手实作2.8 41 2.9 特殊字符 42 动手实作2.9 42 2.10 HTML语法校验 44 动手实作2.10 44 2.11 结构元素 46 div元素 46 header元素 46 nav元素 46 main元素 46 footer元素 46 动手实作2.11 47 2.12 练习使用结构元素 48 动手实作2.12 48 2.13 锚元素 50 动手实作2.13 50 链接目标 51 绝对链接 51 相对链接 51 block anchor 51 2.14 练习使用链接 52 站点地图 52 动手实作2.14 52 2.15 电子邮件链接 56 动手实作2.15 57 复习和练习 58 复习题 58 动手练习 59 聚焦网页设计 59 案例分析 59 Pacific Trails Resort案例分析 60 JavaJam Coffee House案例分析 62 第3章 网页设计基础 67 3.1 为目标受众设计 68 浏览器 69 屏幕分辨率 69 3.2 网 站 组 织 70 分级式组织 70 线性组织 71 随机组织 71 3.3 视觉设计原则 72 重复：在整个设计中重复视觉元素 72 对比：添加视觉刺激和吸引注意力 73 近似：分组相关项目 73 对齐：对齐元素实现视觉上的统一 73 3.4 提供无障碍访问 74 通用设计和增强无障碍访问的 受益者 74 无障碍设计有助于提高在搜索 引擎中的排名 74 法律规定 75 无障碍设计的热潮 75 3.5 文本的使用 76 文本设计的注意事项 76 3.6 调色板 78 十六进制颜色值 78 网页安全色 78 无障碍设计和颜色 79 3.7 针对目标受众进行设计 80 面向儿童 80 面向年轻人 80 面向所有人 81 面向老年人 81 3.8 选择颜色方案 83 以一张图片为基础的方案 83 色轮 84 变深、变浅和变灰 84 单色 85 相似色 85 互补色 86 分散互补色 86 三色 86 四色 87 实现颜色方案 87 3.9 使用图片和多媒体 88 文件大小和图片尺寸 88 抗锯齿/锯齿化文本的问题 88 只使用必要的多媒体 89 提供替代文本 89 3.10 更多设计考虑 90 感觉到的加载时间 91 **屏 91 适当留白 91 水平滚动 91 3.11 导航设计 92 网站要易于导航 92 导航栏 92 图片导航 93 动态导航 93 站点地图 93 站点搜索功能 94 3.12 线框和页面布局 95 3.13 固定和流动布局 98 固定布局 98 流动布局 99 3.14 为移动网络设计 100 三种方式 100 移动设备设计考虑 100 桌面和移动网站的例子 101 移动设计小结 101 3.15 灵活响应的网页设计 102 3.16 网页设计*佳实践 104 复习和练习 106 复习题 106 动手练习 107 聚焦网页设计 107 网页项目案例分析 108 项目里程碑 108 第4章 CSS基础 111 4.1 CSS概述 112 层叠样式表的优点 112 配置CSS的方法 113 层叠样式表的“层叠” 113 4.2 CSS选择符和声明 114 CSS语法基础 114 background-color属性 114 color属性 114 配置背景色和文本色 115 4.3 CSS颜色值语法 116 4.4 配置内联CSS 118 style属性 118 动手实作4.1 118 4.5 配置嵌入CSS 120 style元素 120 动手实作4.2 121 4.6 配置外部CSS 123 link元素 123 动手实作4.3 123 4.7 CSS的class、ID和后代选择符 125 class选择符 125 id选择符 125 后代选择符 125 动手实作4.4 125 4.8 span元素 127 span元素 127 动手实作4.5 127 4.9 练习使用CSS 129 动手实作4.6 129 将嵌入CSS转换为外部CSS 129 将网页与外部CSS文件关联 129 4.10 层叠 132 4.11 练习使用层叠 134 动手实作4.7 134 4.12 CSS语法校验 136 动手实作4.8 136 复习和练习 138 复习题 138 动手练习 139 聚焦网页设计 139 Pacific Trails Resort案例分析 140 JavaJam Coffee House案例分析 143 第5章 图形和文本样式基础 147 5.1 图片 148 GIF图片 148 JPEG图片 148 PNG图片 149 新的WebP图像格式 149 5.2 img元素 150 动手实作5.1 150 5.3 图片链接 152 动手实作5.2 152 5.4 配置背景图片 154 background-image属性 154 同时使用背景颜色和背景图片 154 浏览器如何显示背景图片 154 background-attachment属性 155 5.5 定位背景图片 156 background-repeat属性 156 定位背景图片 156 动手实作5.3 157 5.6 用CSS3配置多张背景图片 158 渐进式增强 158 动手实作5.4 159 5.7 用CSS配置字体 160 font-family属性 160 动手实作5.5 160 5.8 CSS文本属性 162 font-size属性 162 font-weight属性 162 font-style属性 162 line-height属性 163 text-align属性 163 text-decoration属性 163 text-indent属性 163 text-transform属性 163 letter-spacing属性 163 5.9 练习配置图形和文本 164 动手实作5.6 164 5.10 用CSS配置列表符号 166 用图片代替列表符号 167 动手实作5.7 167 5.11 收藏图标 168 配置收藏图标 168 动手实作5.8 168 5.12 图像映射 170 map元素 170 area元素 170 探索矩形图像映射 170 5.13 复习和练习 172 复习题 172 动手练习 173 聚焦网页设计 174 Pacific Trails Resort案例分析 174 JavaJam Coffee House案例分析 178 第6章 CSS进阶 183 6.1 宽度和高度 184 width属性 184 min-width属性 184 max-width属性 184 height属性 185 动手实作6.1 185 6.2 框模型 186 内容 186 填充 186 边框 186 边距 187 框模型实例 187 6.3 边距和填充 188 margin属性 188 padding属性 188 6.4 边框 190 动手实作6.2 191 6.5 CSS3圆角 192 动手实作6.3 193 6.6 居中页面内容 194 动手实作6.4 194 6.7 CSS3的边框和文本阴影 196 CSS3的box-shadow属性 196 CSS3的text-shadow属性 196 动手实作6.5 197 6.8 CSS3的background-clip和 background-origin属性 198 CSS3 background-clip属性 198 CSS3 background-origin属性 199 6.9 CSS3背景大小和缩放 200 6.10 练习使用CSS3属性 202 动手实作6.6 202 6.11 CSS3的opacity属性 204 动手实作6.7 204 6.12 CSS3 RGBA颜色 206 动手实作6.8 207 6.13 CSS3 HSLA颜色 208 色调、饱和度、亮度和alpha 208 HSLA颜色示例 208 动手实作6.9 209 6.14 CSS3的渐变 210 线性渐变语法 210 辐射渐变语法 210 CSS3渐变和渐进式增强 211 动手实作6.10 211 复习和练习 212 复习题 212 动手练习 213 聚焦网页设计 213 Pacific Trails Resort案例分析 213 JavaJam Coffee House案例分析 216 第7章 页面布局基础 221 7.1 正常流动 222 动手实作7.1 222 7.2 浮动 224 float属性 224 动手实作7.2 225 浮动元素和正常流动 225 7.3 清除浮动 226 clear属性 226 7.4 溢出 228 overflow属性 228 7.5 基本双栏布局 230 动手实作7.3 230 双栏布局的例子 234 7.6 用无序列表实现垂直导航 236 用CSS配置无序列表 236 用CSS text-decoration属性消除 下划线 236 动手实作7.4 237 7.7 用无序列表实现水平导航 238 CSS的display属性 238 动手实作7.5 239 7.8 用伪类实现CSS交互性 240 动手实作7.6 240 7.9 练习CSS双栏布局 242 动手实作7.7 242 7.10 用CSS进行定位 244 static定位 244 fixed定位 244 相对定位 244 绝对定位 245 7.11 练 习 定 位 246 动手实作7.8 246 7.12 CSS精灵 248 动手实作7.9 249 复习和练习 250 复习题 250 动手练习 251 聚焦网页设计 251 Pacific Trails Resort案例分析 251 JavaJam Coffee House案例分析 252 第8章 链接、布局和移动 开发进阶 255 8.1 相对链接的更多知识 256 相对链接的例子 256 动手实作8.1 256 8.2 区段标识符 258 动手实作8.2 259 8.3 figure元素和figcaption元素 260 figure元素 260 figcaption元素 260 添加图题 260 动手实作8.3 261 8.4 图片浮动练习 262 动手实作8.4 262 8.5 更多HTML5元素 264 section元素 264 article元素 264 aside元素 264 time元素 264 动手实作8.5 264 8.6 HTML5与旧浏览器的兼容性 266 配置CSS块显示 266 HTML5 Shim 266 动手实作8.6 267 8.7 CSS对打印的支持 268 打印样式*佳实践 268 动手实作8.7 269 8.8 移动网页设计 270 移动网页设计要考虑的问题 270 为移动使用优化布局 271 优化移动导航 271 优化移动图片 272 优化移动文本 272 为One Web而设计 272 8.9 viewport meta标记 273 8.10 CSS3媒体查询 275 什么是媒体查询 275 使用link元素的媒体查询例子 275 使用@media规则的媒体查询示例 276 8.11 练习媒体查询 277 动手实作8.8 277 8.12 灵活图像 281 动手实作8.9 281 8.13 测试移动显示 283 用桌面浏览器测试 284 针对专业开发人员 285 复习和练习 287 复习题 287 动手练习 288 聚焦网页设计 288 Pacific Trails Resort案例分析 288 JavaJam Coffee House案例分析 292 第9章 表格基础 297 9.1 表格概述 298 table元素 298 border属性 299 表格标题 299 9.2 表行、单元格和表头 300 动手实作9.1 301 9.3 跨行和跨列 302 动手实作9.2 302 9.4 配置无障碍访问表格 304 9.5 用CSS配置表格样式 306 动手实作9.3 306 9.6 CSS3结构性伪类 308 动手实作9.4 308 配置首字母 309 9.7 配置表格区域 310 复习和练习 312 复习题 312 动手练习 313 聚焦网页设计 313 Pacific Trails Resort案例分析 314 JavaJam Coffee House案例分析 315 第10章 表单基础 317 10.1 概述 318 form元素 318 表单控件 319 10.2 文本框 320 10.3 提交按钮和重置按钮 322 提交按钮 322 重置按钮 322 示例表单 322 动手实作10.1 323 10.4 复选框和单选钮 324 复选框 324 单选钮 325 10.5 隐藏字段和密码框 326 隐藏字段 326 密码框 326 10.6 textarea元素 328 动手实作10.2 329 10.7 select和option元素 330 select元素 330 option元素 330 10.8 label元素 332 动手实作10.3 333 10.9 fieldset元素和legend元素 334 fieldset元素 334 legend元素 334 用CSS配置fieldset分组样式 335 10.10 用CSS配置表单样式 336 动手实作10.4 336 属性选择符 337 10.11 服务器端处理 338 隐私和表单 339 10.12 表单练习 340 动手实作10.5 340 10.13 HTML5文本表单控件 342 E-mail地址输入表单控件 342 URL表单输入控件 342 电话号码表单输入控件 343 搜索词输入表单控件 343 HTML5文本框表单控件的 有效属性 343 10.14 HTML5的datalist元素 344 10.15 HTML5的slider控件和spinner 控件 346 slider表单输入控件 346 spinner表单输入控件 347 HTML5和渐进式增强 347 10.16 HTML5日历和颜色池控件 348 日历输入表单控件 348 颜色池表单控件 349 10.17 HTML5表单练习 350 动手实作10.6 350 复习和练习 352 复习题 352 动手练习 353 聚焦网页设计 353 Pacific Trails Resort案例分析 353 JavaJam Coffee House案例分析 357 第11章 媒体和交互性基础 361 11.1 插件、容器和codec 362 辅助应用程序和插件 362 11.2 配置音频和视频 364 访问音频或视频文件 364 动手实作11.1 364 多媒体和浏览器兼容问题 365 11.3 Flash和HTML5 embed元素 366 embed元素 366 动手实作11.2 367 11.4 HTML5 audio和source元素 368 audio元素 368 source元素 368 动手实作11.3 369 11.5 HTML5 video和source元素 370 video元素 370 source元素 370 11.6 练习HTML5视频 372 动手实作11.4 372 11.7 iframe元素 374 动手实作11.5 375 11.8 CSS3的transform属性 376 CSS3旋转变换 376 CSS3伸缩变换 377 动手实作11.6 377 11.9 CSS3 transition属性 378 动手实作11.7 378 11.10 练习CSS过渡 380 动手实作11.8 380 11.11 CSS下拉菜单 382 动手实作11.9 382 11.12 JavaScript和jQuery 384 JavaScript 384 jQuery 385 11.13 HTML5 API 386 地理位置 386 Web存储 386 离线Web应用程序 386 用canvas元素绘图 387 复习和练习 388 复习题 388 动手练习 388 聚焦网页设计 389 Pacific Trails Resort案例分析 389 JavaJam Coffee House案例分析 391 第12章 Web发布基础 393 12.1 注册域名 394 选择域名 394 注册域名 395 12.2 选择Web主机 396 Web主机的类型 396 选择虚拟主机 396 12.3 用FTP发布 399 FTP应用程序 399 用FTP连接 399 使用FTP 399 12.4 提交到搜索引擎 401 搜索引擎的组成 401 在搜索引擎中列出你的网站 402 12.5 搜索引擎优化 403 链接 404 图片和多媒体 404 有效代码 404 有价值的内容 404 12.6 无障碍访问测试 405 通用设计和无障碍访问 405 Web无障碍访问标准 405 测试无障碍设计相容性 406 12.7 可用性测试 407 进行可用性测试 407 动手实作12.1 408 复习和练习 409 复习题 409 动手练习 410 聚焦网页设计 410 Pacific Trails Resort案例分析 411 JavaJam Coffee House案例分析 411 附录A 复习和练习答案 413 附录B HTML5速查表 414 附录C CSS速查表 418 附录D XHTML速查表 422 附录E 对比XHTML和HTML5 425 附录F WCAG 2.0快速参考 433 附录G Web安全调色板 435