HTML5与CSS3基础教程(第7版)

3.1　　开始编写网页　 27
3.2　　创建页面标题　 30
3.3　　创建分级标题　 31
3.4　　理解HTML5　 的文档大纲　 32
3.5　　对分级标题进行分组　 36
3.6　　普通页面构成　 37
3.7　　创建页眉　 38
3.8　　标记导航　 40
3.9　　创建文章　 42
3.10　　定义区块　 45
3.11　　指定侧栏　 48
3.12　　创建页脚　 51
3.13　　创建通用容器　 54
3.14　　使用ARIA　 提升可访问性　 57
3.15　　为元素指定类或ID　 名称　 60
3.16　　为元素添加title　 属性　 62
3.17　　添加注释　 63
第4　 章　　文本　 65
4.1　　开始新的段落　 65
4.2　　添加作者联系信息　 66
4.3　　创建图　 68
4.4　　指定时间　 69
4.5　　标记重要或强调的文本　 72
4.6　　指明引用或参考　 74
4.7　　引述文本　 74
4.8　　突出显示文本　 76
4.9　　解释缩写词　 78
4.10　　定义术语　 79
4.11　　创建上标和下标　 80
4.12　　标注编辑和不再准确的文本　 82
4.13　　标记代码　 85
4.14　　使用预格式化的文本　 87
4.15　　指定细则　 88
4.16　　创建换行　 89
4.17　　创建span　 90
4.18　　其他元素　 91
第5　 章　　图像　 97
5.1　　关于Web　 图像　 97
5.2　　获取图像　 99
5.3　　选择图像编辑器　 100
5.4　　保存图像　 100
5.5　　在页面中插入图像　 102
5.6　　提供替代文本　 103
5.7　　指定图像尺寸　 104
5.8　　在浏览器中改变图像的尺寸　 106
5.9　　在图像编辑器中改变图像的尺寸　 107
5.10　　为网站添加图标　 108
第6　 章　　链接　 110
6.1　　链接剖析　 110
6.2　　　 创建指向另一个网页的链接　 111
6.3　　创建锚　 116
6.4　　链接到特定的锚　 117
6.5　　创建其他类型的链接　 118
第7　 章　　CSS　 构造块　 121
7.1　　构造样式规则　 121
7.2　　为样式规则添加注释　 122
7.3　　层叠：当规则发生冲突时　 123
7.4　　属性的值　 126
第8　 章　　操作样式表文件　 133
8.1　　创建外部样式表　 133
8.2　　链接到外部样式表　 134
8.3　　创建嵌入样式表　 136
8.4　　应用内联样式　 137
8.5　　位置的重要性　 138
8.6　　使用与媒体相关的样式表　 139
8.7　　提供替代的样式表　 140
8.8　　借鉴他人灵感：CSS　 142
第9　 章　　定义选择器　 143
9.1　　构造选择器　 143
9.2　　按名称选择元素　 145
9.3　　按类或ID　 选择元素　 146
9.4　　按上下文选择元素　 148
9.5　　选择元素的一部分　 152
9.6　　按状态选择链接元素　 154
9.7　　按属性选择元素　 155
9.8　　指定元素组　 159
9.9　　组合使用选择器　 160
9.10　　选择器回顾　 161
第10　 章　　文本的格式化　 162
10.1　　选择字体系列　 163
10.2　　指定替代字体　 164
10.3　　创建斜体　 165
10.4　　应用粗体格式　 167
10.5　　设置字体大小　 168
10.6　　设置行高　 172
10.7　　同时设置所有字体值　 173
10.8　　设置颜色　 174
10.9　　修改文本的背景　 175
10.10　　控制间距　 178
10.11　　增加缩进179
10.12　　设置空白属性　 180
10.13　　对齐文本　 181
10.14　　修改文本的大小写　 182
10.15　　使用小型大写字母　 183
10.16　　装饰文本　 184
第11　 章　　用CSS　 进行布局　 186
11.1　　开始布局注意事项　 186
11.2　　建立页面结构　 188
11.3　　在旧版浏览器中为HTML5元素添加样式　 192
11.4　　对默认样式进行重置或标准化　 194
11.5　　盒模型　 195
11.6　　修改背景　 197
11.7　　设置元素的高度和宽度　 199
11.8　　设置元素周围的外边距　 202
11.9　　在元素周围添加内边距　 204
11.10　　使元素浮动　 206
11.11　　控制元素浮动的位置　 207
11.12　　设置边框　 210
11.13　　偏移自然流中的元素　 212
11.14　　对元素进行绝对定位　 213
11.15　　指定元素的三维位置　 215
11.16　　决定溢出的位置　 216
11.17　　垂直对齐元素　 218
11.18　　修改鼠标指针　 218
11.19　　显示和隐藏元素　 219
第12　 章　　　 样式表——从移动设备到台式机　 222
12.1　　移动战略和注意事项　 222
12.2　　理解和实现媒体查询　 226
12.3　　构建适用于媒体查询的页面　 232
第13　 章　　使用Web　 字体　 241
13.1　　什么是Web　 字体　 241
13.2　　在哪里能找到Web字体　 242
13.3　　下载第一个Web字体　 244
13.4　　使用@font-face　 245
13.5　　　 对Web　 字体添加样式及管理文件大小　 248
第14　 章　　使用CSS3　 进行增强　 251
14.1　　理解厂商前缀　 251
14.2　　浏览器兼容性速览　 252
14.3　　使用polyfill　 实现渐进增强　 253
14.4　　为元素创建圆角　 254
14.5　　为文本添加阴影　 257
14.6　　为其他元素添加阴影　 259
14.7　　应用多重背景　 261
14.8　　使用渐变背景　 262
14.9　　为元素设置不透明度　 265
第15　 章　　列表　 267
15.1　　创建有序列表和无序列表　 267
15.2　　选择标识　 269
15.3　　选择列表的起始编号　 271
15.4　　使用定制的标识　 271
15.5　　控制标识的位置　 273
15.6　　　 同时设置所有的列表样式属性　 274
15.7　　设置嵌套列表的样式　 274
15.8　　创建描述列表　 278
第16　 章　　表单　 282
16.1　　创建表单　 282
16.2　　处理表单　 284
16.3　　通过电子邮件发送表单数据　 287
16.4　　对表单元素进行组织　 288
16.5　　创建文本框　 290
16.6　　创建密码框　 292
16.7　　　 创建电子邮件框、电话框和URL　 框　 293
16.8　　为表单组件添加标签　 294
16.9　　创建单选按钮　 296
16.10　　创建选择框　 297
16.11　　创建复选框　 298
16.12　　创建文本区域　 299
16.13　　让访问者上传文件　 300
16.14　　创建隐藏字段　 301
16.15　　创建提交按钮　 302
16.16　　使用图像提交表单　 303
16.17　　禁用表单元素　 304
16.18　　　 HTML5　 的新特性和浏览器支持情况　 304
第17　 章　　视频、音频和其他多媒体　 306
17.1　　第三方插件及步入原生　 306
17.2　　视频文件格式　 307
17.3　　在网页中添加单个视频　 308
17.4　　视频属性一览　 308
17.5　　为视频添加控件和自动播放　 308
17.6　　　 为视频指定循环播放和海报图像　 310
17.7　　阻止预加载视频　 310
17.8　　使用多个来源的视频　 311
17.9　　多个媒体源和source　 元素　 311
17.10　　　 添加具有备用超链接的视频　 312
17.11　　　 添加具有备用Flash　 的视频　 313
17.12　　提供可访问性　 315
17.13　　添加音频文件格式　 315
17.14　　　 在网页中添加单个音频文件　 316
17.15　　　 在网页中添加带控件的单个音频文件　 316
17.16　　音频属性一览　 317
17.17　　　 为音频添加控件、自动播放并设置循环播放　 317
17.18　　预加载音频文件　 318
17.19　　提供多个音频源　 318
17.20　　　 添加具有备用超链接的音频　 319
17.21　　　 添加具有备用Flash　 的音频　 319
17.22　　　 添加同时具有备用Flash和超链接的音频　 320
17.23　　获取多媒体文件　 321
17.24　　考虑数字版权管理（DRM）　 321
17.25　　嵌入Flash　 动画　 321
17.26　　嵌入YouTube　 视频　 322
17.27　　通过canvas　 操作视频　 322
17.28　　联合使用SVG　 和视频　 323
17.29　　更多资源　 323
第18　 章　　表格　 324
18.1　　结构化表格　 324
18.2　　让单元格跨越多列或多行　 327
第19　 章　　处理脚本　 329
19.1　　加载外部脚本　 329
19.2　　添加嵌入脚本　 332
19.3　　JavaScript　 事件　 332
第20　 章　　测试和调试网页　 334
20.1　　尝试一些调试技巧　 334
20.2　　检查常见错误：一般问题　 336
20.3　　检查常见错误：HTML　 337
20.4　　检查常见错误：CSS　 338
20.5　　验证代码　 339
20.6　　测试页面　 341
20.7　　当图像不出现时　 344
20.8　　仍然有错误　 345
第21　 章　　发布网站　 346
21.1　　获得域名　 346
21.2　　为网站寻找主机　 347
21.3　　将文件传送至服务器　 348
附录A　　HTML　 参考　 352
附录B　　CSS　 引用　 363

.　　部分HTML5和CSS3规范仍未最终敲定，但这并不意味着你不能使用这些规范。标准化的过程需要经历一些时间（准确地说需要数年）。浏览器会在规范成为推荐标准之前很久便实现其功能，这也是规范发展过程的反映。因此，浏览器已经包括了大量HTML5和CSS3的功能，尽管它们还没有成为推荐标准。
　　总体上，本书涉及的功能都是规范中较为明确规定的，因此它们在推荐标准推出之前发生改变的可能性极小。很多HTML5和CSS3功能已经实际使用一段时间了，你完全可以放心使用。
　　渐进增强：一种最佳实践
　　我在前言的开头处就讲到了万维网的普适性——万维网上的信息应该能被所有人访问。渐进增强（progressiveenhancement）能帮助你构建具有普适性的网站。这不是一门语言，而是一种建站方法，它由SteveChampeon于2003年提出（http://en.wikipedia.org/wiki/Progressive_enhancement）。
　　这个想法很简单，但也很强大：用所有人都能访问的HTML内容和行为开始构建网站（参见图2）；对同一个页面，用CSS加入你的设计（参见图3），用JavaScript添加额外的行为。这些CSS和JavaScript通常是从外部文件加载进来的（后文会讲到如何做到这些）。
　　图2一个基本的HTML页面，未应用任何自定义的CSS。这个页面可能并不是很好看，但信息都是可访问的，这一点非常重要。即使是20多年前万维网刚产生时的浏览器，都能显示这个页面；最早配有Web浏览器的手机也能显示。此外，屏幕阅读器（可以为视障访问者读出网页的软件）也能轻松地处理这个页面
　　图3同一个页面在支持CSS的浏览器中的显示效果。信息是相同的，只是呈现的方式不同。使用功能更强的设备和浏览器访问这个页面的用户得到了增强的体验
　　这样做的结果就是，那些只能访问基本页面的设备和浏览器会得到简化的、默认的体验，而那些能够浏览更健壮的网站的设备和浏览器将看到增强的版本。不必要求网站对所有人来说体验都是一样的，关键是网站的内容是可访问的。本质上，渐进增强背后的涵义是人人共赢。
　　这本书将会讲解如何建立渐进增强的网站，但在讲述的过程中不会总是把这个词明确地说出来。遵循贯穿全书的最佳实践，自然就能做到渐进增强。
　　不过，第12章和第14章明确强调了渐进增强。如果你想了解以下内容，可以先阅读这两章：如何用渐进增强的原则构建其布局能适应设备屏幕大小和浏览器功能的网站，如何让旧的浏览器显示简化的设计而现代浏览器显示包含CSS3效果的增强版本。
　　渐进增强是构建人人都能访问的网站的关键。
　　目标读者
　　本书假定读者没有任何做网站的知识。因此，从这个意义上说，这本书适合零起点初学者。你将从最基础的HTML和CSS知识学起。在这个过程中，你也会学到HTML5和CSS3的新特性，尤其是那些设计师和开发者在日常工作中经常用到的特性。
　　不过，即使你对HTML和CSS很熟悉，依然可以阅读本书，特别是如果你想快速了解HTML5、CSS3的大量最新特性以及最佳实践的话。
　　1.本书涉及内容
　　为了给读者带来尽可能多的材料，本书英文原版比上一版多约125页的内容。（第1版出版于1996年，只有176页。）此外，我们对上一版几乎每一页都进行了大量更新（甚至完全重写）。总之，第7版是一次重大的修订。
　　全书各章是按照如下方式进行组织的。
　　第1章至第6章及第15章至第18章讲解创建HTML页面的原则和你用得上的HTML元素，并清楚地说明什么时候该使用，以及如何使用这些元素。
　　第7章至第14章讲解CSS，从创建第一条样式规则开始，一直到运用CSS3增强视觉效果。
　　第19章演示如何向页面添加预先写好的JavaScript。
　　第20章讲解在把页面放到万维网上之前如何对其进行测试和调试。
　　第21章讲解如何保护自己的域名，以及如何把网站放到万维网上让其他所有人都能看到。
　　附录A和附录B，其中附录A列出了HTML全局属性、HTML元素及其属性；附录B列出了CSS属性及其值。这些内容可供读者快速查阅。
　　部分主题内容如下。
　　创建、保存、编辑HTML和CSS文件。
　　编写语义化HTML的含义及其重要性。
　　如何把页面内容（即HTML）和呈现（即CSS）分开（这是渐进增强的关键要素）。
　　通过一种有含义的方式，使用那些存在多年的HTML5和新增的HTML元素对内容进行结构化。
　　使用ARIA地标角色和其他好的编码实践提升网站的可访问性。
　　在页面中添加图片，并针对万维网对其进行优化。
　　从一个网页链接到另一个网页，或从页面的一部分链接到另一部分。
　　为文字添加样式（大小、颜色、粗体、斜体等）；添加背景颜色和背景图片；实现浮动的多栏布局，这种布局可根据不同的屏幕尺寸缩小或放大。
　　充分利用CSS3中新的选择器。这些新的选择器提供了更多定位样式的方法。
　　学习为移动设备访问者准备网页。
　　基于许多响应式Web设计原则（其中的一些影响了CSS3媒体查询），为所有用户创建单一网站，不管他们使用的是手机、平板电脑、笔记本、台式机，还是其他能访问万维网的设备。
　　使用@font-face为页面添加自定义的Web字体。
　　应用CSS3效果，如透明度、背景alpha透明、渐变、圆角、外阴影、内阴影、文字阴影以及多背景图片。
　　创建用于获取访问者输入内容的表单，包括使用一些HTML5中新增的输入类型。
　　使用HTML5的audio和video元素向页面插入媒体。
　　当然，还有很多。
　　这些主题都配有众多代码示例，说明如何基于业内最佳实践来实现HTML5和CSS3的各个特性。
　　2.本书未涉及内容
　　唉，尽管比起上一版，我们新增了许多内容，但还是不得不舍弃很多其他的HTML和CSS主题。
　　除了几处例外，我们坚持把那些极少用到、仍可能变化、缺乏广泛浏览器支持或者需要JavaScript知识的主题，以及一些高级主题排除在本书范围以外。
　　本书没有涉及下列主题。
　　HTML5的details、summary、menu、command和keygen元素。
　　HTML5的canvas元素，它让你可以使用JavaScript绘制图像（甚至创建游戏）。
　　需要JavaScript知识或者与HTML5新增的语义化元素没有直接关联的HTML5API和其他高级特性。
　　CSS精灵。这项技术可以将多张图片拼合成一张图片，这有助于减少页面对需要加载的资源的请求数。更多信息请参见www.bruceontheloose.com/sprites/。
　　CSS图片替换。这项技术通常与CSS精灵一起使用。更多信息请参见www.bruceontheloose.com/ir/。
　　CSS3变换、动画和过渡效果。
　　CSS3中新的布局模型。
　　如何使用本书
　　本书几乎所有章节都有演示真实用法的代码示例（参见图4和图5）。通常情况下，随后还会展示这些代码对应的页面在浏览器中显示的屏幕截图，参见图6。
　　图4你将在本书很多地方看到HTML代码片段，对应的部分会被突出显示。省略号（…）表示出于简洁目的而省略的额外代码或内容。通常，省略的部分可在其他代码示例中看到...
　　[body]
　　[headerrole="banner"]
　　...
　　[navrole="navigation"]
　　[ulclass="nav"]
　　[li][ahref="/"class="current"]home[/a][/li]
　　[li][ahref="/about/"]about[/a][/li]
　　[li][ahref="/resources/"]resources[/a][/li]
　　[li][ahref="/archives/"]archives[/a][/li]
　　[/ul]
　　[/nav]
　　...
　　[/header]
　　...
　　[/body]
　　[/html]
　　图5如果示例有CSS代码，它们会单独显示，对应的部分也会突出显示图6用于演示代码如何影响页面的一种或多种浏览器的屏幕截图大多数屏幕截图用的都是当下最新版本的Firefox。不过，这并不意味着，与其他浏览器相比，我们更推荐Firefox。本书的代码示例在最新版本的Chrome、InternetExplorer、Opera和Safari中看起来都是相似的。你将在第20章了解到，应该在不同的浏览器中测试页面，因为你无从知道访问者使用的是什么浏览器。
　　/*站点导航*/
　　.navli{
　　float:left;
　　font-size:.75em;/*makesthe
　　bulletssmaller*/
　　}
　　.navlia{
　　font-size:1.5em;
　　}
　　.navli:first-child{
　　list-style:none;
　　padding-left:0;
　　}
　　代码和屏幕截图中都有对相应HTML元素和CSS属性的描述，以便于对示例的背景进行说明，并加强你对它们的理解。
　　在很多情况下，你会发现只要理解说明和代码示例就可以使用HTML和CSS特性了。但如果你需要这些特性使用方法的明确指导，也可以阅读书中列出的详细步骤讲解。
　　最后，大部分章节都有一些提示，用于提供额外的用法信息、最佳实践、对本书相关部分的引用、对其他资源的链接等。
　　本书约定
　　本书遵循以下约定。
　　HTML一词通常泛指这门语言。HTML5则用于指代这一特定版本的HTML，例如在讨论HTML早期版本所没有的HTML5新特性的时候。CSS（泛指）和CSS3（特指）的用法与之类似。
　　需要你自己输入值的占位符的文字或代码以斜体显示。大多数占位符出现在步骤讲解中。例如，“输入#rrggbb，其中rrggbb是颜色的十六进制代码。”
　　你需要准确输入的代码（即HTML和CSS代码）使用等宽字体（如thisfont）。
　　代码图中的箭头（→）代表延续上一行的代码（这一行代码由于篇幅原因而被折断了），如图5所示。箭头并非代码的一部分，不需要输入。你应该连续地输入这一行代码，就好像它没有被折断。
　　对于需要定义的词，第一次出现时会用楷体显示。
　　IE是对InternetExplorer的简称。例如，IE9与InternetExplorer9同义。
　　在浏览器的版本号后面出现的加号（+）指的是该版本之后的各个版本。例如，Firefox8+指的是Firefox8.0及其后所有的版本。
　　本书配套网站
　　本书网站（www.bruceontheloose.com/htmlcss/）上有本书的目录、本书涉及的（以及一些额外的不适合放入书中的）完整代码示例、引用资源的链接（以及一些额外资源的链接）、写作时用做参考的信息、勘误表，附录A和附录B，等等。
　　www.bruceontheloose.com/htmlcss/examples/列出了所有代码示例。你可以在网页上查看这些代码，也可以把它们下载到你的电脑里──所有HTML和CSS文件你都可以拿到。
　　有时，我会在代码里插入一些额外的注释，用以解释对应代码的含义和用法。限于篇幅，本书大量的代码示例都有所删减，但配套网站列出了完整的代码。读者可随意使用这些代码，并对它们进行修改，使之满足自己项目的需要。
　　下面是本书网站一些重要页面的URL。
　　主页：www.bruceontheloose.com/htmlcss/
　　代码示例：www.bruceontheloose.com/htmlcss/examples/
　　附录A：www.bruceontheloose.com/ref/html/
　　附录B：www.bruceontheloose.com/ref/css/希望该网站对你有用。