目录 第一部分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头部标记
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表格标记、和70 7.1.2表格标题标记72 7.1.3表头单元格标记73 7.1.4表格列分组标记和74 7.1.5表格行分组标记、和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盒子大小计算方式boxsizing108 9.2.4盒子溢出样式overflow109 9.3盒子的边框样式111 9.3.1边框线型borderstyle111 9.3.2边框粗细borderwidth112 9.3.3边框颜色bordercolor113 9.3.4边框复合样式border114 9.3.5圆角边框borderradius115 9.3.6图像边框样式borderimage116 9.4盒子阴影样式boxshadow119 思考和实践120 第10章CSS盒子的定位布局样式121 本章学习目标121 10.1CSS定位样式121 10.1.1盒子内边距样式padding121 10.1.2盒子外边距样式margin122 10.1.3盒子位置定位样式position123 10.1.4盒子层叠顺序样式zindex125 10.1.5盒子浮动样式float126 10.1.6清除盒子浮动样式clear128 10.1.7盒子显示样式display128 10.2CSS多列布局样式130 10.2.1列宽样式columnwidth130 10.2.2列数样式columncount131 10.2.3列间距样式columngap132 10.2.4列边框样式columnrule132 10.2.5跨列显示样式columnspan134 思考和实践135 第11章CSS盒子背景样式136 本章学习目标136 11.1不透明度样式opacity136 11.2背景颜色样式backgroundcolor137 11.3背景图片样式138 11.3.1背景图片设置样式backgroundimage138 11.3.2背景图片重复样式backgroundrepeat139 11.3.3背景图片滚动样式backgroundattachment141 11.3.4背景图片位置样式backgroundposition142 11.3.5背景图片大小样式backgroundsize143 11.3.6背景图片定位原点样式backgroundorigin145 11.3.7背景图片裁剪样式backgroundclip146 11.4背景复合样式background147 11.5背景渐变样式值148 11.5.1线性渐变函数 lineargradient149 11.5.2重复线性渐变函数repeatinglineargradient150 11.5.3径向渐变函数 radialgradient150 11.5.4重复径向渐变函数 repeatingradialgradient152 思考和实践153 第12章CSS文本段落样式154 本章学习目标154 12.1文本字形154 12.1.1文本的字体样式fontfamily154 12.1.2文本的字号样式fontsize155 12.1.3文本的字型样式fontstyle156 12.1.4文本的加粗字体样式fontweight157 12.1.5文本的变体样式fontvariant158 12.1.6文本的复合样式font159 12.2文本修饰160 12.2.1文本颜色样式color160 12.2.2文本修饰线样式textdecoration160 12.2.3文本阴影样式textshadow162 12.2.4文本大小写转换样式texttransform163 12.3文本排版164 12.3.1文本单词间隔样式wordspacing164 12.3.2文本字符间隔样式letterspacing165 12.3.3文本水平对齐方式样式textalign165 12.3.4文本垂直对齐方式样式verticalalign167 12.3.5文本的首行缩进样式textindent168 12.3.6文本行高样式lineheight170 12.3.7文本控制换行样式wordwrap170 12.3.8文本空白换行处理样式whitespace171 12.3.9文本溢出样式textoverflow173 12.3.10文本流方向样式direction174 12.3.11文本排列样式unicodebidi174 12.3.12文本书写模式样式writingmode175 思考和实践177 第13章CSS其他元素样式178 本章学习目标178 13.1图片样式178 13.1.1图片最大宽度样式maxwidth178 13.1.2图片最大高度样式maxheight178 13.1.3图文混排179 13.2表格样式181 13.3超链接和鼠标样式182 13.4列表样式184 13.4.1列表符号样式liststyletype185 13.4.2图片列表符号样式liststyleimage186 13.4.3列表位置样式liststyleposition187 13.4.4列表复合样式liststyle189 思考和实践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变形原点样式transformorigin198 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过渡样式transitionproperty203 14.2.2CSS过渡时间样式transitionduration204 14.2.3CSS过渡延迟时间样式transitiondelay204 14.2.4CSS过渡效果速度样式transitiontimingfunction205 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.2ifelse语句241 16.1.3ifelse ifelse语句242 16.1.4switch语句243 16.2循环语句245 16.2.1for语句245 16.2.2forin语句246 16.2.3while语句248 16.2.4dowhile语句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章JavaScript DOM和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 参考文献367
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表格标记、和70 7.1.2表格标题标记72 7.1.3表头单元格标记73 7.1.4表格列分组标记和74 7.1.5表格行分组标记、和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盒子大小计算方式boxsizing108 9.2.4盒子溢出样式overflow109 9.3盒子的边框样式111 9.3.1边框线型borderstyle111 9.3.2边框粗细borderwidth112 9.3.3边框颜色bordercolor113 9.3.4边框复合样式border114 9.3.5圆角边框borderradius115 9.3.6图像边框样式borderimage116 9.4盒子阴影样式boxshadow119 思考和实践120 第10章CSS盒子的定位布局样式121 本章学习目标121 10.1CSS定位样式121 10.1.1盒子内边距样式padding121 10.1.2盒子外边距样式margin122 10.1.3盒子位置定位样式position123 10.1.4盒子层叠顺序样式zindex125 10.1.5盒子浮动样式float126 10.1.6清除盒子浮动样式clear128 10.1.7盒子显示样式display128 10.2CSS多列布局样式130 10.2.1列宽样式columnwidth130 10.2.2列数样式columncount131 10.2.3列间距样式columngap132 10.2.4列边框样式columnrule132 10.2.5跨列显示样式columnspan134 思考和实践135 第11章CSS盒子背景样式136 本章学习目标136 11.1不透明度样式opacity136 11.2背景颜色样式backgroundcolor137 11.3背景图片样式138 11.3.1背景图片设置样式backgroundimage138 11.3.2背景图片重复样式backgroundrepeat139 11.3.3背景图片滚动样式backgroundattachment141 11.3.4背景图片位置样式backgroundposition142 11.3.5背景图片大小样式backgroundsize143 11.3.6背景图片定位原点样式backgroundorigin145 11.3.7背景图片裁剪样式backgroundclip146 11.4背景复合样式background147 11.5背景渐变样式值148 11.5.1线性渐变函数 lineargradient149 11.5.2重复线性渐变函数repeatinglineargradient150 11.5.3径向渐变函数 radialgradient150 11.5.4重复径向渐变函数 repeatingradialgradient152 思考和实践153 第12章CSS文本段落样式154 本章学习目标154 12.1文本字形154 12.1.1文本的字体样式fontfamily154 12.1.2文本的字号样式fontsize155 12.1.3文本的字型样式fontstyle156 12.1.4文本的加粗字体样式fontweight157 12.1.5文本的变体样式fontvariant158 12.1.6文本的复合样式font159 12.2文本修饰160 12.2.1文本颜色样式color160 12.2.2文本修饰线样式textdecoration160 12.2.3文本阴影样式textshadow162 12.2.4文本大小写转换样式texttransform163 12.3文本排版164 12.3.1文本单词间隔样式wordspacing164 12.3.2文本字符间隔样式letterspacing165 12.3.3文本水平对齐方式样式textalign165 12.3.4文本垂直对齐方式样式verticalalign167 12.3.5文本的首行缩进样式textindent168 12.3.6文本行高样式lineheight170 12.3.7文本控制换行样式wordwrap170 12.3.8文本空白换行处理样式whitespace171 12.3.9文本溢出样式textoverflow173 12.3.10文本流方向样式direction174 12.3.11文本排列样式unicodebidi174 12.3.12文本书写模式样式writingmode175 思考和实践177 第13章CSS其他元素样式178 本章学习目标178 13.1图片样式178 13.1.1图片最大宽度样式maxwidth178 13.1.2图片最大高度样式maxheight178 13.1.3图文混排179 13.2表格样式181 13.3超链接和鼠标样式182 13.4列表样式184 13.4.1列表符号样式liststyletype185 13.4.2图片列表符号样式liststyleimage186 13.4.3列表位置样式liststyleposition187 13.4.4列表复合样式liststyle189 思考和实践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变形原点样式transformorigin198 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过渡样式transitionproperty203 14.2.2CSS过渡时间样式transitionduration204 14.2.3CSS过渡延迟时间样式transitiondelay204 14.2.4CSS过渡效果速度样式transitiontimingfunction205 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.2ifelse语句241 16.1.3ifelse ifelse语句242 16.1.4switch语句243 16.2循环语句245 16.2.1for语句245 16.2.2forin语句246 16.2.3while语句248 16.2.4dowhile语句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章JavaScript DOM和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 参考文献367