本书写给Web前端开发人员,尤其适合初学者。它从最基础的语法规则开始,采用逐步构建的学习方法,一步一步深入、系统地阐述了Web前端开发的三大核心技术HTML、CSS、JavaScript。内容编排结构合理,由浅入深,循序渐进地引导读者快速入门,并能有效提高初级及以上读者的实际应用水平。本书从初学者的角度出发去审视和阐述知识,力求与初学者思维相近,心灵相通;同时又尽量以生动、系统的方式去总结知识,像在做学习笔记一样亲切,希望带给读者轻松、愉悦的学习体验。相信学完本书后,你不仅能牢固地掌握前端开发基本核心技术,为进一步深入学习打下坚实的基础,更能体会一些知识的学习方法,在快乐中成长!
样章试读
目录
- 目录
第一部分 HTML
第1章 Web前端开发技术综述 3
1.1 Web概述 4
1.1.1 Web的起源 4
1.1.2 Web的工作原理 4
1.1.3 从网页制作到前端开发 5
1.1.4 前端技术 6
1.1.5 后端技术 7
1.1.6 从网页设计到全栈设计 7
1.2 Web前端开发技术 8
1.2.1 HTML 9
1.2.2 CSS 9
1.2.3 JavaScript 9
1.3 Web前端开发工具 9
1.3.1 VS Code 10
1.3.2 Dreamweaver 15
1.3.3 Atom 16
1.3.4 Sublime Text 16
1.4 浏览器工具 16
1.4.1 Chrome 17
1.4.2 Firefox 17
1.4.3 Chrome与Firefox的比较 18
1.5 本章总结 18
1.6 最佳实践 18
第2章 HTML基础 19
2.1 HTML标签 20
2.2 HTML自闭合标签 21
2.3 HTML文档结构 21
2.3.1 <!DOCTYPE>标签 22
2.3.2 <head>标签 23
2.3.3 <body>标签 26
2.3.4 <html>标签 26
2.4 编写第一个网页 26
2.4.1 使用VS Code编辑器 26
2.4.2 使用Dreamweaver编辑器 27
2.4.3 使用Atom编辑器 27
2.4.4 使用Sublime Text编辑器 28
2.5 HTML编写规范 28
2.6 本章总结 29
2.7 最佳实践 30
第3章 文本和段落 31
3.1 文本和文本格式标签 32
3.1.1 标题标签:<title> 32
3.1.2 HTML代码编辑中的空格和换行 32
3.1.3 文本标签 33
3.1.4 字体标签:<font> 34
3.2 段落和段落格式化标签 35
3.2.1 段落标签:<p> 35
3.2.2 换行标签:<br>、分隔线标签:<hr> 36
3.2.3 内容居中标签:<center>、缩进标签:<blockquote> 37
3.2.4 预格式化标签:<pre> 38
3.3 网页中的特殊字符 39
3.4本章总结 40
3.5最佳实践 40
第4章 列表 41
4.1 列表概述 42
4.2 有序列表(ordered list) 42
4.3 无序列表(unordered list) 43
4.4 定义列表(description list) 46
4.5 列表嵌套 46
4.6 本章总结 48
4.7 最佳实践 48
第5章 超链接 49
5.1 超文本和超链接 50
5.2 <a>标签 50
5.2.1 <a>标签简介 51
5.2.2 <a>标签的href属性 51
5.2.3 <a>标签的title属性 54
5.2.4 <a>标签的target属性 54
5.3 常用超链接应用 55
5.3.1 下载文件超链接 55
5.3.2 图像超链接 57
5.3.3 锚点 58
5.3.4 电子邮件超链接 59
5.4 本章总结 61
5.5 最佳实践 61
第6章 图像 63
6.1 图形与图像 64
6.2 矢量图和位图 64
6.3 网页中图像的格式 64
6.3.1 GIF 65
6.3.2 JPEG 65
6.3.3 PNG 66
6.3.4 SVG 66
6.4 图像标签<img> 66
6.4.1 src属性、alt属性、title属性 67
6.4.2 width和height属性 68
6.4.3 align属性、hspace属性、vspace属性 70
6.5 本章总结 71
6.6 最佳实践 72
第7章 表格 73
7.1 表格的简介 74
7.2 表格相关的标签 74
7.2.1 基本的表格结构 74
7.2.2 复杂的表格结构 75
7.3 <table>标签 78
7.4 <tr>标签 80
7.5 <td>标签 80
7.5.1 单元格的对齐:align属性、valign属性 80
7.5.2 单元格的合并:rowspan属性和colspan属性 81
7.5.3 单元格的背景:bgcolor属性和background属性 83
7.6 表格的层 83
7.7 表格的应用 84
7.7.1 无边框表格 84
7.7.2 1px边框的表格 84
7.7.3 表格的嵌套 85
7.7.4 利用表格进行布局 86
7.8 本章总结 87
7.9 最佳实践 87
第8章 表单 89
8.1 表单简介 90
8.2 表单标签:<form> 90
8.2.1 <form>标签使用简介 90
8.2.2 <form>标签的常用属性 90
8.3 <input>标签简介 92
8.4 文本框与密码文本框 92
8.4.1 文本框:type="text" 92
8.4.2 密码文本框:type="password" 93
8.5 标签、单选按钮、复选框 94
8.5.1 标签:<label> 94
8.5.2 单选按钮:type="radio" 94
8.5.3 复选框:type="checkbox" 95
8.6 表单按钮 95
8.6.1 普通按钮:type="button" 95
8.6.2 提交按钮:type="submit" 95
8.6.3 重置按钮:type="reset" 96
8.7 图像域、隐藏域、文件域、文本域 96
8.7.1 图像域:type="image" 96
8.7.2 隐藏域:type="hidden" 97
8.7.3 文件域:type="file" 97
8.7.4 文本域:<textarea> 98
8.8 下拉列表标签:<select> 98
8.8.1 <select>标签的常用属性 99
8.8.2 选项标签:<option> 99
8.8.3 下拉列表使用示例 100
8.9 本章总结 101
8.10 最佳实践 101
第二部分 CSS
第9章 CSS基础 105
9.1 CSS概念 106
9.1.1 CSS简介 106
9.1.2 CSS的特点 106
9.2 CSS的基本语法 107
9.3 在网页中引用CSS的三种方式 108
9.3.1 内联样式(Inline Style) 108
9.3.2 内部样式(Internal Style) 109
9.3.3 外部样式(External Style) 109
9.4 本章总结 111
9.5 最佳实践 112
第10章 CSS的选择器 113
10.1 基本选择器 114
10.1.1 标签选择器 114
10.1.2 类别选择器(class选择器) 115
10.1.3 ID选择器 115
10.2 复合选择器 117
10.2.1 交集选择器 117
10.2.2 群组选择器 118
10.2.3 后代选择器 119
10.3 其他选择器 121
10.3.1 通用选择器 121
10.3.2 伪类选择器 121
10.3.3 属性选择器 122
10.4 本章总结 123
10.5 最佳实践 123
第11章 CSS的继承和层叠特性 125
11.1 CSS的继承特性 126
11.2 CSS的层叠特性 127
11.3 CSS的优先级与继承冲突 128
11.3.1 CSS的优先级 128
11.3.2 CSS的继承冲突 129
11.3.3 选择器的优先权计算特性 130
11.4 本章总结 131
11.5 最佳实践 131
第12章 CSS的基本样式 133
12.1 CSS的颜色 134
12.1.1 颜色名 134
12.1.2 RGB颜色 135
12.1.3 RGBA颜色 136
12.1.4 十六进制色 136
12.1.5 HSL和HSLA颜色 137
12.1.6 拾取颜色 137
12.2 CSS的单位 137
12.2.1 绝对单位 138
12.2.2 相对单位 138
12.3 CSS的宽和高 140
12.4 本章总结 142
12.5 最佳实践 142
第13章 字体样式 143
13.1 字体类型:font-family 144
13.2 字体风格:font-style 146
13.3 字体粗细:font-weight 146
13.4 字体大小:font-size 147
13.5 字体属性简写:font 148
13.6 本章总结 149
13.7 最佳实践 149
第14章 文本样式 151
14.1 文本颜色:color 152
14.2 文本方向:direction 153
14.3 行高:line-height 153
14.4 字符间距:letter-spacing 155
14.5 文本对齐:text-align 156
14.6 文本修饰:text-decoration 157
14.7 文本缩进:text-indent 158
14.8 字母大小写:text-transform 159
14.9 空白的处理方式:white-space 160
14.10 单词间距:word-spacing 162
14.11 文本的强制换行:word-break 162
14.12 本章总结 163
14.13 最佳实践 163
第15章 背景样式 165
15.1 背景颜色:background-color 166
15.2 背景图像:background-image 167
15.3 背景重复:background-repeat 168
15.4 背景定位:background-position 169
15.5 背景关联:background-attatchment 170
15.6 背景简写:background 172
15.7 背景图片大小:background-size 172
15.8 本章总结 174
15.9 最佳实践 174
第16章 超链接样式 175
16.1 超链接标签:<a> 176
16.2 超链接伪类 176
16.2.1 如何定义超链接伪类 176
16.2.2 深入了解超链接伪类 177
16.3 去除超链接的下划线 178
16.4 设置不同风格的超链接 178
16.5 本章总结 180
16.6 最佳实战 180
第17章 列表样式 181
17.1 列表项符号:list-style-type 182
17.2 列表项图像:list-style-image 183
17.3 列表项符号位置:list-style-position 184
17.4 列表样式简写属性:list-style 186
17.5 本章总结 186
17.6 最佳实践 186
第18章 表格样式 187
18.1 表格边框:border 188
18.2 表格边框的合并:border-collapse 189
18.3 表格边框的间距:border-spacing 190
18.4 表格标题的位置:caption-side 191
18.5 本章总结 191
18.6 最佳实践 191
第19章 盒子模型 193
19.1 盒子模型概述 194
19.1.1 什么是盒子模型 194
19.1.2 Web开发辅助工具 194
19.2 盒子模型的主要属性 198
19.2.1 边框:border 199
19.2.2 内边距:padding 201
19.2.3 外边距:margin 202
19.3 盒子到底有多大 203
19.4 盒子在标准流下的定位原则 206
19.4.1 块级(block)元素与行内(inline)元素 206
19.4.2 div元素 207
19.4.3 块级元素与行内元素的margin区别 208
19.4.4 元素的显示属性:display 209
19.5 本章总结 211
19.6 最佳实践 211
第20章 浮动与定位 213
20.1 浮动:float 214
20.2 清除浮动:clear 217
20.3 定位:position 220
20.3.1 静态定位:static 221
20.3.2 相对定位:relative 221
20.3.3 固定定位:fixed 222
20.3.4 绝对定位:absolute 222
20.4 层叠顺序:z-index 223
20.5 本章总结 224
20.6 最佳实践 224
第21章 DIV+CSS布局设计 225
21.1 网页常用布局方式 226
21.1.1 固定布局 226
21.1.2 流式布局 228
21.1.3 弹性布局 230
21.1.4 混合布局 231
21.2 导航菜单设计 231
21.2.1 简单纵向菜单:使用a元素 231
21.2.2 简单纵向菜单:使用li+a元素 232
21.2.3 横竖自由转换的菜单 234
21.3 下拉菜单(级联菜单) 234
21.4 本章总结 238
21.5 最佳实践 238
第三部分 JavaScript
第22章 JavaScript的简介及用法 241
22.1 JavaScript简介 242
22.2 JavaScript的组成 244
22.3 第一个JavaScript程序 244
22.4 在网页中引用JavaScript的三种方式 245
22.4.1 行内式JS 245
22.4.2 内部式JS 246
22.4.3 外部式JS 247
22.5 JavaScript代码在HTML中的位置问题 249
22.6 JavaScript的基本语法 251
22.7 JavaScript代码编写规范 252
22.7.1 变量、函数命名规范 252
22.7.2 空格、缩进、注释的使用规则 253
22.8 本章总结 253
22.9 最佳实践 253
第23章 JavaScript的变量与数据类型 255
23.1 JavaScript的变量(variable) 256
23.2 JavaScript的数据类型 257
23.2.1 数值 258
23.2.2 字符串 259
23.2.3 布尔型 260
23.2.4 未定义的数据类型:undefined 261
23.2.5 空类型:null 261
23.3 JavaScript的类型转换 261
23.3.1 任意类型转换为字符串:toString() 261
23.3.2 字符串转换为数值:parseInt()、parseFloat() 262
23.3.3 强制类型转换 263
23.4 本章总结 264
23.5 最佳实践 264
第24章 JavaScript对象 265
24.1 JavaScript对象的定义与访问 266
24.1.1 定义对象 266
24.1.2 访问对象 267
24.2 JavaScript常用对象 268
24.2.1 Date对象 268
24.2.2 Array对象 271
24.2.3 Math对象 274
24.2.4 Number对象 275
24.2.5 String对象 276
24.2.6 Boolean对象 279
24.3 本章总结 279
24.4 最佳实践 280
第25章 JavaScript函数 281
25.1 JavaScript函数概述 282
25.2 函数的定义、调用、参数和作用域 282
25.2.1 函数的定义 282
25.2.2 函数的调用 283
25.2.3 函数的参数 284
25.2.4 函数变量作用域 284
25.3 常用的系统函数 285
25.3.1 eval(string) 285
25.3.2 escape(string)、unescape(string) 286
25.3.3 setTimeout(code,mllisec) 287
25.3.4 setInterval(code,mllisec) 288
25.3.5 其他常用函数 290
25.3 本章总结 290
25.4 最佳实践 291
第26章 DOM和BOM 293
26.1 DOM简介 294
26.2 HTML的DOM 294
26.3 DOM的修改 297
26.4 BOM对象 299
26.4.1 window对象 299
26.4.2 navigator对象 301
26.4.3 history对象 303
26.4.4 screen对象 303
26.4.5 location对象 304
26.5 本章总结 305
26.6 最佳实践 305
第27章 JavaScript事件 307
27.1 JavaScript事件概述 308
27.1.1 事件与事件句柄 308
27.1.2 事件处理(绑定) 308
27.2 窗口事件 310
27.3 鼠标事件 313
27.4 键盘事件 315
27.5 表单事件 318
27.5.1 Focus、Blur事件 318
27.5.2 Change事件 319
27.6 本章总结 321
27.7 最佳实践 321
附录 323
附录一 Web前端工程师知识体系示意图 323
附录二 CSS常用的选择器 324
主要参考文献 326
后记 327