Web前端设计与开发：HTML+CSS基础教程

第1章 HTML快速入门 1

1.1 简单的HTML 1

1.1.1 第一个网页 1

1.1.2 标签与属性 2

1.1.3 HTML简介 3

1.2 HTML文档结构 3

1.2.1 文档类型 4

1.2.2 头部标签 4

1.2.3 主体标签 5

1.3 路径的概念 6

1.3.1 绝对路径 7

1.3.2 相对路径 7

1.4 Notepad++ 8

1.4.1 下载 8

1.4.2 安装 9

1.4.3 导入Web项目 10

1.4.4 浏览网页 10

1.5 Chrome开发者工具 11

1.5.1 打开Chrome开发者

工具 11

1.5.2 查看和修改HTML与

CSS代码 12

1.6 组织文件 14

1.7 网页发布 15

1.8 练习题 16

第2章 HTML基本元素 17

2.1 标题 17

2.2 段落 18

2.3 文本 19

2.3.1 粗体和斜体 19

2.3.2 突出显示文字 20

2.3.3 文本格式 21

2.4 转义字符 21

2.5 水平线 22

2.6 换行 24

2.7 列表 25

2.7.1 列表基础 25

2.7.2 编号和符号 26

2.7.3 嵌套列表 27

2.8 图像 28

2.8.1 图像格式 28

2.8.2 添加图像 28

2.8.3 图像属性 29

2.9 编码规范 31

2.10 标签和属性总结 33

2.10.1 标签说明 33

2.10.2 HTML5废除的标签

和属性 34

2.11 练习题 34

第3章 多媒体 35

3.1 视频 35

3.1.1 添加视频 35

3.1.2 ＜video＞标签的属性 37

3.1.3 指定多个视频文件 39

3.2 音频 40

3.2.1 添加音频 40

3.2.2 音频属性 41

3.3 嵌入多媒体 42

3.4 练习题 43

第4章 超链接 44

4.1 超链接入门 44

4.1.1 基本超链接 44

4.1.2 设置目标窗口 46

4.1.3 图像超链接 47

4.2 链接至锚点 48

4.2.1 创建锚点 48

4.2.2 链接至锚点 48

4.3 其他超链接 49

4.3.1 电子邮件 49

4.3.2 文档链接 51

4.4 练习题 51

第5章 CSS快速入门 53

5.1 CSS预备知识 53

5.2 应用CSS 54

5.2.1 内联样式 54

5.2.2 内部样式 55

5.2.3 外部样式 57

5.3 CSS语法基础 58

5.4 选择器 61

5.4.1 标签选择器 61

5.4.2 class选择器 62

5.4.3 id选择器 64

5.4.4 通用选择器 66

5.4.5 选择器组合 67

5.4.6 包含选择器 69

5.4.7 元素指定选择器 71

5.5 CSS命名 73

5.5.1 驼峰式命名法 73

5.5.2 命名方法 73

5.5.3 代码规范 75

5.6 优先级 76

5.7 练习题 78

第6章 盒模型 80

6.1 从＜div＞标签说起 80

6.1.1 定义＜div＞标签 80

6.1.2 应用样式 82

6.1.3 ＜div＞嵌套 83

6.2 盒模型的定义 86

6.2.1 基本概念 86

6.2.2 定义方法 87

6.2.3 外边距：margin 88

6.2.4 边框：border 91

6.2.5 内边距：padding 94

6.2.6 盒子的宽度与高度 96

6.3 常用属性 98

6.3.1 圆角 98

6.3.2 盒阴影 99

6.3.3 visibility和display 101

6.3.4 溢出 103

6.4 元素类型和转换 106

6.4.1 块级元素 106

6.4.2 行内元素 107

6.4.3 行内块级元素 108

6.4.4 类型转换 110

6.5 练习题 110

第7章 布局模型与技术 112

7.1 包含块 112

7.2 布局模型 114

7.3 流动模型 114

7.4 定位 116

7.4.1 绝对定位 116

7.4.2 固定定位 119

7.4.3 相对定位 120

7.4.4 静态定位 123

7.4.5 元素的居中 123

7.5 浮动布局 125

7.5.1 浮动的定义 125

7.5.2 清除浮动 128

7.5.3 解决元素重叠 129

7.5.4 高度自适应 131

7.6 z-index 133

7.7 常用布局 136

7.7.1 单列布局 136

7.7.2 两列自适应布局 138

7.7.3 三行两列布局 140

7.8 布局技术 141

7.8.1 传统布局方法 141

7.8.2 HTML5语义标签 142

7.8.3 HTML5布局方法 145

7.9 FlexBox布局 147

7.9.1 基本概念 148

7.9.2 flex容器 148

7.9.3 项目属性 157

7.10 练习题 160

第8章 CSS与页面排版 162

8.1 文本 162

8.1.1 字体 162

8.1.2 嵌入字体 164

8.1.3 文字大小 166

8.1.4 粗体和斜体 168

8.1.5 颜色 169

8.1.6 大写和小写 171

8.1.7 文本装饰 172

8.1.8 文本阴影 173

8.2 行内元素 175

8.3 段落 176

8.3.1 对齐方式 176

8.3.2 段落缩进 177

8.3.3 间距 178

8.3.4 行高 179

8.3.5 边框 180

8.3.6 分栏 181

8.4 列表 181

8.4.1 符号与位置 182

8.4.2 图标替换项目符号 183

8.4.3 列表项行内显示 184

8.4.4 列表综合属性 185

8.5 超链接 186

8.5.1 文字导航 186

8.5.2 按钮导航 188

8.6 背景图像 190

8.6.1 添加背景图像 190

8.6.2 背景图像重复 191

8.6.3 背景图像定位 192

8.6.4 固定背景图像 194

8.6.5 背景图像自适应 195

8.7 练习题 196

第9章 表格 198

9.1 创建表格 198

9.2 表格属性 200

9.2.1 表格宽度和列宽 201

9.2.2 边框 204

9.2.3 背景 206

9.2.4 单元格的间距和

内边距 207

9.2.5 合并单元格 208

9.3 表格相关标签 210

9.4 CSS与表格 211

9.4.1 边框 212

9.4.2 文字颜色、背景颜色和

背景图像 212

9.4.3 间距、内边距和

对齐方式 213

9.4.4 综合实例 213

9.5 练习题 215

第10章 表单 216

10.1 创建表单 216

10.2 表单元素 217

10.3 输入控件 218

10.3.1 文本框 219

10.3.2 密码框 220

10.3.3 提交和重置按钮 220

10.3.4 单选按钮和复选框 220

10.4 列表：select 221

10.5 文本区域：textarea 223

10.6 CSS与表单 225

10.6.1 ＜label＞标签 225

10.6.2 分组标签 225

10.6.3 CSS格式化表单 226

10.7 练习题 230

第11章 综合实例：构建博客首页 232

11.1 项目概述 232

11.2 设计分析 232

11.3 页面设计 233

11.3.1 页面布局 233

11.3.2 初始化CSS 234

11.4 页面实现 235

11.4.1 header 235

11.4.2 footer 237

11.4.3 main 237

11.4.4 sidebar 239