《Web前端开发精品课 HTML CSS JavaScript基础教程》配套彩图,源代码,PPT

编辑推荐

初学优选　入门经典 针对前端新手全新打造，一本书搞定 HTML、CSS、JavaScript · 精品呈现　通俗易懂 语言轻松幽默，讲解一针见血，从全新角度讲透前端开发核心技术 · 五位一体　全面服务 在线教程 在线问答 面试练习 源码素材 课件 PPT（获取方式请加本书封底群）

内容简介

本书紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了如何使用HTML、CSS、JavaScrip 以及前端框架进行网站建设和网页设计。从“内功”到“招式”，全书贯穿了不同行业的多种实例，各实例均经过精心设计，操作步骤清晰简明，技术分析深入浅出，能够帮助读者沉浸在真实的开发状态中。这样，无论以后是面对公司的面试，还是真实的工作需求，读者都能够跨过“所学”与“所用”之间的鸿沟。此外，本书还精心配备了PPT 电子课件，便于老师课堂教学和学生把握知识要点。

作者简介

莫振杰，绿叶学习网（http://www.lvyestudy.com）站长，利用该网站用于分享自己在前后端开发中的一些经验，并且制作相关前后端开发的在线教程。这些在线教程在互联网引起广泛关注，极大受到网友推崇。本人编写过大量原创在线教程和《Web前端开发精品课》系列图书，广受网友称赞与推崇。 《Web前端开发精品课——HTML与CSS基础教程》 《Web前端开发精品课——HTML与CSS进阶教程》 《Web前端开发精品课——JavaScript基础教程》 《Web前端开发精品课——HTML5 Canvas开发详解》

目录

• 第一部分　HTML基础
• 第01章　HTML简介
• 1.1　前端技术简介 2
• 1.1.1　从“网页制作”到“前端开发” 2
• 1.1.2　从“前端开发”到“后端开发” 3
• 1.1.3　学习路线 5
• 1.2　什么是HTML 5
• 1.3　教程介绍 6
• 1.3.1　教程简介 6
• 1.3.2　初学者比较关心的问题7
• 第02章　开发工具
• 2.1　开发工具 8
• 2.2　使用Hbuilder 9
• 第03章　基本标签
• 3.1　HTML结构 11
• 3.2　head标签 12
• 3.2.1　title标签 13
• 3.2.2　meta标签 13
• 3.2.3　style标签 15
• 3.2.4　script标签 15
• 3.2.5　link标签 16
• 3.2.6　base标签 16
• 3.3　body标签 16
• 3.4　HTML注释 17
• 3.5　练习题 18
• 第04章　文本
• 4.1　文本简介 19
• 4.1.1　页面组成元素 19
• 4.1.2　HTML文本 20
• 4.2　标题标签 21
• 4.3　段落标签 22
• 4.3.1　段落标签：
• 22
• 4.3.2　换行标签：
• 23
• 4.4　文本标签 25
• 4.4.1　粗体标签 25
• 4.4.2　斜体标签 26
• 4.4.3　上标标签 26
• 4.4.4　下标标签 27
• 4.4.5　中划线标签 27
• 4.4.6　下划线标签 28
• 4.4.7　大字号标签和小字号标签 28
• 4.5　水平线标签 29
• 4.6　div标签 30
• 4.7　自闭合标签 31
• 4.8　块元素和行内元素 32
• 4.8.1　块元素 33
• 4.8.2　行内元素 34
• 4.9　特殊符号 35
• 4.9.1　网页中的“空格” 35
• 4.9.2　网页中的“特殊符号” 36
• 4.10　练习题 38
• 第05章　列表
• 5.1　列表简介 39
• 5.2　有序列表 40
• 5.2.1　有序列表简介 40
• 5.2.2　type属性 41
• 5.3　无序列表 42
• 5.3.1　无序列表简介 42
• 5.3.2　type属性 43
• 5.3.3　深入无序列表 44
• 5.4　定义列表 46
• 5.5　HTML语义化 47
• 5.6　练习题 48
• 第06章　表格
• 6.1　表格简介 49
• 6.2　基本结构 49
• 6.3　完整结构 51
• 6.3.1　表格标题：caption 51
• 6.3.2　表头单元格：th 52
• 6.4　语义化 54
• 6.5　合并行：rowspan 56
• 6.6　合并列：colspan 57
• 6.7　练习题 58
• 第07章　图片
• 7.1　图片标签 59
• 7.1.1　src属性 59
• 7.1.2　alt属性和title属性 60
• 7.2　图片路径 62
• 7.2.1　page1.html引用图片 62
• 7.2.2　page2.html引用图片 63
• 7.3　图片格式 64
• 7.3.1　位图 64
• 7.3.2　矢量图 66
• 7.4　练习题 67
• 第08章　超链接
• 8.1　超链接简介 68
• 8.1.1　a标签 69
• 8.1.2　target属性 70
• 8.2　内部链接 70
• 8.3　锚点链接 72
• 8.4　练习题 74
• 第09章　表单
• 9.1　表单简介 75
• 9.1.1　表单是什么75
• 9.1.2　表单标签 76
• 9.2　form标签 76
• 9.2.1　form标签简介 76
• 9.2.2　form标签属性 77
• 9.3　input标签 78
• 9.4　单行文本框 79
• 9.4.1　单行文本框简介 79
• 9.4.2　单行文本框属性 79
• 9.5　密码文本框 81
• 9.5.1　密码文本框简介 81
• 9.5.2　密码文本框属性 82
• 9.6　单选框 83
• 9.6.1　单选框简介 83
• 9.6.2　忽略点 84
• 9.7　复选框 86
• 9.8　按钮 87
• 9.8.1　普通按钮button 88
• 9.8.2　提交按钮submit 89
• 9.8.3　重置按钮reset 89
• 9.8.4　button标签 91
• 9.9　文件上传 91
• 9.10　多行文本框 92
• 9.11　下拉列表 93
• 9.11.1　下拉列表简介 93
• 9.11.2　select标签属性 94
• 9.11.3　option标签属性 95
• 9.12　练习题 97
• 第10章 　框架
• 10.1　iframe标签 99
• 10.2　练习题 100
• 第二部分　CSS基础
• 第11章　CSS简介
• 11.1　CSS简介 102
• 11.1.1　CSS是什么 102
• 11.1.2　CSS和CSS3 102
• 11.2　教程简介 103
• 11.3　CSS引入方式 103
• 11.3.1　外部样式表 103
• 11.3.2　内部样式表 104
• 11.3.3　行内样式表 105
• 11.4　练习题 106
• 第12章　CSS选择器
• 12.1　元素的id和class 107
• 12.1.1　id属性 107
• 12.1.2　class属性 108
• 12.2　选择器是什么 108
• 12.3　CSS选择器 109
• 12.3.1　元素选择器 110
• 12.3.2　id选择器 110
• 12.3.3　class选择器 111
• 12.3.4　后代选择器 113
• 12.3.5　群组选择器 114
• 12.4　练习题 116
• 第13章　字体样式
• 13.1　字体样式简介 118
• 13.2　字体类型（font-family）119
• 13.3　字体大小（font-size）120
• 13.3.1　px是什么 120
• 13.3.2　采用px为单位 121
• 13.4　字体粗细（font-weight）122
• 13.5　字体风格（font-style）123
• 13.6　字体颜色（color）125
• 13.6.1　关键字 125
• 13.6.2　16进制RGB值 125
• 13.7　CSS注释 126
• 13.8　练习题 128
• 第14章　文本样式
• 14.1　文本样式简介 129
• 14.2　首行缩进（text-indent）129
• 14.3　水平对齐（text-align）130
• 14.4　文本修饰（text-decoration）131
• 14.4.1　text-decoration属性 131
• 14.4.2　三种划线的用途分析 133
• 14.5　大小写（text-transform）134
• 14.6　行高（line-height）135
• 14.7　间距（letter-spacing和word-spacing）136
• 14.7.1　字间距 136
• 14.7.2　词间距 136
• 14.8　练习题 137
• 第15章　边框样式
• 15.1　边框样式简介 139
• 15.2　整体样式 140
• 15.2.1　边框属性 140
• 15.2.2　简写形式 142
• 15.3　局部样式 142
• 15.4　练习题 145
• 第16章　列表样式
• 16.1　列表项符号（list-style-type）146
• 16.1.1　定义列表项符号 146
• 16.1.2　去除列表项符号 148
• 16.2　列表项图片（list-style-image）149
• 16.3　练习题 150
• 第17章　表格样式
• 17.1　表格标题位置（caption-side）151
• 17.2　表格边框合并（border-collapse）152
• 17.3　表格边框间距（border-spacing）154
• 17.4　练习题 155
• 第18章　图片样式
• 18.1　图片大小 156
• 18.2　图片边框 157
• 18.3　图片对齐 158
• 18.3.1　水平对齐 158
• 18.3.2　垂直对齐 159
• 18.4　文字环绕——初识float 162
• 18.5　练习题 163
• 第19章　背景样式
• 19.1　背景样式简介 164
• 19.2　背景颜色（background-color）164
• 19.3　背景图片样式（background-image）166
• 19.4　背景图片重复（background-repeat）167
• 19.5　背景图片位置（background-position）169
• 19.5.1　像素值 169
• 19.5.2　关键字 170
• 19.6　背景图片固定（background-attachment）172
• 19.7　练习题 173
• 第20章　超链接样式
• 20.1　超链接伪类 174
• 20.1.1　超链接伪类简介 174
• 20.1.2　深入了解超链接伪类 175
• 20.2　深入了解:hover 177
• 20.3　鼠标样式 178
• 20.3.1　浏览器鼠标样式 178
• 20.3.2　自定义鼠标样式 180
• 20.4　练习题 181
• 第21章　盒子模型
• 21.1　CSS盒子模型 182
• 21.2　宽和高（width和height）184
• 21.3　边框（border）187
• 21.4　内边距（padding）188
• 21.4.1　padding局部样式 188
• 21.4.2　padding简写形式 189
• 21.5　外边距（margin）191
• 21.5.1　margin局部样式191
• 21.5.2　margin简写形式 194
• 21.5.3　浏览器审查元素 195
• 21.6　练习题 196
• 第22章　浮动布局
• 22.1　文档流简介 197
• 22.1.1　正常文档流 197
• 22.1.2　脱离文档流 198
• 22.2　浮动 200
• 22.3　清除浮动 202
• 22.4　练习题 204
• 第23章　定位布局
• 23.1　定位布局简介 205
• 23.2　固定定位：fixed 206
• 23.3　相对定位：relative 207
• 23.4　绝对定位：absolute 209
• 23.5　静态定位：static 211
• 23.6　练习题 211
• 第三部分　JavaScript基础
• 第24章　JavaScript简介
• 24.1　JavaScript是什么214
• 24.1.1　JavaScript简介 214
• 24.1.2　教程介绍 215
• 24.2　JavaScript开发工具 216
• 24.3　JavaScript引入方式 217
• 24.3.1　外部JavaScript 218
• 24.3.2　内部JavaScript 219
• 24.3.3　元素属性JavaScript 220
• 24.4　一个简单的JavaScript程序 221
• 24.5　练习题 222
• 第25章　语法基础
• 25.1　语法简介 223
• 25.2　变量与常量 224
• 25.2.1　变量 225
• 25.2.2　常量 229
• 25.3　数据类型 229
• 25.3.1　数字 229
• 25.3.2　字符串 230
• 25.3.3　布尔值 232
• 25.3.4　未定义值 233
• 25.3.5　空值 234
• 25.4　运算符 234
• 25.4.1　算术运算符 235
• 25.4.2　赋值运算符 239
• 25.4.3　比较运算符 240
• 25.4.4　逻辑运算符 241
• 25.4.5　条件运算符 244
• 25.5　表达式与语句 245
• 25.6　类型转换 245
• 25.6.1　“字符串”转换为“数字” 245
• 25.6.2　“数字”转换为“字符串” 248
• 25.7　转义字符 249
• 25.8　注释 251
• 25.8.1　单行注释 251
• 25.8.2　多行注释 252
• 25.9　练习题 253
• 第26章　流程控制
• 26.1　流程控制简介 255
• 26.1.1　顺序结构 255
• 26.1.2　选择结构 256
• 26.1.3　循环结构 257
• 26.2　选择结构：if 257
• 26.2.1　单向选择：if… 257
• 26.2.2　双向选择：if…else… 259
• 26.2.3　多向选择：if…else if…else… 260
• 26.2.4　if语句的嵌套 262
• 26.3　选择结构：switch 264
• 26.4　循环结构：while 267
• 26.5　循环结构：do…while 270
• 26.6　循环结构：for 271
• 26.7　判断整数或小数 274
• 26.8　找出“水仙花数” 275
• 26.9　练习题 276
• 第27章　初识函数
• 27.1　函数是什么？ 278
• 27.2　函数的定义 280
• 27.2.1　没有返回值的函数 280
• 27.2.2　有返回值的函数 282
• 27.2.3　全局变量与局部变量 283
• 27.3　函数的调用 285
• 27.3.1　直接调用 286
• 27.3.2　在表达式中调用 286
• 27.3.3　在超链接中调用 287
• 27.3.4　在事件中调用 288
• 27.4　嵌套函数 289
• 27.5　内置函数 290
• 27.6　判断某一年是否闰年 291
• 27.7　求出任意五个数最大值 292
• 27.8　练习题 292
• 第28章　字符串对象
• 28.1　内置对象简介 294
• 28.2　获取字符串长度 295
• 28.3　大小写转换 296
• 28.4　获取某一个字符 297
• 28.5　截取字符串 298
• 28.6　替换字符串 300
• 28.7　分割字符串 302
• 28.8　检索字符串的位置 304
• 28.9　统计某一个字符的个数 306
• 28.10　统计字符串中有多少个数字307
• 28.11　练习题 308
• 第29章　数组对象
• 29.1　数组是什么 309
• 29.2　数组的创建 310
• 29.3　数组的获取 310
• 29.4　数组的赋值 311
• 29.5　获取数组长度 312
• 29.6　截取数组某部分 315
• 29.7　为数组添加元素 316
• 29.7.1　在数组开头添加元素：unshift() 316
• 29.7.2　在数组结尾添加元素：push() 318
• 29.8　删除数组元素 319
• 29.8.1　删除数组中第一个元素：shift() 319
• 29.8.2　删除数组最后一个元素：pop() 320
• 29.9　数组大小比较 ：sort()322
• 29.10　数组颠倒顺序：reverse()323
• 29.11　将数组元素连接成字符串：join()323
• 29.12　数组与字符串的转换操作 326
• 29.13　计算面积与体积，返回一个数组 326
• 29.14　练习题 327
• 第30章　时间对象
• 30.1　日期对象简介 329
• 30.2　操作年、月、日 331
• 30.2.1　获取年、月、日 331
• 30.2.2　设置年、月、日 333
• 30.3　操作时、分、秒 334
• 30.3.1　获取时、分、秒 334
• 30.3.2　设置时、分、秒 335
• 30.4　获取星期几 336
• 30.5　练习题 338
• 第31章　数学对象
• 31.1　数学对象简介 339
• 31.2　Math对象的属性 339
• 31.3　Math对象的方法 341
• 31.4　最大值与最小值 341
• 31.5　取整运算 342
• 31.5.1　向下取整：floor() 342
• 31.5.2　向上取整：ceil() 343
• 31.6　三角函数 344
• 31.7　生成随机数 346
• 31.7.1　随机生成某个范围内的“任意数” 346
• 31.7.2　随机数生成某个范围内的“整数” 347
• 31.8　生成随机验证码 347
• 31.9　生成随机颜色值 348
• 31.10　练习题 349
• 第32章　DOM基础
• 32.1　核心技术简介 350
• 32.2　DOM是什么 351
• 32.2.1　DOM对象 351
• 32.2.2　DOM结构 351
• 32.3　节点类型 352
• 32.4　获取元素 353
• 32.4.1　getElementById() 353
• 32.4.2　getElementsByTagName 355
• 32.4.3　getElementsByClassName() 359
• 32.4.4　querySelector()和querySelectorAll() 360
• 32.4.5　getElementsByName() 363
• 32.4.6　document.title和document.body 364
• 32.5　创建元素 365
• 32.6　插入元素 370
• 32.6.1　appendChild() 370
• 32.6.2　insertBefore() 372
• 32.7　删除元素 373
• 32.8　复制元素 376
• 32.9　替换元素 377
• 32.10　练习题 378
• 第33章　DOM进阶
• 33.1　HTML属性操作（对象属性） 380
• 33.1.1　获取HTML属性值 380
• 33.1.2　设置HTML属性值 386
• 33.2　HTML属性操作（对象方法） 388
• 33.2.1　getAttribute() 388
• 33.2.2　setAttribute() 390
• 33.2.3　removeAttribute() 391
• 33.2.4　hasAttribute() 393
• 33.3　CSS属性操作 394
• 33.3.1　获取CSS属性值 394
• 33.3.2　设置CSS属性值 396
• 33.3.3　最后一个问题 401
• 33.4　DOM遍历 404
• 33.4.1　查找父元素 404
• 33.4.2　查找子元素 406
• 33.4.3　查找兄弟元素 410
• 33.5　innerHTML和innerText 411
• 33.6　练习题 414
• 第34章　 事件基础
• 34.1　事件是什么 415
• 34.2　事件调用方式 416
• 34.2.1　在script标签中调用 416
• 34.2.2　在元素中调用事件 417
• 34.3　鼠标事件 418
• 34.3.1　鼠标单击 419
• 34.3.2　鼠标移入和鼠标移出 421
• 34.3.3　鼠标按下和鼠标松开 422
• 34.4　键盘事件 423
• 34.5　表单事件 425
• 34.5.1　onfocus和onblur 425
• 34.5.2　onselect 427
• 34.5.3　onchange 429
• 34.6　编辑事件 432
• 34.6.1　oncopy 432
• 34.6.2　onselectstart 433
• 34.6.3　oncontextmenu 434
• 34.7　页面事件 435
• 34.7.1　onload1 435
• 34.7.2　onbeforeunload 437
• 34.8　练习题 438
• 第35章　事件进阶
• 35.1　事件监听器 439
• 35.1.1　事件处理器 439
• 35.1.2　事件监听器 440
• 35.2　event对象 447
• 35.2.1　type 448
• 35.2.2　keyCode 448
• 35.3　this 451
• 35.4　练习题 454
• 第36章　window对象
• 36.1　window对象简介 455
• 36.2　窗口操作 457
• 36.2.1　打开窗口 457
• 36.2.2　关闭窗口 462
• 36.3　对话框 464
• 36.3.1　alert() 464
• 36.3.2　confirm() 465
• 36.3.3　prompt() 466
• 36.4　定时器 467
• 36.4.1　setTimeout()和clearTimeout() 468
• 36.4.2　setInterval()和clearInterval() 472
• 36.5　location对象 476
• 36.5.1　window.location.href 476
• 36.5.2　window.location.search 477
• 13.5.3　window.location.hash 478
• 36.6　navigator对象 479
• 36.7　练习题 481
• 第37章　document对象
• 37.1　document对象简介 482
• 37.2　document对象属性 482
• 37.2.1　document.URL 483
• 37.2.2　document.referrer 484
• 37.3　document对象方法 484
• 37.3.1　document.write() 485
• 37.3.2　document.writeln() 485
• 37.4　练习题 487
• 后记