细说网页制作

通过本书的学习，能快速上手网站前端开发。为了使HTML5语言能被读者更好地掌握和应用，同时作为“跟兄弟连学HTML5系列教程”的第一本入门级图书，本书对HTML语言的知识点进行了详细的阐述和分析，包括HTML5和CSS3的语法、各种页面布局方法、流行的前端框架Bootstrap等内容。不仅有通俗易懂的语法讲解，也用贴切的小案例实验，使读者能轻松掌握新知识，且可以快速上手前端技术操作。本书适合对前端技术开发感兴趣的初学者阅读，也可以作为从事前端技术工作的开发人员的参考书，或作为大学生学习HTML5的教材。同时，本书也为读者之后学习同系列其他图书奠定基础。

目录

第1章 介绍HTML5 1
1.1 了解HTML5的主流应用 1
1.1.1 表单的强大 2
1.1.2 响应式页面布局 2
1.1.3 与用户交互的特效 4
1.1.4 微网站的制作 5
1.1.5 基于HTML5的移动APP开发 6
1.1.6 HTML5游戏 7
1.1.7 多媒体的应用 7
1.2 什么是HTML5 8
1.2.1 HTML5和HTML的关系 8
1.2.2 HTML和CSS的关系 10
1.2.3 HTML5和CSS3的关系 11
1.2.4 HTML5和JavaScript的关系 11
1.3 HTML5的靠山 12
1.3.1 W3C是什么 12
1.3.2 IETF是什么 13
1.3.3 RFC是什么 14
1.3.4 WHATWG是什么 14
1.3.5 Web的新标准 14
1.4 HTML5的曲折发展过程 15
1.4.1 HTML5的诞生 15
1.4.2 浏览器之间的大战 16
1.4.3 HTML5技术的应用现状 18
1.4.4 HTML5平台的兴起 18
1.4.5 HTML5行业的发展预测 20
1.5 HTML5的学习线路图 21
1.5.1 第一阶段——学习网页制作 23
1.5.2 第二阶段——编写用户交互功能 24
1.5.3 第三阶段——成为前端工程师 25
本章小结 26
本章习题 26
第2章 HTML5的基本语法 28
2.1 课前准备 28
2.1.1 了解Web 29
2.1.2 了解HTML 30
2.1.3 了解HTML运行原理 30
2.1.4 如何选择开发工具 31
2.1.5 认识浏览器中的开发者工具 32
2.1.6 现在学习HTML5的方式 34
2.1.7 简单HTML实例制作 35
2.2 HTML语言的语法 36
2.2.1 HTML标签和元素 36
2.2.2 HTML语法不区分字母大小写 37
2.2.3 HTML标签属性 37
2.2.4 HTML颜色值的设置 37
2.2.5 HTML文档注释 38
2.2.6 HTML代码格式 38
2.2.7 HTML字符实体 38
2.3 HTML文档的主体结构 39
2.3.1 HTML文档类型的新定义方式 40
2.3.2 HTML文档的主体标签 41
2.4 HTML文档头部标签＜head＞ 41
2.4.1 ＜title＞标签 42
2.4.2 ＜base＞标签 42
2.4.3 ＜link＞标签 43
2.4.4 ＜meta＞标签 43
2.5 HTML文档主体标签＜body＞ 44
2.6 HTML5做到了与之前版本的兼容 45
2.6.1 可以省略标记的元素 45
2.6.2 具有boolean值的属性 46
2.6.3 引号的使用 46
2.7 设置IE 9以下版本浏览器支持HTML5 46
本章小结 47
本章习题 47
第3章 HTML5文字版面和编辑标签 49
3.1 HTML基础标签 49
3.1.1 标题标签＜h1＞～＜h6＞ 50
3.1.2 换行标签
和段落标签＜p＞ 51
3.1.3 水平分隔线标签＜hr＞ 51
3.1.4 格式标签 51
3.1.5 文本标签 53
3.2 使用HTML表格 55
3.3 HTML框架结构 57
本章小结 60
本章习题 61
第4章 多媒体应用 62
4.1 创建图像和链接 62
4.1.1 URL概述 63
4.1.2 插入图片 63
4.1.3 建立锚点和超链接 64
4.2 HTML图像地图 66
4.2.1 什么是图像地图 66
4.2.2 图像地图如何制作 66
4.2.3 实现图像地图 67
4.3 新增多媒体播放元素 68
本章小结 71
本章习题 71
第5章 HTML5表单 74
5.1 HTML表单中的get和post方法 74
5.1.1 get方法 75
5.1.2 post方法 76
5.1.3 HTML表单中get和post的区别 76

5.2 HTML表单设计 77
5.2.1 表单标签＜form＞ 77
5.2.2 文本域和密码域 78
5.2.3 提交、重置和普通按钮 78
5.2.4 单选按钮和复选框 79
5.2.5 隐藏域 79
5.2.6 多行文本域 79
5.2.7 菜单下拉列表域 79
5.2.8 综合实例 80
5.3 HTML5新增表单元素 82
5.3.1 ＜datalist＞元素 82
5.3.2 ＜keygen＞元素 83
5.3.3 ＜output＞元素 84
5.4 多样的输入类型 85
5.4.1 email 85
5.4.2 url 86
5.4.3 number 87
5.4.4 range 87
5.4.5 date picker 88
5.4.6 color 89
5.5 HTML占新增的表单属性 91
5.5.1 autocomplete属性 92
5.5.2 autofocus属性 93
5.5.3 form属性 94
5.5.4 form overrides表单重写属性 95
5.5.5 height和width属性 95
5.5.6 list属性 96
5.5.7 min、max和step属性 96
5.5.8 multiple属性 97
5.5.9 novalidate属性 97
5.5.10 pattern属性 98
5.5.11 placeholder属性 98
5.5.12 required属性 99
5.6 HTML5表单提交综合实例 100
本章小结 103
本章习题 103
第6章 CSS3揭秘 105
6.1 CSS简介 105
6.2 CSS规则的组成 107
6.2.1 CSS注释 108
6.2.2 长度单位 108
6.2.3 颜色单位和URL值 109
6.3 在HTML文档中放置CSS的几种方式 110
6.3.1 内联样式表 110
6.3.2 嵌入一张样式表 110
6.3.3 链接到一张外部的样式表 111
6.4 CSS普通选择器 111
6.4.1 HTML选择器 111
6.4.2 类选择器 112
6.4.3 id选择器 112
6.4.4 关联选择器 113
6.4.5 组合选择器 113
6.4.6 伪元素选择器 113
6.5 CSS常见的样式属性和值 114
6.5.1 字体属性 114
6.5.2 颜色属性 115
6.5.3 背景属性 115
6.5.4 文本属性 116
6.5.5 边框属性 117
6.5.6 鼠标光标属性 118
6.5.7 列表属性 119
6.5.8 CSS综合实例 120
6.6 CSS3概述 122
6.6.1 CSS3在选择器上的支持 122
6.6.2 CSS3在样式上的支持 122
6.6.3 CSS3对于动画的支持 123
6.6.4 在实际开发中该如何使用CSS3 123
6.7 CSS复杂选择器 123
6.7.1 基本选择器 123
6.7.2 多元素的组合选择器 124
6.7.3 属性选择器 124
6.7.4 结构性伪类选择器 125
6.8 CSS3属性 129
6.8.1 使用CSS3属性前的准备 130
6.8.2 边框属性 130
6.8.3 背景属性 132
6.8.4 文本属性 133
6.8.5 用户界面属性 133
6.8.6 动画属性 134
6.8.7 多列布局属性 134
6.8.8 渐变属性 135
6.8.9 透明属性 136
6.8.10 旋转属性 136
6.8.11 服务器端字体属性 136
本章小结 137
本章习题 137
第7章 CSS3属性特效 140
7.1 新增颜色模式 140
7.2 文字 142
7.2.1 文字阴影 143
7.2.2 文字描边 146
7.2.3 文字排版 150
7.2.4 定义省略文本的处理方式 152
7.3 自定义文字 153
7.4 弹性盒模型 156
7.5 盒模型阴影 164
7.6 倒影 167
7.7 CSS3分栏布局 173
7.7.1 列个数和列宽度 173
7.7.2 列之间的缝隙间隔宽度 175
7.7.3 分栏间隔符 176
7.8 圆角 177
7.8.1 border-radius属性 177
7.8.2 单个圆角的设置 180
7.9 边框 181
7.9.1 边框图片border-image 182
7.9.2 自适应的圆角效果 186
7.10 渐变 188
7.10.1 CSS3渐变介绍 188
7.10.2 线性渐变 189
7.10.3 线性渐变实例 189
7.10.4 径向渐变 194
7.10.5 径向渐变实例 194
7.11 CSS3背景 198
7.11.1 多背景 198
7.11.2 background-size 200
7.11.3 background-origin 202
7.11.4 background-clip 203
7.12 遮罩 204
7.13 transition过渡 206
7.14 2D变换 207
7.14.1 translate()方法 208
7.14.2 rotate()方法 209
7.14.3 scale()方法 212
7.14.4 skew()方法 213
7.15 3D变换 215
7.15.1 transform-style 216
7.15.2 perspective景深 216
7.15.3 perspective-origin景深基点 218
7.15.4 3D位移 219
7.15.5 3D旋转 222
7.15.6 3D缩放 223
7.15.7 3D盒子 225
7.16 animation动画 226
7.16.1 关键帧keyframes 227
7.16.2 animation动画属性 229
本章小结 229
本章习题 230
第8章 DIV+CSS网页标准化布局 232
8.1 DIV+CSS页面布局的优势 232
8.2 “无意义”的HTML标签＜div＞和＜span＞ 233
8.3 W3C盒子模型 234
8.4 和页面布局有关的CSS属性 236
8.5 盒子区块框的定位 238
8.5.1 相对定位 238
8.5.2 绝对定位 239
8.6 使用盒子模型的浮动布局 240
8.6.1 设置浮动 240
8.6.2 行框和清理 242
8.7 DIV+CSS的兼容性问题 244
8.7.1 不同浏览器解释盒子模型的差异 245
8.7.2 设置浏览器去遵循W3C标准 246
8.8 使用盒子模型设计页面布局 247
8.8.1 居中设计 247
8.8.2 设置两列浮动的布局 248
8.8.3 设置三列浮动的布局 250
8.8.4 设置多列浮动的布局 251
8.9 DIV+CSS网站首页布局示例 252
8.9.1 HTML文件的设计 253
8.9.2 CSS文件的设计 254
本章小结 256
本章习题 256
第9章 响应式布局 259
9.1 响应式布局的优缺点 259
9.2 如何设计响应式布局 260
9.3 响应式布局实例 261
9.4 Media Queries模块的使用方法 263
9.4.1 语法结构及用法 264
9.4.2 可用的设备类型 265
9.4.3 可用的设备特性参数 266
9.5 在移动设备上设置原始大小显示 268
9.6 响应式网站的内容设计 268
9.6.1 响应式图片显示内容设计 269
9.6.2 响应式文字显示内容设计 269
9.7 响应式网站的设计流程 270
本章小结 271
本章习题 272
第10章 认识和使用Sass 273
10.1 初识Sass 273
10.1.1 Sass是什么 274
10.1.2 Sass的作用 274
10.1.3 Sass的安装 277
10.1.4 Sass的使用和编译 279
10.2 Sass基本语法与使用实例 283
10.2.1 Sass基本语法 283
10.2.2 Sass使用实例 288
本章小结 292
本章习题 292
第11章 栅格布局 294
11.1 栅格 294
11.2 盒子模型 296
11.3 栅格实例 297
11.4 Bootstrap框架 298
11.4.1 Bootstrap现状 299
11.4.2 栅格系统 299
本章小结 313
本章习题 313
第12章 Bootstrap的快速入门 315
12.1 Bootstrap的内容概述与整体理解 315
12.1.1 全局CSS样式 316
12.1.2 组件 317
12.1.3 JavaScript插件 319
12.2 Bootstrap搭建环境 320
12.3 Bootstrap全局CSS样式 321
12.3.1 全局CSS样式的栅格系统和响应式布局 322
12.3.2 全局CSS样式的表单 324
12.4 Bootstrap组件 324
12.5 Bootstrap的JavaScript插件 326
本章小结 328
本章习题 328

第13章 Bootstrap的实战 330
13.1 实战概述 330
13.2 实战需求 330
13.3 实战准备 333
13.3.1 Sass配置 334
13.3.2 HTML的基本模块 335
13.4 顶部工具栏 336
13.4.1 Bootstrap的字体图标组件 336
13.4.2 Bootstrap的下拉菜单组件 337
13.4.3 Bootstrap的输入框组组件 339
13.4.4 Bootstrap的导航组件 341
13.4.5 顶部工具栏PC端内容填充 342
13.4.6 顶部工具栏PC端样式优化 345
13.4.7 实战顶部工具栏移动端 352
13.5 页面导航条 353
13.5.1 Bootstrap的导航条组件 354
13.5.2 实战页面导航条——内容填充 356
13.5.3 实战页面导航条——样式优化 358
13.6 banner区 360
13.6.1 Bootstrap的JavaScript轮播图插件 360
13.6.2 实战banner区 362
13.7 推荐位 364
13.7.1 Bootstrap的缩略图组件 364
13.7.2 Bootstrap的面板组件 365
13.7.3 实战第一种风格的推荐位——内容填充 366
13.7.4 实战第一种风格的推荐位——样式优化 369
13.7.5 实战第二种风格的推荐位——内容填充 372
13.7.6 实战第二种风格的推荐位——样式优化 375
13.8 脚部 379
13.9 用户登录 380
13.9.1 Bootstrap的表单全局CSS样式 380
13.9.2 Bootstrap的模态框JavaScript插件 382
13.9.3 实战用户登录 384
本章小结 386
本章习题 387
附录A 388