本书按照工业和信息化部“Web前端开发（初级）”证书考试大纲要求编写，分上下两篇。上篇Web前端开发技术，共13章，第1章介绍Web基础知识，第2章介绍HTML基础知识，第3章介绍CSS基础，第4～6章介绍JavaScript语言（包括语法、对象模型、事件处理等），第7～9章主要介绍HTML5新增标签和属性以及新增的表单控件类型等知识，第10、11章介绍CSS3新增的选择器种类和样式属性，第12章介绍jQuery基础知识，第13章介绍了几种常见的jQuery效果；下篇包含4个实操工作任务，分别涉及Web前端技术中的HTML、CSS、JavaScript、jQuery。另外，本书上篇各章节还附有习题。

本书层次清晰、内容丰富、技术实用，代码遵循Web标准，适合作为高等职业院校、应用型本科计算机应用技术、计算机网络技术、电子信息技术等相关专业的Web前端开发、网页设计与制作等课程的教材，也可作为广大Web前端开发者或社会人士学习Web前端开发技术的参考用书。

本书配有微课视频，读者扫描书中二维码即可观看学习；本书还配有教学资源包，包括电子课件、源代码等，需要的教师可登录www.cmpedu.com免费注册，审核通过后下载，或联系编辑索取（微信：13261377872；电话：010-88379739）。

前言

上篇  Web前端开发技术

第1章   Web基础知识2

1.1  Web的由来2

1.1.1  什么是Web2

1.1.2  Internet在我国的发展3

1.2  Web的基本概念3

1.2.1  WWW3

1.2.2  Website3

1.2.3  URL3

1.2.4  Web标准5

1.2.5  Web浏览器5

1.2.6  Web服务器5

1.3  Web开发技术6

1.4  本章小结6

1.5  本章习题6

第2章   HTML基础知识7

2.1  HTML概述7

2.1.1  标记语言7

2.1.2  从HTML到XHTML7

2.1.3  HTML文档（网页）的基本结构8

2.1.4  HTML的基本组成8

2.1.5  几个常用的HTML开发编辑工具9

2.2  HTML的全局属性9

2.2.1  HTML的全局标准属性（公共属性）9

2.2.2  HTML的全局事件属性9

2.3  HTML的标签与元素11

2.3.1  HTML的主要结构标签11

2.3.2  HTML的无语义标签<span>和<div>12

2.3.3  HTML的标题字标签与线条标签12

2.3.4  HTML的段落标签与换行标签13

2.3.5  HTML的注释元素14

2.3.6  HTML的格式化元素15

2.3.7  HTML的图片元素17

2.3.8  HTML的超链接元素18

2.3.9  HTML的列表元素20

2.3.10  HTML的表格元素21

2.3.11  HTML的表单元素22

2.3.12  HTML的框架元素27

2.3.13  浮动框架<iframe>31

2.4  HTML的预留字符32

2.5  本章小结32

2.6  本章习题33

第3章   CSS基础35

3.1  CSS概述35

3.1.1  什么是CSS35

3.1.2  CSS的历史36

3.1.3  CSS样式的使用方式36

3.1.4  CSS的两个特性37

3.2  CSS的基本语法38

3.2.1  样式单的格式38

3.2.2  CSS的注释38

3.3  CSS的选择器39

3.3.1  标签选择器（元素选择器）39

3.3.2  通用选择器（通配符选择器）39

3.3.3  属性选择器（带条件的标签选择器）39

3.3.4  派生选择器/上下文选择器39

3.3.5  id选择器41

3.3.6  类选择器42

3.3.7  伪类选择器42

3.3.8  伪元素选择器43

3.4  基本样式属性44

3.4.1  CSS背景属性44

3.4.2  CSS文本属性45

3.4.3  CSS尺寸属性50

3.4.4  CSS列表属性51

3.4.5  CSS表格属性51

3.4.6  CSS内容属性（content）52

3.5  CSS盒模型53

3.5.1  CSS外边距属性（margin）53

3.5.2  CSS边框属性（border）53

3.5.3  CSS内边距属性（padding）54

3.5.4  CSS轮廓属性（outline）55

3.6  CSS布局属性56

3.6.1  CSS浮动属性56

3.6.2  CSS定位属性（position）57

3.6.3  DIV的空间位置（z-index）59

3.7  本章小结62

3.8  本章习题63

第4章   JavaScript语言基础65

4.1  JavaScript的历史66

4.1.1  JavaScript的诞生66

4.1.2  ECMAScript的版本66

4.2  JavaScript的基础知识66

4.2.1  JavaScript的特点66

4.2.2  JavaScript的语法68

4.2.3  JavaScript的关键字68

4.2.4  JavaScript的变量68

4.2.5  JavaScript的数据类型70

4.2.6  运算符及运算优先级70

4.3  分支和循环程序结构71

4.3.1  JavaScript的分支程序结构71

4.3.2  JavaScript的循环（重复）程序结构73

4.4  数组74

4.4.1  数组定义75

4.4.2  数组操作75

4.4.3  二维数组78

4.5  字符串操作79

4.5.1  字符串连接79

4.5.2  字符串搜索79

4.5.3  字符串截取81

4.5.4  字符串替换和切割81

4.6  正则表达式82

4.6.1  正则表达式的组成82

4.6.2  正则表达式所用的方法86

4.7  对象86

4.7.1  对象的声明86

4.7.2  对象的属性87

4.7.3  对象的方法88

4.7.4  对象的遍历89

4.7.5  JavaScript中对象与数组的区别89

4.8  函数91

4.8.1  函数的声明91

4.8.2  函数的返回值92

4.8.3  函数的调用93

4.8.4  闭包函数94

4.8.5  内置函数96

4.9  本章小结99

4.10  本章习题99

第5章   JavaScript对象模型101

5.1  BOM对象101

5.1.1  window对象101

5.1.2  document对象103

5.1.3  location对象104

5.1.4  navigator对象104

5.1.5  screen对象104

5.1.6  history对象105

5.2  BOM的操作105

5.3  DOM对象108

5.3.1  文档对象模型108

5.3.2  DOM对象的构成109

5.4  DOM的操作110

5.4.1  获取节点110

5.4.2  获取/设置元素的属性值111

5.4.3  创建/增添节点112

5.4.4  删除节点113

5.4.5  属性操作114

5.5  本章小结115

5.6  本章习题116

第6章   JavaScript事件处理117

6.1  事件概述117

6.2  窗口事件118

6.2.1  load事件118

6.2.2  resize事件119

6.2.3  scroll事件119

6.2.4  焦点事件120

6.3  鼠标事件121

6.3.1  获取鼠标单击位置121

6.3.2  鼠标指针悬停和离开121

6.3.3  鼠标拖动123

6.4  键盘事件124

6.5  事件冒泡与捕获125

6.6  本章小结127

6.7  本章习题127

第7章   HTML5简介129

7.1  HTML5的出现与优势129

7.1.1  HTML5的出现129

7.1.2  HTML5的优势130

7.2  浏览器对HTML5的兼容性130

7.3  HTML5和HTML4的区别130

7.3.1  DTD的变化130

7.3.2  字符编码的变化131

7.3.3  HTML5语法的变化131

7.4  本章小结131

7.5  本章习题132

第8章   HTML5常用标签和属性133

8.1  HTML5保留的常用标签133

8.1.1  基本标签133

8.1.2  文本格式化标签134

8.1.3  超链接和锚点134

8.1.4  列表相关标签134

8.1.5  表格相关标签135

8.2  HTML5新增的常用标签及绘图操作135

8.2.1  文档结构标签135

8.2.2  文本格式化标签136

8.2.3  页面增强标签136

8.2.4  多媒体标签137

8.2.5  绘图操作138

8.3  HTML5新增的通用属性143

8.3.1  contenteditable属性143

8.3.2  designMode属性143

8.3.3  hidden属性143

8.3.4  spellcheck属性144

8.4  HTML5废弃的标签和属性145

8.4.1  HTML5废弃的标签145

8.4.2  HTML5废弃的属性145

8.5  本章小结145

8.6  本章习题146

第9章   HTML5表单相关标签和属性147

9.1  HTML5原有的表单标签147

9.2  HTML5表单的新增标签及功能148

9.2.1  <input>标签新增功能类型148

9.2.2  HTML5新增的表单标签<output>155

9.3  HTML5表单控件新增的属性155

9.4  本章小结158

9.5  本章习题158

第10章   CSS3新增选择器160

10.1  CSS3简介160

10.2  相邻兄弟选择器及兄弟选择器160

10.2.1  相邻兄弟选择器160

10.2.2  兄弟选择器161

10.3  新增的属性选择器及其应用161

10.3.1  属性选择器161

10.3.2  属性选择器的应用162

10.4  新增的伪类选择器及其应用163

10.4.1  伪类选择器163

10.4.2  伪类选择器的应用163

10.5  新增的伪元素选择器及其应用164

10.5.1  伪元素选择器164

10.5.2  伪元素选择器的应用164

10.6  本章小结165

10.7  本章习题165

第11章   CSS3新增属性166

11.1  CSS3新增的背景属性166

11.2  CSS3新增的字体文本相关属性171

11.2.1  CSS3新增的使用服务器字体的属性171

11.2.2  CSS3新增的文本属性172

11.3  CSS3新增的盒模型属性174

11.3.1  圆角边框border-radius174

11.3.2  box-shadow（DIV阴影效果）174

11.3.3  resize属性175

11.3.4  outline-offset属性175

11.4  CSS3新增的变形动画属性176

11.4.1  CSS3的变形属性176

11.4.2  CSS3的3D变形属性177

11.4.3  CSS3的过渡属性180

11.4.4  CSS3的动画属性184

11.5  CSS3新增的多列属性185

11.6  本章小结187

11.7  本章习题187

第12章   jQuery基础188

12.1  jQuery框架概述188

12.1.1  jQuery简介188

12.1.2  jQuery的优势189

12.1.3  jQuery的安装189

12.1.4  jQuery的语法189

12.2  jQuery选择器190

12.2.1  jQuery的常用选择器190

12.2.2  属性选择器的用法191

12.2.3  位置选择器的用法191

12.2.4  后代选择器的用法192

12.2.5  子代选择器的用法192

12.2.6  选择器对象的方法193

12.3  jQuery中的DOM操作195

12.4  jQuery事件197

12.4.1  事件绑定197

12.4.2  鼠标事件198

12.4.3  键盘事件198

12.4.4  表单事件199

12.4.5  窗口事件200

12.4.6  事件冒泡200

12.4.7  事件解除201

12.5  本章小结203

12.6  本章习题203

第13章   jQuery效果204

13.1  jQuery容器适应204

13.1.1  获取元素的宽和高204

13.1.2  获取浏览器窗口当前显示区域的宽和高205

13.2  jQuery标签操作206

13.2.1  标签内容操作206

13.2.2  标签属性操作207

13.2.3  图片轮换效果207

13.2.4  标签样式操作209

13.2.5  选项卡效果209

13.3  jQuery动画210

13.3.1  隐藏和显示210

13.3.2  遮罩层211

13.3.3  淡入和淡出212

13.3.4  动画效果滑动213

13.3.5  页面右下角弹窗214

13.3.6  自定义动画方法215

13.3.7  鼠标指针位置获取216

13.3.8  两级联动217

13.4  jQuery弹窗案例218

13.5  图片左右滑动案例220

13.5.1  图片左右滑动分析220

13.5.2  图片左右滑动效果的代码实现220

13.6  本章小结222

13.7  本章习题222

下篇  实操工作任务

任务1   利用HTML制作一个信息浏览页面224

一、目标与任务224

二、教学进度226

三、课程总结228

任务2   利用CSS美化一个商品信息页面229

一、目标与任务229

二、教学进度231

三、课程总结233

任务3   利用JavaScript设计一个简易网页计算器235

一、目标与任务235

二、教学进度236

三、课程总结238

任务4   利用jQuery设计一个基本的信息管理页面240

一、目标与任务240

二、教学进度242

三、课程总结244

参考文献 246