本书依据《Web前端开发职业技能等级标准（初级）》和部分院校的《Web前端技术课程教学标准》编写，内容涵盖Web页面制作基础、HTML5和CSS3开发基础与应用、JavaScript程序设计和社区新闻网制作实例。以模块化的方式组织内容，同时选取静态网站设计与制作的典型应用作为教学案例。

本书可作为高等职业院校Web前端技术和网页设计与制作课程的教材，也适合作为1+X职业技能等级证书中Web前端开发（初级）的教学及参考用书。

第1章  HTML5基础1

1.1  Web的基本概念1

1.1.1  WWW1

1.1.2  网页浏览器1

1.1.3  Web服务器2

1.1.4  网站2

1.1.5  网页2

1.1.6  URL2

1.1.7  标记语言3

1.1.8  网页标准3

 1.2  HTML5的基本结构和语法规则3

1.2.1  HTML5文档的基本结构3

1.2.2  HTML5的基本语法6

1.2.3  HTML的字符实体和颜色表示8

1.2.4  HTML5开发人员编码规范9

1.3  用记事本编辑HTML文档10

1.4  实训——制作社区网版权信息11

习题112

 第2章  HTML5的块级元素13

 2.1  基本块级元素13

2.1.1  标题元素h1～h613

2.1.2  段落元素p和换行元素br14

2.1.3  水平线元素hr14

2.1.4  注释元素15

2.2  列表元素16

2.2.1  无序列表元素ul16

2.2.2  有序列表元素ol17

2.2.3  自定义列表元素dl18

2.2.4  嵌套列表19

2.3  表格元素table20

2.3.1  基本表格20

2.3.2  合并行和列21

2.3.3  表格数据的分组22

2.3.4  调整列的格式23

2.4  表单24

2.4.1  表单元素form24

2.4.2  输入元素input25

2.4.3  标签元素label27

2.4.4  选择栏元素select28

2.4.5  按钮元素button30

2.4.6  多行文本元素textarea31

2.5  分区元素div32

2.6  缩排元素blockquote33

2.7  实训——制作精选信息板块34

习题235

 第3章  HTML5的行级元素36

3.1  格式化元素36

3.1.1  字体样式元素36

3.1.2  短语元素37

3.2  图像元素img38

3.3  超链接元素a40

3.3.1  a元素40

3.3.2  用图像作为超链接热点40

3.3.3  指向其他页面的链接41

3.3.4  创建链接至书签42

3.3.5  指向下载文件的链接43

3.3.6  指向电子邮件的链接44

3.3.7  JavaScript链接44

3.3.8  空链接44

 3.4  图像热区超链接元素map、area44

3.4.1  用map元素定义图像地图45

3.4.2  img元素与map元素的关联45

3.5  范围元素span46

3.6  多媒体元素47

3.6.1  音频元素audio47

3.6.2  视频元素video47

3.7  用HBuilder X编辑HTML文件48

3.8  实训—制作广告板块49

习题350

 第4章  CSS3基础52

4.1  CSS设计与编写原则52

4.2  在HTML中使用CSS的方法53

4.2.1  行内样式54

4.2.2  内部样式55

4.2.3  链入外部样式文件56

4.2.4  导入外部样式文件58

4.3  CSS的两个主要特性60

4.3.1  层叠60

4.3.2  继承60

4.4  CSS的基本语法62

4.4.1  基本语法62

4.4.2  注意事项62

4.5  CSS的选择器64

4.5.1  元素选择器64

4.5.2  通配符选择器64

4.5.3  属性选择器65

4.5.4  派生选择器67

4.5.5  兄弟选择器70

4.5.6  id选择器71

4.5.7  类选择器72

4.5.8  伪类选择器73

4.5.9  UI元素状态伪类选择器77

4.5.10  结构伪类选择器83

4.5.11  其他伪类选择器88

4.5.12  伪元素选择器89

4.6  属性值的写法和单位94

4.6.1  长度、百分比单位94

4.6.2  色彩单位95

4.7  HTML文档结构与元素类型96

4.7.1  文档结构的基本概念96

4.7.2  元素类型97

4.8  实训——制作内容详情页98

习题499

 第5章  CSS3的属性101

5.1  CSS背景属性101

5.1.1  背景颜色属性background-color101

5.1.2  背景图像属性background-image102

5.1.3  重复背景图像属性background-repeat104

5.1.4  固定背景图像属性background-attachment106

5.1.5  背景图像位置属性background-position106

5.1.6  背景图像大小属性background-size107

5.1.7  背景属性background108

5.1.8  背景覆盖区域属性background-clip109

5.1.9  背景图像起点属性background-origin109

5.1.10  背景渐变属性background-image111

5.2  CSS字体属性114

5.2.1  字体类型属性font-family114

5.2.2  字体尺寸属性font-size115

5.2.3  字体倾斜属性font-style115

5.2.4  小写字体属性font-variant115

5.2.5  字体粗细属性font-weight116

5.2.6  字体简写属性font117

5.2.7  CSS3新增使用服务器字体117

5.3  CSS文本属性118

5.3.1  文本颜色属性color118

5.3.2  文本方向属性direction118

5.3.3  字符间隔属性letter-spacing118

5.3.4  行高属性line-height119

5.3.5  文本水平对齐方式属性text-align119

5.3.6  为文本添加装饰属性text-decoration119

5.3.7  段落首行缩进属性text-indent120

5.3.8  文本的阴影属性text-shadow120

5.3.9  文本的大小写属性text-transform120

5.3.10  元素内部的空白属性white-space121

5.3.11  单词之间的间隔属性word-spacing121

5.3.12  文本的截断效果属性text-overflow121

5.3.13  文本的换行方式属性word-break122

5.3.14  单词断字属性word-wrap122

5.4  CSS尺寸属性123

5.4.1  宽度属性width123

5.4.2  高度属性height124

5.4.3  最小宽度属性min-width124

5.4.4  最大宽度属性max-width125

5.4.5  最小高度属性min-height125

5.4.6  最大高度属性max-height125

5.5  CSS列表属性126

5.5.1  图像作为列表项的标记属性list-style-image126

5.5.2  列表项标记的位置属性list-style-position127

5.5.3  标记的类型属性list-style-type127

5.5.4  列表简写属性list-style128

5.6  CSS表格属性130

5.6.1  合并边框属性border-collapse130

5.6.2  边框间隔属性border-spacing130

5.6.3  标题位置属性caption-side131

5.6.4  单元格无内容显示方式属性empty-cells131

5.6.5  表格设置方式属性table-layout132

5.7  CSS内容属性133

5.8  CSS属性的应用134

5.8.1  设置图像样式134

5.8.2  设置链接137

5.8.3  创建导航菜单139

5.9  实训——制作社区网页面142

5.9.1  制作通知公告目录页面142

5.9.2  制作导航栏144

习题5146

 第6章  CSS3的盒模型148

6.1  CSS盒模型的组成和大小148

6.1.1  盒子的组成148

6.1.2  盒子的大小149

6.1.3  块级元素与行级元素的宽度和高度150

6.2  CSS盒模型的属性151

6.2.1  CSS内边距属性padding151

6.2.2  CSS外边距属性margin153

6.2.3  CSS边框属性border156

6.2.4  圆角边框属性border-radius159

6.2.5  盒模型的阴影属性box-shadow160

6.2.6  边框图像属性border-image-*161

6.2.7  CSS轮廓属性outline164

6.2.8  调整大小属性resize167

6.3  CSS布局属性168

6.3.1  元素的布局方式概述168

6.3.2  CSS浮动属性float170

6.3.3  清除浮动属性clear171

6.3.4  裁剪属性clip-path173

6.3.5  内容溢出时的显示方式属性overflow174

6.3.6  元素显示方式属性display175

6.3.7  元素可见性属性visibility177

6.4  CSS盒子定位属性178

6.4.1  定位位置属性top、right、bottom、left178

6.4.2  定位方式属性position178

6.4.3  层叠顺序属性z-index183

6.5  CSS3多列属性184

6.5.1  列数属性column-count184

6.5.2  列宽属性column-width184

6.5.3  列宽属性column185

6.5.4  列之间的间隔属性column-gap185

6.5.5  是否横跨所有列属性column-span185

6.5.6  列间隔样式属性column-rule-style185

6.5.7  列之间间隔颜色属性column-rule-color186

6.5.8  列之间宽度属性column-rule-width186

6.5.9  列之间间隔所有属性column-rule186

6.6  CSS基本布局样式187

6.6.1  CSS布局类型187

6.6.2  CSS布局样式188

6.7  实训——制作社区网网页190

6.7.1  制作新闻图片页面190

6.7.2  制作热点关注页面191

习题6191

 第7章  JavaScript语法基础194

 7.1  JavaScript概述194

7.2  在HTML文档中使用JavaScript195

7.2.1  在HTML文档中嵌入脚本程序195

7.2.2  链接脚本文件196

7.2.3  在HTML标签内添加脚本197

7.3  数据类型198

7.3.1  数据类型的分类198

7.3.2  基本数据类型198

7.3.3  数据类型的判断200

7.3.4  数据类型的转换201

7.4  标识符、变量和常量203

7.4.1  标识符203

7.4.2  字面常量204

7.4.3  定义变量204

7.4.4  定义常量206

7.5  运算符和表达式206

7.5.1  运算符和表达式的分类207

7.5.2  语句的书写规则208

7.6  流程控制210

7.6.1  顺序结构210

7.6.2  条件选择结构214

7.6.3  循环结构218

7.7  函数220

7.7.1  函数的声明220

7.7.2  函数的调用222

7.7.3  变量的作用域和生命周期226

7.7.4  内嵌函数227

7.7.5  闭包函数227

7.7.6  箭头函数229

7.7.7  常用系统函数231

7.8  正则表达式231

7.8.1  创建正则表达式231

7.8.2  正则表达式的组成232

7.8.3  正则表达式使用的方法233

习题7233

 第8章  JavaScript对象基础235

 8.1  JavaScript对象概述235

8.2  对象235

8.2.1  对象的概念235

8.2.2  类236

8.2.3  创建对象237

8.2.4  对象的属性239

8.2.5  对象的方法241

8.2.6  对象的遍历242

8.2.7  对象的事件242

8.3  内置对象243

8.3.1  数学对象243

8.3.2  字符串对象244

8.3.3  日期对象245

8.3.4  数组对象248

8.3.5  扩展运算符254

习题8256

 第9章  JavaScript对象模型257

 9.1  BOM的对象257

9.1.1  BOM概述257

9.1.2  window对象258

9.1.3  document对象259

9.1.4  location对象260

9.1.5  navigator对象261

9.1.6  screen对象261

9.1.7  history对象262

9.2  DOM的对象262

9.2.1  节点和节点树262

9.2.2  DOM的操作264

9.2.3  Node对象264

9.2.4  HTML DOM对象264

9.2.5  HTML Document对象265

9.2.6  HTML Element对象265

9.2.7  Node操作实例266

9.3  DOM与CSS272

9.3.1  style对象272

9.3.2  currentStyle对象274

9.3.3  CSSStyleSheet对象275

习题9276

 第10章  JavaScript事件处理278

 10.1  事件概述278

10.1.1  事件的概念278

10.1.2  事件的类型279

10.1.3  事件处理程序的绑定方式280

10.2  window事件284

10.2.1  load事件285

10.2.2  resize事件287

10.2.3  scroll事件287

10.2.4  focus和blur事件288

10.3  mouse事件289

10.3.1  click事件289

10.3.2  dblclick事件290

10.3.3  mouseover和mouseout事件291

10.3.4  mousedown、mousemove和mouseup事件292

10.4  keyboard事件295

10.4.1  keydown事件295

10.4.2  keypress事件296

10.4.3  keyup事件296

10.5  form事件297

10.5.1  submit和reset事件298

10.5.2  子元素事件处理299

10.6  事件捕捉与事件冒泡300

10.6.1  事件捕捉与事件冒泡的执行顺序300

10.6.2  阻止事件冒泡和捕捉302

10.6.3  取消默认事件302

习题10303

第11章  综合案例——社区新闻网的设计与实现305

 11.1  网站的开发流程和组织结构305

11.1.1  创建网站的文件夹结构305

11.1.2  网站页面的组成305

11.2  制作社区新闻网的首页306

11.2.1  页面结构代码306

11.2.2  CSS样式307

11.3  制作社区新闻网的列表页307

11.3.1  页面结构代码307

11.3.2  CSS样式307

11.4  制作社区新闻网的内容页308

11.4.1  页面结构代码308

11.4.2  CSS样式308

习题11308

 参考文献  310