目 录
第1章
从零起步：网页基础知识详解
1.1 基础核心术语 1
1.1.1 Web概述 1
1.1.2 URL和域名 1
1.1.3 服务器 2
1.1.4 HTTP/HTTPS 2
1.1.5 浏览器 2
1.1.6 DOM 2
1.1.7 HTML、CSS和JavaScript 3
1.2 认识网页 4
1.2.1 网页的定义 4
1.2.2 网页的核心特征 5
1.2.3 网页的常见类型 5
1.3 入门必备工具 6
1.3.1 原型设计工具 6
1.3.2 网站开发工具 7
1.3.3 网站调试工具 8
1.4 AIGC辅助 9
1.4.1 创意生成与风格探索 9
1.4.2 内容创作与素材生成 12
1.4.3 代码生成与补全 13
1.4.4 代码调试与优化 18
1.5 案例实战：AIGC生成人物信息网页 19
1.6 拓展练习 24
第2章
前端骨架：初识HTML5技术
2.1 HTML5概述 25
2.1.1 HTML5的发展史 25
2.1.2 HTML5的优势 25
2.2 HTML5的基础知识 26
2.2.1 HTML5语法 26
2.2.2 HTML5元素 27
2.2.3 HTML5属性 29
2.3 HTML5的文档结构 31
2.3.1 <!DOCTYPE>文档类型声明 31
2.3.2 根标签<html> 32
2.3.3 头部标签<head> 32
2.3.4 标题标签<title> 32
2.3.5 元数据标签<meta> 32
2.3.6 主体标签<body> 33
动手练 AIGC助力诗词网页制作 33
2.4 案例实战：AIGC助力HTML5网页制作与美化 38
2.5 拓展练习 45
第3章
页面元素：网页的基本构成
3.1 网页中文本的应用 47
3.1.1 标题标签 47
3.1.2 预格式化文本标签 48
3.1.3 上标和下标标签 48
3.1.4 注音标签 48
3.1.5 高亮文本标签 49
3.1.6 段落标签 49
3.1.7 换行标签 50
动手练 AIGC助力网页文本优化 50
3.2 网页中图片的应用 51
3.2.1 常见的图片格式 51
3.2.2 插入图像 52
3.2.3 图像的提示文本 53
3.2.4 为图片添加超链接 53
动手练 AIGC助力网页图文样式优化 54
3.3 网页中列表的应用 55
3.3.1 无序列表 55
3.3.2 有序列表 57
3.3.3 定义列表 59
3.3.4 列表嵌套 60
动手练 AIGC助力网页导航栏优化 61
3.4 案例实战：AIGC助力春节专题页面优化 63
3.5 拓展练习 65
第4章
关键标签：网页内容的展示与交互
4.1 网页中表格的应用 66
4.1.1 表格的构成 66
4.1.2 表格的标题 67
4.1.3 设置单元格跨度 68
动手练 AIGC优化网页表格内容 69
4.2 网页链接的应用 71
4.2.1 绝对路径与相对路径 71
4.2.2 超链接元素 72
4.2.3 超链接属性 72
4.3 网页多媒体的应用 74
4.3.1 多媒体的定义 74
4.3.2 Web支持的音视频格式 74
4.3.3 audio元素 75
4.3.4 video元素 75
4.3.5 通用控制属性 75
4.3.6 视频专属属性 76
4.3.7 audio和video的方法 77
4.3.8 audio和video的事件 78
动手练 AIGC优化视频播放页面 78
4.4 网页表单的应用 80
4.4.1 表单的核心标签 80
4.4.2 使用form元素 82
4.4.3 使用input元素 83
动手练 AIGC优化表单页面 84
4.5 案例实战：AIGC助力生肖网页设计 85
4.6 拓展练习 88
第5章
样式基础：CSS3概述
5.1 认识CSS3 89
5.1.1 CSS的定义 89
5.1.2 CSS3的特征 89
5.1.3 CSS3的优势 91
5.2 在HTML中使用CSS3 91
5.2.1 内联样式 91
5.2.2 嵌入样式 92
5.2.3 外部样式 93
动手练 AIGC助力CSS样式剥离 95
5.3 CSS3选择器 99
5.3.1 基础选择器 99
5.3.2 组合选择器 99
5.3.3 伪类选择器 100
5.3.4 属性选择器 100
5.3.5 伪元素选择器 101
动手练 AIGC注释网页样式 102
5.4 案例实战：AIGC助力样式调整 105
5.5 拓展练习 110
第6章
样式进阶：CSS3视觉样式
6.1 文字样式 111
6.1.1 文本样式 111
6.1.2 字体样式 115
6.1.3 文本溢出 115
6.1.4 文本阴影 116
6.1.5 文本换行 117
动手练 AIGC助力响应式效果设计 117
6.2 边框与背景 120
6.2.1 基础边框属性 120
6.2.2 圆角边框 121
6.2.3 图片边框 122
6.2.4 盒子阴影 123
6.2.5 基础背景属性 125
6.2.6 多背景 125
6.2.7 渐变背景 126
动手练 AIGC助力网页按钮效果设计 128
6.3 转换特性 130
6.3.1 2D转换 130
6.3.2 3D转换 131
6.4 案例实战：AIGC助力圆环动画效果制作 132
6.5 拓展练习 136
第7章
核心布局：盒模型
7.1 盒模型的基础 137
7.1.1 认识盒模型 137
7.1.2 盒子的基本类型 137
7.1.3 外边距设置 138
7.1.4 外边距合并 138
7.1.5 内边距设置 139
7.1.6 盒模型尺寸 139
7.2 盒模型的属性设置 140
7.2.1 内容溢出 140
7.2.2 自由缩放 141
7.2.3 外轮廓 141
动手练 AIGC助力矩形缩放 142
7.3 传统盒模型布局 144
7.3.1 标准流布局 144
7.3.2 浮动布局 144
7.3.3 定位布局 145
7.4 现代盒模型布局 147
7.4.1 弹性盒布局 147
7.4.2 网格布局 148
动手练 AIGC助力导航栏效果制作 149
7.5 案例实战：AIGC优化网格布局效果 150
7.6 拓展练习 154
第8章
页面交互：JavaScript基础知识
8.1 认识JavaScript 155
8.1.1 JavaScript的定义 155
8.1.2 调用方式 155
8.1.3 基本语法规则 157
8.2 核心基础语法 157
8.2.1 变量与常量 157
8.2.2 数据类型 158
8.2.3 运算符和表达式 159
8.3 流程控制语句 161
8.3.1 条件判断语句 161
8.3.2 循环语句 162
8.3.3 跳转控制语句 163
动手练 AIGC助力查询页面设计 163
8.4 网页事件的处理 165
8.4.1 常用的网页事件 165
8.4.2 事件的绑定方式 166
8.4.3 事件的执行机制 167
动手练 AIGC助力页面交互 168
8.5 案例实战：AIGC助力表单验证 169
8.6 拓展练习 173
第9章
交互进阶：JavaScript前端核心应用
9.1 JavaScript函数 174
9.1.1 函数的定义方式 174
9.1.2 函数参数的特性 175
9.1.3 函数调用 176
9.2 网页数据的处理与存储 176
9.2.1 数组常用的操作方法 176
9.2.2 对象操作 178
9.2.3 本地存储 179
9.3 DOM操作 180
9.3.1 获取HTML元素 180
9.3.2 对HTML元素进行操作 181
动手练 AIGC助力搜索框样式优化 182
9.4 案例实战：AIGC助力图片轮播效果设计 184
9.5 拓展练习 187
第10章
轻量开发：jQuery基础与应用
10.1 认识jQuery 188
10.2 jQuery的简单应用 188
10.2.1 引入jQuery库 188
10.2.2 基本语法 189
10.2.3 选择器 190
10.2.4 事件 193
10.2.5 常用效果 194
动手练 AIGC助力淡入淡出效果制作 195
10.3 jQuery中的DOM操作 198
10.3.1 DOM操作基础 198
10.3.2 节点操作 198
10.3.3 属性操作 200
10.3.4 样式操作 201
10.3.5 内容操作 201
10.4 jQuery常用插件 202
10.4.1 jQuery插件的定义 202
10.4.2 jQuery UI的基础 203
10.4.3 jQuery UI的核心功能 203
动手练 AIGC助力图像亮度调节 204
10.5 案例实战：AIGC助力手风琴展开效果制作 206
10.6 拓展练习 210
第11章
前端UI框架：Bootstrap的应用
11.1 Bootstrap概述 211
11.1.1 Bootstrap的定义 211
11.1.2 引入Bootstrap 211
11.2 Bootstrap布局 213
11.2.1 布局基础 213
11.2.2 栅格系统 214
11.2.3 布局工具类 215
11.3 Bootstrap实用工具类 216
11.3.1 文本处理 216
11.3.2 颜色 217
11.3.3 边框 218
11.3.4 宽高 219
11.3.5 边距 219
11.3.6 浮动 219
11.3.7 嵌入 220
动手练 AIGC助力网页内容设计 220
11.4 Bootstrap的CSS组件 222
11.4.1 按钮 222
11.4.2 导航 224
11.4.3 表单 225
11.4.4 卡片 226
11.4.5 列表组 227
11.4.6 分页 228
动手练 AIGC助力调研网页制作 229
11.5 案例实战：AIGC助力古风插画网页建设 233
11.6 拓展练习 236
第12章
渐进式框架：Vue.js
12.1 Vue快速入门 237
12.1.1 Vue的定义 237
12.1.2 Vue的引入方式 237
12.2 Vue核心语法 238
12.2.1 模板语法 238
12.2.2 响应式基础 239
12.2.3 条件渲染与列表渲染 240
12.2.4 计算属性与侦听器 242
12.3 Vue组件化设计 243
12.3.1 组件的定义与使用 244
12.3.2 组件通信 246
12.3.3 生命周期 248
动手练 AIGC助力待办事项清单制作 249
12.4 案例实战：AIGC助力计算器制作 251
12.5 拓展练习 251
