HTML5+CSS3+JavaScript网页设计教程（微课版）

"《HTML5+CSS3+JavaScript网页设计教程（微课版）》以HTML5、CSS3、JavaScript为中心，以实操案例为重心，对HTML5、CSS3和JavaScript的知识进行了全面阐述。全书共13章，遵循由浅入深、循序渐进的思路，以基础知识、示例、综合案例相结合的方式依次对HTML5、CSS3和JavaScript的前端入门必学、HTML5中的canvas、HTML5表单和拖拽、HTML5定位机制、CSS3中的选择器、CSS3中的动画效果、CSS3弹性盒子和自适应、JavaScript入门知识、JavaScript基础语法等知识进行了详细讲解。最后通过模仿微博网页端、制作旅游观赏网页、网页图片翻转效果，对前面所学的知识进行了综合应用，以实现举一反三、学以致用的目的。同时，《HTML5+CSS3+JavaScript网页设计教程（微课版）》配套各实例的操作微视频、电子课件、习题答案等数字教学资源，方便教与学。     "

《HTML5+CSS3+JavaScript网页设计教程（微课版）》以基础知识、实例、综合案例相结合的方式详细讲解了使用HTML 5、CSS 3和JavaScript开发Web前端页面所需掌握的知识。 全书共12章，主要内容包括初步认识HTML 5简介、HTML 5网页结构、HTML 5表单应用、HTML 5多媒体应用、HTML 5绘图应用、HTML 5数据存储、HTML 5文件和拖放、CSS 3新增选择器、CSS 3修饰文本和背景、CSS 3变形/过渡和动画及JavaScript脚本编程快速入门。《HTML5+CSS3+JavaScript网页设计教程（微课版）》不仅仅将笔墨局限于语法讲解上，还通过一个个鲜活、典型的实例来达到学以致用的目的。每个语法都有相应的实例，每章又配有综合实例，力求达到理论知识与实践操作完美结合的效果；同时本书配套有各实例的操作微视频、电子课件、习题答案等数字教学资源。 《HTML5+CSS3+JavaScript网页设计教程（微课版）》可作为普通高校、高职高专计算机及相关专业的教材，也可供从事网页设计与制作、网站开发、网页编程等行业人员参考阅读。

张润花，某网络开发应用中心技术总监、曾经参与开发“凡科建站”网页平台，并与2015年参与优化了“58同城”网站的前台结构。精通ASP.NET、CSS样式设计、JavaScript脚本语言、C#程序设计，熟练掌握Photoshop、coreldraw设计软件。

第1章 初步认识HTML 5 1 1.1 认识网页和网站 2 1.1.1 网页 2 1.1.2 网站 3 1.2 Web标准布局介绍 4 1.2.1 为什么使用Web标准 4 1.2.2 CSS布局标准 5 1.3 HTML与HTML 5 6 1.3.1 HTML发展历史 6 1.3.2 HTML 4.01和XHTML 7 1.3.3 HTML和XHTML的文档 类型定义 8 1.3.4 从XHTML到HTML 5 10 1.3.5 HTML 5的优势 10 1.4 HTML 5语法变化 12 1.4.1 DOCTYPE声明 12 1.4.2 命名空间声明 13 1.4.3 编码类型 13 1.4.4 文档媒体类型 14 1.4.5 HTML 5兼容HTML 15 1.5 综合应用实例：浏览器HTML 5 性能测试 18 本章小结 20 习题 20 第2章 HTML 5网页结构 21 2.1 认识html根元素 22 2.2 文档头部元素 22 2.3 结构元素 25 2.3.1 header元素 26 2.3.2 article元素 27 2.3.3 section元素 28 2.3.4 aside元素 29 2.3.5 footer元素 31 2.4 节点元素 31 2.4.1 nav元素 31 2.4.2 hgroup元素 32 2.4.3 address元素 33 2.5 语义元素 33 2.5.1 mark元素 34 2.5.2 cite元素 35 2.5.3 time元素 35 2.5.4 wbr元素 35 2.5.5 ruby、rt和rp元素 36 2.6 交互元素 36 2.6.1 meter元素 36 2.6.2 progress元素 38 2.6.3 details元素 39 2.6.4 summary元素 40 2.7 全局属性 41 2.7.1 hidden属性 41 2.7.2 contenteditable属性 42 2.7.3 spellcheck属性 43 2.8 综合应用实例：设计旅游网站 首页 44 本章小结 50 习题 50 第3章 HTML 5表单应用 53 3.1 重新认识HTML表单 54 3.1.1 表单简介 54 3.1.2 表单标记 54 3.2 新增输入类型 55 3.2.1 url类型 56 3.2.2 number类型 57 3.2.3 email类型 58 3.2.4 range类型 58 3.2.5 datepickers类型 59 3.2.6 color类型 61 3.2.7 tel类型 61 3.2.8 search类型 62 3.3 新增属性 62 3.3.1 表单类属性 62 3.3.2 输入类属性 64 3.4 表单元素 69 3.4.1 datalist元素 69 3.4.2 keygen元素 70 3.4.3 output元素 71 3.4.4 optgroup元素 72 3.5 表单验证 73 3.5.1 自动验证 73 3.5.2 显式验证 74 3.5.3 自定义验证 76 3.5.4 取消验证 76 3.6 综合应用实例：设计用户录入表单 77 本章小结 81 习题 81 第4章 HTML 5多媒体应用 83 4.1 多媒体简介 84 4.2 播放视频 85 4.2.1 video元素基础用法 85 4.2.2 video元素方法 87 4.2.3 video元素事件 88 4.3 播放音频 90 4.3.1 audio元素基础用法 90 4.3.2 audio元素事件 91 4.4 综合应用实例：网页视频播放器 92 本章小结 97 习题 98 第5章 HTML 5绘图应用 99 5.1 认识canvas元素 100 5.1.1 canvas简介 100 5.1.2 创建canvas元素 100 5.1.3 综合应用实例：判断浏览器 是否支持canvas元素 101 5.2 绘制简单图形 101 5.2.1 绘制矩形 102 5.2.2 绘制直线 104 5.2.3 绘制圆形 107 5.2.4 综合应用实例： 绘制三角形 109 5.2.5 保存和恢复图形 111 5.2.6 输出图形 112 5.3 绘制文本 113 5.3.1 绘制普通文本 113 5.3.2 绘制阴影文本 115 5.4 变换图形 116 5.4.1 坐标变换 117 5.4.2 矩阵变换 120 5.4.3 组合图形 122 5.4.4 线性渐变 124 5.4.5 径向渐变 126 5.5 使用图像 127 5.5.1 绘制图像 128 5.5.2 平铺图像 129 5.5.3 裁剪和复制图像 131 5.6 综合应用实例：制作图片黑白和 反转效果 132 本章小结 134 习题 134 第6章 HTML 5数据存储 137 6.1 认识Web存储和Cookie存储 138 6.2 两大Web存储对象 138 6.2.1 sessionStorage对象 139 6.2.2 localStorage对象 140 6.3 操作本地数据 142 6.3.1 保存数据 142 6.3.2 读取数据 143 6.3.3 清空数据 145 6.3.4 遍历数据 145 6.4 综合应用实例：实现工程管理 模块 147 6.5 操作本地数据库数据 152 6.5.1 创建数据库 152 6.5.2 执行SQL语句 153 6.6 综合应用实例：查看学生列表 154 本章小结 156 习题 156 第7章 HTML 5文件和拖放 159 7.1 操作文件 160 7.1.1 获取文件信息 160 7.1.2 文件类型 161 7.2 综合应用实例：文件上传 163 7.3 FileReader接口 164 7.3.1 FileReader接口简介 165 7.3.2 读取文本文件内容 165 7.3.3 监听读取事件 167 7.3.4 处理读取异常 169 7.4 综合应用实例：预览图片 170 7.5 拖放功能 171 7.5.1 拖放API简介 171 7.5.2 dataTransfer对象 173 本章小结 176 习题 176 第8章 CSS 3新增选择器 179 8.1 CSS 3简介 180 8.2 综合应用实例：浏览器CSS 3性能 测试 183 8.3 CSS选择器分类 185 8.4 属性选择器 188 8.4.1 E[att^="val"] 188 8.4.2 E[att$="val"] 189 8.4.3 E[att*="val"] 189 8.4.4 综合应用实例：设计颜色 选择器 190 8.5 伪类选择器 191 8.5.1 E:last-child选择器 191 8.5.2 E:only-child选择器 193 8.5.3 E:nth-child(n)选择器 193 8.5.4 E:nth-last-child(n)选择器 194 8.5.5 E:root选择器 195 8.5.6 E:not(s)选择器 196 8.5.7 E:empty选择器 197 8.5.8 E:target选择器 197 8.5.9 综合应用实例：单击超链接 显示具体内容 199 8.6 伪对象选择器 200 8.6.1 E::selection选择器 200 8.6.2 E::placeholder选择器 201 8.6.3 已修改的选择器 201 8.6.4 综合应用实例：练习content 属性 202 8.7 兄弟选择器 205 本章小结 206 习题 207 第9章 CSS 3修饰文本和背景 209 9.1 新增基本属性 210 9.1.1 文本属性 210 9.1.2 字体属性 211 9.1.3 颜色属性 212 9.1.4 边框属性 212 9.1.5 背景属性 213 9.2 设置文本样式 213 9.2.1 文本换行设置 213 9.2.2 文本对齐方式 216 9.2.3 文本单个阴影 217 9.2.4 文本多个阴影 219 9.2.5 综合应用实例：制作 火焰字 220 9.3 设置边框样式 221 9.3.1 边框圆角属性 221 9.3.2 图形填充边框 224 9.3.3 边框阴影效果 227 9.4 设置背景样式 229 9.4.1 background-size属性 229 9.4.2 background-origin属性 231 9.4.3 background-clip属性 232 9.5 综合应用实例：制作太极图 232 9.6 渐变属性 233 9.6.1 线性渐变 234 9.6.2 综合应用实例：实现图片 闪光划过效果 235 9.6.3 径向渐变 236 9.6.4 综合应用实例：制作一张 优惠券 239 9.6.5 重复渐变 240 9.6.6 综合应用实例：制作记事本 纸张效果 240 本章小结 241 习题 241 第10章 CSS 3变形、过渡和动画 245 10.1 变形属性 246 10.1.1 平移 246 10.1.2 缩放 247 10.1.3 旋转 248 10.1.4 倾斜 249 10.1.5 综合应用实例：制作个性 图片墙 250 10.1.6 指定变形中心原点 252 10.2 过渡属性 253 10.2.1 过渡属性概述 253 10.2.2 单个属性实现过渡 254 10.2.3 多个属性同时过渡 255 10.2.4 综合应用实例：光标悬浮 特效的过渡功能 257 10.3 动画属性 258 10.3.1 了解animation属性 258 10.3.2 @keyframes动画帧 260 10.3.3 综合应用实例：绘制旋转的 太极图案 262 10.4 综合应用实例：动态复古时钟 262 本章小结 265 习题 265 第11章 CSS 3布局属性 267 11.1 多列布局属性 268 11.1.1 多列布局属性列表 268 11.1.2 设置显示列的宽度 268 11.1.3 设置显示的固定列 270 11.1.4 设置显示列的样式 270 11.1.5 设置各列间的间距 271 11.2 弹性盒模型布局属性 272 11.2.1 Flex布局属性 272 11.2.2 flex-direction属性 273 11.2.3 flex-wrap属性 275 11.2.4 justify-content属性 276 11.2.5 其他属性简述 277 11.2.6 综合应用实例：实现三栏 布局 280 本章小结 281 习题 282 第12章 JavaScript脚本编程 快速入门 285 12.1 JavaScript语言简介 286 12.2 编写JavaScript程序 287 12.2.1 集成JavaScript程序 287 12.2.2 使用外部JavaScript文件 289 12.3 JavaScript脚本语法 290 12.3.1 数据类型 290 12.3.2 变量与常量 290 12.3.3 运算符 291 12.4 脚本控制语句 294 12.4.1 if条件语句 294 12.4.2 switch条件语句 297 12.4.3 while循环语句 298 12.4.4 do while循环语句 298 12.4.5 for循环语句 299 12.4.6 for in循环语句 299 12.5 函数 300 12.5.1 系统函数 300 12.5.2 自定义函数 301 12.6 常用对象 302 12.6.1 Array对象 302 12.6.2 Document对象 303 12.6.3 Window对象 304 12.7 常用事件 305 12.7.1 键盘事件 305 12.7.2 鼠标事件 306 12.7.3 页面事件 307 本章小结 308 习题 308 参考文献 310