关键技术——轻松掌握！

《新手学HTML5(第5版) 在上一版的基础上做了全面更新和修订，循序渐进地讲解如何使用HTML以符合标准的方法创建动态网站。本书紧贴实用，介绍新的HTML5特性(如video、audio和canvas元素)，讨论如何设计页面结构、添加图片、设置文本格式、创建链接、添加颜色、使用多媒体以及使用表单，分析CSS的用法，并讲解基于JavaScript创建动态Web内容、发布网站、编写HTML电子邮件代码等技术。学习本书后，你将可以利用最新HTML技术构建自己的网站。

作 者 简 介

Wendy Willard是一名设计师、顾问、作家和教师，她具有超过17年以上的Web设计和开发经验。她发表过多篇关于HTML、CSS、Web设计和Photoshop的文章。她曾经在美国东北地区的多家公司任职，曾担任艺术指导、创作总监和市场经理等职位，现在她是一名为全球各家公司工作的自由职业者。Wendy拥有美国加州帕萨迪纳艺术中心设计学院学位，与丈夫和两个女儿旅居于缅因州、马里兰和尼加拉瓜。

技术编辑简介

Christie Sorenson是ZingChart的一名高级软件工程师。自从1997年以来，她一直从事基于JavaScript的系统的分析、内容管理和商业应用，深入研究该语言及其用户的演变。她曾参与撰写多本书籍，如Ajax: The Complete Reference和HTML & CSS: The Complete Reference；她还是JavaScript: The Complete Reference和JavaScript: A Beginner’s Guide的技术编辑。她拥有UC San Diego计算机科学理学学士学位，与丈夫Luke以及女儿Ali和Keira生活在美国旧金山。

前    言

我撰写本书第1版的时间距今已超过13个年头，必须承认，在那时，我的想法是“这是又一本HTML书籍——我们需要多少本HTML书籍呢？”当Netscape仅发布了第一个版本时，我就根据经验学习了HTML，很长时间之后我才正式阅读了一本HTML书籍。但当我在书店寻找其他HTML参考资料时，深感有必要为读者撰写一本HTML书籍，让读者以一种实用的、易于理解方式来学习HTML，同时提供一些真实场景下的练习，并对相关问题提出一些建议。

本书就是这样一本书籍，它介绍了一些紧贴实用的工具和知识；无须过多单调地陈述或冗长的技术细节，读者就能轻松地其应用于各种不同的开发情形中。本书重点介绍了一些必备的HTML技术，以及在什么情况下使用这些技术。在修订本书第5版时，我再次比较了同类书籍，以确定在这一新版本中读者需要掌握哪些知识。经过反复比较，我发现读者需要一本以一种易于理解和使用的方式，将HTML5的介绍与最新CSS特性相结合的书籍。此外，对于一本入门级HTML书籍，读者强烈要求以遵循标准的方式来编写Web页面代码，本书完全符合这些要求。

读者对象

本书面向没有接触过HTML或具有少量HTML知识的读者，本书面向任何想学习HTML的人。哪怕你是一个家庭主妇，如果想在不依赖于半成品或快捷模版的情况下创建一个家庭网站，那么也可以学习本书。想获得Web开发技巧的专业人士也可从本书获益。本书还适合于有志于学习HTML以进一步提高程序设计技巧的读者。

在学习HTML时，读者无须具备计算机程序设计或Web开发方面的任何基础知识，在阅读本书时也无须具备这些基础知识。

内容提要

本书分为4个部分：“基础知识”、“添加内容”、“上线”和“附录”。

第Ⅰ部分：“基础知识”。该部分包含了使用HTML高效编码和创建有效Web页面的基础知识。第Ⅰ部分包含6章，相关内容按照主题分解到不同的章节中。每一章都包含一个或多个分步练习，为帮助你将所学知识运用于实际提供实用建议。

第1章：“概述”。 通过回答一些常见问题，帮读者理解什么是Web，比如“谁创建了HTML？”、“谁负责维护HTML？”等，另外还剖析Web站点、Web浏览器以及HTML之间的关系。该章还讨论了如何规划Web网站、如何使用HTML编辑器，并介绍了使用View Source命令的好处。

第2章：“文档设置”。该章首先解释了一些术语，比如标记、特性和嵌套，还讨论命名规范和基本页面结构。

第3章：“设置样式表”。该章详细介绍了如何为HTML文件创建样式表，还介绍了如何在Web页面中使用和引用颜色。

第4章：“使用文本”。该章介绍了如何格式化Web页面中的文本，比如改变文本的字体风格或颜色，或者添加换行和强调。该章还提供了一些关于Web内容的准则。

第5章：“页面结构”。该章进一步阐述了第4章中介绍的内容，重点介绍了如何组织和构建各种不同的内容区块，以及如何格式化段落和其他页面元素。该章的内容是第6章的基础，第6章中将介绍如何定位这些页面元素。

第6章：“定位页面元素”。该章是第Ⅰ部分的收官章节。该章将之前所学的内容合在一起，使用HTML和CSS创建了一个单列页面布局和一个多列页面布局。

第Ⅱ部分：“添加内容”。该部分介绍了网站文本、图片和多媒体内容的所有必要的知识。该部分不仅介绍了如何在网站中添加图片，还介绍了如何使用列表、表格和表单——所有这些内容都是创建可用和高效Web页面的关键要素。

第7章：“使用链接”。该章讨论了HTML的核心概念：超链接。该章详细介绍了如何在Web页面中添加自定义的超链接，超链接可以链接到另一个Web页面、某个Web页面中的一节或一个电子邮件地址。

第8章：“使用图像”。该章介绍了多种不同类型的图片，介绍了在Web页面中如何使用图片、如何将图片添加到页面中，如何创建指向图片的链接以及如何将图片作为链接。该章介绍了主流的Web图片处理软件，还介绍了在为Web页面创建图片时的准则。

第9章：“使用多媒体”。该章介绍了在Web页面中可以添加的不同类型的多媒体，还介绍了在多种浏览器中如何添加这些多媒体。

第10章：“创建列表”。该章介绍了HTML中可用的三种不同类型的列表，介绍了如何创建和格式化这些列表，还介绍了如何用CSS定义列表的样式。

第11章：“使用表格”。该章介绍了既有一点技巧性又非常有用的——HTML表格。该章循序渐进地介绍如何创建一个基本的表格结构，以及如何用CSS格式化表格。

第12章：“创建表单”。该章介绍了绝大多数网站的关键要素——表单，它为网站与用户提供了传递信息的途径。 该章介绍了各种类型的input控件，包括文本框、复选框、文件上传控件、选项菜单和命令按钮，还介绍了关于如何处理表单的信息。

第13章：“表单的格式和样式”。该章构建在第12章所学的内容之上，介绍了如何使表单对用户更友好和高效，该章重点讨论了关于Web表单的布局技术，还介绍了客户端验证技术。

第14章：“超越静态HTML”。该章简要介绍了JavaScript技术。纯粹的HTML只能创建静态页面，JavaScript是一种脚本编程语言，用于创建HTML页面的动态效果。该章提供了一些示例脚本，可在Web页面中添加当前日期和时间、创建动态导航条、在地图上显示用户的地理位置。

第Ⅲ部分：“上线”。这一部分包含两章，介绍了如何发布已经创建的Web页面，还介绍了如何将它们转化为电子邮件读者可访问的HTML电子邮件。

第15章：“发布网页”。该章介绍了在网站上线发布之前应该做的准备工作，对发布工作提供了一些重要的指导，比如将网站托管在哪里、使用什么样的域名以及如何上传网站等。该章介绍了如何对网站进行测试，如何将其提交到搜索引擎和目标，还讨论了一些常用的网站市场营销技巧。

第16章：“HTML电子邮件”。该章是本书中新增的章节，该章向Web开发人员介绍了如何将开发Web页面的技巧转换到HTML电子邮件的环境(特别是为了商业市场的目的)。

第Ⅳ部分：“附录”。以快速参考的格式提供了一些附加信息，并为HTML初学者和高级开发人员提供了一些常用的细节参考。

附录A：“自测题答案”。包含每章末尾“自测题”的参考答案。

附录B：“HTML/CSS参考表”。以便于阅读的字母表顺序，简要列出了本书中介绍的所有HTML标记和CSS属性。

附录C：“故障排除(FAQ)”。为HTML初学者和高级开发人员提供了一些常见问题的答案。

附录D：“特殊符号”。列出了用于在Web页面中嵌入特殊字符的字符实体，如版权符号(?)和&符号。

附录E：“文件类型”。列出了在创建Web页面时最常遇到的一些文件类型，简要描述了每种文件类型的MIME类型。

如何阅读本书

本书对内容进行了合理的结构划分，读者既可以根据需要单独阅读某一章节，也可以通览全书。为了掌握本书介绍的内容，初学者应该按部就班地逐章阅读本书，但中级读者或高级用户可以直接阅读特定的章节作为参考资料。

作为创建网站的实例，每章最后的项目练习都是建立在前一章项目的基础上，如果没有按顺序依次阅读各章，当然也可以调整特定的项目练习以满足自己的需要。

本书特色

每一章都包含了一些“提示”和“注意”特殊段落，随时为相关内容提供一些额外参考信息。书中还给出了详细的代码，很多情况下，代码中某些标记或特性以加粗方式显示，以便进一步解释这些代码。

本书中许多章节中都包含了“专家解答”这样的小节，以说明可能会混淆的问题。每章都包含“试一试”这样的练习和分步风格的项目，让读者对学过的内容进行实战练习。这些项目的意义在于，读者可以这些项目为基础，创建自己的网站或为公司创建网站。

每章的最后都包含“自测题”，以便读者对相应章节所介绍的内容进行复习。附录A给出了这些自测题的答案。

在本书的写作过程中，我们的宗旨是为读者提供一个内容紧凑、易于理解的HTML编码指导，让读者能够立即使用这些技术。我反复强调，学习HTML并不难，你完全可以掌握它。欢迎你学习HTML，无论是在学习HTML的过程中，还是在Web开发过程中，希望读者能充分利用Internet的潜能。就像第1章中讨论的那样，可通过访问你喜欢和不喜欢的网站，以确定影响网站是否受欢迎的各种特征。请访问本书提供的那些附加链接以获得更多信息，也可以通过搜索引擎查找相关内容。祝你学习愉快！

目    录

第Ⅰ部分  基础知识

第1章  概述 3

1.1  将Internet视为一种发布信息的媒体 4

1.1.1  Web站点剖析 4

1.1.2  Web浏览器 7

1.1.3  Internet服务提供商 8

1.2  了解HTML的当前版本 8

1.3  为网站的受众、目标、结构、内容和导航制定规划 10

1.3.1  确定目标客户群 10

1.3.2  设定目标 11

1.3.3  创建网站结构 11

1.3.4  组织内容 12

1.3.5  设计网站的导航 12

1.4  寻找最适合自己使用的HTML编辑器 13

1.5  了解使用主流Web浏览器的View Source命令的好处 17

第2章  文档设置 21

2.1  创建HTML文件 22

2.2  在浏览器中预览HTML文件 23

2.3  描述并应用基本的HTML文档格式 25

2.3.1  元素的类型 26

2.3.2  标记的类型 27

2.3.3  特性 28

2.3.4  必不可少的标记 28

2.3.5  大小写问题 30

2.3.6  引号 31

2.3.7  标记的嵌套 31

2.3.8  代码中的空格和换行 32

2.3.9  标记与标记之间的空格和换行 32

2.3.10  文本行之间的空格 32

2.4  用字符实体显示特殊字符 34

2.5  在HTML文件中添加注释 35

第3章  设置样式表 39

3.1  在HTML文件中设置样式表 40

3.1.1  定义样式 40

3.1.2  定义属性值 41

3.1.3  创建样式 42

3.1.4  理解层叠的含义 45

3.2  了解在Web开发中引用颜色的方法 46

3.2.1  十六进制颜色 46

3.2.2  RGB值和百分比 48

3.2.3  颜色名称 48

3.2.4  应该使用哪种方法来引用颜色 49

3.3  值得注意的新颜色选项 49

3.3.1  RGBA 49

3.3.2  不透明度 50

3.4  指定文档颜色 50

第4章  使用文本 53

4.1  确保文本在屏幕上的可读性 54

4.2  标记文本 55

4.3  定义文本的样式 58

4.3.1  字体名称 58

4.3.2  字体大小 62

4.3.3  字体颜色 65

4.3.4  其他字体样式属性 65

4.4  为文本内容提供打印友好的版本 68

4.4.1  PDF 68

4.4.2  专门用于打印机的样式表 69

4.4.3  设计对打印机友好的页面的技巧 71

第5章  页面结构 73

5.1  组织内容区块 74

5.1.1  确定自然的分块 74

5.1.2  设置标题 81

5.1.3  获得灵感 82

5.2  组织文本 85

5.2.1  段落 85

5.2.2  换行符 86

5.2.3  引用块 88

5.2.4  Box属性 89

5.2.5  对齐 93

第6章  定位页面元素 99

6.1  理解使用样式表进行页面布局的概念 100

6.2  创建单栏、居中、流式页面布局 100

6.2.1  代码剖析 102

6.2.2  融合 103

6.2.3  浏览器支持 104

6.3  创建多栏流式页面布局 104

6.3.1  代码剖析 106

6.3.2  融合 112

6.3.3  浏览器支持 113

6.4  其他CSS页面布局 113

6.5  层叠内容 114

6.6  使用外部样式表 117

6.6.1  链接到外部样式表 118

6.6.2  导入外部样式表 118

第Ⅱ部分　添加内容

第7章  使用链接 125

7.1  添加指向其他Web页面的链接 126

7.1.1  绝对链接 127

7.1.2  相对链接 127

7.2  添加指向同一Web页面之中其他部分的链接 129

7.2.1  创建锚点 130

7.2.2  链接到锚点 131

7.3  添加电子邮件地址和可下载文件的链接 133

7.3.1  电子邮件地址 133

7.3.2  FTP和可下载文件 136

7.4  识别有效链接 137

7.5  定义链接的样式 140

7.5.1  默认的链接颜色 141

7.5.2  除了颜色之外的其他链接样式 142

7.6  定制链接：设置Tab键顺序、键盘快捷方式和目标窗口 143

7.6.1  标题 143

7.6.2  Tab键顺序 143

7.6.3  键盘快捷方式 144

7.6.4  目标窗口 144

第8章  使用图像 149

8.1  找到不同的图像源 150

8.1.1  使用库存图像 150

8.1.2  创建自己的图片 151

8.2  常用图形处理软件 151

8.2.1  Adobe Photoshop和Illustrator 152

8.2.2  其他图形处理软件 153

8.3  识别合适的Web图像文件格式 153

8.3.1  专业术语 153

8.3.2  GIF 155

8.3.3  JPEG 157

8.3.4  PNG 158

8.3.5  选择最佳的文件格式 159

8.4  将图像作为Web页面的前景元素 161

8.5  指定图像的高度和宽度 162

8.6  为图像提供替换文本和标题 163

8.7  将图像链接到Web站点上的其他内容 165

8.7.1  链接整幅图像 165

8.7.2  链接图像中的区域 166

8.8  添加图片标题 169

8.9  为前景图像定义样式 170

8.9.1  图像边框 170

8.9.2  浮动 172

8.9.3  内边距和外边距 175

8.9.4  居中 176

8.9.5  综合示例 176

8.10  使用图像作为Web页面的背景元素 178

第9章  使用多媒体 183

9.1  理解Web浏览器如何使用插件 184

9.1.1  确定已安装的组件 185

9.1.2  识别文件类型、扩展名和相应插件 185

9.2  从Web页面中链接到不同类型的媒体 186

9.3  在Web页面中嵌入不同类型的媒体 188

9.3.1  从audio和video元素开始 188

9.3.2  使用特性进行定制 188

9.3.3  指定音频和视频源 189

9.3.4  提供回退选项 192

9.3.5  添加文本轨道 194

9.3.6  使用embed元素处理非原生多媒体内容 196

9.4  设置媒体内容的样式 196

第10章  创建列表 201

10.1  在Web页面中使用有序列表 202

10.2  在Web页面中使用无序列表 205

10.3  在Web页面中使用定义列表 205

10.4  在Web页面中组合并嵌套多种类型的列表 206

10.5  定义列表的样式 209

10.5.1  定制项目符号 209

10.5.2  定制间距 210

10.5.3  定制整个列表的布局 211

第11章  使用表格 219

11.1  理解在Web页面中使用表格的概念 220

11.2  创建基本的表格结构 221

11.2.1  表格结构 221

11.2.2  单元格的内容 223

11.3  格式化Web页面中的表格 226

11.3.1  边框和外边距 226

11.3.2  宽度和高度 227

11.3.3  基本对齐方式 229

11.3.4  表格的颜色 230

11.3.5  表格的背景图像 231

11.3.6  表格的标题 232

11.4  格式化表格单元格中的内容 234

11.4.1  对齐方式 234

11.4.2  宽度和高度 236

11.4.3  单元格的内边距 237

11.4.4  单元格的颜色 238

11.4.5  禁止换行 239

11.4.6  使单元格跨越多列 239

11.4.7  使单元格跨越多行 240

11.5  格式化表格的其他技术 241

11.5.1  行分组 241

11.5.2  列分组 243

第12章  创建表单 249

12.1  理解表单的概念及其在Web页面中的使用 250

12.2  创建基本表单 250

12.2.1  文本输入 252

12.2.2  单选按钮 257

12.2.3  复选框 258

12.2.4　日期和时间控件 259

12.2.5　其他数值输入控件 261

12.2.6　联系方式 262

12.2.7　颜色选择器 264

12.2.8  选择菜单 264

12.2.9  禁用表单元素 266

12.2.10  隐藏域 267

12.2.11  文件上传控件 267

12.2.12  按钮 268

12.3  验证表单内容 271

12.4  表单的处理方法 273

12.4.1  action特性 273

12.4.2  method特性和enctype特性 275

第13章  表单的格式和样式 277

13.1  在表单中使用表格 278

13.2  创建对用户更友好的表单 279

13.2.1  设置Tab顺序和键盘快捷键 279

13.2.2  使用标签 280

13.2.3  分组控件 281

13.2.4  添加数据列表 283

13.2.5  显示进度条 283

13.2.6  为用户提供帮助 286

13.3  表单样式 287

13.3.1  用样式和Fieldset取代表格布局 290

13.3.2  为客户端验证设置表单样式 293

第14章  超越静态HTML 299

14.1  理解在Web页面中使用JavaScript和HTML5 API的概念 300

14.1.1  排查JavaScript错误 301

14.1.2  JavaScript的术语 302

14.1.3  JavaScript中的逻辑语句 306

14.2  值得关注的新技术 307

14.2.1  多任务 307

14.2.2  存储功能 308

14.2.3  离线应用 308

14.2.4  地理定位 309

14.2.5  canvas 310

14.3  示例脚本 313

14.3.1  在页面中添加当前日期和时间 313

14.3.2  定义新窗口的格式 313

14.3.3  创建动态导航栏 314

14.3.4  在地图上显示用户的地理位置 317

14.4  深入学习 322

第Ⅲ部分　上    线

第15章  发布网页 327

15.1  为网站选择可用的域名 328

15.2  为网站选择最合适的托管类型 328

15.2.1  个人网站托管 328

15.2.2  商业网站托管 330

15.3  准备公开发布网站 331

15.3.1  更新元数据内容 332

15.3.2  解决代码问题 333

15.3.3  验证代码 336

15.3.4  在移动设备中预览 336

15.3.5  在其他浏览器中预览 336

15.4  将网站上传至托管主机 337

15.4.1  桌面FTP程序 338

15.4.2  基于Web的FTP 340

15.5  测试发布站点 341

15.6  发布推广网站 342

15.7  正式上线！ 344

第16章  HTML电子邮件 347

16.1  电子邮件标准项目 348

16.2  判断HTML电子邮件是否满足个人需求 348

16.2.1  电子邮件可以帮助更好地沟通 348

16.2.2  邮件在用户终端的显示是未知的 349

16.2.3  普通文本邮件更安全更简短 349

16.2.4  但HTML邮件营销的方式是有效的 350

16.3  不要发送垃圾邮件 350

16.3.1  发信给正确的人 350

16.3.2  总是提供退订邮件的方式 351 

16.3.3  遵守其他FTC规定 351

16.4  确定完成任务所需的工具 351

16.4.1  向个人邮件账户发送在线网页 352

16.4.2  使用邮件服务提供商 352

16.5  为邮件阅读器(而非Web浏览器)编码 353

16.5.1  绝对路径 354

16.5.2  图片 355

16.5.3  使用表格构建布局 357

16.5.4  内嵌CSS 359

16.6  邮件客户端对CSS支持的参考指导 361

16.7  交互性和HTML邮件中的多媒体 366

16.7.1  邮件中的视频 366

16.7.2  Flash 366

16.7.3  表单 366

16.8  反复测试 366

第Ⅳ部分　附    录

附录A  自测题答案 373

附录B  HTML/CSS参考表 399

附录C  故障排除(FAQ) 417

附录D  特殊符号 427

附录E  文件类型 431