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