HTML5与CSS网页设计基础（第6版 知识点+案例+习题+视频）

第1 章　互联网和万维网基础 1

第2 章　HTML 基础 29

第3 章　网页设计基础 75

第4 章　CSS 基础 117

第5 章　图形和文本样式基础 151

第6 章　CSS 进阶 191

第7 章　页面布局基础 231

第8 章　灵活响应布局基础 279

第9 章　表格基础 341

第10 章　表单基础 363

第11 章　媒体和交互性基础 413

第12 章　Web 发布基础 447

详细目录

第1 章 　互联网和万维网基础 1

1.1　互联网和万维网 2

互联网 2

互联网的诞生 2

互联网的发展 2

万维网的诞生 2

第一个图形化浏览器 3

各种技术的融合 3

1.2　网页标准和无障碍访问 4

W3C 推荐标准 4

网页标准和无障碍访问 4

无障碍访问和法律 4

网页通用设计 5

网络概述 5

客户端/ 服务器模型 6

客户端 7

服务器 7

1.3　Internet 协议 8

电子邮件协议 8

超文本传输协议 8

文件传输协议 8

传输控制协议/Internet 协议 8

IP 地址 9

1.4　统一资源标识符(URI)

和域名 10

URI 和URL 10

域名 10

顶级域名 11

通用顶级域名 11

国家代码顶级域名 12

域名系统DNS 13

1.5　网上的信息 14

网上的信息可靠吗？ 14

网上的信息是最新的吗？ 14

有没有指向额外资源的链接？ 14

是维基百科吗？ 15

使用网上信息时的道德规范 15

1.6　HTML 概述 16

什么是HTML 16

什么是XML 17

什么是XHTML 17

HTML 的最新版本HTML5 17

1.7　网页幕后揭秘 18

文档类型定义(DTD) 18

网页模板 18

html 元素 19

页头区域 19

主体区域 19

1.8　第一个网页 20

新建文件夹 20

保存文件 21

测试网页 23

复习和练习 24

第2 章　HTML 基础 29

2.1　标题元素 30

无障碍访问和标题 31

HTML5 更多的标题选项 31

2.2　段落元素 32

对齐 33

2.3　换行和水平标尺 34

换行元素 34

水平标尺元素 35

2.4　块引用元素 36

2.5　短语元素 38

2.6　有序列表 40

type 属性、start 属性和reversed属性 40

2.7　无序列表 42

2.8　描述列表 44

2.9　特殊实体字符 46

2.10　HTML 语法校验 48

2.11　结构元素 50

div 元素 50

header 元素 50

nav 元素 50

main 元素 50

footer 元素 50

2.12　练习使用结构元素 52

2.13　更多结构元素 54

section 元素 54

article 元素 54

aside 元素 54

time 元素 54

2.14　锚元素 56

链接目标 57

绝对链接 57

相对链接 57

将整个块作为锚 57

无障碍访问和超链接 57

2.15　练习使用链接 58

站点地图 58

2.16　电子邮件链接 62

复习和练习 64

第3 章　网页设计基础 75

3.1　为目标受众设计 76

浏览器 77

屏幕分辨率 77

3.2　网站组织 78

分级式组织 78

线性组织 79

随机组织 79

3.3　视觉设计原则 80

重复：在整个设计中重复视觉元素 80

对比：添加视觉刺激和吸引注意力 81

近似：分组相关项目 81

对齐：对齐元素实现视觉上的统一 81

3.4　提供无障碍访问 82

通用设计和增强无障碍访问的受益者 82

无障碍设计有助于提高在搜索引擎中的排名 82

法律规定 83

无障碍设计的热潮 83

3.5　文本的使用 84

文本设计的注意事项 84

3.6　调色板 86

十六进制颜色值 86

网页安全色 87

无障碍设计和颜色 87

3.7　针对目标受众进行设计 88

面向所有人 88

面向老年人 88

面向儿童 89

面向年轻人 89

3.8　选择颜色方案 90

以一张图片为基础的方案 90

色轮 90

变深、变浅和变灰 91

单色 91

相似色 92

互补色 92

分散互补色 92

三色 93

四色 93

实现颜色方案 93

3.9　使用图片和多媒体 94

文件大小和图片尺寸 94

抗锯齿/ 锯齿化文本的问题 94

只使用必要的多媒体 95

提供替代文本 95

3.10　更多设计考虑 96

移动设备 96

适当留白 96

视差滚动 97

目前的扁平化网页设计趋势 97

3.11　导航设计 98

网站要易于导航 98

导航栏 98

面包屑导航 98

图片导航 99

动态导航 99

站点地图 99

站点搜索功能 99

3.12　线框和页面布局 100

3.13　固定和流动布局 102

固定布局 102

流动布局 102

3.14　为移动网络设计 104

移动设备设计考虑 104

为移动优化布局 104

为移动优化导航 105

为移动优化图片 105

为移动优化文本 105

3.15　灵活响应的网页设计 106

3.16　网页设计最佳实践 108

复习和练习 110

第4 章　CSS 基础 117

4.1　CSS 概述 118

层叠样式表的优点 118

配置CSS 的方法 119

层叠样式表的“层叠” 119

4.2　CSS 选择符和声明 120

CSS 语法基础 120

background-color 属性 120

color 属性 121

配置背景色和文本色 121

4.3　CSS 颜色值语法 122

4.4　配置内联CSS 124

style 属性 124

4.5　配置嵌入CSS 126

style 元素 126

4.6　配置外部CSS 128

link 元素 128

4.7　CSS 的class、id 和

后代选择符 130

class 选择符 130

id 选择符 130

后代选择符 130

4.8　span 元素 132

span 元素 132

第一部分 132

第二部分 133

4.9　练习使用CSS 134

4.10　层叠 136

4.11　练习使用层叠 138

4.12　CSS 语法校验 140

复习和练习 142

第5 章　图形和文本样式基础 151

5.1　图片 152

GIF 图片 152

JPEG 图片 153

PNG 图片 153

WebP 图片格式 154

流行图形处理软件 155

5.2　img 元素 156

用alt 属性提供无障碍访问 157

5.3　图片链接 158

无障碍访问和图片链接 159

5.4　配置背景图片 160

background-image 属性 160

同时使用背景颜色和背景图片 160

浏览器如何显示背景图片 160

background-attachment 属性 161

5.5　定位背景图片 162

background-repeat 属性 162

定位背景图片 162

5.6　配置多张背景图片 164

5.7　用CSS 配置字体 166

font-family 属性 166

5.8　CSS 文本属性 168

font-size 属性 168

font-weight 属性 168

font-style 属性 169

line-height 属性 169

text-align 属性 169

text-decoration 属性 169

text-indent 属性 169

text-transform 属性 169

letter-spacing 属性 169

5.9　练习配置图形和文本 170

5.10　用CSS 配置列表符号 172

图片作为列表符号 173

5.11　收藏图标 174

配置收藏图标 174

5.12　图像映射 176

map 元素 176

area 元素 176

探索矩形图像映射 176

5.13　figure 元素和figcaption 元素 178

figure 元素 178

figcaption 元素 178

复习和练习 180

第6 章　CSS 进阶 191

6.1　宽度和高度 192

width 属性 192

min-width 属性 192

max-width 属性 193

height 属性 193

6.2　框模型 194

内容 194

填充 194

边框 195

边距 195

框模型实例 195

6.3　边距和填充 196

margin 属性 196

padding 属性 196

6.4　边框 198

6.5　CSS 圆角 200

6.6　页面内容居中 202

6.7　CSS 边框阴影和文本阴影 204

CSS box-shadow 属性 204

CSS text-shadow 属性 205

6.8　CSS 属性background-clip

和background-origin 206

CSS 属性background-clip 206

CSS 属性background-origin 207

6.9　background-size 属性 208

6.10　练习使用CSS 的属性 210

6.11　CSS 的opacity 属性 212

6.12　CSS RGBA 颜色 214

6.13　CSS HSLA 颜色 216

色调、饱和度、亮度和alpha 216

HSLA 颜色示例 216

6.14　CSS 渐变 218

线性渐变语法 218

辐射渐变语法 218

CSS 的渐变和渐进式增强 218

复习和练习 220

第7 章　页面布局基础 231

7.1　正常流动 232

CSS 布局属性 233

7.2　浮动 234

float 属性 234

7.3　清除浮动 236

7.4　溢出 238

overflow 属性 238

用overflow 属性清除浮动 238

对比clear 属性与overflow 属性 238

用overflow 属性配置滚动条 239

7.5　CSS 的属性box-sizing 240

7.6　基本双栏布局 242

双栏布局的例子 245

7.7　用无序列表 246

用CSS 的配置无序列表 246

用CSS text-decoration 属性消除

下划线 246

7.8　用无序列表实现水平导航 248

CSS 的display 属性 248

用CSS 配置 248

7.9　用伪类实现CSS 交互性 250

7.10　练习CSS 双栏布局 252

7.11　用CSS 控制打印 254

打印样式最佳实践 254

7.12　CSS 精灵 256

7.13　用CSS 进行定位 258

static 定位 258

fixed 定位 258

相对定位 258

粘性定位 259

绝对定位 260

z-index 属性 260

7.14　固定位置的导航栏 262

7.15　区段标识符 264

区段标识符和FAQ 264

区段标识符和无障碍访问 265

使用区段标识符 265

7.16　单页网站 266

复习和练习 268

第8 章　灵活响应布局基础 279

8.1　CSS 灵活框布局 280

配置灵活容器 280

display 属性 280

flex-wrap 属性 281

flex-direction 属性 281

8.2　灵活容器的更多知识 282

流向 282

justify-content 属性 282

align-items 属性 283

flex-flow 属性 283

灵活框和gap 属性 283

8.3　灵活框图片库 284

8.4　配置灵活项 286

比例灵活项 286

order 属性 287

8.5　练习灵活框技术 288

8.6　CSS 网格布局 290

配置网格容器 290

display 属性 290

设计网格 290

配置网格列和网格行 291

8.7　网格列、行和间隙 292

网络布局和gap 属性 292

order 属性 292

8.8　双栏网格页面布局 294

配置网格列和行 294

配置网格项 295

网格行编号 295

8.9　使用网格区域的布局 298

grid-area 属性 298

grid-template-areas 属性 298

配置带空白区域的网格 299

grid-template 属性 301

8.10　渐进式增强网格 302

CSS 特性查询 302

8.11　用灵活框和网格来居中 304

8.12　viewport meta 标记 306

8.13　CSS 媒体查询 308

什么是媒体查询 308

使用link 元素的媒体查询例子 308

使用@media 规则的媒体查询示例 309

移动优先 309

8.14　用媒体查询实现灵活响应的布局 310

8.15　用媒体查询实现灵活响应的网格

布局 316

8.16　用CSS 实现灵活图像 320

8.17　picture 元素 322

source 元素 322

8.18　灵活img 元素属性 324

sizes 属性 324

srcset 属性 324

loading 属性 325

8.19　测试移动显示 326

用桌面浏览器测试 326

灵活测试工具 326

浏览器内置工具 327

更多移动测试工具 327

复习和练习 328

第9 章　表格基础 341

9.1　表格概述 342

table 元素 342

border 属性 342

表题 343

9.2　表行、单元格和表头 344

9.3　跨行和跨列 346

9.4　配置无障碍访问表格 348

headers 属性和id 属性 349

scope 属性 349

9.5　用CSS 配置表格样式 350

9.6　CSS 结构性伪类 352

配置首字母 353

9.7　配置表格区域 354

复习和练习 356

第10 章　表单基础 363

10.1　表单概述 364

form 元素 364

表单控件 365

10.2　input 元素和文本框 366

文本框 366

10.3　提交按钮和重置按钮 368

提交按钮 368

重置按钮 368

示例表单 368

10.4　复选框和单选钮 370

复选框 370

单选钮 371

10.5　textarea 元素 372

10.6　select 元素和option 元素 374

select 元素 374

option 元素 374

10.7　label 元素 376

10.8　fieldset 和legend 元素 378

fieldset 元素 378

legend 元素 378

无障碍访问和表单 379

10.9　用CSS 配置表单样式 380

属性选择符 381

10.10　CSS 网格布局表单 382

10.11　服务器端处理 384

隐私和表单 385

10.12　表单练习 386

10.13　密码、隐藏和文件上传控件 388

密码框 388

隐藏输入控件 388

文件上传控件 388

10.14　更多文本表单控件 390

E-mail 地址输入表单控件 390

URL 表单输入控件 390

电话号码表单输入控件 391

搜索词输入表单控件 391

10.15　datalist 元素 392

10.16　表单输入控件 394

slider 表单输入控件 394

spinner 表单输入控件 394

渐进式增强 395

10.17　日历和颜色池控件 396

日期和时间表单控件 396

颜色池表单控件 397

10.18　更多表单练习 398

复习和练习 400

第11 章　媒体和交互性基础 413

11.1　音频和视频入门 414

多媒体和浏览器兼容问题 414

容器和codec 414

11.2　audio 和source 416

audio 元素 416

source 元素 416

音频和无障碍访问 417

11.3　video 和source 418

video 元素 418

source 元素 418

视频和无障碍访问 419

11.4　练习视频 420

我可以使用网上找到的任何

东西吗？ 421

11.5　iframe 元素 422

iframe 元素 422

11.6　CSS 属性transform 424

CSS 旋转变换 424

CSS 的伸缩变换 424

11.7　CSS 属性transition 426

11.8　练习使用过渡 428

11.9　练习使用CSS 下拉菜单 430

11.10　details 和summary 432

details 元素 432

summary 元素 432

11.11　JavaScript 和jQuery 434

JavaScript 434

jQuery 435

11.12　HTML5 的API 436

地理位置 436

Web 存储 436

渐进式Web 应用程序 436

用canvas 元素绘图 437

复习和练习 438

第12 章　Web 发布基础 447

12.1　文件组织 448

相对链接的例子 448

12.2　注册域名 450

选择域名 450

注册域名 451

12.3　选择Web 主机 452

选择虚拟主机 452

12.4　安全套接字层(SSL) 454

数字证书 455

12.5　用FTP 发布 456

FTP 应用程序 456

用FTP 连接 456

使用FTP 456

启动和登录 456

文件上传、下载和删除 457

进一步探索 457

12.6　提交到搜索引擎 458

搜索引擎的组成 458

机器人 458

数据库 458

搜索表单 458

在搜索引擎中列出自己的网站 459

12.7　搜索引擎优化 460

关键字 460

网页标题 460

标题标记 460

描述 460

meta 标记 460

链接 461

文件名 461

HTTPS 协议 461

图片和多媒体 461

有效代码 461

有价值的内容 461

12.8　无障碍访问测试 462

通用设计和无障碍访问 462

Web 无障碍访问标准 462

Section 508 条款 462

WCAG 462

测试无障碍设计相容性 463

自动无障碍设计测试 463

手动无障碍测试 463

12.9　可用性测试 464

进行可用性测试 464

复习和练习 466

附录 473

附录A　HTML5 速查表 474

附录B　CSS 速查表 478

附录C　WCAG 2.1 快速参考 484

附录D　ARIA 地标角色 486

附录E　Web 安全调色板 488