HTML5与CSS3学习笔记【第二十章 测试和调试网页】

---

前言

你编写好了全新的页面，却发现它们在浏览器中并没有像你预期的那样显示，或者完全不显示，或者在你的默认浏览器中显示得很好，但客户使用其他的浏览器打开时却发现页面显得有些奇怪。在 HTML、CSS 和众多的浏览器（尤其是旧浏览器）和平台之间，很容易产生各种各样的问题。本章会提示一些常见的错误，并帮助你清除自己造成的错误。

---

20.1验证代码

发现 HTML和 CSS中错误的一种重要方法就是使用验证器，这样就不用你自己追踪了。HTML 验证器可以对代码和语言规则进行比较，并将其发现的不一致的情况显示为错误或警告。它还可以提示语法错误，无效的元素、属性和值，以及错误的元素嵌套。它无法判断内容是不是由最能描述它的元素进行标记的，因此编写语义化的 HTML 还得靠你自己。

验证代码的步骤
(1) 首先使用 http://html5.validator.nu或W3C的 http://validator.w3.org 对HTML进行检查。
(2) 修复标出来的 HTML 错误，保存修改。需要的话，将文件再次上传到服务器，再重复第 (1) 步。
(3) 可以使用 http://jigsaw.w3.org/css-validator/检查 CSS 错误。类似地，修复你看到的错误，再重新检查页面。

一个 HTML 错误可能导致多个验证器报错结果。例如，缺少一个结束标签会导
致多条错误消息。如果修复了这个结束标签的问题，所有这些后续错误就都不存在了。因此，应该按照从上往下的顺序，一次修复少量错误后就立刻再次验证，看看其他的问题是否也已解决。

20.2测试页面

即便代码通过了验证，页面可能仍然不像预期的那样工作，或者可能在一个浏览器中是正常工作的，在另一个浏览器中却有问题。你并不知道用户使用哪种浏览器，因此在不同的浏览器上对页面进行测试是很重要的。

测试 HTML 页面的步骤
(1) 对 HTML 和 CSS 进行验证，作出必要的修改。
(2) 按照 2.7 节的解释打开页面。
(3) 检查整个页面，确保与你希望看到的完全一样。例如：

• 格式与期望的是否一致
• 链接的 URL 是否指向了正确的页面或资源（可以通过激活链接并查看结果对 URL 进行测试）
• 所有的图像都出现了吗？它们的位置和对齐方式是对的吗？
• 如果你检查的是响应式网页，网页布局是否能适应不同的屏幕尺寸

(4) 在不关闭浏览器中页面的情况下，打开有关的HTML或CSS文档，作出必要的改动。
(5) 保存修改。
(6) 切换到浏览器，刷新页面并查看所作的改动。
(7) 重复第 (3) 步至第 (6) 步，直到你对网页满意为止。有时候可能需要测试很多次才能解决问题。如果尝试很多次后仍然失败了，请再次验证代码，确保没有引入新的错误。
(8) 从第 (2) 步开始，在其他的浏览器中执行同样的测试流程，直到满意并认为页面做好了发布准备为止。
(9) 将文件上传至服务器。
(10) 回到浏览器，在地址栏中输入页面的URL，按下回车键。页面将出现在浏览器中。
(11) 再次对页面进行检查，确保没有任何问题（很容易忘记上传图像或者页面需要的其他文件）。同时，如果访问者可能通过移动设备访问网站的话，别忘了在移动设备上对其进行检查。

20.3尝试一些调试技巧

你现在应该已经做了一些测试，也发现了一些 bug。下面是用于排查网页错误的一些真实技巧。

1. 首先检查常见的错误。
2. 逐步开展工作。做出小的改动，并在每次改动后进行测试。这样才能在问
   题出现之后定位到问题的来源。
3. 调试时，从你能确保正确的地方开始。之后再逐一添加可能出问题的部分，
   每次添加完以后都在浏览器中进行测试，直到找到问题的来源为止。
4. 根据前面的要点，用排除法寻找产生问题的代码片段。例如，可以注释掉一半代码，检查问题是否出于另一半代码。再在有问题的代码中注释掉更小的部分，直到找出问题。
5. 留意输入错误。很多令人费解的错误是由简单的输入错误造成的。例如，在 HTML 中以某种方式拼写类名，却在 CSS 中使用了另一个名称。
6. 在 CSS 中，如果不确定问题是出在属性上还是出在选择器上，可以试着在选
   择器上添加极其简单的声明，如 color: red;、border: 1px solid red; 等（如果 red 已经用于网页的设计，也可以选择一种不常见的颜色，如 pink）。如果元素变成红色，那么问题就出在属性上，否则问题就出在选择器上（假定不存在另一个特殊性更强的选择器，也不存在比当前选择器更靠后的选择器）。
7. 使用一个或多个开发工具，直接在浏览器中对HTML或CSS进行修改测试。
   或者使用这些工具审查代码，试着对问题进行定位。

20.4检查常见错误：一般问题

浏览器之间的差异可能是由一些不明显的浏览器漏洞造成的，也可能是由于使用新技术造成的，但更常见的则是出于一些简单的问题。每个人在从新手到专家的道路上难免会犯一些低级错误。例如，你有可能认为问题出在代码上，从而花了大量时间进行调试，最后才发现你修改的是一个文件，上传和查看的却是服务器上的另一个文件！

查检笼统的常见错误

1. 对代码进行验证。这是一个很好的起点，因为这样就能排除代码语法相关的错误了。
2. 确保已上传要测试的文件。
3. 确保上传的文件的位置是正确的。
4. 确保输入的 URL 与要测试的文件是对应的。如果要查看的页面是从另一个页面跳转过来的，确保链接中的 URL与页面的文件名和位置是完全匹配的。
5. 确保上传文件之前已经进行了保存（包括最新修改）。
6. 确保上传了所有辅助文件（包括 CSS、图像、音乐、视频等）。
7. 确保 URL 的大小写与文件名的大小写是完全匹配的。（这也是推荐全部使用小写字母的原因，这样做可以降低输入 URL 时产生错误的可能性——既针对网站开发人员，也针对访问者。）确保文件名中没有使用空格（应使用短横线代替空格分隔单词）。
8. 如果在以前的测试中曾禁用某项浏览器功能（如 JavaScript 支持），确保重新启用这些功能。
9. 确保问题不是出自浏览器本身。对于这一点，最简单的方法就是换个浏览器对页面再测试一遍。

20.5检查常见错误：HTML

有时，问题出现在 HTML 中。检查 HTML 常见错误的方法。

1. 确保所有的拼写都是正确的，属性的值都是有效的。使用 HTML 验证器可以查出这类错误，从而能迅速地改正。
2. 留心元素的嵌套。例如，如果先开始

   ，再使用 ，就要确保 结束标签位于最后的

   之前。
3. 如果重音字符或特殊符号没有正常显示，要确保文档 head 元素开始后有 语句（如果不使用 UTF-8，也可以使用其他恰当的字符编码），同时确保文本编辑器是使用与之相同的编码保存 HTML 文件的。如果还有问题，试着使用恰当的字符引用。
4. 确保属性值是用直引号而不是曲引号包围的。如果属性值是用双引号包围的（这也是惯例），则属性值中可以有单引号。如果属性值本身包含双引号，则应使用字符引用。
5. 不要对空元素使用分开的开始标签和结束标签。（从技术上说，即便省略结束标签，或者对空元素添加结束标签，浏览器也能正确地显示，但最好还是严谨一些。）

20.6检查常见错误：CSS

尽管 CSS 的语法相当简单明了，但它也有一些常见的陷阱，特别是如果你习惯了编写 HTML 的话。CSS 验证器可以将如本节讨论的这类错误标示出来，因此，在查看 CSS以寻找错误之前，要先对样式表进行验证。

检查 CSS 常见错误的方法

1. 确保使用冒号（:）分隔属性和值，而不是像在 HTML 中那样使用等号。
2. 确保使用分号（;）结束每个属性 – 值对（即声明）。确保没有多余的分号。
3. 不要在数字和单位之间添加空格。
4. 不要忘了后括号。
5. 确保使用可接受的值。像 font-style: none; 这样的声明是无效的，因为该属
   性的空值为 normal。
6. 使用嵌入样式表时，不要忘了 结束标签（无论如何，在多数情况下
   你都应该避免）。
7. 确保HTML文档正确地指向CSS文件。
8. 留意 CSS 选择器之间的空格和标点符号。
9. 确保浏览器支持你编写的代码，尤其是最新特性，因为浏览器在 CSS3 成
   长的过程中也在不断演变。

20.7如果图像不显示

小红叉、碎片图标、替代文本，或者什么都不显示——这都是图像未能正确加载的标志。

修复缺失的图像应该做到以下几点：

1. 首先检查图像在服务器上的文件名是否与img元素中引用的名称严格匹配，包括大小写、扩展名。
2. 不要在文件名中包含空格。
3. 确 保 img 元 素 的 src 属 性 中 的 图 像URL 是正确的。一种简单的测试方法就是将图像放到 HTML 页面所在的目录。这样就只需要 img 元素中的文件名和扩展名正确就可以了，无需引入路径信息。如果图像显示出来了，问题很可能就出在 src 上。不过，将图像放在HTML文件所在的目录并不好，因为这样的话，网站很快就会变得无序。因此，在测试之后，要将图像从HTML 页面目录移出，并修改指向图像的 src 路径。
4. 如果在你的计算机上查看页面时图像是显示的，而将页面上传至服务器之后，图像却没有显示出来，要确保已经将图像上传到了服务器。
5. 把图像保存为 PNG、JPEG 或 GIF 格式了吗？如果是的话，所有的浏览器
   都能显示该图像；如果是其他格式，那就很难说了。