Friday, October 24, 2008

挑战 XHTML 的 Strict 标准

我的 Blog 网页在 Doctype 声明上一直使用的是 XHTML 的 Strict 标准,当初在模板制作完成时是校验过的,可是随着后来无数次的修改、内容添加,现在已经不能通过 W3C 的语法校验了,加上 Google Blogger 在发布页面的时候似乎也并没有考虑目标模板的 Doctype 标准,也部分导致校验的失败。

经过一个下午的努力,终于基本上解决了所有 XHTML 的语法问题,总结如下。
<a> 标签没有 target 属性
在 Strict DTD 里面,超链接 <a> 标签 没有 target 属性,因此不能利用 target="_blank" 这样的代码来达到新开页面打开链接的目的。为了实现同样的功能,通常的办法是用 rel="external" 来替代 target="_blank",然后用如下 JavaScript 代码来处理链接:
function externalLinks() {
var linkArray = document.getElementsByTagName('a');
for (var i = 0; i < linkArray.length; i++) {
var link = linkArray[i];
if (link.getAttribute('rel') == 'external') {
link.target = '_blank';
}
}
}
然后将该 externalLinks() 函数添加到页面的 onLoad 事件中。如:
<body onload="externalLinks();">
<img> 标签必须添加 alt 属性
对于 <img> 标签来讲,alt 属性是必须的。给图片添加 alt,一方面当图片因为各种原因无法显示的时候,能给访问者以提示;另一方面也便于搜索引擎判断图片的内容,以及更准确的建立索引。
<img> 标签没有 border 属性
<img> 标签是没有 border 这个属性的。我们通常会加上 border="0",主要是因为把图片放在链接标签 <a> 里时,浏览器会加上一个链接默认颜色的边框,而这通常是多余的。在 Strict 标准中,不能用 border 属性来去掉边框,而只能使用 CSS 控制。同样 align 属性也是不存在的,要实现 absmiddle 这样的目的,也只能用 CSS 代替。
<blockquote> 标签内必须使用 block 级别的标签
<blockquote> 标签用来在页面上表示引用的内容,例如,最常见的,引用代码。我通常习惯将代码的内容放在 <code> 标签中,而这个标签是 inline 级的,不符合 Strict DTD 的要求。<strong>、<b> 等同样会导致问题。符合要求的 block 级标签包括:<address>, <blockquote>, <del>, <div>, <dl>, <fieldset>, <form>, <h>, <h2>, <h4>, <h5>, <h6>, <hr>, <ins>, <noscript>, <ol>, <p>, <pre>, <script>, <table>, <ul>。
不能使用 <embed> 标签
这个问题最容易出现在引用外部媒体文件时,例如 MP3 音乐、视频等。很多资料推荐同时使用 <object> 和 <embed> 来增强媒体引用元素的浏览器兼容性,但是很不幸的,Strict DTD 并未定义 <embed>。其实我们完全可以不使用 <embed> 一样能够兼容浏览器。例如 Youtube 给的代码一般是这样的:
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/uhsjNTEJD3c"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/uhsjNTEJD3c"
type="application/x-shockwave-flash"
allowfullscreen="true"
width="425" height="344"></embed>
</object>
这样无法通过校验。我们可以改成:
<object type="application/x-shockwave-flash"
width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/uhsjNTEJD3c"/>
<param name="allowFullScreen" value="true"/>
</object>
实体用法问题
在 XML 中,实体的写法是 &entity;,以一个 & 符号开头,一个分号结束。因此,Strict 标准的 XHTML 里面不允许出现任何单独的 & 符号,即使是在 URL 中用来分隔查询参数。需要用到这个符号的时候,要用 &amp; 来表示。通常一个实体用法的错误会同时导致 5 个校验时的错误,当解决以后,这 5 个错误会同时消失。由于 Blogger 在发布页面时 URL 直接使用了 & 符号,因此会直接导致 Strict 标准的 XHTML 校验失败。
重复的 id 值
对于 XHTML 标签来讲,id 属性的值必须唯一,如果一个文档中出项重复的 id 就会导致问题。出现这种问题,通常是把 id 属性放在了 Blogger 模板会循环输出的部分。
另外,Blogger 提供的模板中,backlinks 那一部分会导致 4 个不同类别的问题。凭心而论,Blogger 模板在 backlinks 这一块的代码实在写的很烂,用了三个不同的 js 文件,用 JavaScript 输出 CSS,不但使得不同模板之间难以更改这一部分显示的样式,也导致了很多 XHTML 的语法校验问题。例如 Blogger 自己的 Buzz,打开任一个文章的独立页面的源代码,Doctype 声明赫然是 XHTML 1.0 Strict,然而 backlink 那一块的代码不用校验也能看出漏洞百出。

Blogger 目前版本的网站出自著名设计师 Douglas Bowman 之手,其本人对 XHTML 以及 CSS 有着非常深刻的研究。在设计之初,Blogger 还没有 Backlinks 的功能,显然这个蹩脚的 Backlinks 是后来由其他人加上去的。不知道 Bowman 先生在看到这一幕后会做何感想。

Google 黑板报用的是同样的 backlink 代码,不过比 Buzz 知趣的是它的模板干脆去掉了 Doctype 声明。只不过作为 Google 旗下的网站,页面连 Doctype 声明都没有,也是一件汗颜的事情。

言归正传,以下列出 backlink 这部分代码导致的问题以及解决方法。
<div> 和 <dl> 之间的嵌套问题
在 Blogger 给出的默认模板代码中,是用 <dl> 来实现反向链接列表的;可问题在于,他们将 <BlogItemBacklinks> 放在了 <dl> 之内,而在生成页面时,会将 <BlogItemBacklinks> 这一对模板标签替换成一对 <div> 标签,从而导致 <div> 被嵌套在 <dl> 内。在 Strict DTD 里,<dl> 标签内只允许出现 <dt> 和 <dd> 两个子标签。解决办法是把 <BlogItemBacklinks> 放到 <dl> 外面,当然这样虽然让 XHTML 语法通过校验,但实际的运行结果,会导致每个反向链接条目会占用一个 <dl> 块,而不是预期的放在循环的若干个 <dt> 和 <dd> 中。通过 CSS 可以解决条目之间间距的问题。如果要完美解决这个问题的话,就只有自己重写 Blogger 提供的 JavaScript 函数来改变这一行为了。
<script> 标签的 defer 属性
在 Blogger 用模板生成页面时,除了将 <BlogItemBacklinks> 替换成一对 <div> 以外,还会在开标签的 <div> 之前加上一个 <script;> 用来引入相关的 JavaScript,同时给出了一个 defer="true" 属性,然而,根据 Strict DTD,defer 属性只能有一个值,只能是 defer="defer"。
<noscript> 内只能用 block 级别标签
在生成以上 <script> 标签的同时,Blogger 给出了一个 <noscript>,用来当浏览器不支持脚本的时候显示一个 Blog Search 的链接。可是 <noscript> 标签内只能用 block 级别的标签,直接用 <a> 这样的 inline 标签是不行的。
模板占位符问题
在模板中这段关于 backlink 的代码中,Blogger 用了一些模板标签作为占位符。通常模板标签会在生成具体网页时替换掉,但这里的占位符不会,它们要在实际生成 backlink 条目时被 JavaScript 程序换掉。但是在做 XHTML 语法校验时,这些占位符以 HTML 标签的形式存在于代码中,而又显然不属于 XHTML 定义的范围,从而导致校验失败。解决办法是将它们的尖括号转移,写成诸如 &lt;$BlogBacklinkTitle$&gt; 的形式,这样既能够被 JavaScript 成功识别,保证功能正常,又能通过 Strict 语法校验。要特别注意,其中 <$BlogBacklinkDeleteIcon$> 不要转义,这个模板标签是在页面生成时被替换的,而不是 JavaScript 的数据占位符。
最后,Google 黑板报最近也发布了一篇关于互联网标准性的文章,这篇文章也提供了很多关于改进网站 HTML 代码的参考信息。

9 comments:

虚飞 said...

用的blogger?还真看不大出来。

Gregory said...

是用的 Blogger,模板已经被我 heavily customized,呵呵……

jim kill said...

louis vuitton handbags
burberry scarf
ray ban sunglasses outlet
michael kors
cheap uggs
cheap oakleys
abercrombie fitch
ugg boots
tory burch flats
lv outlet
tods outlet
michael kors handbags
michael kors outlet online
ghd flat iron
coach outlet
coach factory online
prada handbags
lebron 11
canada goose jacket
ray ban outlet
christian louboutin
chanel handbags
coach outlet
polo outlet
michael kors outlet online
ray ban canada
coach factory outlet
20150311huangqihang

oakleyses said...

oakley sunglasses, longchamp outlet, ugg boots, chanel handbags, nike air max, longchamp, christian louboutin outlet, michael kors outlet, oakley sunglasses, tiffany and co, replica watches, tory burch outlet, nike air max, ray ban sunglasses, michael kors outlet, louboutin shoes, jordan shoes, louis vuitton outlet, louis vuitton, ray ban sunglasses, longchamp outlet, polo ralph lauren outlet, replica watches, kate spade outlet, oakley sunglasses, polo ralph lauren outlet, cheap oakley sunglasses, ugg boots, nike free, tiffany jewelry, michael kors outlet, uggs on sale, louis vuitton outlet, michael kors, oakley sunglasses, louboutin, louis vuitton, michael kors outlet, ray ban sunglasses, prada handbags, louis vuitton, burberry, burberry outlet online, gucci outlet

oakleyses said...

nike blazer, michael kors, nike free run uk, nike air max, true religion jeans, true religion jeans, air jordan pas cher, nike air max, ralph lauren uk, timberland, air max, nike roshe, tn pas cher, louboutin pas cher, true religion outlet, vans pas cher, coach outlet, hermes, ralph lauren pas cher, nike free, coach purses, michael kors, oakley pas cher, mulberry, hollister pas cher, lacoste pas cher, new balance pas cher, ray ban pas cher, vanessa bruno, burberry, hollister, michael kors, kate spade handbags, coach outlet, abercrombie and fitch, lululemon, coach factory outlet, nike roshe run, north face, nike air max, ray ban uk, michael kors, true religion jeans, converse pas cher, north face, air force, hogan, sac longchamp, longchamp pas cher, sac guess

oakleyses said...

ferragamo shoes, iphone 6s plus cases, babyliss, longchamp, reebok shoes, nike trainers, asics running shoes, oakley, iphone 5s cases, celine handbags, hollister, nfl jerseys, jimmy choo shoes, birkin bag, iphone 6s cases, iphone cases, mcm handbags, bottega veneta, giuseppe zanotti, iphone 6 plus cases, abercrombie and fitch, p90x workout, beats by dre, herve leger, north face outlet, instyler, louboutin, soccer jerseys, lululemon, nike roshe, s5 cases, timberland boots, mac cosmetics, soccer shoes, valentino shoes, insanity workout, vans shoes, hollister, ralph lauren, wedding dresses, ipad cases, chi flat iron, north face outlet, iphone 6 cases, nike air max, ghd, mont blanc, baseball bats, new balance, nike huarache

oakleyses said...

ugg pas cher, vans, moncler, moncler, canada goose, louis vuitton, ugg boots uk, canada goose, toms shoes, doudoune canada goose, moncler, louis vuitton, louis vuitton, ugg australia, juicy couture outlet, moncler, supra shoes, doke gabbana outlet, gucci, karen millen, moncler outlet, hollister, moncler, hollister, canada goose, louis vuitton, ray ban, marc jacobs, pandora jewelry, michael kors outlet online, moncler, swarovski crystal, pandora jewelry, wedding dresses, thomas sabo, moncler, bottes ugg, sac louis vuitton pas cher, nike air max, barbour, barbour jackets, pandora charms, canada goose outlet, canada goose uk, michael kors outlet, converse outlet, links of london, canada goose outlet, pandora charms, canada goose

mmjiaxin said...

black friday deals
discount oakley sunglasses
oakley sunglasses wholesale
designer handbags,handbags outlet,cheap handbags,purses and handbags,wholesale handbags,designer bags,bags outlet,handbags wholesale,cheap purses,discount handbags,handbags sale,wholesale purses,handbags and purses,designer purses
mont blanc pens
swarovski outlet
camisetas futbol baratas
mulberry uk
valentino outlet
michael kors online outlet
fitflops sale
cheap wedding dresses
mlb jerseys
giuseppe zanotti outlet
converse shoes
soccer jerseys wholesale
tiffany and co
ferragamo outlet
true religion jeans
oakley sunglasses wholesale
mm1205

shengda xu said...

nike air max
steph curry shoes
losangeles lakers jerseys
michael kors handbags
chi flat iron
true religion outlet
christian louboutin outlet
coach outlet store
nike shoes for men
rolex replica watches
xushengda0609