HTML5+CSS3+JAVASCRIPT从入门到精通

本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML＆CSS＆JavaScript及目前新的前端技术。主要包括HTML5的结构、文本、图像、链接、表单、音频、视频、拖放、本地存储、图形，CSS3的文本设计、背景设计、DIV+CS布局、盒布局、多列布局、自适应布局、动画、渐变，还有JavaScript的语法、对象、BOM、DOM、事件响应等；最后两个两个完整案例综合前面所学，让读者对网站设计与网页开发有个整体的认识。本书运用大量示例，让读者在实战中体会编程的快乐。建议读者边学边练，有难以理解的概念或知识一定要弄清楚，不能迷迷糊糊。要培养自己单独开发项目的能力。本书适合想从事网页和前端开发的入门人员、网站建设自学者和网络管理技术人员阅读。

王震，澳大利亚伊迪科文大学毕业，现执教于沈阳理工大学艺术设计学院，副教授。长期从事动画游戏设计、虚拟现实、互动多媒体、大数据等研究及教学工作。

第1篇 HTML技术篇 第1章 网页基础知识入门 1 1.1 了解HTML网页技术 1 1.1.1 什么是HTML和HTML 5 1 1.1.2 如何获取网页的源代码 2 1.1.3 静态网页 3 1.1.4 动态网页 3 1.1.5 网站 3 1.2 了解网页技术的工作原理 4 1.2.1 静态HTML的工作流程 4 1.2.2 动态HTML的工作流程 4 1.3 制作一个完整的HTML 5网页 5 1.3.1 搭建上机练习环境 5 1.3.2 完成第一个网页 5 1.4 技术解惑 6 1.4.1 HTML与HTML 5是两种网页语言吗 6 1.4.2 如何区分静态网页与动态网页 6 第2章 HTML 5网页的结构 7 2.1 动手解构一个HTML 5页面 7 2.2 HTML的基础知识 7 2.2.1 HTML的基础语法 7 2.2.2 HTML文档的基本骨架 8 2.3 HTML文档中的标签 8 2.3.1 样本代码DOCTYPE 9 2.3.2 开始标签＜html＞ 9 2.3.3 头部标签和头部标签的对象 9 2.3.4 标题标签＜title＞ 9 2.3.5 主体标签＜body＞ 9 2.3.6 美化HTML文档 9 2.4 拓展训练 10 2.4.1 训练一：制作一个HTML网页，包含HTML基本标记，页面显示 “Hello World!” 10 2.4.2 训练二：制作一个HTML网页，要求在浏览器标题栏中显示 “Hello World!” 10 2.5 技术解惑 11 2.5.1 HTML标签需要死记硬背吗 11 2.5.2 HTML网页的结构中哪些标签是必需的 11 第3章 网页中的文本与段落 12 3.1 文本的排版格式 12 3.1.1 写一行换一行 12 3.1.2 在页面中使用空格 13 3.1.3 文本的段落要对齐 14 3.2 文本的属性样式 15 3.2.1 不一样的文本字体大小 15 3.2.2 奇妙的特殊符号 16 3.2.3 给文本加标注 17 3.3 整齐的文本列表 18 3.3.1 无序列表 18 3.3.2 有序列表 19 3.3.3 定义列表 20 3.3.4 列表嵌套 21 3.4 拓展训练 22 3.4.1 训练一：在页面中设置段落对齐方式 22 3.4.2 训练二：在页面中创建有序列表 23 3.5 技术解惑 23 3.5.1 文本段落的对齐方式 23 3.5.2 有序列表与无序列表 23 第4章 网页中的图像 24 4.1 图像的基础知识 24 4.1.1 常用的位图图像 24 4.1.2 在页面中常用的位图格式 24 4.1.3 矢量图 25 4.1.4 图像的分辨率 25 4.1.5 认识一些网页中常用的Banner尺寸 25 4.2 页面中的图像 26 4.2.1 理解图像路径 26 4.2.2 像编辑文本对齐一样在页面中对齐图片 27 4.2.3 图像与文本的对齐方式 28 4.2.4 调整图像与文本的距离 29 4.3 让图像更美观 30 4.3.1 使用画图工具修改图像 30 4.3.2 为图像添加边框 30 4.3.3 独树一帜的水平线 31 4.4 改变页面的背景 32 4.5 拓展训练 33 4.5.1 训练一：在网页中插入图片并设置边框 33 4.5.2 训练二：在页面中插入宽度为800px、高度为2px、颜色为蓝色的 水平线 34 4.6 技术解惑 34 4.6.1 使用图像的技巧 34 4.6.2 善用水平线 34 第5章 网页中的链接 35 5.1 认识链接 35 5.1.1 初识页面链接 35 5.1.2 理解链接地址 36 5.2 链接的种类 37 5.2.1 基本的文本链接 38 5.2.2 基本的图像链接 38 5.2.3 把邮箱留给需要联系你的人 39 5.2.4 在同一页面中快速查找信息 40 5.3 提高页面链接的友好度 42 5.3.1 美观链接的状态 42 5.3.2 特殊的链接方式 44 5.3.3 热点图像区域的链接 46 5.4 在新窗口中显示链接窗口 48 5.5 拓展训练 49 5.5.1 训练一：在页面中使用图像链接 49 5.5.2 训练二：在页面中使用热点图像区域链接 49 5.6 技术解惑 49 5.6.1 合理使用锚点链接 49 5.6.2 合理使用邮件链接 50 第6章 网页中的表单 51 6.1 表单的工作原理 51 6.1.1 ＜script＞标记 51 6.1.2 创建表单 51 6.1.3 表单域 52 6.2 通过表单展示不一样的页面 52 6.2.1 input对象下的多种表单表现形式 52 6.2.2 text文本框的样式表单 53 6.2.3 password输入密码的样式表单 54 6.2.4 checkbox复选框的样式表单 55 6.2.5 radio单选框的样式表单 57 6.2.6 submit提交数据的样式表单 58 6.2.7 hidden隐藏域的样式表单 59 6.2.8 image样式的表单 60 6.2.9 file上传文件的样式表单 61 6.2.10 textarea对象的表单 62 6.2.11 select对象的表单 64 6.2.12 表单域集合 65 6.3 HTML 5表单的进化 66 6.3.1 早期的表单发展 66 6.3.2 HTML 5表单的问世 66 6.3.3 当前的支持情况 67 6.3.4 新增的表单输入类型 67 6.4 新增表单特性及元素 68 6.4.1 form特性 68 6.4.2 formaction特性 68 6.4.3 form其他特性 69 6.4.4 placeholder特性 69 6.4.5 autofocus特性 69 6.4.6 autocomplete特性 69 6.4.7 list特性和datalist元素 70 6.4.8 keygen元素 70 6.4.9 output元素 70 6.5 表单验证API 71 6.5.1 与验证有关的表单元素特性 71 6.5.2 表单验证的属性 72 6.5.3 ValidityState对象 72 6.5.4 表单验证的方法 73 6.5.5 表单验证的事件 75 6.6 拓展训练 76 6.6.1 训练一：在页面中使用下拉菜单表单元素 76 6.6.2 训练二：在页面中使用email表单输入元素并设置autofocus属性 77 6.7 技术解惑 77 6.7.1 HTML 5新增的表单类型有哪些 77 6.7.2 HTML 5新增的表单特性有哪些 77 第7章 音频和视频 78 7.1 audio和video基础知识 78 7.1.1 在线多媒体的发展 78 7.1.2 多媒体术语 79 7.1.3 HTML 5多媒体文件格式 80 7.1.4 功能缺陷及未来趋势 81 7.2 使用HTML 5的audio和video元素 81 7.2.1 在页面中加入音频和视频 81 7.2.2 使用source元素 82 7.2.3 使用脚本检测浏览器的标签支持情况 82 7.2.4 audio和video的特性和属性 83 7.2.5 audio和video的方法 86 7.2.6 audio和video的事件 88 7.3 练习：做自定义播放工具条 89 7.3.1 案例简介 89 7.3.2 网页基本元素 90 7.3.3 定义全局的视频对象 90 7.3.4 添加播放/暂停、前进和后退功能 91 7.3.5 添加慢进和快进功能 91 7.3.6 添加静音和音量功能 92 7.3.7 添加进度显示功能 92 7.4 拓展训练 93 7.4.1 训练一：在页面中插入音频格式 93 7.4.2 训练二：在页面中插入视频格式，并在页面加载完毕后自动播放 93 7.5 技术解惑 93 7.5.1 如何使用合适的音频类型 93 7.5.2 在网上使用视频的技巧 94 第8章 在网页中拖放内容 95 8.1 拖放API 95 8.1.1 新增的draggable特性 95 8.1.2 新增的鼠标拖放事件 95 8.1.3 DataTransfer对象 96 8.1.4 练习：拖放元素的内容 97 8.2 文件API 100 8.2.1 新增的标签特性 100 8.2.2 FileList对象与File对象 101 8.2.3 Blob对象 102 8.2.4 FileReader接口 103 8.3 练习：把图片拖入浏览器 108 8.3.1 案例简介 108 8.3.2 设计网页基本元素 108 8.3.3 基本函数的实现 109 8.3.4 页面加载处理 109 8.4 拓展训练 110 8.4.1 训练一：使用文件选择框可以一次选取多个文件 110 8.4.2 训练二：在网页中设置一个层是可以拖动的 110 8.5 技术解惑 110 8.5.1 理解拖放API与文件API 110 8.5.2 如何使用FlieList对象 111 第9章 网页的本地存储 112 9.1 本地存储对象――Web Storage 112 9.1.1 Web Storage简介 112 9.1.2 sessionStorage和localStorage 113 9.1.3 设置和获取Storage数据 115 9.1.4 Storage API的属性和方法 117 9.1.5 存储JSON对象的数据 119 9.1.6 Storage API的事件 122 9.1.7 练习：在两个窗口中实现通信 122 9.2 本地数据库――Web SQL Database 124 9.2.1 Web SQL Database简介 124 9.2.2 操作Web SQL数据库 124 9.2.3 练习：基本的数据库操作 125 9.3 拓展训练 129 9.3.1 训练一：保存并读取Storage数据 129 9.3.2 训练二：使用Web SQL数据库向名称为User的表中插入一条记录 129 9.4 技术解惑 130 9.4.1 理解本地存储对象 130 9.4.2 如何使用本地数据库 130 第10章 绘制图形 131 10.1 认识Canvas 131 10.1.1 Canvas的历史 131 10.1.2 Canvas和SVG及VML之间的差异 131 10.2 Canvas基本知识 132 10.2.1 构建Canvas元素 132 10.2.2 使用JavaScript实现绘图的流程 133 10.3 使用Canvas绘图 135 10.3.1 绘制矩形 135 10.3.2 使用路径 137 10.3.3 图形组合 142 10.3.4 绘制曲线 144 10.3.5 使用图像 151 10.3.6 剪裁区域 153 10.3.7 绘制渐变 157 10.3.8 描边属性 159 10.3.9 模式 161 10.3.10 变换 163 10.3.11 使用文本 167 10.3.12 阴影效果 170 10.3.13 状态的保存与恢复 171 10.3.14 操作像素 173 10.4 在Canvas中实现动画 175 10.5 拓展训练 179 10.5.1 训练一：使用Canvas绘制矩形 179 10.5.2 训练二：使用Canvas绘制阴影效果 180 10.6 技术解惑 180 10.6.1 理解Canvas对象 180 10.6.2 使用JavaScript实现绘图 180 第2篇 CSS技术篇 第11章 CSS基础知识入门 181 11.1 什么是CSS 181 11.2 CSS的写法 181 11.2.1 基本的样式表的写法 181 11.2.2 使用类class和标志id链接样式表 182 11.2.3 创建选择器 183 11.2.4 应用CSS样式表 185 11.3 用CSS来修饰页面文本 186 11.3.1 修饰页面文本字体 186 11.3.2 文本的字号 187 11.3.3 文本段落行高 187 11.3.4 禁止文本自动换行 187 11.4 给页面对象添加颜色 187 11.5 CSS 3的发展 188 11.5.1 模块化的发展 188 11.5.2 浏览器支持情况 189 11.5.3 CSS 3新特性预览 189 11.6 CSS 3增加的选择器功能 191 11.6.1 属性选择器 191 11.6.2 结构伪类选择器 191 11.6.3 UI元素状态伪类选择器 192 11.6.4 伪元素选择器 192 11.7 拓展训练 193 11.7.1 训练一：用CSS为页面中的my_c类添加样式 193 11.7.2 训练二：用CSS为页面中的输入框在获取焦点时设置样式 194 11.8 技术解惑 194 11.8.1 理解CSS的基本语法 194 11.8.2 掌握各种常用选择器的使用 194 第12章 美化文本与背景 195 12.1 文本与字体 195 12.1.1 多样化的文本阴影――text-shadow属性 195 12.1.2 溢出文本处理――text-overflow属性 200 12.1.3 文字对齐――word-wrap和word-break属性 201 12.1.4 使用服务器端的字体――@font-face规则 203 12.1.5 练习：使用丰富的文字样式 206 12.2 色彩模式和不透明度 208 12.2.1 HSL色彩模式 208 12.2.2 HSLA色彩模式 211 12.2.3 RGBA色彩模式 212 12.2.4 不透明属性opacity 213 12.2.5 练习：设置半透明的遮蔽层 215 12.3 背景 218 12.3.1 在元素里定义多个背景图片 218 12.3.2 指定背景的原点位置 219 12.3.3 指定背景的显示区域 222 12.3.4 指定背景图像的大小 224 12.3.5 练习：设计信纸的效果 227 12.4 边框 230 12.4.1 设计圆角边框――border-radius属性 230 12.4.2 设计图像边框――border-image属性 235 12.4.3 设计多色边框――border-color属性 244 12.4.4 练习：使用新技术设计网页 245 12.5 拓展训练 250 12.5.1 训练一：为文本添加阴影效果 250 12.5.2 训练二：为层添加圆角边框效果 250 12.6 技术解惑 251 12.6.1 文本的新特性 251 12.6.2 不同色彩模式的使用 251 12.6.3 边框的使用 251 第13章 DIV+CSS布局 252 13.1 理解块级元素的意义 252 13.2 页面中的层 252 13.2.1 行＜span＞和层＜div＞ 252 13.2.2 层的基本定位 253 13.2.3 层的叠加 256 13.3 框模型 257 13.3.1 理解框模型 257 13.3.2 空距――padding属性 258 13.3.3 边框――border的扩展属性 259 13.3.4 边距――margin属性 260 13.3.5 框模型的溢出 260 13.4 定制层的display属性 260 13.5 CSS Hack 260 13.6 拓展训练 261 13.6.1 训练一：在页面中对一个层使用绝对定位 261 13.6.2 训练二：为一个层设置边框样式 261 13.7 技术解惑 261 13.7.1 块级元素与行内元素的区别 261 13.7.2 如何理解内边距与外边距 262 第14章 盒布局 263 14.1 灵活的盒布局 263 14.1.1 开启盒布局 263 14.1.2 元素的布局方向――box-orient属性 265 14.1.3 元素的布局顺序――box-direction属性 267 14.1.4 调整元素的位置――box-ordinal-group属性 269 14.1.5 弹性空间分配――box-flex属性 270 14.1.6 元素的对其方式――box-pack和box-align属性 274 14.1.7 练习：使用新型盒布局设计网页 278 14.2 增强的盒模型 282 14.2.1 盒子阴影――box-shadow属性 282 14.2.2 盒子尺寸的计算方法――box-sizing属性 286 14.2.3 盒子溢出内容处理――overflow-x和overflow-y属性 288 14.2.4 练习：设计网站服务条款页面 290 14.3 增强的用户界面设计 292 14.3.1 允许用户改变元素尺寸――resize属性 292 14.3.2 定义外轮廓线――outline属性 294 14.3.3 伪装的元素――appearance属性 298 14.3.4 为元素添加内容――content属性 300 14.3.5 练习：设计一个省份选择盘 303 14.4 拓展训练 305 14.4.1 训练一：设置盒元素布局方向为水平布局 305 14.4.2 训练二：在页面中创建一个可以调整大小的层 306 14.5 技术解惑 306 14.5.1 如何使用盒布局属性的兼容性 306 14.5.2 理解盒子溢出内容处理的区别 306 第15章 多列布局 307 15.1 多列布局基础知识 307 15.1.1 多列属性columns 307 15.1.2 列宽属性column-width 309 15.1.3 列数属性column-count 310 15.1.4 列间距属性column-gap 311 15.1.5 定义列分隔线――column-rule属性 312 15.1.6 定义横跨所有列――column-span属性 314 15.2 练习：模仿杂志的多列版式 316 15.3 拓展训练 318 15.3.1 训练一：在一个层中实现多列布局 318 15.3.2 训练二：在多列布局的基础上定义列分隔线 318 15.4 技术解惑 319 15.4.1 如何使用多列布局的快捷设置 319 15.4.2 使用column-span属性的注意事项 319 第16章 CSS 3自适应布局 320 16.1 媒体查询 320 16.1.1 @media规则的语法 320 16.1.2 使用媒体查询链接外部样式表文件 324 16.2 练习：自适应屏幕的样式表方案 325 16.3 拓展训练 330 16.3.1 训练一：媒体查询常用的设备种类 330 16.3.2 训练二：如何使用媒体查询链接外部样式表文件 331 16.4 技术解惑 331 16.4.1 媒体查询的作用是什么 331 16.4.2 媒体查询中的媒体类型有哪些 331 第17章 动画和渐变 332 17.1 CSS 3变形基础 332 17.1.1 元素的变形――transform属性 332 17.1.2 旋转 332 17.1.3 缩放和翻转 334 17.1.4 移动 336 17.1.5 倾斜 339 17.1.6 矩阵变形 341 17.1.7 同时使用多个变形函数 343 17.1.8 定义变形原点――transform-origin属性 345 17.1.9 练习：设计图片画廊 347 17.2 CSS 3过渡效果 350 17.2.1 实现过渡效果――transition属性 350 17.2.2 指定过渡的属性――transition-property属性 351 17.2.3 指定过渡的时间――transition-duration属性 353 17.2.4 指定过渡延迟时间――transition-delay属性 354 17.2.5 指定过渡方式――transition-timing-function属性 355 17.2.6 练习：制作滑动的菜单 356 17.3 CSS 3动画设计 359 17.3.1 关键帧动画――@keyframes规则 359 17.3.2 动画的实现――animation属性 360 17.3.3 练习：永不停止的风车 363 17.4 CSS 3渐变设计 365 17.4.1 线性渐变 366 17.4.2 径向渐变 369 17.4.3 练习：设计渐变的按钮 371 17.5 拓展训练 373 17.5.1 训练一：使用CSS 3实现当鼠标指针经过链接时放大 373 17.5.2 训练二：使用CSS 3实现一个层中有线性渐变背景 373 17.6 技术解惑 374 17.6.1 元素的变形与布局 374 17.6.2 过渡效果与变形的区别 374 第3篇 JavaScript技术篇 第18章 JavaScript程序基础知识 375 18.1 JavaScript的基础语法 375 18.1.1 字母大小写编写规范 375 18.1.2 JavaScript代码编写格式 375 18.1.3 注释格式 376 18.1.4 保留字 376 18.1.5 基本的输出方法 376 18.1.6 关于＜script＞＜/script＞标签的声明 378 18.2 JavaScript交互基本方法 379 18.2.1 最常用的信息对话框 379 18.2.2 选择对话框 380 18.2.3 提示对话框 382 18.3 数据类型和变量 383 18.3.1 数据类型的理解 383 18.3.2 学习几种基本数据类型 384 18.3.3 变量的含义 386 18.3.4 变量的声明与使用 386 18.4 常用的运算符 387 18.4.1 运算符与表达式 387 18.4.2 基本运算符及其使用 388 18.4.3 关系运算符及其使用 393 18.4.4 逻辑运算符及其使用 395 18.4.5 其他常用运算符及其使用 396 18.5 拓展训练 398 18.5.1 训练一：在页面中插入一段JavaScript代码 398 18.5.2 训练二：在页面中使用一个选择框，并根据选择输出不同内容 398 18.6 技术解惑 398 18.6.1 关于多行注释的误区 398 18.6.2 3种对话框的区别 399 18.6.3 关于JavaScript中的基本数据类型 399 第19章 JavaScript核心语法 400 19.1 程序的核心：分支和循环 400 19.1.1 if条件分支 400 19.1.2 switch条件分支 402 19.1.3 while循环 404 19.1.4 do...while循环 405 19.1.5 for循环 407 19.1.6 for...in循环 408 19.1.7 如何更合理地控制循环语句 409 19.2 函数 413 19.2.1 什么是函数 413 19.2.2 学会使用函数解决问题 415 19.2.3 理解函数的参数传递 416 19.2.4 函数中变量的作用域和返回值 417 19.2.5 函数的嵌套 419 19.3 面向对象编程的简单概念 420 19.3.1 什么是面向对象 420 19.3.2 如何创建对象 421 19.3.3 定义对象的属性 422 19.3.4 对象的构造函数和方法 424 19.3.5 关联数组的概念 426 19.3.6 with语句和for...in语句 428 19.4 拓展训练 431 19.4.1 训练一：使用循环打印九九乘法表 431 19.4.2 训练二：使用自定义函数求某个数的平方 431 19.5 技术解惑 431 19.5.1 if与switch的使用时机 431 19.5.2 while与for循环的异同 432 19.5.3 while与do...while循环的异同 432 19.5.4 关于自定义函数 432 19.5.5 如何理解面向对象 432 第20章 JavaScript核心对象 433 20.1 数组对象 433 20.1.1 创建数组 433 20.1.2 数组元素的操作 435 20.1.3 创建多维数组 437 20.1.4 数组的方法 438 20.2 日期对象 444 20.2.1 用日期对象创建常用日期 445 20.2.2 日期对象的方法 446 20.2.3 编写一个时间计算程序 449 20.3 数学运算对象 451 20.3.1 数学运算对象的方法和属性 451 20.3.2 制作一个小型计算器 454 20.4 字符串对象 456 20.4.1 字符串对象的属性 456 20.4.2 字符串对象的方法 457 20.5 函数对象 461 20.6 拓展训练 463 20.6.1 训练一：创建数组并输出数组内容 463 20.6.2 训练二：输出当前的日期和时间 463 20.7 技术解惑 464 20.7.1 如何理解数组 464 20.7.2 使用日期对象的注意事项 464 20.7.3 关于Math对象 464 20.7.4 关于字符串对象 464 第21章 浏览器对象模型 465 21.1 navigator对象 465 21.1.1 navigator对象的管理方法 466 21.1.2 在网页上显示浏览者系统的基本信息 466 21.2 window对象 467 21.2.1 window对象的管理方法 468 21.2.2 制作可定制的弹出窗口 469 21.2.3 完美地关闭窗口 471 21.2.4 制作简单的网页动画 472 21.2.5 延时执行命令 474 21.3 location对象 476 21.4 history对象 478 21.5 screen对象 480 21.6 拓展训练 481 21.6.1 训练一：在页面上输出浏览者的浏览器名称 481 21.6.2 训练二：使用setInterval()制作移动的文字 481 21.7 技术解惑 482 21.7.1 描述你理解的window对象 482 21.7.2 描述你理解的document对象 482 第22章 文档对象模型 483 22.1 文档对象模型概念详解 483 22.1.1 文档对象模型简介 483 22.1.2 文档对象的属性 484 22.1.3 文档对象的方法 486 22.2 form对象 488 22.2.1 访问表单对象的方法 488 22.2.2 表单控件 492 22.2.3 制作具备数据检测功能的注册页面 499 22.3 image对象 503 22.4 链接对象 506 22.5 拓展训练 508 22.5.1 训练一：使用文档对象模型遍历页面全部图片 508 22.5.2 训练二：当输入框获取焦点时显示红色，失去焦点后恢复 508 22.6 技术解惑 509 22.6.1 文档对象模型是什么 509 22.6.2 文档对象模型与HTML标签 509 22.6.3 使用文档对象模型的注意事项 509 第23章 事件响应 510 23.1 事件响应的概念 510 23.1.1 事件和事件处理程序 510 23.1.2 HTML元素常用事件的展示 511 23.2 事件方法的使用 513 23.3 event对象 514 23.3.1 event对象的各种属性 514 23.3.2 网页监视发生事件的元素 515 23.3.3 网页检测用户的鼠标信息 516 23.3.4 网页检测用户的键盘按键信息 518 23.3.5 鼠标随意拖动网页元素 520 23.4 事件编程访问网页元素 523 23.4.1 数组方式访问 523 23.4.2 id名称和name名称访问 525 23.4.3 HTML标签名称访问 527 23.4.4 DOM节点方法访问 528 23.5 结合CSS制作动态页面 531 23.5.1 让HTML元素动起来 531 23.5.2 通过切换CSS给网页换肤 534 23.5.3 动态添加节点 536 23.6 拓展训练 539 23.6.1 训练一：使用键盘方向键移动页面的层 539 23.6.2 训练二：单击按钮为表格添加一行 540 23.7 技术解惑 541 23.7.1 理解事件 541 23.7.2 理解事件响应 541 第4篇 实战篇 第24章 实战――使用微信小程序开发充值应用 543 24.1 小程序开发介绍 543 24.1.1 小程序开发前景 543 24.1.2 HTML 5、CSS 3、JavaScript在小程序中的对应文件 544 24.1.3 网站HTML标签与小程序wxml组件的异同 544 24.1.4 网站中JavaScript与小程序中JavaScript的异同 546 24.1.5 wxss与CSS 3的不同之处 546 24.2 小程序开发涉及的层次和知识结构 546 24.2.1 第一层：小程序 547 24.2.2 第二层：Web服务器 547 24.2.3 第三层：数据库 547 24.2.4 第四层：第三方服务 548 24.3 小程序开发前的准备工作 548 24.3.1 Web服务器方面的准备 548 24.3.2 申请开通小程序 548 24.3.3 设置小程序服务器域名 551 24.4 安装和使用小程序开发工具 553 24.4.1 下载安装小程序开发工具 554 24.4.2 小程序开发工具介绍 555 24.5 实战――充值小程序开发 558 24.5.1 新建充值小程序工程 559 24.5.2 小程序工程目录结构 561 24.5.3 小程序单个页面的结构 563 24.5.4 充值小程序页面开发 565 24.5.5 小程序与Web服务器之间如何通信 569 第25章 实战――资讯小程序 573 25.1 资讯小程序的主要页面 573 25.2 资讯小程序单个页面的开发流程 574 25.3 新建资讯小程序项目 574 25.4 资讯小程序的首页 576 25.4.1 js脚本从服务器获取数据 577 25.4.2 在wxml中展示数据 578 25.4.3 wxss控制展示效果 581 25.5 开发资讯小程序分类页面 582 25.5.1 分类页面index.js 源代码分析 583 25.5.2 分类页面index.wxml源代码分析 584 25.5.3 小程序的模板文件 585 25.5.4 分类页面index.wxss源代码分析 586 25.6 开发资讯小程序列表页面 587 25.6.1 列表页面index.js源代码分析 588 25.6.2 小程序中使用第三方js脚本模块 589 25.6.3 列表页面index.wxml源代码分析 590 25.6.4 列表页面index.wxss源代码分析 591 25.7 开发资讯小程序内容页面 592 25.7.1 内容页面index.js源代码分析 594 25.7.2 内容页面index.wxml源代码分析 599 25.7.3 内容页面index.wxss源代码分析 600

"随着互联网信息技术的飞速发展，Web前端开发越来越受到相关行业的重视。虽然目前流行采用各类框架进行前端开发，包括当下流行的微信小程序开发，但传统的HTML、CSS、JavaScript技术仍是构成各种框架的基石，所以要想熟练掌握Web前端开发技术，成为一名合格的从业者，必须要掌握前端开发所需要的HTML、CSS、JavaScript技术。只有熟练掌握了这些技术，才能深入理解与领会各种开发框架，达到事半功倍的效果，为职业前景打下坚实的基础。 目前图书市场上关于HTML、CSS、JavaScript的图书不少，但将三者有机结合、互为补充并达到融会贯通的图书却很少。本书便是从理论到实践，从知识点到具体实例，通过总结、归纳HTML、CSS及JavaScript最核心的知识，结合实例训练，再加上具体案例进行练习拓展，通过各种实例来指导读者从零基础开始到能够应用开发，让读者全面、深入、透彻地理解Web前端开发的基础知识和技术，逐步将读者打造成具有实际开发水平和项目实战能力的Web前端程序员。 本书有何特色 1. 讲解特色 ?为了让读者更快地上手，本书特别设计了适合初学者的学习方式，用准确的语言总结概念，用直观的图示演示过程，用详细的注释解释代码，用形象的比喻帮助记忆。 ?知识点介绍：在每节的开始或者每个概念的开始，都有知识点介绍，让零基础读者能了解概念，顺利入门。 ?范例：为每个实例进行编号，便于检索和循序渐进地学习。 ?示例代码：与范例对应，层次清楚，语句简洁，注释丰富。 ?运行结果：针对范例的结果给出图示，直观清楚。 ?代码解析：针对范例的代码和关键点逐一解释，让读者能融会贯通。 ?贴心的提示：全书关键点都给出了提示，让读者能举一反三。 2. 内容特色 ?经验丰富：笔者有10多年的编程经验，熟悉Web前端的各项知识细节。 ?只讲重点：HTML 5、CSS 3、JavaScript涉及的知识点很多，本书讲解了常用的400多个知识点，其他内容可以参考本书的赠送资料。 ?实例众多：针对每个知识点，都给出了典型的示例程序，边学边练习。 3. 本书关键数字 ?400多个知识点。 ?300个典型范例。 ?50000行代码。 ?40余个知识表格。 ?55个开发技巧。 本书内容及知识体系 第1篇 HTML技术篇（第1～10章） 本篇介绍了HTML相关知识，包括网页中的文本与段落、图像、链接、表单、多媒体、拖放内容、本地存储、页面绘图等内容。 第2篇 CSS技术篇（第11～17章） 本篇介绍了CSS相关知识，包括CSS基础知识、美化文本与背景、DIV+CSS布局、盒布局、多列布局、CSS 3自适应布局及动画和渐变等内容。 第3篇 JavaScript技术篇（第18～23章） 本篇介绍了JavaScript相关知识，包括JavaScript程序基础知识、核心语法、核心对象、浏览器对象模型、文档对象模型和JavaScript事件响应等内容。 第4篇 实战篇（第24、25章） 本篇主要介绍了两个微信小程序的开发实例。实例涵盖了从微信小程序项目的搭建、样式的设计、脚本的实现到小程序上线的全部过程。 适合阅读本书的读者 ?想从事Web前端开发工作的人员。 ?大、中专院校的学生。 ?网页制作爱好者。 ?参加实习的“菜鸟”程序员。 ?网站前端测试及维护人员。 ?微信小程序开发入门人员。 本书由王震、盛立、秦文友共同编写，其中王震（沈阳理工大学艺术设计学院副教授）负责编写第1～11章，盛立（沈阳理工大学艺术设计学院副教授）负责编写第12～23章，秦文友（网名秦子恒，计算机专家）负责编写第24、25章。随着互联网信息技术的飞速发展，Web前端开发越来越受到相关行业的重视。虽然目前流行采用各类框架进行前端开发，包括当下流行的微信小程序开发，但传统的HTML、CSS、JavaScript技术仍是构成各种框架的基石，所以要想熟练掌握Web前端开发技术，成为一名合格的从业者，必须要掌握前端开发所需要的HTML、CSS、JavaScript技术。只有熟练掌握了这些技术，才能深入理解与领会各种开发框架，达到事半功倍的效果，为职业前景打下坚实的基础。 目前图书市场上关于HTML、CSS、JavaScript的图书不少，但将三者有机结合、互为补充并达到融会贯通的图书却很少。本书便是从理论到实践，从知识点到具体实例，通过总结、归纳HTML、CSS及JavaScript最核心的知识，结合实例训练，再加上具体案例进行练习拓展，通过各种实例来指导读者从零基础开始到能够应用开发，让读者全面、深入、透彻地理解Web前端开发的基础知识和技术，逐步将读者打造成具有实际开发水平和项目实战能力的Web前端程序员。 本书有何特色 1. 讲解特色 ?为了让读者更快地上手，本书特别设计了适合初学者的学习方式，用准确的语言总结概念，用直观的图示演示过程，用详细的注释解释代码，用形象的比喻帮助记忆。 ?知识点介绍：在每节的开始或者每个概念的开始，都有知识点介绍，让零基础读者能了解概念，顺利入门。 ?范例：为每个实例进行编号，便于检索和循序渐进地学习。 ?示例代码：与范例对应，层次清楚，语句简洁，注释丰富。 ?运行结果：针对范例的结果给出图示，直观清楚。 ?代码解析：针对范例的代码和关键点逐一解释，让读者能融会贯通。 ?贴心的提示：全书关键点都给出了提示，让读者能举一反三。 2. 内容特色 ?经验丰富：笔者有10多年的编程经验，熟悉Web前端的各项知识细节。 ?只讲重点：HTML 5、CSS 3、JavaScript涉及的知识点很多，本书讲解了常用的400多个知识点，其他内容可以参考本书的赠送资料。 ?实例众多：针对每个知识点，都给出了典型的示例程序，边学边练习。 3. 本书关键数字 ?400多个知识点。 ?300个典型范例。 ?50000行代码。 ?40余个知识表格。 ?55个开发技巧。 本书内容及知识体系 第1篇 HTML技术篇（第1～10章） 本篇介绍了HTML相关知识，包括网页中的文本与段落、图像、链接、表单、多媒体、拖放内容、本地存储、页面绘图等内容。 第2篇 CSS技术篇（第11～17章） 本篇介绍了CSS相关知识，包括CSS基础知识、美化文本与背景、DIV+CSS布局、盒布局、多列布局、CSS 3自适应布局及动画和渐变等内容。 第3篇 JavaScript技术篇（第18～23章） 本篇介绍了JavaScript相关知识，包括JavaScript程序基础知识、核心语法、核心对象、浏览器对象模型、文档对象模型和JavaScript事件响应等内容。 第4篇 实战篇（第24、25章） 本篇主要介绍了两个微信小程序的开发实例。实例涵盖了从微信小程序项目的搭建、样式的设计、脚本的实现到小程序上线的全部过程。 适合阅读本书的读者 ?想从事Web前端开发工作的人员。 ?大、中专院校的学生。 ?网页制作爱好者。 ?参加实习的“菜鸟”程序员。 ?网站前端测试及维护人员。 ?微信小程序开发入门人员。 本书由王震、盛立、秦文友共同编写，其中王震（沈阳理工大学艺术设计学院副教授）负责编写第1～11章，盛立（沈阳理工大学艺术设计学院副教授）负责编写第12～23章，秦文友（网名秦子恒，计算机专家）负责编写第24、25章。"