"l 本书以“好教、好学、好用”为编写宗旨，将HTML 5、CSS 3、JavaScript和JQuery技术有机地组合起来，系统全面地介绍了前端开发的核心技术及其应用。 l 本书组织结构严谨，章节层次清晰；内容兼顾基础知识和新技术、新应用；实例丰富，设计思路分析和代码注释详实；应用实例典型，实用性强，易学易用。 l 本书提供配套电子课件和实例源代码，读者可登录清华大学出版社官网下载。 l 本书适合作为高等院校计算机、软件工程等专业网页设计、前端设计技术或JavaScript、JQuery课程的教材，也可供Web开发的工程技术人员和研究人员参考。 "

本书系统地介绍了Web前端开发技术中的HTML 5、CSS 3、JavaScript和jQuery技术。 本书分四部分，共21章: 第一部分是HTML技术篇，包括第1～7章的内容，介绍了Web开发的基本概念、设计工具、运行环境、布局技术基础、常用HTML标记和应用实例；第二部分是CSS技术篇，包括第8～14章的内容，介绍了CSS 3的样式规则、盒模型、选择符、常用CSS样式及应用实例；第三部分是JavaScript技术篇，包括第15～18章的内容，介绍了JavaScript技术的编程基础，包括数据类型、变量、语句、函数、内置对象、DOM对象、BOM对象和应用实例；第四部分是jQuery技术篇，包括第19～21章的内容，介绍了jQuery技术的语法规则、选择元素对象、操作元素对象的方法和实例，以及AJAX的概念及应用。 本书可作为高等院校计算机、软件工程及相关专业的网页设计、前端设计技术或者JavaScript、jQuery课程教材，同时也可作为Web开发相关工程技术人员和研究人员的参考用书。

第一部分HTML技术篇
第1章Web概述3
本章学习目标3
1.1Web的概念3
1.2Web前端设计基础5
1.2.1Web前端设计工具5
1.2.2Web网页运行环境6
1.3Web系统开发流程7
1.3.1确定系统的主题8
1.3.2系统结构设计8
1.3.3页面布局设计8
1.3.4素材收集和设计9
1.3.5页面内容设计9
1.3.6测试和发布10
1.3.7维护和推广10
思考和实践10

第2章HTML技术基础11
本章学习目标11
2.1HTML概念11
2.2HTML标记的语法11
2.3HTML文件12
2.3.1文档类型说明标记13
2.3.2HTML主标记13
2.3.3头部标记13
2.3.4主体标记16
2.3.5注释标记17
2.4HTML标记的全局属性18
思考和实践19

第3章HTML文本类标记21
本章学习目标21
3.1文本排版标记21
3.1.1换行标记
21
3.1.2预定义格式标记
21
3.1.3段落标记
22
3.1.4标题标记23
3.1.5上标标记和下标标记24
3.1.6注音标记、和25
3.1.7高亮文本标记26
3.2列表标记27
3.2.1有序列表标记

和
27
3.2.2无序列表标记
和
28
3.2.3自定义列表标记、和28
3.2.4列表嵌套29
思考和实践31

第4章HTML多媒体类标记32
本章学习目标32
4.1多媒体文件32
4.1.1多媒体文件类型32
4.1.2文件路径表示方法32
4.2多媒体类标记33
4.2.1水平线标记
33
4.2.2图像标记34
4.2.3音频标记35
4.2.4视频标记37
4.2.5嵌入媒体文件标记37
4.2.6链接对象文件标记39
思考和实践40

第5章HTML超链接类标记41
本章学习目标41
5.1超链接概念41
5.2超链接类标记41
5.2.1超链接标记41
5.2.2锚点链接43
5.2.3热区链接标记和44
思考和实践46

第6章HTML表单类标记48
本章学习目标48
6.1表单概述48
6.2表单基本元素标记48
6.2.1表单标记48
6.2.2单行文本框标记
49
6.2.3密码框标记
50
6.2.4单选框标记51
6.2.5复选框标记52
6.2.6下拉列表框标记和53
6.2.7多行文本域标记54
6.2.8提交按钮标记提交55
6.2.9重置按钮标记重置56
6.2.10标准按钮标记56
6.2.11图像按钮标记提交提交57
6.2.12按钮标记57
6.2.13文件域输入框标记未选择任何文件59
6.2.14隐藏域标记59
6.3表单高级元素标记62
6.3.1邮件输入框标记
62
6.3.2网址输入框标记
62
6.3.3数字输入框标记
63
6.3.4滑条选择标记
64
6.3.5颜色选择标记
65
6.3.6日期输入框标记
年-月-日
66
6.3.7年月输入框标记
----年--月
67
6.3.8年周输入框标记
----年第--周
67
6.3.9时间输入框标记
--:--
67
6.3.10日期时间输入框标记
67
思考和实践69

第7章HTML表格和结构类标记70
本章学习目标70
7.1表格类标记70
7.1.1表格标记、和和75
7.2表格嵌套76
7.3HTML的结构类标记78
7.3.1元素分组标记和78
7.3.2分区标记
79
7.3.3组合标记79
思考和实践80
第二部分CSS技术篇
第8章CSS技术基础85
本章学习目标85
8.1CSS的定义85
8.2CSS的语法基础85
8.2.1CSS的语法规则85
8.2.2CSS的使用方式88
8.3CSS选择符91
8.3.1基本选择符91
8.3.2关系选择符92
8.3.3属性选择符96
8.3.4动态伪类选择符98
8.3.5UI元素状态伪类选择符99
8.3.6结构伪类选择100
8.3.7否定伪类选择102
8.3.8伪元素选择103
思考和实践104

第9章CSS盒子及边框样式106
本章学习目标106
9.1CSS盒模型106
9.2盒子的大小108
9.2.1宽度样式width108
9.2.2高度样式height108
9.2.3盒子大小计算方式boxsizing108
9.2.4盒子溢出样式overflow109
9.3盒子的边框样式111
9.3.1边框线型borderstyle111
9.3.2边框粗细borderwidth112
9.3.3边框颜色bordercolor113
9.3.4边框复合样式border114
9.3.5圆角边框borderradius115
9.3.6图像边框样式borderimage116
9.4盒子阴影样式boxshadow119
思考和实践120

第10章CSS盒子的定位布局样式121
本章学习目标121
10.1CSS定位样式121
10.1.1盒子内边距样式padding121
10.1.2盒子外边距样式margin122
10.1.3盒子位置定位样式position123
10.1.4盒子层叠顺序样式zindex125
10.1.5盒子浮动样式float126
10.1.6清除盒子浮动样式clear128
10.1.7盒子显示样式display128
10.2CSS多列布局样式130
10.2.1列宽样式columnwidth130
10.2.2列数样式columncount131
10.2.3列间距样式columngap132
10.2.4列边框样式columnrule132
10.2.5跨列显示样式columnspan134
思考和实践135

第11章CSS盒子背景样式136
本章学习目标136
11.1不透明度样式opacity136
11.2背景颜色样式backgroundcolor137
11.3背景图片样式138
11.3.1背景图片设置样式backgroundimage138
11.3.2背景图片重复样式backgroundrepeat139
11.3.3背景图片滚动样式backgroundattachment141
11.3.4背景图片位置样式backgroundposition142
11.3.5背景图片大小样式backgroundsize143
11.3.6背景图片定位原点样式backgroundorigin145
11.3.7背景图片裁剪样式backgroundclip146
11.4背景复合样式background147
11.5背景渐变样式值148
11.5.1线性渐变函数lineargradient149
11.5.2重复线性渐变函数repeatinglineargradient150
11.5.3径向渐变函数radialgradient150
11.5.4重复径向渐变函数repeatingradialgradient152
思考和实践153
第12章CSS文本段落样式154
本章学习目标154
12.1文本字形154
12.1.1文本的字体样式fontfamily154
12.1.2文本的字号样式fontsize155
12.1.3文本的字型样式fontstyle156
12.1.4文本的加粗字体样式fontweight157
12.1.5文本的变体样式fontvariant158
12.1.6文本的复合样式font159
12.2文本修饰160
12.2.1文本颜色样式color160
12.2.2文本修饰线样式textdecoration160
12.2.3文本阴影样式textshadow162
12.2.4文本大小写转换样式texttransform163
12.3文本排版164
12.3.1文本单词间隔样式wordspacing164
12.3.2文本字符间隔样式letterspacing165
12.3.3文本水平对齐方式样式textalign165
12.3.4文本垂直对齐方式样式verticalalign167
12.3.5文本的首行缩进样式textindent168
12.3.6文本行高样式lineheight170
12.3.7文本控制换行样式wordwrap170
12.3.8文本空白换行处理样式whitespace171
12.3.9文本溢出样式textoverflow173
12.3.10文本流方向样式direction174
12.3.11文本排列样式unicodebidi174
12.3.12文本书写模式样式writingmode175
思考和实践177

第13章CSS其他元素样式178
本章学习目标178
13.1图片样式178
13.1.1图片优选宽度样式maxwidth178
13.1.2图片优选高度样式maxheight178
13.1.3图文混排179
13.2表格样式181
13.3超链接和鼠标样式182
13.4列表样式184
13.4.1列表符号样式liststyletype185
13.4.2图片列表符号样式liststyleimage186
13.4.3列表位置样式liststyleposition187
13.4.4列表复合样式liststyle189
思考和实践192

第14章CSS动画设计193
本章学习目标193
14.1CSS变形193
14.1.1CSS变形样式transform193
14.1.22D旋转变形函数rotate()193
14.1.32D缩放变形函数scale()194
14.1.42D移位变形函数translate()195
14.1.52D倾斜变形函数skew()196
14.1.62D矩阵变形函数matrix()197
14.1.72D变形原点样式transformorigin198
14.1.83D旋转变形函数rotate3d()199
14.1.93D缩放变形函数scale3d()199
14.1.103D移位变形函数translate3d()201
14.1.113D透视视图样式perspective201
14.2CSS过渡203
14.2.1CSS过渡样式transitionproperty203
14.2.2CSS过渡时间样式transitionduration204
14.2.3CSS过渡延迟时间样式transitiondelay204
14.2.4CSS过渡效果速度样式transitiontimingfunction205
14.2.5CSS过渡复合样式transition207
14.3CSS关键帧动画208
14.3.1CSS定义关键帧动画命令@keyframes208
14.3.2CSS关键帧动画样式animation208
思考和实践210
第三部分JavaScript技术篇
第15章JavaScript技术基础213
本章学习目标213
15.1JavaScript简介213
15.2JavaScript的使用方式213
15.3JavaScript编程基础217
15.3.1JavaScript语法规则217
15.3.2JavaScript常用输出方法217
15.3.3JavaScript常用输入方法219
15.4JavaScript数据与运算符221
15.4.1数据类型221
15.4.2常量226
15.4.3变量226
15.4.4运算符和表达式228
思考和实践239

第16章JavaScript语句和函数240
本章学习目标240
16.1条件语句240
16.1.1if语句240
16.1.2ifelse语句241
16.1.3ifelseifelse语句242
16.1.4switch语句243
16.2循环语句245
16.2.1for语句245
16.2.2forin语句246
16.2.3while语句248
16.2.4dowhile语句249
16.2.5break和continue语句250
16.3函数251
16.3.1函数定义251
16.3.2函数调用251
思考和实践253

第17章JavaScript内置对象254
本章学习目标254
17.1对象的概念254
17.1.1创建对象实例254
17.1.2对象实例的属性255
17.1.3对象实例的方法255
17.1.4with语句256
17.1.5this关键字257
17.2Global对象257
17.3Number对象260
17.4Math对象262
17.5String对象264
17.6RegExp对象267
17.7Array对象271
17.8Date对象276
思考和实践279

第18章JavaScriptDOM和BOM281
本章学习目标281
18.1文档对象模型281
18.1.1引用元素对象281
18.1.2元素对象的事件286
18.1.3元素对象节点操作291
18.2浏览器对象模型292
18.2.1Window对象292
18.2.2Screen对象295
18.2.3Event对象296
18.2.4Location对象297
18.2.5History对象298
18.2.6Navigator对象300
思考和实践301
第四部分jQuery技术篇
第19章jQuery技术基础305
本章学习目标305
19.1jQuery语法基础305
19.1.1jQuery函数库文件305
19.1.2jQuery的使用方式305
19.1.3jQuery的语法规则306
19.2jQuery选择元素对象308
19.2.1jQuery基本选择器308
19.2.2jQuery复合选择器310
19.2.3jQuery过滤器315
19.2.4jQuery遍历方法321
思考和实践332

第20章jQuery操作方法及应用333
本章学习目标333
20.1获取元素对象信息333
20.2设置元素对象信息335
20.3设置元素对象事件338
20.3.1文档加载就绪事件338
20.3.2键盘事件339
20.3.3鼠标事件340
20.3.4表单事件342
20.3.5事件绑定和解除344
20.3.6临时事件345
20.4操作文档结构346
20.5jQuery特效347
20.5.1隐藏和显示347
20.5.2淡入和淡出349
20.5.3滑动351
20.5.4动画353
20.6方法链接355
思考和实践356

第21章AJAX技术358
本章学习目标358
21.1AJAX基础358
21.2AJAX的应用358
21.2.1AJAX使用环境358
21.2.2JavaScript的AJAX应用359
21.2.3jQuery的AJAX应用363
思考和实践365
参考文献365

     第3章 HTML文本类标记 本章学习目标 . 掌握HTML文本排版标记; . 掌握HTML列表标记。 本章介绍HTML中常用的文本排版标记、列表标记的语法和应用实例。 3.1 文本排版标记 3.1.1 换行标记
     在编辑HTML页面的时候,输入的回车符、换行符在浏览器中都无效,显示时并不能 实现回车效果。使用换行标记
    可实现网页上的强制换行效果。换行标记
    是单 标记。一个
    标记表示一个换行,多个
    标记表示多次换行,其语法格式如下。
     【例3-1】 换行标记示例。示例代码(3-1.html)如下。 第一行文字 第二行文字 第三行文字
    
     第一行文字
    第二行文字
    第三行文字 浏览器中网页显示效果如图3.1所示。 3.1.2 预定义格式标记

    预定义格式标记
……
中的文本通常会保留编辑时的空格和换行符。
    网页源文件中的多个空格和回车换行操作在浏览器中会被忽略,或者被处理为一个空格。
    使用
标记可以保留网页源文件中的设计效果。预定义格式标记是双标记,以
开
    ·21·
    图3.1 换行标记示例
    始,以
结束,
和
之间的内容保留编辑时的空格和换行符,文本呈现
    为等宽字体,其语法格式如下。
    
    文本内容
    
    【例3-2】 预定义格式标记示例。示例代码(3-2.html)如下。
        
    
    
    
    
    第一行 文字
    第二行文字
    第三行文字
    
    
    
    浏览器中网页显示效果如图3.2所示。
    图3.2 预定义格式标记示例
    3.1.3 段落标记
    段落标记是双标记,以开始,以结束,在和之间的内容
    ·22·
    形成一个段落。段落前后内容会自动换行。段前、段后的间距比普通文字的行间距宽。使
    用不包含内容的标记,可以实现换行并输出空行的效果,其语法格式如下。
    段落文字
    【例3-3】 段落标记示例。示例代码(3-3.html)如下。
    
    
    
    
    
    第一行文字
    第二行文字
    
    第三行文字
    第一段:杭州,简称"杭",古称临安、钱塘,是浙江省省会、副省级市、杭州都市圈核心城市,国务
    院批复确定的中国浙江省省会和全省经济、文化、科教中心、长江三角洲中心城市之一。
    第二段:杭州地处中国华东地区、钱塘江下游、东南沿海、浙江北部、京杭大运河南端,是环杭州
    湾大湾区核心城市、沪嘉杭G60 科创走廊中心城市、国际重要的电子商务中心。
    
    
    浏览器中网页显示效果如图3.3所示。
    图3.3 段落标记示例
    3.1.4 标题标记
    标题标记可以实现黑体加粗效果的标题文字输出。标题文字前后自动换行。    标题标记包含6个级别,标题标记中的n可以设置为1~6,编号越小,文字越大。标
    题标记是双标记,以开始,以结束,中间的内容显示为标题文字效果,其语法
    格式如下。
    ·23·
     标题文字内容
    【例3-4】 标题标记示例。示例代码(3-4.html)如下。
    
    
    
    
    
    
一级标题文字
    
二级标题文字
    
三级标题文字
    
四级标题文字
    
五级标题文字
    
六级标题文字
    
    
    浏览器中网页显示效果如图3.4所示。
    图3.4 标题标记示例
    3.1.5 上标标记和下标标记
    上标标记是双标记,以开始,以结束,和之间
    的文本会以上标的形式显示。下标标记是双标记,以开始,以结
    束,和之间的文本会以下标的形式显示,它们的语法格式如下。
    上标文字内容
    下标文字内容
    ·24·
    【例3-5】 上下标文本标记示例。示例代码(3-5.html)如下。
    
    
    
    
    
    数学公式示例:(x+y)2=x2+2xy+y2
    
    化学式示例:H2O
    
    
    浏览器中网页显示效果如图3.5所示。
    图3.5 上下标文本标记示例    3.1.6 注音标记、和
    注音标记、和都是双标记,用于在元素上添加注音。先在标记
    内定义需要注音的元素,然后在内部用标