Web前端开发技术（HTML5+CSS3+jQuery）
书号：9787113231064 套系名称：“十三五”高等职业教育计算机类专业规划教材
作者：高莺 尤澜涛 出版日期：2017-09-01
定价：39.00 页码 / 开本：200 /16
策划编辑：汪敏 责任编辑：秦绪好 冯彩茹
适用专业：无 适用层次：高职学校
最新印刷时间：2022-01-11
主要围绕HTML5、CSS3、jQuery相关技术讲解网页设计与制作，全书共分三篇：基础篇、提高篇、应用篇。基础篇主要介绍 Web前端技术开发的基本概念， HTML、CSS、JavaScript三者在网页开发中各自扮演的角色、网页开发环境与工具，制作图文并茂的页面，表格的应用，表单的应用，介绍通过HTML5搭建文本、图像、超链接、表格、表单等网页内容。提高篇主要内容包括CSS基础知识，字体样式设置，文本精细排版，背景设置，层与区块的页面布局，多媒体元素， Canvas元素，着重介绍 CSS代码开发。应用篇主要内容包括 JavaScript、jQuery脚本语言的基础开发，bootstrap前端开发框架的应用，使用列表制作水平导航栏的应用，综合网站开发的案例。
基于案例教学的思想，所有实例都经过了精挑细选，具有非常好的代表性和实用性，使读者能够快速掌握网页制作的相关技术，迅速进入Web页面的实战开发。
适合作为高等职业院校Web前端技术开发的初级教程，也可作为教师的教辅用书。
基 础 篇第1单元 网页开发入门...................2
1.1 网页基础知识 ...................................2
1.1.1 网页与网站 ...............................2
1.1.2 经典网页赏析 ...........................3
1.1.3 浏览器的兼容性问题 ...............5
1.2 HTML、CSS、JavaScript三者扮演
的角色 ...............................................51.2.1 HTML与HTML5的概念 ..........6
1.2.2 CSS与CSS3的概念 ...................7
1.2.3 JavaScript介绍 ..........................8
1.3 网页开发环境与工具 .......................9
第2单元图文并茂的页面制作 ......132.1 XHTML与文档类型声明 ...............13
2.2 HTML基础语法 ..............................15
2.2.1 HTML标记 .............................15
2.2.2 HTML标记属性 .....................16
2.2.3 添加HTML注释 .....................17
2.3 HTML文档整体结构 ......................18
2.3.1 文档头部 .................................18
2.3.2 文档主体 .................................19
2.4 添加段落 .........................................20
2.5 添加标题 .........................................21
2.6 文本修饰 .........................................22
2.6.1 设置文本加粗 .........................22
2.6.2 设置文本倾斜 .........................22
2.6.3 设置下画线 .............................22
2.7 特殊字符 .........................................23
2.8 图片与超链接 .................................23
2.8.1 设置图片 .................................24
2.8.2 添加超链接 .............................24
2.8.3 绝对路径与相对路径 .............26
2.9 HTML文件命名及代码编写 ..........27
实训任务——花卉图片展页面制作 ........28
技能训练——苏州园林景点介绍页面
制作 ...................................29第3单元 表格的应用 ....................31
3.1 创建表格 .....................................31
3.1.1 表格的基本构成 .....................32
3.1.2 设置表格的标题 .................32
3.1.3 添加表头 .................................33
3.2 表格属性设置 .................................34
3.2.1 设置表格边框样式 .................34
3.2.2 设置宽度和高度 .....................35
3.2.3 设置对齐方式 .........................37
3.2.4 边距与填充 .............................39
3.2.5 背景色设置 .............................40
3.3 跨行和跨列操作 .............................42
3.3.1 跨列操作 .............................42
3.3.2 跨行操作 .............................43
3.4 表格嵌套 .........................................43
实训任务——摄影师个人主页的设计与
制作 ...................................44
技能训练——插件中心的设计与制作 ...46第4单元 H5表单的应用 ................47
4.1 创建表单 .........................................47
4.2 表单输入控件 .................................48
4.2.1 定义单行文本框 .....................50
4.2.2 定义密码框 .............................51
4.2.3 定义单选按框 .........................51
4.2.4 定义复选框 .............................52
4.2.5 定义标准按钮 .....................52
4.2.6 定义提交按钮 .........................53
4.2.7 定义重置按钮 .........................53
4.2.8 定义图像域 .............................54
4.2.9 定义隐藏域 .............................55
4.2.10 定义文件域 ...........................55
4.2.11 定义日期选择器 ...................56
4.2.12 定义拾色器 ...........................57
4.2.13 定义数值域文本框 ...............57
4.2.14 定义数值域滑动条 ...............58
4.3 定义下拉列表 .................................59
4.4 定义文本域 .....................................60
4.5 定义标签 .........................................61
4.6 HTML5表单数据内容变化 ............61
4.6.1 HTML5数据提交格式 ...........61
4.6.2 HTML5数据提交范围 ...........62
4.6.3 HTML5表单数据类型和控件
标记增加 .................................624.6.4 HTML5表单属性和验证方式
进化 .........................................62
实训任务——登录表单的制作 ...............65
技能训练——注册页面的设计与制作 ....66提 高 篇
第5单元 使用
CSS美化页面 .........68
5.1 CSS基础 ..........................................68
5.1.1 CSS样式表的概念 ..................68
5.1.2 CSS的选择器 ..........................68
5.1.3 CSS样式表引入方式 ..............72
5.2 CSS字体样式设置 ..........................74
5.2.1 设置字体 .................................74
5.2.2 设置字体大小 .........................75
5.2.3 设置字体样式 .........................76
5.2.4 设置字体加粗 .........................77
5.2.5 设置字体变体 .....................79
5.2.6 设置组合字体属性 .............79
5.2.7 设置文字颜色 .........................80
5.3 文本精细排版 .................................81
5.3.1 添加文本修饰 .........................81
5.3.2 设置文本对齐方式 .................82
5.3.3 设置文本缩进 .........................82
5.3.4 调整行高 .................................83
5.3.5 转换英文大小写 .....................84
5.4 背景设置 .........................................85
5.4.1 设置背景颜色 .........................85
5.4.2 插入背景图片 .....................86
5.4.3 设置重复背景图片 .................87
5.4.4 插入背景附件 .........................88
5.4.5 设置背景图片位置 .................89
5.4.6 设置背景组合属性 .................90
实训任务——百度搜索结果页面的
样式设置 ...........................90
技能训练——音乐页面的样式设置 ........92第6单元 层与区块的页面布局 ......93
6.1 CSS布局基础 ..................................93
6.1.1 文档流的概念 .........................93
6.1.2 块级元素与行内元素 .............94
6.2 创建层 ...........................................94
6.3 盒子模型 .........................................95
6.4 边框属性 .........................................97
6.5 填充属性 .........................................99
6.6 边距属性 .......................................100
6.7 元素浮动 .......................................101
6.8 清除浮动 .......................................105
6.9 元素定位 .......................................106
6.9.1 绝对定位 ...............................106
6.9.2 相对定位 ...............................108
6.9.3 z-index空间位置 ...................108
实训任务——“厂”字形页面布局
设计 .................................109
技能训练——DIV+CSS页面布局建站...112第7单元 多媒体页面设计 ...........113
7.1 HTML5多媒体元素 ......................113
7.1.1 HTML5音频 .........................113
7.1.2 HTML5视频 .........................114
7.1.3 使用DOM控制播放 .............116
7.2 HTML5 Canvas元素 .....................117
7.2.1 Canvas常用属性
...................118
7.2.2 Canvas 常用方法介绍
..........118
实训任务——音乐盒的设计与制作 ......122
技能训练——笑脸的绘制 ......................124应 用 篇
第8单元 列表的应用 ..................126
8.1 列表的建立与使用 .......................126
8.1.1 列表类型 ...............................126
8.1.2 无序列表 ...............................127
8.1.3 有序列表 ...............................128
8.2 嵌套列表 .......................................129
8.3 CSS设置列表样式 ........................129
8.3.1 设置列表样式 .......................129
8.3.2 添加列表图像 .......................130
8.4 列表结合CSS的应用 ....................131
实训任务——水平导航栏的制作 ..........132
技能训练——排行榜的设计与制作 ......137第9单元 JavaScript基础
............138
9.1 JavaScript概要 ...............................138
9.1.1 什么是JavaScript ..................138
9.1.2 JavaScript的特点 ..................138
9.2 JavaScript的用法 ...........................139
9.3 JavaScript的常量与变量 ...............140
9.3.1 标识符 ...................................140
9.3.2 注释 .......................................140
9.3.3 数据类型 ...............................141
9.3.4 常量 .......................................141
9.3.5 变量 .......................................142
9.4 JavaScript的运算符 .......................142
9.4.1 算术运算符 ...........................142
9.4.2 比较运算符 ...........................143
9.4.3 逻辑运算符 ...........................144
9.5 流程控制结构 ...............................146
9.5.1 顺序结构 ...............................146
9.5.2 选择结构 ...............................146
9.5.3 循环结构 ...............................151
9.5.4 函数 .......................................154
9.6 对象概述 .......................................156
9.6.1 HTML DOM概念 .................157
9.6.2 对象的属性 ...........................158
9.6.3 对象的方法 ...........................158
9.6.4 常用对象 ...............................158
9.7 事件 ...............................................163
9.8 jQuery脚本编程 ............................165
9.8.1 jQuery介绍 ............................165
9.8.2 jQuery的特点 ........................165
9.8.3 jQuery应用 ............................166
9.8.4 jQuery选择器 ........................167
9.8.5 jQuery中的DOM操作 ..........169
9.8.6 jQuery中的事件和动画 ........171
9.8.7 jQuery表单和表格的应用 ....174
实训任务——登录页面制作 ..................176
训练技能——简易Web计算器功能的
实现 .................................180第10单元 综合案例实战 .............181
10.1 网站设计和准备 .........................181
10.1.1 内容设计 .............................181
10.1.2 Bootstrap的应用 .................182
10.2 首页制作 .....................................183
10.2.1 大背景图片的自适应布局 ...18310.2.2 页面浮动元素的制作 .........184
10.3 子栏目页面的制作 .....................186
10.3.1 景点列表的制作 .................186
10.3.2 住宿列表的制作 .................188
10.3.3 交通列表的制作 .................189
10.4 详情页面的制作 .........................190
10.4.1 景点详情页面的制作 .........190
10.4.2 住宿详情页面的制作 .........191
10.4.3 交通详情页面的制作 .........192
基于案例教学的思想，所有实例都经过了精挑细选、具有非常好的代表性和实用性，能够使读者快速掌握网页制作的相关技术，进行Web页面的开发。