网站不能通过W3C验证的十个原因(附解决办法)
W3C验证并不是要求你的网站一定要通过,但是它能告诉你你的网站HTML标记语言中的错误。验证器中指出的错误和警告是提示你的XHTML代码还不够完美的重要信号,虽然在不同的浏览器中会看起来并不太一致。下面列出了10常见的错误并附带了解决办法供开发者参考。
在文章开始之前,先给大家几条不错的建议供大家实践。
- 忽略警告信息。如果验证器显示你的页面中有12处错误83处警告,那么你只需考虑其中的错误项目即可依次修复错误。
- 按照从下到下的顺序修复其中的错误,因为浏览器在读取HTML代码时是按照从上到下的顺序的,所以你按照两样的方式修复错误最省事。
- 每修复一项错误即重新验证一次。经常出现的现象是前面的一个错误往往引起下面一系列的问题。同样,有时候,如果方式得当修复一个错误可以修复后面的好几处错误。每次修改之后重新验证可以保证你完全修复页面中的错误。
上面的几条小技巧后,让我们看看我们的网站不能通过W3C验证的10个常见原因。
1 未闭合的div标签
页面布局不能通过验证的最为常见的原因。div这种布局模式有多流行这个错误就有多流行。未闭合的div标签是布局错误中最最经常出现、也是最难发现的一个错误。验证器并不总能准确地指出错误出现的位置,因此发现这个错误有时候也无异于大海捞针。
2 可恶的embed标签
90年代初,微软和网景浏览器开始意识到单纯地文本标签根本不能完全实现标准化。但是不幸的是,虽然我们现在广泛地使用embed这类的标签,W3C并没有意识到他们的重要性。如果你确实想通过strict DOCTYPE验证,你必须放弃使用embed标签。
定想用embed标签而又想难过验证,你可以参照这篇flash引用方式的文章。
3 不恰当的DOCTYPE声明
一个错误是文档中要么没有声明DOCTYPE,要么声明DOCTYPE错误。作为一系列文档标准,Strict DOCTYPE是要求最为严格的标准。Strict DOCTYPE意味着你的网页在各种浏览器中显示时都是最为标准的方式。下面是Strict DOCTYPE的一个示例:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target=_blank rel=external>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</A>">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 尾部的斜杠问题
网站没有通过难,那很可能是在你的代码中缺少了一个斜杠(/)。其实这类错误是很容易发现的,特别是像在image标签中。例如:
- <img src="" alt="">
<img src="" alt="">
5 对齐方式
TYPE为Transitional的文档中使用对齐标签align没有任何问题,但是如果你在更加严格的模式Strict下验证,那么你将会看到一个错误提示。align标签是标签语言又一个不能使用的标签。替代他的是在样式表中使用float或者text-align。
6 JavaScript
明了Strict DOCTYPE,那么你需要把你的JS代码包含一对可换行CDATA标签中。这方面很多开发者已经在使用了,比如一些广告和跟踪功能的JavaScript代码需要必须写在一行里。如果你的页面中包含JavaScript代码,只需在其前后加上如下代码:
- <script type="text/javascript">
- /* <![CDATA[ */
- // JavaScript here
- };
- /* ]]> */
- </script>
<script type="text/javascript">
/* <![CDATA[ */
// JavaScript here
};
/* ]]> */
</script>
7 所有的图片都需要有alt属性
没有意识这点,那么图片因素可能是妨碍你通过验证的一个因素。除了需要上面说到的斜杠外,还需要加上alt来描述图片,如 alt="Scary vampire picture"
同样需要这个alt标签来识别页面中的图片,所以为图片添加alt属性是一个好习惯。
8 未知印刷符号
也是妨碍验证的一个重要因素。例如,使用相应编码来替代&符号。下面是在XHTML中采用的一些印刷符号的编码列表。
9 错误的嵌套
元素中包含其他元素的情况,如
- <div><strong>Sweet!</strong></div>
<div><strong>Sweet!</strong></div>
很容易出现把他们的顺序弄乱的情况。例如strong标签在div的前面,但是结束标签却是div在前面。有时候这可能并不影响页面效果,但是他会影响你的代码通过验证。
10 没有title标签
起来像个显而易见的错误,但是很多开发者(包括我自己)经常在head标记中缺少title标签。如果你看到missing a required sub-element of HEAD这样的错误提示,你就首先想到你丢失了title标签。