HTML+CSS+JavaScript前端开发技术教程

第1章Web前端开发技术概述1

1.1Web技术概述1

1.1.1Web的起源1

1.1.2Web相关概念2

1.1.3Web工作原理5

1.1.4Web的特点5

1.2Web前端开发相关技术7

1.2.1HTML7

1.2.2CSS7

1.2.3JavaScript9

1.2.4HTML DOM10

1.2.5BOM12

1.2.6jQuery12

1.3综合案例14

习题15第2章HTML基础17

2.1HTML文档结构17

2.1.1HTML部分18

2.1.2HEAD部分18

2.1.3BODY部分18

2.2HTML语法19

2.2.1标签19

2.2.2属性20

2.2.3注释20

2.3HTML基本标签21

2.3.1标签21

2.3.2标签22

2.4HTML文档编写规范23

2.4.1HTML文档命名规则23

2.4.2HTML代码书写规范24

2.5综合案例24

习题27第3章文本与段落29

3.1文字内容29

3.1.1添加文字29

3.1.2标题字31

3.1.3添加空格32

3.1.4添加特殊符号33

3.2文字的修饰33

3.2.1简单文本修饰标签34

3.2.2字体标签34

3.2.3文字上下标标签35

3.2.4计算机输出标签37

3.2.5引用和术语标签38

3.3段落与排版标签40

3.3.1段落标签40

3.3.2换行标签41

3.3.3水平分隔线标签41

3.3.4预格式化标签42

3.3.5滚动字幕标签44

3.4综合案例45

习题47第4章列表49

4.1无序列表49

4.2有序列表50

4.3自定义列表52

4.4列表的嵌套53

4.5综合案例55

习题56第5章超级链接58

5.1超级链接概述58

5.2超级链接语法、路径及分类58

5.2.1超级链接语法58

5.2.2超级链接路径60

5.2.3超级链接分类61

5.3超级链接的其他应用64

5.3.1创建文件下载超级链接64

5.3.2创建图像超级链接65

5.3.3创建电子邮件超级链接66

5.4综合案例67

习题67第6章图片与多媒体文件69

6.1图片69

6.1.1网页图片格式69

6.1.2插入图片70

6.1.3设置图片的替代文本71

6.1.4设置图片的高度和宽度73

6.1.5设置图片的边框73

6.1.6设置图片的对齐方式74

6.1.7设置图片的间距77

6.1.8设置图片超链接79

6.1.9设置图片热区链接80

6.2音频、视频及Flash文件82

6.2.1embed标记的使用83

6.2.2添加背景音乐84

6.2.3常用的音频、视频及Flash动画文件格式85

6.3综合案例86

习题88第7章表格90

7.1表格标签90

7.1.1基本语法90

7.1.2语法说明90

7.2表格属性设置92

7.2.1单元格间距属性92

7.2.2表格背景属性94

7.2.3单元格跨列属性95

7.2.4单元格跨行属性95

7.2.5其他属性95

7.3表格嵌套96

7.4综合案例97

习题99第8章CSS修饰页面101

8.1CSS基本语法101

8.1.1CSS的结构101

8.1.2CSS选择符102

8.1.3样式表分类及引用106

8.1.4伪类109

8.2盒子模型110

8.2.1盒子模型概念110

8.2.2元素边框属性112

8.2.3外边距属性114

8.2.4内边距属性117

8.3用CSS设置文本样式118

8.3.1字体样式118

8.3.2文本样式119

8.4颜色与背景设置120

8.4.1颜色设置120

8.4.2背景设置121

8.5CSS布局123

8.5.1position属性123

8.5.2float属性124

8.6综合案例128

习题130第9章页面布局132

9.1div标记与span标记132

9.1.1div标记132

9.1.2span标记134

9.1.3div标记与span标记的区别135

9.2页面布局136

9.2.1两列布局137

9.2.2三列布局139

9.2.3两行布局140

9.2.4三行布局143

9.3导航菜单146

9.3.1纵向导航菜单146

9.3.2横向导航菜单148

9.4综合案例150

习题153第10章表单的应用154

10.1表单的概念与工作原理154

10.2定义表单155

10.3定义域和域标题156

10.4表单元素157

10.4.1input元素157

10.4.2textarea元素164

10.4.3select元素164

10.5综合案例165

习题168第11章HTML5基础与CSS3应用170

11.1HTML5概述170

11.1.1HTML5的新特性170

11.1.2HTML5与HTML4的主要区别171

11.2HTML5表单174

11.2.1HTML5新增的表单属性174

11.2.2HTML5新增的input元素属性174

11.2.3HTML5新增的表单元素176

11.2.4HTML5新增的input元素类型177

11.3HTML5视频与音频179

11.3.1HTML5的video元素179

11.3.2HTML5的audio元素180

11.4HTML5 canvas画布181

11.4.1canvas标签181

11.4.2绘制图形的步骤181

11.4.3图形的绘制182

11.4.4文本绘制184

11.4.5渐变185

11.4.6图像186

11.5CSS3应用188

11.5.1CSS3新增的选择器188

11.5.2CSS3新增的与文字有关的属性191

11.5.3CSS3新增的与边框有关的属性193

11.5.4CSS3新增的与背景有关的属性197

11.5.5CSS3新增的transition属性199

11.5.6CSS3新增的transform属性202

11.5.7CSS3新增的animation属性205

11.5.8CSS3新增的多列属性207

11.6综合案例210

习题213第12章JavaScript基础215

12.1JavaScript简介215

12.2JavaScript脚本的使用216

12.2.1JavaScript脚本的应用实例216

12.2.2JavaScript脚本的引用方法217

12.3JavaScript的语法与数据类型220

12.3.1基本语法220

12.3.2数据类型221

12.3.3常量与变量223

12.3.4表达式与运算符225

12.4JavaScript程序的控制结构229

12.4.1顺序结构229

12.4.2选择结构229

12.4.3循环结构233

12.5JavaScript的函数237

12.5.1函数的定义237

12.5.2函数的调用237

12.6JavaScript的对象239

12.6.1对象的属性和方法239

12.6.2对象的创建240

12.6.3JavaScript常用内部对象242

12.7JavaScript的事件处理252

12.7.1事件与事件处理252

12.7.2事件类型254

12.7.3表单事件254

12.7.4鼠标事件257

12.7.5键盘事件257

12.7.6窗口事件259

12.8文档对象模型与浏览器对象259

12.8.1DOM节点树和节点259

12.8.2DOM节点的访问261

12.8.3DOM节点的操作263

12.8.4浏览器对象266

12.9综合案例270

习题275第13章jQuery应用278

13.1jQuery概述278

13.1.1jQuery的功能与特点278

13.1.2jQuery的使用279

13.1.3jQuery的语法279

13.2jQuery选择器280

13.2.1基本选择器280

13.2.2层次选择器282

13.2.3过滤选择器285

13.2.4属性选择器289

13.2.5表单选择器289

13.3jQuery操作DOM290

13.3.1访问元素属性290

13.3.2访问元素内容291

13.3.3访问元素值292

13.3.4操作元素样式292

13.3.5操作DOM节点293

13.4jQuery事件298

13.4.1事件处理298

13.4.2人工调用事件处理函数301

13.4.3事件快捷方法302

13.5jQuery的动画效果304

13.5.1基本动画304

13.5.2淡入淡出动画305

13.5.3滑动动画305

13.5.4自定义动画306

13.6综合案例307

习题310