HTML5+CSS3+JavaScript网页设计教程（微课版）_张润花、赵培植、王尚瀛_9787302581932

《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网页设计教程（微课版）》可作为普通高校、高职高专计算机及相关专业的教材，也可供从事网页设计与制作、网站开发、网页编程等行业人员参考阅读。

互联网技术日新月异。在2011年以前，HTML 5和CSS 3看起来还遥不可及，如今很多公司都已经开始运用这些技术了，Chrome、Safari、Firefox、JE和Opera等主流浏览器已经逐步实现对它们的支持。从前端开发技术来看，互联网经历了三个阶段：个阶段是Web 1.0以内容为主的网络，主流技术是HTML和CSS；第二个阶段是Web 2.0的Ajax应用，热门技术是JavaScript和DOM；第三个阶段是现在的HTML 5和CSS 3技术，这两者相辅相成，使互联网进入一个崭新的时代。
所以如果想从事网页设计或网站管理相关工作，就必须学习并掌握HTML、CSS和JavaScript技术。本书紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML、CSS、JavaScript进行网页设计和制作的各方面内容和技巧。在讲解时采用了的HTML 5规范和CSS 3标准，并以Chrome浏览器为主要测试环境。
本书内容
本书共分为12章，主要内容如下。
第1章初步认识HTML 5。本章首先带领读者了解网页设计的基础知识和Web标准布局知识，然后介绍从HTML到XHTML再到HTML 5的过渡，之后对HTML 5的语法变化作了详细介绍。
第2章 HTML 5网页结构。本章主要介绍HTML 5中新增与网页结构相关的元素，包括头部元素、结构元素、语义元素、节点元素和交互元素、全局属性。
第3章 HTML 5表单应用。本章主要介绍HTML 5中新增的表单输入类型、表单属性、表单元素和表单验证方式。
第4章 HTML?5多媒体应用。本章主要介绍如何使用HTML 5新增的video元素和audio元素播放视频和音频。
第5章 HTML?5绘图应用。本章主要介绍使用canvas元素对图形进行各种绘制，像绘制三角形、文本、渐变和阴影等，还介绍了操作图形的各种方法，像坐标转换等。
第6章 HTML?5数据存储。本章主要介绍HTML?5中新增的两种数据存储方式，即Web存储和本地数据库存储。
第7章 HTML 5文件和拖放。本章主要介绍HTML 5的文件新特性，主要包括允许选择多个文件、读取文件的信息和内容、实现文件上传以及判断是否在线等；后介绍了如何对元素进行拖放。
第8章 CSS 3新增选择器。本章主要介绍CSS 3新增选择器的使用，像属性选择器、伪类选择器和伪对象选择器等。
第9章 CSS 3修饰文本和背景。本章主要介绍CSS 3中新增的背景、边框、字体、颜色等相关属性，例如与背景有关的background-clip、background-size、background-origin属性，与边框有关的border-radius、bobx-shadow、border-image属性，等等。
第10章 CSS 3变形、过渡和动画。本章主要介绍CSS 3的动画功能，包括变形效果、过渡效果和动画帧等。
第11章 CSS 3布局属性。本章主要介绍CSS 3中的新增布局属性，例如多列布局属性、盒模型布局属性等。
第?12?章???JavaScript脚本编程快速入门。本章主要介绍JavaScript的基础知识，包括JavaScript语言的语法规则、运算符、流程控制语句、常用函数、常用对象及常用事件等内容。
本书特色
本书中采用大量的实例进行讲解，力求通过实际操作使读者更容易地制作出前端页面、设计出页面样式和操作页面脚本。本书难度适中，内容由浅入深，实用性强，覆盖面广，条理清晰。
1. 知识点全
本书紧紧围绕前端的HTML 5、CSS 3和JavaScript展开讲解，具有很强的逻辑性和系统性。
* 实例丰富
本书实例丰富，既能体现出知识点，同时又录制了相应的微视频，让读者能轻松地进行学习，并能灵活地应用到实际的软件项目中去。
* 应用广泛
对于精选案例，给出了详细步骤，结构清晰简明，分析深入浅出，而且有些程序能够直接在项目中使用，帮助读者进行二次开发。
* 基于理论，注重实践
在讲解过程中，不仅介绍理论知识，而且在合适位置安排综合应用实例或者小型应用程序，将理论应用到实践中，来加强读者的实际应用能力，巩固开发基础和知识。
2. 贴心的提示
为了便于读者阅读，本书还穿插了一些提示、注意和技巧等小板块，体例约定如下。
* 提示：通常是一些贴心的提醒，让读者加深印象，或提供建议以及解决问题的方法。
* 注意：提出学习过程中需要特别注意的一些知识点和内容，或者相关信息。
* 技巧：通过简短的文字，指出知识点在应用时的一些小窍门。
本书由甘肃建筑职业技术学院的张润花、赵培植、王尚瀛主编，其中，张润花老师负责编写了第2、3、4、9章，共计173千字；赵培植老师负责编写了第5～8章，共计167千字；王尚瀛老师负责编写了第1、10、11、12章，共计129千字。其他参与本书内容整理及设计的人员还有郑志荣、侯艳书、刘利利、侯政洪、肖进、李海燕、侯政云、祝红涛、崔再喜、贺春雷等，在此表示感谢。
在本书的编写过程中，我们力求精益求精，但难免存在一些不足之处，敬请广大读者批评指正。

编者

第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

你还可能感兴趣

我要评论