HTML5+CSS3 Web开发案例教程 : 在线实训版

✍ Scribed by 温谦编著, 温谦.

• Publisher: 人民邮电出版社
• Year: 2022
• Tongue: Chinese
• Leaves: 340
• Category: Library

✦ Table of Contents

第一篇 基础篇
第1章Web 前端开发基础知识
1.1 基础概念
1.2 网页与HTML
1.3 Web 标准：结构、表现与行为
1.3.1 标准的重要性
1.3.2 “Web 标准”概述
1.4 初步理解网页设计与开发的过程
1.4.1 基本任务与角色
1.4.2 明确网站定位
1.4.3 收集信息和素材
1.4.4 策划栏目内容
1.4.5 设计页面方案
1.4.6 制作页面
1.4.7 实现后台功能
1.4.8 整合与测试网站
1.4.9 页面设计相关技术的基础知识
本章小结
习题1
第2章HTML5 基础
2.1 HTML5 基础知识
2.1.1 HTML 文件结构
2.1.2 简单的HTML 实例
2.1.3 网页源文件的获取
2.2 实例：利用 VS Code 快速建立基本文件
2.2.1 创建新的空白文件
2.2.2 编写基础的HTML 文件
2.3 文本标记
2.3.1 实现段落与段内换行（

和
标记）
2.3.2 设置标题（

～

标记）
2.3.3 使文字水平居中（标记）
2.3.4 设置文字段落的缩进（

标记）
2.4 HTML 标记与HTML 属性
2.4.1 用align 属性控制段落的水平位置
2.4.2 用bgcolor 属性设置背景颜色
2.4.3 设置文字的特殊样式
2.4.4 设置文字的字体、大小和颜色（标记）
2.4.5 网页中的特殊文字符号
2.5 在网页中使用图片（标记）
2.5.1 网页中的图片格式
2.5.2 一个插入了图片的简单网页
2.5.3 使用路径
2.5.4 用alt 属性为图片设置替换文本
2.6 再谈HTML5
2.6.1 追根溯源
2.6.2 HTML5 的优势与特点
2.6.3 HTML5 新增标记
2.7 实例：创建一个简单的网页
本章小结
习题2
第3章CSS3 基础
3.1 入门知识
3.1.1 CSS 标准
3.1.2 传统HTML 的缺点
3.1.3 CSS 引入
3.1.4 如何编写CSS
3.2 理解CSS 规则
3.3 基本CSS 选择器
3.3.1 标记选择器
3.3.2 类别选择器
3.3.3 ID 选择器
3.4 在HTML 中使用CSS 的方法
3.4.1 行内样式
3.4.2 内嵌式
3.4.3 链接式
3.4.4 导入样式
3.4.5 各种方式的优先级问题
本章小结
习题3
第4章CSS3 选择器
4.1 复合选择器
4.1.1 交集选择器
4.1.2 并集选择器
4.1.3 后代选择器
4.2 CSS 的继承和层叠特性
4.2.1 继承关系
4.2.2 CSS 继承的运用
4.2.3 CSS 的层叠特性
4.3 关系选择器
4.3.1 后代选择器
4.3.2 子元素选择器
4.3.3 相邻兄弟选择器
4.3.4 相邻兄弟组选择器
4.4 属性选择器
4.4.1 属性存在选择器
4.4.2 属性等于选择器
4.4.3 属性包含选择器
4.5 结构伪类选择器
4.6 伪元素选择器
本章小结
习题4
第二篇 样式篇
第5章 用CSS 设置文字样式
5.1 长度单位
5.1.1 相对类型
5.1.2 绝对类型
5.2 颜色定义
5.3 实例：通过文字样式美化页面
5.3.1 准备页面
5.3.2 设置文字的字体
5.3.3 设置文字的倾斜效果
5.3.4 设置文字的加粗效果
5.3.5 英文字母大小写转换
5.3.6 控制文字的大小
5.3.7 设置文字的装饰效果
5.4 实例：通过段落样式美化页面
5.4.1 设置段落首行缩进
5.4.2 设置字词间距
5.4.3 设置段落内部的文字行高
5.4.4 设置段落之间的距离
5.4.5 控制文字的水平位置
5.4.6 设置文字与背景的颜色
5.4.7 设置文字的特效
本章小结
习题5
第6章用CSS 设置图片效果
6.1 设置图片边框
6.1.1 基本属性
6.1.2 为不同的边框分别设置样式
6.2 图片缩放
6.3 图文混排
6.3.1 文字环绕
6.3.2 设置图片与文字的间距
6.4 实例：制作八大行星科普网页
6.5 设置图片与文字的对齐方式
6.5.1 横向对齐
6.5.2 纵向对齐
本章小结
习题6
第7章盒子模型
7.1 “盒子”与“模型”的概念探究
7.2 设置边框（border）
7.2.1 设置边框样式（border-style）
7.2.2 属性值的简写形式
7.3 设置内边距（padding）
7.4 设置外边距（margin）
7.5 盒子之间的关系
7.5.1 HTML 与DOM
7.5.2 标准流
7.5.3

标记与标记
7.6 盒子在标准流中的定位原则
7.6.1 行内元素之间的水平外边距
7.6.2 块级元素之间的竖直外边距
7.6.3 嵌套盒子之间的外边距
7.6.4 margin 属性可以被设置为负数
7.7 实例：盒子模型计算思考题
7.8 盒子模型相关的常用样式属性
7.8.1 背景
7.8.2 圆角
7.8.3 阴影
7.8.4 渐变
本章小结
习题7
第8章用CSS 设置链接与导航菜单
8.1 超链接标记
8.2 丰富的超链接特效
8.3 创建按钮式超链接
8.4 实例：制作荧光灯效果的菜单
8.4.1 HTML 框架
8.4.2 设置容器的CSS 样式
8.4.3 设置菜单项的CSS 样式
8.5 控制鼠标指针
8.6 设置项目列表样式
8.6.1 列表符号
8.6.2 图片符号
8.7 实例：创建简单的导航菜单
本章小结
习题8
第9章用CSS 设置表格样式
9.1 控制表格
9.1.1 表格中的标记
9.1.2 设置表格的边框
9.1.3 确定表格的宽度
9.1.4 合并单元格
9.1.5 其他与表格相关的标记
9.2 美化表格
9.2.1 搭建HTML 结构
9.2.2 整体设置
9.2.3 设置单元格样式
9.2.4 实现斑马纹效果
9.2.5 设置列样式
9.3 实例：制作日历
9.3.1 搭建HTML 结构
9.3.2 设置整体样式和表头样式
9.3.3 设置日历单元格样式
本章小结
习题9
第10章用CSS 设置表单
10.1 表单的用途和原理
10.2 表单输入类型
10.2.1 文本输入框
10.2.2 单选按钮
10.2.3 复选按钮
10.2.4 密码输入框
10.2.5 按钮
10.2.6 多行文本框
10.2.7 下拉列表框和列表框
10.3 CSS 与表单
10.4 实例：制作“数独”游戏网页
10.4.1 搭建基本表格
10.4.2 设置表格样式
10.4.3 加入文本输入框
10.4.4 设置文本输入框的样式
本章小结
习题10
第三篇 布局篇
第11章经典div+CSS 网页布局方法
11.1 向报纸学习排版
11.2 CSS 排版观念
11.2.1 两列布局
11.2.2 三列布局
11.2.3 多列布局
11.3 元素的浮动
11.3.1 浮动的方式
11.3.2 使用clear 属性清除浮动的影响
11.3.3 扩展盒子的高度
11.4 元素的定位
11.4.1 静态定位（static）
11.4.2 相对定位（relative）
11.4.3 绝对定位（absolute）
11.4.4 固定定位（fixed）
11.5 z -index 空间位置
11.6 制作经典两列布局
11.6.1 准备工作
11.6.2 绝对定位法
11.6.3 浮动定位法
本章小结
习题11
第12章网格布局
12.1 基础概念
12.1.1 网格容器和网格项
12.1.2 网格线
12.1.3 行、列、单元格和网格区域
12.2 准备代码
12.3 划分网格
12.4 放置网格项
12.4.1 使用网格区域名称定位
12.4.2 使用网格线数字定位
12.4.3 使用网格线名称定位
12.4.4 自动定位
12.5 设置网格项的对齐方式
12.6 设置行间隔和列间隔
12.7 实例：用网格实现经典三列布局
12.8 实例：制作计算器
12.8.1 建立基础的HTML 结构
12.8.2 添加基础样式
12.8.3 使用网格布局定位
12.8.4 调整细节
本章小结
习题12
第13章弹性盒子布局
13.1 基础概念
13.2 弹性容器
13.3 弹性的核心基础
13.3.1 弹性三要素（flex-grow、flex-shrink 和flex-basis 属性）
13.3.2 设置换行
13.3.3 实例：用弹性盒子实现Bootstrap 的栅格系统
13.4 设置对齐方式
13.5 实例：用弹性盒子创建嵌套的留言布局
13.5.1 搭建框架
13.5.2 用弹性盒子布局
13.5.3 头像放右侧
13.5.4 实现布局的嵌套
本章小结
习题13
第14章响应式布局
14.1 响应式概述
14.2 弹性布局
14.3 媒体查询
14.3.1 实例：用网格布局实现手机端页面
14.3.2 断点
14.4 实例：实现Bootstrap 响应式栅格系统
14.4.1 建立基础框架
14.4.2 适配小型设备
14.4.3 适配中型设备
14.4.4 适配大型设备
14.5 元视口标记
14.6 弹性媒体
14.7 实例：制作仿苹果官网的响应式页头
14.7.1 搭建框架
14.7.2 适配计算机端
14.7.3 适配平板电脑端
14.7.4 适配手机端
本章小结
习题14
第四篇 扩展篇
第15章变换、过渡与动画
15.1 变换
15.1.1 旋转（rotate）
15.1.2 缩放（scale）
15.1.3 平移（translate）
15.1.4 倾斜（skew）
15.1.5 变换原点（transform-origin）
15.2 过渡
15.3 关键帧动画
本章小结
习题15
第16章前端CSS 的工程化
16.1 CSS 预处理器Sass
16.1.1 嵌套写法
16.1.2 定义变量
16.1.3 模块系统
16.1.4 混入
16.1.5 继承
16.2 使用webpack 构建系统
16.2.1 安装Node.js 环境
16.2.2 准备项目文件
16.2.3 安装webpack 及其相关组件
16.2.4 预览与调试
16.2.5 打包
本章小结
习题16
第17章综合实例：Web 前端开发工作流程
17.1 Web 前端开发概述
17.2 实例概述
17.3 网站结构与页面内容分析
17.4 HTML 结构设计
17.5 原型设计
17.6 页面方案设计
17.7 页面制作
17.8 遵从Web 标准的设计流程
本章小结
习题17