本书内容紧扣国家对高等学校培养高级应用型、复合型人才的技能水平和知识结构的要求，采用全新的Web标准编写，内容包括HTML5、CSS3、JavaScript、jQuery开发技术基础和典型HTML5网站实例。本书以模块化的结构来组织章节，以“鲜品园”网站的开发为主线，通过对模块中每个任务相应知识点的讲解，引导学生学习Web前端开发的基本知识，以及项目开发、测试的完整流程。 本书分为13章，主要内容包括：HTML5基础，编辑网页元素，网页的布局与交互，CSS3基础，CSS3的属性，盒模型与页面布局，JavaScript编程基础，对象模型及事件处理，CSS3变形、过渡和动画属性，HTML5的API应用，jQuery基础，jQuery动画与UI插件和鲜品园综合案例网站。 本书条理清晰、内容完整、实例丰富、图文并茂、系统性强，适合作为高等学校计算机及相关专业课程的教材，也可以作为网站建设、相关软件开发人员和计算机爱好者的参考书。

前 言 “Web前端开发”课程（以前称“网页制作”）是计算机类及相关专业的基础课程。Web前端开发技术已经成为网站开发、App开发及智能终端设备界面开发的主要技术。工业和信息化部教育与考试中心依据教育部《职业技能等级标准开发指南》中的相关要求，制定了《Web前端开发职业技能等级标准》。作者结合自己多年从事教学工作和Web应用开发的实践经验，按照教学规律精心编写了本书。本书基于Web标准，深入浅出地介绍了Web前端设计技术的基础知识，对Web标准、HTML5、CSS3、JavaScript、jQuery和网站制作流程进行了详细的讲解。本书围绕Web标准的三大关键技术（HTML、CSS和JavaScript/jQuery）来介绍网页编程的必备知识及相关应用。其中，HTML负责网页结构，CSS负责网页样式及表现，JavaScript/jQuery负责网页行为和功能。目前，很多高校的计算机专业和IT培训班都将HTML5+CSS3+JavaScript+jQuery作为教学内容之一，这对培养学生的计算机应用能力具有非常重要的意义。 本书分为13章，主要内容包括：HTML5基础，编辑网页元素，网页的布局与交互，CSS3基础，CSS3的属性，盒模型与页面布局，JavaScript编程基础，对象模型及事件处理，CSS3变形、过渡和动画属性，HTML5的API应用，jQuery基础，jQuery动画与UI插件和鲜品园综合案例网站。 作者以模块化的结构来组织章节，选取Web开发设计的典型应用作为教学案例，以网站建设和网页设计为中心，以实例为引导，把介绍知识与实例设计、制作、分析融于一体，并且自始至终地贯穿于书中。本书通过一个完整的“鲜品园”网站的讲解，将相关知识点分解到案例的具体制作环节中。案例具有代表性和趣味性，使学生在完成案例的同时掌握语法规则与技术的应用。 本书的主要特色如下。 （1）通过一个完整网站的讲解，将相关知识点分解到案例实例网站的具体制作环节中，针对性强。同时提供了许多案例，具有可操作性。 （2）语言通俗易懂，简单明了，让学生能够轻松地掌握有关知识。 （3）知识结构安排合理，循序渐进，适合教师教学与学生自学。 （4）采用工业和信息化部教育与考试中心推荐的HBuilder编辑网页代码，在Microsoft Edge浏览器中调试运行，让学生掌握流行高效的Web开发编辑工具软件。 （5）配有完整的、丰富的教学资源。为配合教学，方便教师讲课和学生学习，精心制作了电子课件、授课计划、电子教案、例题习题的源代码等教学资源。 本书条理清晰、内容完整、实例丰富、图文并茂、系统性强，不仅可以作为高等学校计算机及相关专业课程的教材，也可以作为网站建设、相关软件开发人员和计算机爱好者的参考书。 本书由张兵义、邱洋等编著，参加编写工作的有张兵义（第1、2、3、13章），邱洋（第4、5章），张红娟（第6、7章），李曼（第8～11章），徐军（第12章）。本书由刘瑞新教授组织编写、主审并定稿。参加编写工作的都是具有多年计算机教学与培训经验的教师，限于作者水平，书中难免有不足之处，恳请读者提出宝贵的意见和建议。 作 者

目 录 第1章 HTML5基础 1 1.1 Web的基本概念 1 1.1.1 WWW 1 1.1.2 Browser 1 1.1.3 URL 1 1.1.4 HTML 2 1.1.5 HTTP 2 1.2 网站与网页 3 1.2.1 网站、网页和主页 3 1.2.2 静态网页和动态网页 3 1.3 Web标准 4 1.3.1 Web标准简介 4 1.3.2 建立Web标准的优点 5 1.3.3 网页的表现和结构相分离 5 1.4 认识HTML5+CSS3+JavaScript技术组合 6 1.4.1 HTML5简介 6 1.4.2 CSS3简介 7 1.4.3 JavaScript简介 8 1.5 HTML5语法基础 9 1.5.1 HTML5语法结构 9 1.5.2 HTML5文件结构 11 1.5.3 HTML5开发人员编码规范 13 1.6 元素的分类 14 1.6.1 元信息元素 14 1.6.2 语义元素 15 1.6.3 无语义元素 17 1.7 HTML的颜色表示和字符实体 17 1.7.1 HTML的颜色表示 17 1.7.2 字符实体 18 1.8 编辑HTML文件 18 1.8.1 常见的网页编辑工具 18 1.8.2 HTML文件的创建 19 1.9 注释 22 1.10 案例—制作鲜品园页面摘要和版权信息 22 习题1 23 第2章 编辑网页元素 24 2.1 文本元素 24 2.1.1 字体样式元素 24 2.1.2 短语元素 25 2.2 文本层次语义元素 26 2.2.1 mark元素 26 2.2.2 cite元素 27 2.2.3 time元素 27 2.3 基本排版元素 28 2.3.1 标题元素hl～h6 28 2.3.2 段落元素p和换行元素br 28 2.3.3 缩排元素blockquote 29 2.3.4 水平线元素hr 30 2.3.5 案例—制作鲜品园服务指南页面 30 2.4 图像元素img 31 2.5 超链接元素a 32 2.5.1 a元素 32 2.5.2 指向其他页面的链接 33 2.5.3 指向书签的链接 33 2.5.4 指向下载文件的链接 34 2.5.5 指向电子邮件的链接 34 2.5.6 JavaScript链接 34 2.5.7 用图像作为超链接热点 34 2.5.8 空链接 35 2.5.9 案例—制作鲜品园资料下载页面 35 2.6 列表元素 37 2.6.1 无序列表 37 2.6.2 有序列表 38 2.6.3 定义列表 38 2.6.4 嵌套列表 39 2.6.5 案例—制作鲜品园公司名片页面 40 2.7 多媒体元素 41 2.7.1 audio元素 42 2.7.2 video元素 42 习题2 43 第3章 网页的布局与交互 45 3.1 表格元素table 45 3.1.1 表格的结构 45 3.1.2 基本表格 45 3.1.3 跨行跨列表格 46 3.1.4 表格数据的分组 47 3.1.5 调整列的格式 48 3.1.6 案例—使用表格布局鲜品园产品展示页面 49 3.2 使用结构元素构建网页布局 50 3.2.1 section元素 51 3.2.2 nav元素 51 3.2.3 header元素 51 3.2.4 footer元素 51 3.2.5 article元素 51 3.2.6 aside元素 52 3.2.7 分组元素 53 3.2.8 案例—制作鲜品园新品发布页面 54 3.3 页面交互元素 56 3.3.1 details元素和summary元素 56 3.3.2 progress元素 56 3.4 分区元素div 57 3.5 范围元素span 58 3.6 表单 59 3.6.1 表单元素form 59 3.6.2 输入元素input 59 3.6.3 标签元素label 61 3.6.4 选择栏元素select 62 3.6.5 按钮元素button 63 3.6.6 多行文本元素textarea 64 3.6.7 表单分组 65 3.6.8 使用表格布局表单 66 习题3 67 第4章 CSS3基础 69 4.1 CSS3概述 69 4.1.1 CSS3的编写规范 69 4.1.2 CSS3的工作环境 70 4.2 在网页中引用CSS的方法 71 4.2.1 行内样式 71 4.2.2 内部样式表 72 4.2.3 链入外部样式表 73 4.2.4 导入外部样式表 74 4.2.5 案例—制作鲜品园业务简介页面 75 4.3 CSS的主要特性 77 4.3.1 继承 77 4.3.2 层叠 78 4.3.3 优先级 79 4.4 CSS的基本语法 80 4.4.1 基本语法 80 4.4.2 注意事项 80 4.5 CSS的选择器 81 4.5.1 元素选择器 81 4.5.2 通配符选择器 82 4.5.3 派生选择器 82 4.5.4 兄弟选择器 85 4.5.5 id选择器 86 4.5.6 类选择器 87 4.5.7 伪类选择器 87 4.5.8 伪元素选择器 89 4.6 CSS属性值的写法和单位 91 4.6.1 长度、百分比单位 91 4.6.2 色彩单位 92 4.7 文件结构与元素类型 93 4.7.1 文件结构的基本概念 93 4.7.2 元素类型 94 4.8 案例—制作鲜品园行业资讯页面 95 习题4 98 第5章 CSS3的属性 100 5.1 CSS字体属性 100 5.1.1 字体类型属性font-family 100 5.1.2 字体尺寸属性font-size 100 5.1.3 字体倾斜属性font-style 101 5.1.4 小写字体属性font-variant 101 5.1.5 字体粗细font-weight 101 5.2 CSS文本属性 102 5.2.1 文本颜色属性color 102 5.2.2 行高属性line-height 102 5.2.3 文本水平对齐方式属性text-align 103 5.2.4 为文本添加修饰属性text-decoration 103 5.2.5 段落首行缩进属性text-indent 103 5.2.6 文本的阴影属性text-shadow 104 5.2.7 元素内部的空白属性white-space 104 5.2.8 文本的截断效果属性text-overflow 104 5.3 CSS背景属性 106 5.3.1 背景颜色属性background-color 106 5.3.2 背景图像属性background-image 107 5.3.3 重复背景图像属性background-repeat 108 5.3.4 固定背景图像属性background-attachment 108 5.3.5 背景图像位置属性background-position 109 5.3.6 背景图像大小属性background-size 109 5.3.7 背景属性background 110 5.3.8 背景图像起点属性background-origin 110 5.4 CSS尺寸属性 111 5.4.1 宽度属性width 112 5.4.2 高度属性height 112 5.4.3 最小宽度属性min-width 112 5.4.4 最大宽度属性max-width 113 5.4.5 最小高度属性min-height 113 5.4.6 最大高度属性max-height 113 5.5 CSS列表属性 114 5.5.1 图像作为列表项的标记属性list-style-image 114 5.5.2 列表项标记的位置属性list-style-position 115 5.5.3 标记的类型属性list-style-type 115 5.5.4 列表简写属性list-style 116 5.6 CSS表格属性 118 5.6.1 合并边框属性border-collapse 118 5.6.2 边框间隔属性border-spacing 118 5.6.3 标题位置属性caption-side 118 5.6.4 单元格无内容显示方式属性empty-cells 119 5.6.5 案例—使用斑马线表格制作畅销商品销量排行榜 120 5.7 CSS属性的应用 121 5.7.1 设置图像样式 122 5.7.2 设置表单样式 125 5.7.3 设置链接 127 5.7.4 创建导航菜单 128 5.8 综合案例—制作鲜品园梦想社区页面 131 5.8.1 页面布局规划 131 5.8.2 页面的制作过程 132 习题5 137 第6章 盒模型与页面布局 138 6.1 CSS盒模型的组成和大小 138 6.1.1 盒子的组成 138 6.1.2 盒子的大小 139 6.1.3 块级元素与行级元素的宽度和高度 141 6.2 CSS盒模型的属性 141 6.2.1 CSS内边距属性padding 141 6.2.2 CSS外边距属性margin 144 6.2.3 CSS边框属性border 146 6.2.4 圆角边框属性border-radius 149 6.2.5 盒模型的阴影属性box-shadow 150 6.2.6 调整大小属性resize 151 6.3 CSS布局属性 152 6.3.1 元素的布局方式概述 152 6.3.2 CSS浮动属性float 154 6.3.3 清除浮动属性clear 155 6.3.4 裁剪属性clip 156 6.3.5 元素显示方式属性display 157 6.3.6 元素可见性属性visibility 158 6.4 CSS盒子定位属性 159 6.4.1 定位位置属性top、right、bottom、left 159 6.4.2 定位方式属性position 160 6.4.3 层叠顺序属性z-index 165 6.5 CSS3多列属性 166 6.5.1 列数属性column-count 166 6.5.2 列宽属性column-width 166 6.5.3 列宽属性column 166 6.5.4 列与列的间隔属性column-gap 167 6.5.5 是否横跨所有列属性column-span 167 6.5.6 列与列的间隔样式属性column-rule-style 167 6.5.7 列与列的间隔颜色属性column-rule-color 167 6.5.8 列与列的宽度属性column-rule-width 167 6.5.9 列与列的间隔所有属性column-rule 168 6.6 CSS基本布局样式 169 6.6.1 CSS布局类型 169 6.6.2 CSS布局样式 170 6.7 综合案例—制作鲜品园商务安全中心页面 172 练习6 177 第7章 JavaScript编程基础 179 7.1 JavaScript概述 179 7.2 在HTML文件中使用JavaScript 179 7.2.1 在HTML文件中嵌入脚本程序 180 7.2.2 链接脚本文件 180 7.2.3 在HTML标签内添加脚本 181 7.3 数据类型 182 7.3.1 数据类型的分类 182 7.3.2 基本数据类型 182 7.3.3 数据类型的判断 183 7.3.4 数据类型的转换 184 7.4 常量、变量、运算符和表达式 185 7.4.1 常量 185 7.4.2 变量 186 7.4.3 运算符和表达式 186 7.5 流程控制语句 188 7.5.1 顺序结构语句 188 7.5.2 条件选择结构语句 191 7.5.3 循环结构语句 194 7.6 函数 196 7.6.1 函数的声明 196 7.6.2 函数的调用 197 7.6.3 变量的作用域 198 7.6.4 系统函数 199 7.7 对象 199 7.7.1 对象的概念 199 7.7.2 类 200 7.7.3 对象的实例化 200 7.7.4 对象的属性 201 7.7.5 对象的方法 202 7.7.6 对象的事件 203 7.8 JavaScript的内置对象 203 7.8.1 数组对象 204 7.8.2 字符串对象 206 7.8.3 日期对象 207 习题7 209 第8章 对象模型及事件处理 210 8.1 BOM和DOM 210 8.1.1 BOM 210 8.1.2 DOM 211 8.2 window对象 211 8.2.1 window对象的属性 211 8.2.2 window对象的方法 212 8.3 document对象 213 8.3.1 document对象的属性 213 8.3.2 document对象的方法 213 8.4 location对象 215 8.4.1 location对象的属性 215 8.4.2 location对象的方法 215 8.5 history对象 215 8.6 navigator对象 216 8.7 screen对象 217 8.8 form对象 217 8.8.1 form对象的属性 217 8.8.2 form对象的方法 218 8.9 DOM节点 218 8.9.1 Node对象 218 8.9.2 Element对象 219 8.9.3 NodeList对象 219 8.10 JavaScript的对象事件处理程序 221 8.10.1 对象的事件 221 8.10.2 常用的事件及处理 221 8.10.3 表单对象与交互性 225 8.11 综合案例—鲜品园商品复选框全选效果 229 习题8 230 第9章 CSS3变形、过渡和动画属性 232 9.1 变形 232 9.1.1 CSS的坐标系统 232 9.1.2 transform属性 233 9.1.3 transform-origin属性 238 9.1.4 transform-style属性 239 9.1.5 perspective属性和perspective-origin属性 240 9.1.6 backface-visibility属性 241 9.2 过渡 241 9.2.1 过渡属性 241 9.2.2 过渡事件 243 9.3 动画 244 9.3.1 动画属性 244 9.3.2 动画事件 248 习题9 249 第10章 HTML5的API应用 251 10.1 拖放API 251 10.1.1 draggable属性 251 10.1.2 拖放事件 251 10.1.3 数据传递对象dataTransfer 252 10.2 绘图API 254 10.2.1 创建canvas元素 254 10.2.2 构建绘图环境 254 10.2.3 绘制图形的步骤 255 10.2.4 绘制图形 256 习题10 264 第11章 jQuery基础 265 11.1 jQuery简介 265 11.2 编写jQuery程序 265 11.2.1 下载与配置jQuery 265 11.2.2 编写一个简单的jQuery程序 266 11.3 DOM对象和jQuery对象 266 11.3.1 DOM对象和jQuery对象简介 267 11.3.2 jQuery对象和DOM对象的相互转换 268 11.4 jQuery插件 268 11.4.1 下载jQuery插件 269 11.4.2 引用jQuery插件的方法 269 11.5 jQuery选择器简介 269 11.5.1 jQuery的工厂函数 269 11.5.2 什么是jQuery选择器 270 11.6 基础选择器 270 11.6.1 id选择器 270 11.6.2 元素选择器 271 11.6.3 类名选择器 271 11.6.4 复合选择器 271 11.6.5 通配符选择器 271 11.7 层次选择器 272 11.7.1 ancestor descendant（祖先 后代）选择器 272 11.7.2 parent＞child（父＞子）选择器 272 11.7.3 prev+next（前+后）选择器 272 11.7.4 prev～siblings（前～兄弟）选择器 273 11.8 过滤选择器 273 11.8.1 简单过滤器 273 11.8.2 内容过滤器 273 11.8.3 可见性过滤器 274 11.8.4 子元素过滤器 274 11.9 表单选择器 274 习题11 276 第12章 jQuery动画与UI插件 278 12.1 jQuery的动画方法简介 278 12.2 显示与隐藏效果 278 12.2.1 隐藏元素的方法 278 12.2.2 显示元素的方法 279 12.3 淡入淡出效果 281 12.3.1 淡入效果 281 12.3.2 淡出效果 281 12.3.3 元素的不透明效果 282 12.3.4 交替淡入淡出效果 282 12.4 滑动效果 283 12.4.1 向下展开效果 283 12.4.2 向上收缩效果 283 12.4.3 交替伸缩效果 283 12.5 jQuery UI简介 285 12.5.1 jQuery UI概述 285 12.5.2 jQuery UI的下载 285 12.5.3 jQuery UI的使用 286 12.5.4 jQuery UI的工作原理 286 12.6 jQuery UI的常用插件 288 12.6.1 折叠面板 288 12.6.2 自动完成 291 12.6.3 标签页 293 习题12 295 第13章 鲜品园综合案例网站 297 13.1 网站的开发流程 297 13.2 网站结构 298 13.2.1 站点的目录结构 298 13.2.2 页面的组成 298 13.3 网站技术分析 299 13.4 制作首页 300 13.4.1 页面结构代码 301 13.4.2 页面样式设计 306 13.4.3 页面交互与网页特效的实现 311 13.5 制作最新资讯页 313 13.5.1 页面结构代码 314 13.5.2 页面样式设计 315 13.6 网站的整合与维护 316 习题13 316 参考文献 318

http://www.hxedu.com.cn/hxedu/fg/book/bookinfo.html?code=G0423340