20.3　检查常见错误：HTML

有时，问题出现在HTML中。

检查HTML常见错误的方法

  • 很容易出现一两个输入错误，如图20.3.1所示。确保所有的拼写都是正确的，属性的值都是有效的，如图20.3.2所示。使用HTML验证器可以查出这类错误，从而能迅速地改正（参见20.5节）。
  1. <img scr="woody.jpg" width="200px" height="150px" alt="Woody the cat" />

图20.3.1　你能找出问题吗？我将src拼错了，还在width和height的值中使用了单位。如果你没有注意到这些错误，可以使用HTML验证器。它们可以标出这类输入错误，从而节省发现这些错误的时间

  1. <img src="woody.jpg" width="200" height="150" alt="Woody the cat" />

图20.3.2　在正确的版本中，src的拼写是正确的，width和height的值中也去掉了px

  • 留心元素的嵌套。例如，如果先开始

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

    之前。

  • 如果重音字符或特殊符号没有正常显示，要确保文档head元素开始后有语句（如果不使用UTF-8，也可以使用其他恰当的字符编码），同时确保文本编辑器是使用与之相同的编码保存HTML文件的。如果还有问题，试着使用恰当的字符引用。

  • 确保属性值是用直引号而不是曲引号包围的。如果属性值是用双引号包围的（这也是惯例），则属性值中可以有单引号，如图20.3.3所示。如果属性值本身包含双引号，则应使用字符引用，如图20.3.4所示。

  1. <img src="jungle.jpg" width="325" height="275" alt="Llumi's jungle" />

图20.3.3　如果属性值包含单引号，可以照常用双引号包围属性值

  1. <img src="cookie-the-cat.jpg" width="250" height="200" alt="Cookie's saying, &quot;Enough!&quot;" />

图20.3.4　如果属性值包含双引号，属性值里的双引用号就应使用字符引用

  • 确保所有元素都有正确的开始标记和结束标记。同时，不要对空元素使用分开的开始标记和结束标记，如图20.3.5所示。（从技术上说，即便省略结束标记，或者对空元素添加结束标记，浏览器也能正确地显示，但最好还是严谨一些。） 
  1. <img src="jungle.jpg" width="325" height="275" alt="Llumi's jungle"></img>

图20.3.5　不要对空元素（如img）包含结束标记，HTML验证器会将这个例子标记为错误

  • 使用浏览器开发工具可以在浏览器解析文档结构之后对结构进行审查，如图20.3.6所示，将它与你预期的元素嵌套进行比较，如图20.3.7所示。这可以帮你快速定位标记格式不正确、元素未闭合或过早闭合等错误。

20.3　检查常见错误：HTML - 图1

图20.3.6　如果在Firefox中安装了Firebug，可以右击内容（如果使用Mac，则在按下Control键的同时单击），选择Inspect Element。这时，就会在Firebug中显示内容的底层结构（参见图20.3.7）

20.3　检查常见错误：HTML - 图2

图20.3.7　在Firebug中审查段落时，Firefox在遇到 图20.3.8中有错的代码时会将HTML理解成

We've really got a problem here.

  1. <p>We've <fm>really</em> got a problem here. </p>

图20.3.8　em元素在开始标记中有一个输入错误。Firefox等浏览器解析HTML时，会试着修复这个错误，并在显示页面时改变文档的底层结构，如图20.3.7所示。HTML验证器也会将此标为错误