Web前端学习笔记 HTML5+CSS3+JavaScriptPDF电子书下载

第1篇 HTML5 1

第1章 HTML5学习概述 1

1.1 认识HTML5 1

1.1.1 HTML的发展历程 1

1.1.2 HTML5与HTML4的区别 2

1.2 学习HTML5前的准备工作 2

1.2.1 常用浏览器介绍 2

1.2.2 常见的HTML5开发软件介绍 3

1.2.3 创建第一个HTML5页面 4

1.3 HTML5的语法与结构 5

1.3.1 HTML5的语法 5

1.3.2 HTML5的文档结构 6

1.4 章节案例：开始我的第一个网页 8

第2章 HTML5常见的块级标签和行级标签 10

2.1 常见的块级标签 10

2.1.1 ＜h1＞＜/h1＞…＜h6＞＜/h6＞：标题标签 10

2.1.2 ＜hr/＞：水平线标签 11

2.1.3 ＜p＞＜/P＞：段落标签 12

2.1.4 ＜br/＞：换行标签 12

2.1.5 ＜blockquote＞＜/blockquote＞：引用标签 13

2.1.6 ＜pre＞＜/pre＞：预格式标签 13

2.1.7 ＜ul＞＜li＞＜/li＞＜/ul＞：无序列表标签 14

2.1.8 ＜ol＞＜li＞＜/li＞＜/ol＞：有序列表标签 15

2.1.9 ＜dl＞＜/dl＞：定义列表标签 17

2.1.10 ＜div＞＜/div＞：分区标签 18

2.2 常见的行级标签 19

2.2.1 ＜img/＞：图片标签 19

2.2.2 ＜a＞＜/a＞：超链接标签 20

2.2.3 其他常用的行级标签 21

2.3 HTML5新增标签简介 22

2.4 章节案例：促销信息网页实现 23

第3章 HTML5表格 25

3.1 HTML5表格简介 25

3.1.1 表格的基本结构 26

3.1.2 表格的定义 26

3.2 表格的基本属性 27

3.2.1 border：表格边框属性 27

3.2.2 width/height：表格（宽度/高度）属性 28

3.2.3 bgcolor：表格背景色属性 28

3.2.4 background：表格背景图属性 28

3.2.5 bordercolor：表格边框颜色属性 29

3.2.6 cellspacing：表格单元格间距属性 29

3.2.7 cellpadding：表格单元格内边距属性 30

3.2.8 align：表格对齐属性 31

3.3 行和列的属性 31

3.3.1 width/height：单元格宽度……高度属性 32

3.3.2 bgcolor：单元格背景色属性 32

3.3.3 align：单元格内容水平对齐属性 33

3.3.4 valign：单元格内容垂直对齐属性 33

3.3.5 colspan/rowspan：表格的跨行与跨列 34

3.4 表格的结构化与直列化 35

3.4.1 表格的结构化 35

3.4.2 表格的直列化 36

3.5 章节案例：完成“特别休假申请单” 37

第4章 HTML5表单 40

4.1 表单简介 40

4.1.1 表单的结构 40

4.1.2 表单的常用属性 41

4.2 input输入框 42

4.2.1 input常用属性 42

4.2.2 text：文本输入框 43

4.2.3 password：密码输入框 44

4.2.4 radio：单选按钮 44

4.2.5 checkbox：复选按钮 44

4.2.6 file：文件上传按钮 45

4.2.7 submit：表单提交按钮 46

4.2.8 reset：重置按钮 46

4.2.9 image：图形提交按钮 47

4.2.10 button：可单击按钮 47

4.3 其他表单元素 47

4.3.1 select下拉选择控件 47

4.3.2 textarea文本域 50

4.3.3 button按钮 50

4.4 HTML5智能表单 51

4.4.1 表单分组 51

4.4.2 表单新增元素及属性 52

4.5 章节案例：用户注册页面实现 57

第2篇 CSS3 60

第5章 CSS基础知识 60

5.1 CSS概述 60

5.1.1 CSS简介 60

5.1.2 CSS语法结构 61

5.1.3 CSS注释 61

5.1.4 行内样式表 62

5.1.5 内部样式表 62

5.1.6 外部样式表 62

5.2 CSS选择器 64

5.2.1 通用选择器 64

5.2.2 标签选择器 64

5.2.3 类选择器 64

5.2.4 id选择器 65

5.2.5 后代选择器与子代选择器 66

5.2.6 交集选择器与并集选择器 66

5.2.7 伪类选择器 67

5.2.8 选择器的命名规则及优先级 67

5.3 章节案例：CSS选择器练习 68

第6章 CSS常用属性 70

6.1 CSS常用文本属性 70

6.1.1 字体、字号与颜色属性 70

6.1.2 文本属性 72

6.2 CSS常用背景属性 76

6.2.1 背景颜色属性 76

6.2.2 背景图像属性 76

6.3 CSS其他常用属性 79

6.3.1 列表常用属性 79

6.3.2 超链接样式属性 79

6.4 章节案例：实现素材图片效果 80

第7章 CSS3新增属性与选择器 82

7.1 CSS3的过渡与变换 82

7.1.1 transition：过渡属性 82

7.1.2 transform：变换属性 84

7.2 CSS3动画 86

7.2.1 CSS3动画的＠keyframes和animation 86

7.2.2 CSS3 animation动画属性 88

7.3 CSS3其他常用属性 90

7.3.1 CSS3渐变效果 90

7.3.2 CSS3多列属性 92

7.4 CSS3新增选择器 93

7.4.1 属性选择器 93

7.4.2 结构伪类选择器 95

7.4.3 状态伪类选择器 96

7.4.4 其他选择器 97

7.5 章节案例：飞机滑翔动画实现 98

第8章 CSS盒模型与浮动定位 101

8.1 盒模型 101

8.1.1 盒模型概述 101

8.1.2 margin：外边距 104

8.1.3 border：边框 107

8.1.4 padding：内边距 109

8.2 盒模型相关属性 110

8.2.1 overflow：内容溢出控制 110

8.2.2 outline：外围线 112

8.2.3 box-shadow：盒子阴影 113

8.2.4 border-radius：边框圆角 113

8.2.5 border-image：图片边框 115

8.3 浮动与清除浮动 116

8.3.1 float：浮动 116

8.3.2 clear：清除浮动 117

8.3.3 子盒子浮动造成父盒子高度塌陷 118

8.4 定位 120

8.4.1 relative：相对定位 120

8.4.2 absolute：绝对定位 121

8.4.3 fixed：固定定位 123

8.4.4 使用定位实现元素的绝对居中 124

8.4.5 z-index 126

8.5 章节案例：网页布局练习 127

第9章 移动开发与响应式 131

9.1 移动开发基础知识 131

9.1.1 媒体设备常用属性 131

9.1.2 像素的基础知识 132

9.1.3 viewport：视口 132

9.2 移动开发常用设置 134

9.2.1 移动开发中常用的头部标签 134

9.2.2 移动开发中常用的CSS设置 135

9.3 网页布局方式介绍 136

9.3.1 网页的布局方式 136

9.3.2 响应式布局介绍 137

9.4 媒体查询实现响应式 138

9.4.1 媒体查询的基本语法 138

9.4.2 使用媒体查询的三种方式 139

9.5 章节案例：媒体查询实例练习 139

第10章 CSS3弹性布局 143

10.1 弹性布局简介 143

10.1.1 弹性布局的基本概念 143

10.1.2 使用弹性布局需要注意的问题 143

10.1.3 弹性布局代码示例 144

10.2 作用于容器的属性 145

10.2.1 flex-direction：主轴方向 145

10.2.2 flex-wrap：控制换行 146

10.2.3 flex-flow：缩写形式 146

10.2.4 justify-content：主轴对齐 146

10.2.5 align-items：交叉轴单行对齐 147

10.2.6 align-content：交叉轴多行对齐 147

10.3 作用于项目的属性 148

10.3.1 order：项目排序 148

10.3.2 flex-grow：项目放大比 149

10.3.3 flex-shrink：项目缩小比 149

10.3.4 flex-basis：伸缩基准值 149

10.3.5 flex：缩写形式 150

10.3.6 align-self：自身对齐 150

第3篇 JavaScript 151

第11章 JavaScript基础 151

11.1 JavaScript简介 151

11.1.1 JavaScript概念 151

11.1.2 页面中使用JavaScript的三种方式 152

11.2 JavaScript的变量 152

11.2.1 变量的声明 152

11.2.2 声明变量的注意事项与命名规范 153

11.2.3 变量的数据类型 154

11.3 JavaScript中的变量函数 156

11.3.1 Number：将变量转为数值类型 156

11.3.2 isNaN：检测变量是否为NaN 157

11.3.3 parseInt：将字符串转为整型 157

11.3.4 parseFloat：将字符串转为浮点型 158

11.3.5 typeof：变量类型检测 158

11.4 JavaScript中的输入输出 159

11.4.1 document.write：文档中打印输出 159

11.4.2 alert：浏览器弹窗输出 159

11.4.3 prompt：浏览器弹窗输入 160

11.4.4 confirm：浏览器弹窗确认 160

11.4.5 console.log：浏览器控制台输出 161

11.4.6 JavaScript中的注释 162

11.5 JavaScript的运算符 163

11.5.1 算术运算 163

11.5.2 赋值运算符 164

11.5.3 关系运算与逻辑运算 165

11.5.4 条件运算（多目运算） 166

11.5.5 逗号运算符 167

11.5.6 运算符的优先级 167

11.6 章节案例：判断一个数是否为水仙花数 168

第12章 JavaScript流程控制语句 170

12.1 分支结构 170

12.1.1 简单if结构 170

12.1.2 if-else结构 171

12.1.3 多重if结构 172

12.1.4 嵌套if结构 172

12.1.5 switch-case结构 173

12.2 循环结构 175

12.2.1 循环的基本思路 175

12.2.2 while循环结构 176

12.2.3 do-while循环结构 177

12.2.4 for循环结构 177

12.2.5 循环嵌套 178

12.3 流程控制语句 180

12.3.1 break语句 180

12.3.2 continue语句 180

12.3.3 return语句 181

12.4 章节案例：打印输出一个菱形 182

第13章 JavaScript函数 184

13.1 函数的声明与调用 184

13.1.1 函数的声明 184

13.1.2 函数的调用 185

13.1.3 函数的作用域 186

13.1.4 函数声明和调用的注意事项 187

13.2 匿名函数的声明与调用 188

13.2.1 事件调用匿名函数 188

13.2.2 匿名函数表达式 188

13.2.3 自执行函数 189

13.3 函数中的内置对象 190

13.3.1 arguments对象 190

13.3.2 this关键字 192

13.4 JavaScript中代码的执行顺序 193

13.5 章节案例：编写函数统计任意区间内的质数 194

第14章 BOM与DOM 196

14.1 window对象 196

14.1.1 window对象的属性 196

14.1.2 window对象的常用方法 197

14.2 浏览器对象模型的其他对象 199

14.2.1 screen：屏幕对象 199

14.2.2 location：地址栏对象 200

14.2.3 history：历史记录对象 201

14.2.4 navigator：浏览器配置对象 202

14.3 Core DOM 203

14.3.1 DOM树结构分析 204

14.3.2 操作元素节点 204

14.3.3 操作文本节点 205

14.3.4 操作属性节点 208

14.3.5 JavaScript修改元素样式 209

14.3.6 获取层次节点 212

14.3.7 创建新节点 214

14.3.8 删除/替换节点 217

14.4 HTML DOM 218

14.4.1 HTML DOM操作表格对象 219

14.4.2 HTML DOM操作行对象 220

14.4.3 HTML DOM操作单元格对象 222

14.5 章节案例：实现评论提交展示功能 223

第15章 JavaScript事件 228

15.1 JavaScript的事件 228

15.1.1 鼠标事件 228

15.1.2 键盘事件 229

15.1.3 HTML事件 231

15.1.4 event事件因子 233

15.2 JavaScript的事件模型 234

15.2.1 DOM0事件模型 234

15.2.2 DOM2事件模型 234

15.3 JavaScript的事件流模型 236

15.3.1 事件冒泡 236

15.3.2 事件捕获 238

15.3.3 事件委派 240

15.3.4 阻止事件冒泡 242

15.3.5 阻止默认事件 242

15.4 章节案例：对表格进行修改删除操作 243

第16章 数组和对象 246

16.1 JavaScript的数组 246

16.1.1 数组的概念 246

16.1.2 数组的声明 246

16.1.3 数组的访问 248

16.1.4 数组常用方法 248

16.1.5 二维数组和稀疏数组 255

16.2 JavaScript的内置对象 256

16.2.1 Boolean：逻辑对象 256

16.2.2 Number：数字对象 256

16.2.3 String：字符串对象 258

16.2.4 Date：日期对象 260

16.2.5 Math：算术对象 261

16.3 JavaScript自定义对象 262

16.3.1 对象的概念 262

16.3.2 对象的声明 263

16.3.3 对象的属性与方法 264

16.4 章节案例：编写对象实现班级成绩录入 265

第17章 JavaScript中的正则表达式 268

17.1 正则表达式基础 268

17.1.1 正则表达式概述 268

17.1.2 正则表达式的声明 269

17.2 正则表达式的常用字符 269

17.2.1 正则表达式中的元字符 269

17.2.2 正则表达式中的特殊字符 270

17.3 正则表达式的常用模式 271

17.3.1 g：全局匹配 272

17.3.2 i：忽略大小写匹配 272

17.3.3 m：多行匹配 273

17.4 正则表达式的常用方法 274

17.4.1 test()方法 274

17.4.2 exec()方法 274

17.5 章节案例：使用正则表达式验证用户注册表单 276

第18章 JavaScript面向对象编程 278

18.1 面向对象编程基础 278

18.1.1 面向对象概述 278

18.1.2 类与对象 279

18.1.3 类和对象的关系 279

18.1.4 JavaScript创建类与对象的步骤 279

18.1.5 constructor与instanceof 281

18.1.6 for-in：对象的遍历 281

18.2 成员属性、静态属性与私有属性 282

18.2.1 成员属性与成员方法 282

18.2.2 静态属性与静态方法 282

18.2.3 私有属性与私有方法 283

18.3 this关键字 284

18.3.1 this的指向概述 284

18.3.2 this指向的规律 284

18.3.3 this指向练习 285

18.4 原型与原型链 286

18.4.1 ＿proto＿与prototype 286

18.4.2 原型链 287

18.4.3 原型属性与原型方法 287

18.5 封装 289

18.5.1 封装的基本概念 289

18.5.2 JavaScript模拟实现封装 290

18.6 继承 291

18.6.1 继承的基本概念 291

18.6.2 扩展Object的prototype实现继承 291

18.6.3 使用原型继承 293

18.6.4 使用call和apply实现继承 294

18.7 JavaScript中的闭包 295

18.7.1 闭包的基本概念 296

18.7.2 闭包的作用 296

18.7.3 闭包应用实例 297

18.8 章节案例：定义一个URL信息操作类 298