HTML5+CSS3+JavaScript前端开发基础PDF电子书下载

第1章 HTML5＋CSS3学习准备 1

1.1 学习准备 1

1.1.1 选择合适的浏览器 1

1.1.2 选择合适的开发工具 2

1.2 认识HTML5 2

1.2.1 HTML5语法 2

1.2.2 新增与废除的元素和属性 3

1.2.3 全局属性 8

1.2.4 HTML5中新增的API 11

1.3 本章小结 11

第2章 HTML元素、属性与结构 12

2.1 HTML元素 12

2.1.1 HTML元素概述 12

2.1.2 HTML元素的语法 13

2.1.3 HTML元素的嵌套 13

2.2 HTML5属性 14

2.2.1 属性的基本使用方法 14

2.2.2 HTML5全局属性 15

2.3 新增的主体结构元素 20

2.3.1 article元素 20

2.3.2 section元素 21

2.3.3 nav元素 22

2.3.4 aside元素 22

2.3.5 time元素 24

2.4 新增的非主体结构元素 25

2.4.1 header元素 25

2.4.2 hgroup元素 25

2.4.3 footer元素 26

2.4.4 address元素 26

2.5 HTML5结构 27

2.5.1 文档结构大纲 27

2.5.2 内容区块的编排方式 27

2.5.3 标题分级 28

2.6 本章小结 28

第3章 JavaScript基础知识 29

3.1 JavaScript简介 29

3.1.1 什么是JavaScript 29

3.1.2 JavaScript的特点 29

3.1.3 JavaScript的组成 30

3.1.4 JavaScript基本结构 31

3.1.5 JavaScript执行原理 31

3.2 在网页中引入JavaScript的方式 31

3.2.1 使用〈script〉标签 31

3.2.2 使用外部JavaScript文件 32

3.2.3 直接在HTML标签中使用 33

3.3 数据类型和变量 33

3.3.1 变量 33

3.3.2 Number 33

3.3.3 字符串 35

3.3.4 布尔值 36

3.3.5 比较运算符 36

3.3.6 数组 36

3.3.7 对象 37

3.4 条件判断 38

3.4.1 if语句 38

3.4.2 if…else语句 38

3.4.3 if…else if…else语句 39

3.4.4 switch语句 39

3.5 循环语句 40

3.5.1 for循环 40

3.5.2 for…in循环 41

3.5.3 while循环 41

3.5.4 do…while循环 42

3.6 函数定义和调用 43

3.6.1 定义函数 43

3.6.2 调用函数 43

3.7 本章小结 44

第4章 ES6基础知识 45

4.1 准备测试环境 45

4.2 声明变量let和const 48

4.2.1 let命令 48

4.2.2 块级作用域 49

4.2.3 先声明后使用 50

4.2.4 重复变量名 50

4.2.5 实例：面试题 51

4.3 模板字符串 52

4.3.1 字符串格式化 52

4.3.2 多行字符串 52

4.3.3 运算与函数调用 53

4.3.4 includes（）、startsWith（）和endsWith（） 54

4.3.5 repeat（） 55

4.4 箭头函数 55

4.5 解构赋值 56

4.5.1 对象解构赋值 57

4.5.2 数组解构赋值 57

4.5.3 字符串解构赋值 58

4.6 Set和Map数据结构 58

4.6.1 Set数据结构 58

4.6.2 Set的基本操作 59

4.6.3 扩展运算符 61

4.6.4 Map数据结构 62

4.6.5 Map遍历方法 63

4.7 Promise对象 64

4.7.1 Promise简介 64

4.7.2 创建Promise对象 65

4.7.3 then（） 65

4.7.4 catch（） 66

4.7.5 Promise.all（） 66

4.7.6 Promise.race（） 67

4.7.7 Promise.resolve（） 67

4.7.8 Promise.reject（） 68

4.8 for…of循环 68

4.9 Generator函数 69

4.10 async函数 70

4.11 class 71

4.12 实例：下馆子吃饭 72

4.13 本章小结 73

第5章 HTML5音频和视频 74

5.1 Web视频的标准与格式 74

5.2 video/audio元素概述 75

5.3 检测浏览器是否支持HTML5视频 75

5.4 实例：在HTML5中显示视频/音频 77

5.5 video元素与audio元素详解 78

5.5.1 video/audio属性 78

5.5.2 video/audio方法 79

5.5.3 video/audio事件 81

5.6 本章小结 83

第6章 HTML5 Canvas 84

6.1 canvas基础入门 84

6.1.1 什么是canvas 84

6.1.2 实例：在HTML5页面中添加canvas元素 84

6.1.3 实例：绘制一个蓝色矩形 85

6.2 绘制基本线条 86

6.2.1 实例：绘制直线 87

6.2.2 实例：绘制二次曲线 87

6.2.3 实例：绘制贝塞尔曲线 89

6.2.4 实例：绘制圆弧 89

6.3 绘制简单形状 90

6.3.1 实例：绘制圆形 90

6.3.2 实例：绘制三角形 91

6.3.3 实例：绘制圆角矩形 92

6.3.4 实例：绘制自定义图形 94

6.4 绘制渐变 95

6.4.1 实例：绘制线性渐变 95

6.4.2 实例：绘制径向渐变 96

6.5 图形组合 97

6.5.1 实例：绘制阴影 97

6.5.2 实例：透明效果 99

6.6 使用图像 100

6.6.1 实例：插入图像 100

6.6.2 实例：平铺图像 101

6.6.3 实例：裁剪图像 102

6.6.4 实例：像素级操作 103

6.7 绘制文字 104

6.7.1 实例：控制文本的字体、大小和样式 104

6.7.2 实例：控制文本的颜色 106

6.7.3 实例：描绘文本的边缘 107

6.7.4 实例：设置文本对齐方式 108

6.8 图像数据与URL 109

6.8.1 存储图像数据 109

6.8.2 将彩色转为灰度 110

6.8.3 图像数据URL 111

6.8.4 将绘制的图形保存为图像文件 111

6.9 用canvas实现动画效果 112

6.9.1 实例：清除canvas的内容 113

6.9.2 实例：创建动画 113

6.9.3 动画的开始与停止 115

6.10 实战演练 115

6.11 本章小结 120

第7章 HTML5 SVG 121

7.1 SVG简介 121

7.1.1 什么是SVG 121

7.1.2 SVG有哪些优势 121

7.2 HTML5中的SVG 122

7.2.1 实例：将SVG直接嵌入HTML5页面 122

7.2.2 实例：绘制简单的形状 123

7.2.3 实例：复用内容 124

7.2.4 实例：图形阴影 125

7.2.5 实例：图形渐变 126

7.2.6 实例：绘制自由路径 127

7.3 画布与SVG的比较 129

7.4 本章小结 129

第8章 Forms API 130

8.1 新增的Input输入类型 130

8.1.1 email类型 130

8.1.2 url类型 131

8.1.3 number类型 132

8.1.4 range类型 132

8.1.5 date pickers类型 133

8.1.6 search类型 134

8.1.7 color类型 134

8.2 新增的表单元素 135

8.2.1 datalist元素 135

8.2.2 keygen元素 136

8.2.3 output元素 137

8.3 新增的form属性 137

8.3.1 autocomplete属性 138

8.3.2 novalidate属性 138

8.4 新增的input属性 139

8.4.1 autocomplete属性 139

8.4.2 autofocus属性 139

8.4.3 form属性 139

8.4.4 form overrides属性 139

8.4.5 height和width属性 140

8.4.6 list属性 140

8.4.7 min、max和step属性 140

8.4.8 multiple属性 141

8.4.9 pattern属性 141

8.4.10 placeholder属性 141

8.4.11 required属性 141

8.5 本章小结 142

第9章 File API 143

9.1 Blob对象 143

9.2 File对象与Filelist对象 144

9.3 FileReader对象 145

9.3.1 FileReader对象的方法 145

9.3.2 FileReader对象的事件 146

9.3.3 实例：以二进制方式读取文件 146

9.3.4 实例：以文本方式读取文件 147

9.3.5 实例：以DataURL方式读取文件 148

9.4 FileSystem对象 149

9.4.1 FileSystem对象简介 150

9.4.2 请求文件系统 150

9.4.3 创建文件 152

9.4.4 写入文件 153

9.4.5 向文件中附加数据 154

9.4.6 复制选中的文件 155

9.4.7 删除文件 155

9.4.8 创建目录 156

9.4.9 读取目录内容 156

9.4.10 删除目录 157

9.4.11 复制文件或目录 158

9.4.12 移动文件或目录 159

9.4.13 fiilesystem：网址 159

9.5 本章小结 160

第10章 拖放API与桌面通知API 161

10.1 拖放API（Drag and Drop API） 161

10.1.1 实现拖放的步骤 161

10.1.2 使用DataTransfer对象 162

10.1.3 设置拖放时的视觉效果 162

10.1.4 自定义拖放图标 163

10.1.5 实例：选择图形 163

10.2 桌面通知API（Notifiication API） 166

10.2.1 桌面通知API的必要性 166

10.2.2 桌面通知生成流程 166

10.2.3 实例：桌面通知的两种实现方法 166

10.3 本章小结 168

第11章 本地存储与离线应用 169

11.1 认识Web Storage 169

11.1.1 客户端数据存储的历史与现状 169

11.1.2 Web Storage概述 170

11.1.3 示例：一个Web Storage的简单应用 170

11.2 使用Web Storage 172

11.2.1 检测浏览器的支持 172

11.2.2 存入与读取数据 173

11.2.3 清除数据 174

11.2.4 遍历操作 174

11.2.5 storage事件 174

11.3 离线应用 175

11.3.1 离线应用概述 175

11.3.2 离线资源缓存 175

11.3.3 Cache Mainfest基本用法 176

11.3.4 分析Cache Mainfest文件 177

11.3.5 在线状态监测 177

11.3.6 实例：创建离线应用 177

11.4 本章小结 181

第12章 Communication API 182

12.1 认识Communication API 182

12.1.1 Communication API简介 182

12.1.2 Communication API运行流程 182

12.1.3 Communication API的基本用法 183

12.2 跨文档消息通信详解 183

12.2.1 源安全简介 183

12.2.2 postMessage API基本用法 184

12.2.3 实例：使用postMessage API创建应用 184

12.3 XMLHttpRequest Level 2 186

12.3.1 跨源XMLHttpRequest 186

12.3.2 HTTP请求时限 186

12.3.3 FormData对象 187

12.3.4 上传文件 187

12.3.5 接收二进制数据 188

12.3.6 进度信息 189

12.3.7 实例：创建XMLHttpRequest应用 189

12.4 本章小结 193

第13章 Web Workers API与Web SQL API 194

13.1 Web Workers 194

13.1.1 Web Workers简介 194

13.1.2 实例：Web Workers简单应用 195

13.1.3 Web Workers嵌套 197

13.2 Web SQL 199

13.2.1 Web SQL基本使用 200

13.2.2 数据库的基本应用 200

13.2.3 实例：创建数据库并创建数据表 203

13.2.4 实例：插入数据与获取数据 204

13.3 本章小结 206

第14章 WebSocket API 207

14.1 WebSocket概述 207

14.2 WebSocket服务器 208

14.3 使用WebSocket API 208

14.3.1 浏览器支持情况检测 209

14.3.2 WebSocket API客户端的基本用法 209

14.4 实例：创建HTML5 WebSocket应用程序 210

14.4.1 编写客户端HTML文件 210

14.4.2 添加服务端WebSocket代码 211

14.4.3 添加WebSocket客户端代码 211

14.4.4 最终效果 213

14.5 本章小结 213

第15章 地理位置API 214

15.1 地理位置的定位原理 214

15.1.1 地理位置定位的方式及流程 214

15.1.2 HTML5中如何实现地理位置定位 214

15.2 Geolocation API 215

15.2.1 检测浏览器的支持 215

15.2.2 getCurrentPosition（）方法 215

15.2.3 watchPosition（）方法 218

15.2.4 clearPosition（）方法 219

15.3 实例：在地图中显示地理位置 219

15.4 本章小结 221

第16章 History API 222

16.1 History API概述 222

16.2 为什么要用History API 222

16.3 如何使用History API 223

16.4 实例：浏览历史记录 223

16.5 实例：添加与修改历史记录 225

16.6 本章小结 228

第17章 CSS基础知识 229

17.1 CSS概述 229

17.1.1 CSS简介 229

17.1.2 CSS历史 229

17.1.3 CSS特点 230

17.1.4 CSS与浏览器的关系 230

17.1.5 CSS站点欣赏 230

17.2 基本CSS选择器 231

17.2.1 标记选择器 232

17.2.2 类别选择器 232

17.2.3 ID选择器 235

17.2.4 实例：应用基本选择器 236

17.3 复合选择器 238

17.3.1 “交集”选择器 238

17.3.2 “并集”选择器 239

17.3.3 后代选择器 240

17.3.4 实例：应用复合选择器 241

17.4 CSS继承特性 242

17.4.1 什么是继承 243

17.4.2 CSS属性继承 243

17.4.3 实例：正确使用CSS继承特性 243

17.5 CSS的层叠特性 244

17.6 CSS样式 245

17.6.1 行内样式 245

17.6.2 内部样式 246

17.6.3 外部样式 246

17.6.4 实例：CSS样式的实现方式 247

17.7 CSS优先级 248

17.7.1 id优先级高于class 248

17.7.2 后面的样式覆盖前面的样式 249

17.7.3 使用！important 250

17.7.4 指定的高于继承 250

17.7.5 行内样式高于内部或外部样式 251

17.7.6 实例：灵活运用CSS优先级 252

17.8 CSS盒子模型 254

17.8.1 盒子模型结构 254

17.8.2 边框（border） 255

17.8.3 内边距（padding） 258

17.8.4 外边距（margin） 259

17.8.5 盒子的浮动 260

17.8.6 盒子的定位 262

17.8.7 z-index空间位置 264

17.8.8 盒子的display属性 266

17.8.9 实例：用盒子模型创建网页布局 267

17.9 本章小结 270

第18章 CSS3选择器 271

18.1 属性选择器 271

18.1.1 E[att＝“val”] 271

18.1.2 E[att＾＝“val”] 272

18.1.3 E[att＄＝“val”] 272

18.1.4 E[att＊＝“val”] 272

18.1.5 实例：文本效果 272

18.2 结构性伪类选择器 273

18.2.1 伪类选择器 274

18.2.2 伪元素选择器 274

18.2.3 root选择器 277

18.2.4 not选择器 278

18.2.5 empty选择器 279

18.2.6 target选择器 279

18.2.7 fiirst-child选择器和last-child选择器 280

18.2.8 fiirst-of-type选择器和last-of-type选择器 282

18.2.9 nth-child选择器和nth-last-child选择器 284

18.2.10 nth-of-type选择器和nth-last-of-type选择器 286

18.2.11 循环使用样式 287

18.2.12 only-child选择器和only-of-type选择器 289

18.2.13 实例：定位指定元素 289

18.3 UI元素状态伪类选择器 291

18.3.1 E：hover、E：active和E：focus选择器 291

18.3.2 E：enabled和E：disabled伪类选择器 292

18.3.3 E：read-only和E：read-write伪类选择器 293

18.3.4 E：checked、E：default和E：indeterminate伪类选择器 294

18.3.5 E：：selection伪类选择器 296

18.3.6 实例：用户界面新体验 297

18.4 通用兄弟元素选择器E～F 302

18.5 本章小结 303

第19章 使用CSS选择器插入内容 304

19.1 插入文字 304

19.1.1 使用选择器插入文本 304

19.1.2 插入筛选内容 305

19.1.3 实例：CSS制作目录 306

19.2 插入图像 309

19.2.1 插入图像文件的方法 309

19.2.2 插入图像文件的好处 310

19.2.3 实例：列表图标与推荐标题 310

19.3 插入项目编号 311

19.3.1 插入连续项目编号 311

19.3.2 在项目编号中追加文字 312

19.3.3 设置编号种类 313

19.3.4 插入嵌套编号 314

19.3.5 在字符串两边添加嵌套文字编号 315

19.3.6 实例：导航菜单 316

19.4 本章小结 321

第20章 使用CSS设置文本样式 322

20.1 控制文本样式 322

20.1.1 文本字体和大小 322

20.1.2 文本颜色和粗细 323

20.1.3 斜体文本 323

20.1.4 文本装饰 324

20.1.5 英文字母大小写转换 324

20.1.6 实例：综合应用文本样式 325

20.2 控制段落样式 326

20.2.1 段落水平对齐 326

20.2.2 段落垂直对齐 327

20.2.3 行间距和字间距 330

20.2.4 段落首字下沉 330

20.2.5 实例：段落排版 331

20.3 CSS3中为文本添加阴影——text-shadow属性 332

20.3.1 text-shadow属性的使用方法 332

20.3.2 位移距离 333

20.3.3 阴影的模糊半径 334

20.3.4 阴影的颜色 334

20.3.5 指定多个阴影 335

20.4 CSS3中让文本自动换行——text-break属性 335

20.4.1 依靠浏览器让文本自动换行 335

20.4.2 指定自动换行的处理方法 336

20.5 本章小结 338

第21章 使用CSS设置图片与背景样式 339

21.1 图片样式 339

21.1.1 图片边框设置 339

21.1.2 设置图片位置 341

21.1.3 设置图片缩放 342

21.1.4 实例：图片边框按钮 344

21.2 图片对齐 345

21.2.1 水平对齐设置 345

21.2.2 垂直对齐设置 345

21.2.3 实例：排列的相册 346

21.3 图文混排 347

21.3.1 设置图文混排 348

21.3.2 设置混排间距 349

21.3.3 实例：看图说话 350

21.4 背景颜色 351

21.4.1 设置页面背景颜色 351

21.4.2 设置块背景颜色 352

21.5 背景图片 352

21.5.1 设置页面背景图片 352

21.5.2 重复的背景图片 352

21.5.3 设置背景图片的位置 353

21.5.4 设置背景滚动 353

21.5.5 背景样式的缩写方式 353

21.5.6 实例：创建背景皮肤 354

21.6 本章小结 355

第22章 使用CSS设置列表与表单样式 356

22.1 列表控制 356

22.1.1 列表的类型及使用 356

22.1.2 创建垂直导航条 357

22.1.3 创建水平导航条 359

22.2 使用列表制作实用菜单 359

22.2.1 实例：多级列表菜单 359

22.2.2 实例：会伸缩的列表菜单 363

22.3 表单设计概述 366

22.3.1 表单的设计原则 366

22.3.2 表单应用分类 367

22.3.3 实例：经典表单效果 369

22.4 表单的设计 369

22.4.1 form标签 369

22.4.2 表单元素 370

22.4.3 对表单文本应用样式 373

22.4.4 实例：滑块复选框 374

22.4.5 实例：会员注册页面 375

22.5 本章小结 382

第23章 对超链接和鼠标应用样式 383

23.1 使用CSS设置超链接 383

23.1.1 什么是超链接 383

23.1.2 关于超链接路径 384

23.1.3 超链接属性控制 384

23.1.4 图像映射 385

23.1.5 实例：实现多页面跳转 386

23.2 超链接特效 387

23.2.1 实例：按钮式超链接 387

23.2.2 实例：浮雕式超链接 388

23.3 鼠标特效 389

23.3.1 CSS控制鼠标箭头 389

23.3.2 实例：鼠标变化的超链接 390

23.4 本章小结 391

第24章 CSS中的滤镜 392

24.1 了解CSS滤镜 392

24.1.1 Alpha滤镜 392

24.1.2 Blur滤镜 394

24.1.3 Grayscale滤镜 395

24.1.4 Sepia滤镜 396

24.1.5 Brightness滤镜 397

24.1.6 Hue-rotate滤镜 398

24.1.7 Invert滤镜 399

24.1.8 Saturate滤镜 400

24.1.9 Contrast滤镜 401

24.1.10 Drop-shadow滤镜 402

24.2 本章小结 403

第25章 项目实战案例 404

25.1 项目实战案例一：企业门户网站 404

25.1.1 header元素中的内容 406

25.1.2 aside元素中的内容 409

25.1.3 section元素中的内容 409

25.1.4 footer元素中的内容 413

25.2 项目实战案例二：用户管理 415