HTML5和CSS网页设计基础

简明目录 第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