您当前的位置:首页 > 网络学院 > 网站重构
网站重构

伴随着Web标准发展

来源:番禺网站建设 作者:广州做网站 点击量:3059 添加时间:2008-11-21 15:20:54

原文作者:Roger Johansson, 456 Berea Street
中文翻译:x5, x5studio 本文由x5授权发布,翻译版权归x5所有,转载发布请联系x5
Last updated 2004-11-23
There is also an English vision English.
T?m?dokumentti on saatavilla my?s suomeksi.
Consultez l'article en version fran?aise.
Dit document is ook beschikbaar in het Nederlands.
Detta dokument finns ?ven p?svenska.

内容
简介
历史
Web标准
结构和表现
(X)HTML(可扩展超文本置标语言)
CSS(层叠式样式表)
可访问性
URLs(页面地址)
参考资料
专业词汇
1. 简介
本文阐述了Web标准是如何使一个开发者建设网站更加的节省时间与金钱,如何使浏览者获得更好的浏览经历,以及他们的原因。同时,讨论中还涉及到一些方法,准则和好的实例用来帮助您建设一个对尽可能多的人都充满亲和力的高质量的网站。

2. 历史
在90年代后期,当互联网和web逐渐成为主流时,Web浏览器的开发商还没有完全的支持CSS(层叠式样式表,对于Web开发人员来说,他们可以用CSS来控制Html文档的表现)。考虑到CSS1是在1996年制定的,而CSS2是在1998年才制定的,所以这种对CSS支持的不足也是可以理解的。

由于浏览器对CSS的支持不够,再加上一些平面设计师的要求(这些要求与他们经常与印刷品打交道有关)导致他们为了控制网页的视觉表现而滥用HTML。一个典型的例子就是,当设计师可以用 border="0"来隐藏表格的边框时,用隐藏表格来控制布局的方法同样被使用。另一个例子是对“transparent”(透明)的使用,同样是不可见,他们却使用空白的GIF图片来控制布局。

由于HTML从来就没被用来控制一个文档的表现,导致大量的乱码、非法代码、浏览器的专用代码和属性就被随意的使用了。“校验”这个词也很少被人问津。对于这些代码来说,标签汤(tag soup)是一个很形象的名字。

新版本的web浏览器的发布,使得对CSS的支持得到了加强与扩展,但是并没有达到它应有的水平。尽管浏览器的开发商对CSS支持的步伐很缓慢,但是现在已经有许多浏览器选择了支持CSS,此时,不应该再有任何理由再像以前那样使用HTML了,应该让它恢复本来的面貌:去描述文档的结构 ,而不是它的表现。 正因为此,我们现在才能够用CSS来达到其本来的目的了。

3. Web标准
什么是web标准?
Web标准是一些规范的集合,是由W3C和其他的标准化组织共同制定的,以用它来创建和解释网页的基本内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计,使其能够被大多数人所访问。

结构化语言
HTML (超文本置标语言) 4.01
XHTML (可扩展超文本置标语言) 1.0
XHTML 1.1
XML (可扩展置标语言) 1.0
表现类语言
CSS (层叠式样式表) Level 1
CSS Level 2 revision 1
CSS Level 3 (正在开发中)
MathML (数学置标语言)
SVG (可变矢量图形)
对象模型
DOM (文档对象模型) Level 1
DOM Level 2
DOM Level 3 Core
脚本语言
ECMAScript 262 (JavaScript的标准化版本)
本文关注的是XHTML 1.0 Strict(代表结构)、CSS Level 1和Level 2(代表表现)、ECMAScript 262(代表脚本--并不是指那些脚本的例子)。

当一个文档被认为离Web标准不远了的时候,那就意味着,除了具有上面所提到的技术,还应当:

由符合标准的XHTML组成
用CSS来布局而不是表格
使用结构化、语义化的标记
能够在任何浏览器中显示
注意,“能够在任何浏览器中显示”并不意味着“在任何一个浏览器中显示的效果相同”。使一个文档在不同的浏览器和平台上都有相同的显示效果是不可能的,除非您仅仅使用图片,因为发布在网上的文档将被不同的操作系统上的不同的浏览器软件所显示,并显示在不同大小与质量的显示器上(或者显示在非显示器上),浏览者也可能改变了浏览器的默认字体或者其他喜好。希望这些能使您减少了一些挫折感。每一个做网页的人都应该了解,一些技术上的先决条件我们不得不考虑,就像那些出书、拍电影、拍电视的人一样,他们也有一些其他方面的前提必须要考虑。

为什么要使用Web标准?
一些Web开发人员和Web设计师对使用Web标准持抵触态度。普遍的看法是它太难了,不管它是怎么运作,我使用的那些软件总会创建出一些不规范的代码。.

学习新的技术并放弃您所熟知的技术,这很容易引起情绪上的反感,并产生抵触的情绪。然而,如果您很理智的观察一下现在的形势,将会发现,通过学习和使用Web标准会得到许多好处。举几个例子:

更简易的开发与维护:使用更具有语义和结构化的HTML,将让您更加容易、快速的理解他人编写的代码。
与未来浏览器的兼容:当您使用已定义的标准和规范的代码,那么您这个向后兼容的文本就消除了不能被未来的浏览器识别的后患。
更快的网页下载、读取速度:更少的HTML代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在以前的兼容模式下拥有更快的网页读取速度。
更好的可访问性:语义化的HTML(结构和表现相分离)将让使用浏览器以及不同的浏览设备的读者都能很容易的看到内容。
更高的搜索引擎排名:内容和表现的分离使内容成为了一个文本的主体。与语义化的标记结合会提高您在搜索引擎中的排名。
更好的适应性:一个用语义化标记的文档可以很好的适应于打印和其他的显示设备(像掌上电脑和智能电话),这一切仅仅是通过链接不同的CSS文件就可以完成。你同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。
Web标准可以为网站的创建者节省时间与金钱,还可以为网站的浏览者提供一个更好的经历。此外,Web标准是未来的。如果你还没有使用We b标准,那么现在应该开始动手了,否则你会落伍的。

相关文章:
My Web site is standard! And yours?
W3C的文章,介绍如何改进你网站代码的质量。

Fighting for Standards
Web标准计划的声明。

What are web standards and why should I use them?
Web标准计划的一篇文章,对Web和为什么使用它是一件好事进行了阐述。

The Business Benefits of Web Standards
告诉您一个公司是如何通过使用Web标准而盈利。

Web Standards for Business
写给那些营销、通信、IT领域中的管钱人。

校验
校验是一个控制的过程,在这个过程中,文档必须遵守语言的规则。你可以通过对比,检查出文本中的拼写或语法错误。

规范是网页开发中的一个重要部分。许多很难被发现的错误可以在验证中发现。错误可能是一个微不足道的打字错误,也可能是严重的元素和属性的不规范错误。

不幸的是,许多人并不验证他们的文档。一些人或许根本不知道验证这回事,还有一些人想不起来去验证,甚至还有一些人故意的逃避验证。这种情况的出现,大部分的责任要归咎于Web浏览器的开发商。大多数的浏览器都会去尽全力的去解释不规范的HTML代码,并努力的去猜测作者的意图,以此来避免显示错误的信息。这种行为就导致了如今混乱代码的泛滥。这种标记的问题是,它带来了一些不可预测的结果,因为它依靠的是Web浏览器错误的处理。

没有任何原因不去验证您的HTML和CSS。相反,它还会给您带来许多好处。

Why we won’t help you 是Mark写的一篇阐述验证优点的文章,十分的棒。里面还解释了为什么如果您在验证您的网站之前去求助,那么想从论坛和邮件列表中的人取得帮助会非常的困难。

一些HTML编辑器(像BBEdit和Homesite)都嵌入了校验工具。如果你的开发工具里没有嵌入校验的话,你可以使用W3C的校验服务,可在线使用:

(X)HTML: W3C的标记校验服务
CSS: W3C的CSS校验服务
理解校验显示的错误提示可能有一些困难。一个位于文档前面的错误可能会导致另外几个额外的错误。改了第一个错误后,通常你就会减少一定数量的错误了。下面这个网址,将有一些常见错误提示的说明: Common XHTML Validation Errors

确保你的代码是完全规范的,总是一件好事,但是当一些校验的错误很难避免时,就会有一些特殊的情况。其中最常见的的例子就是在一篇文档中嵌入FLASH或者一些其他需要插件的内容。下面是关于这个问题的相关文章 Flash Satay: Embedding Flash While Supporting Standards和Embedding flash without <embed>.

4. 结构和表现
当讨论Web标准时,一些事情总是被提及,那就是结构和表现分离的重要性。刚开始的时候理解结构和表现的不同之处可能很困难,特别是如果你不习惯于思考文档的语义结构时。然而,理解这点是很重要的,因为,当结构和表现分离后,用CSS文档来控制表现就是很容易的一件事了。

结构是由文档中的主体部分,再加上语义化、结构化的标记。

表现是你赋予内容的一种样式。在大多数情况下,表现就是文档看起来的样子,但是它同样可以影响一个文档“听”起来的样子----毕竟不是每个人使用的都是图像化的浏览器。

尽可能的把结构和表现相分离。理论上讲,你应该用一个HTML文档来保存内容与结构,用一个CSS文档来控制整个文档的表现。

如今表现与结构的分离在网上还不是很普遍。大多数网站上的HTML代码既缺少语义也缺少结构。

用表格布局
为了使表现和结构相分离,你必须用CSS来代替表格去控制一个文档的表现。当你习惯于用表格来布局的时候,这将使你感觉很奇怪很不适应,但是,这并不像它看上去的那么困难。你可以在网上找到许多可用的帮助,它的好处太多了,所以它确实值得您去花时间去转变一下思想,这点很重要。

相关文章:
Why tables for layout is stupid
在Seybold 2003上的一个演讲幻灯演示。

语义化的HTML
分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个XHTML元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让CSS使一个HTML元素看起来就像另一个HTML元素,比如用<s pan>来代替<h1>标记标题。

通过使用语义化的HTML,你将会使文档中的不同部分对于任何浏览器都变得有意义,无论浏览器是现今PC上的最新的图象化浏览器,还是不支持CSS的老浏览器,或者还是Unix shell中的文本浏览器。

标题
为了给标题做标记, 要用<h1>、<h2>、 <h3>、<h4>、<h5>或者 <h6>,这完全取决于标题的等级。<h1>是最高的等级。

例如:
<h1>文档标题</h1>
<h2>次级标题</h2>
文档标题
次级标题
段落
用<p>来标记段落。不要使用 <br /> 来生成段落间的空行。用CSS来控制段落间的空隙(Margins),这个空隙可以确保段落标记的正确无误。

例如:
<p>浪奔浪流,万里滔滔江水永不休,淘尽了世间事,混作滔滔一片潮流,
是喜是愁,浪里分不清欢笑悲忧,成功失败,浪里看不出有未有。爱你恨你问君知否,似大江一发不收,
转千湾转千滩,也未平复此中争斗,又有喜又有愁,就算分不清欢笑悲忧,仍愿翻百千浪,在我心中起伏够。</p>
浪奔浪流,万里滔滔江水永不休,淘尽了世间事,混作滔滔一片潮流,是喜是愁,浪里分不清欢笑悲忧,成功失败,浪里看不出有未有。爱你恨你问君知否,似大江一发不收,转千湾转千滩,也未平复此中争斗,又有喜又有愁,就算分不清欢笑悲忧,仍愿翻百千浪,在我心中起伏够。

列表
一些事物的罗列应使用列表来显示。在XHTML中有三种列表的方法:无序、有序和自定义。

无序列表, 就是我们所熟知的圆圈列表, 以 <ul>开始,以</ul>结束。每一个列表项都包含在<li>之中。

有序列表,以<ol>开始,以 </ol>结束。

自定义列表有一些不同,可以用来标记一些列表项和描述,以<dl>开始,以 </dl>结束。每一个被描述的项目,要包含在<dt>中,而描述的内容要包含在<dd>中。

例如:
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>
项目一
项目二
项目三
<ol>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ol>
项目一
项目二
项目三
<dl>
    <dt>上海滩</dt>
    <dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
    当年在香港播出以后,产生了巨大的轰动效应。</dd>
    <dt>周润发</dt>
    <dd>和所有伟大的影星一样,周润发印证了一个时代,一个香港电影的黄金时代。
 风衣墨镜、冷血双枪、阳光微笑,都封存胶片之中,当我们回首寻望的时候,发哥已被刻为一个时代的坐标。</dd>
</dl>
上海滩
这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。 当年在香港播出以后,产生了巨大的轰动效应。
周润发
和所有伟大的影星一样,周润发印证了一个时代,一个香港电影的黄金时代。 风衣墨镜、冷血双枪、阳光微笑,都封存胶片之中,当我们回首寻望的时候,发哥已被刻为一个时代的坐标
CSS使你不想用传统列表来呈现内容成为可能。导航栏(一个链接的列表)就是一个很好的例子。使用列表作为菜单的好处是当一个浏览器不支持CSS时,这个菜单仍然起作用。

引用
用<q>来标记简短的单行引用。Web浏览器会自动识别在<q> 之间的内容。不幸的是,IE不能识别,并且有些时候, <q>会引起一些可访问性的问题。正因为如此,一些人建议尽量不要使用 <q>,手动的插入引用标记。在一个包含适当的类的 <span>中加入单行的引用内容,那么就可以用CSS来给引用设计样式了,但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag 关于处理<q>相关问题的看法。

对于那些一段或者好几段的长篇引用,就应当使用 <blockquote>了。CSS可以用来定义引用的样式。注意,一段文章是不可以直接放在 <blockquote>中的,引用的内容还必须包含在一个元素中,通常是<p>。

属性cite既可以与<q> 一起用,也可以与<blockquote>一起用,用来提供引用内容的来源地址。需要注意的是,如果你使用 <span>来代替 <q>标记引用内容,那么你就不能使用 cite属性了。

例如:
<p>我的座佑名<q
cite="http://www.x5.com.cn/">别人的高标准,是我的基本要求。</q>.</p>
我的座佑名别人的高标准,是我的基本要求。.

<p>我的座佑名
<span class="quote">&#8220;别人的高标准,是我的基本要求。
&#8221;</span>.</p>
我的座佑名“别人的高标准,是我的基本要求。”.

<blockquote
cite="http://www.w3cn.org/">
    <p>&#8220;我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,
 我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",
 为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的,
 每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,
 例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;
 针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。
 这是一种恶性循环,是一种巨大的浪费。
&#8221;</p>
</blockquote>
“我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是一种恶性循环,是一种巨大的浪费。 ”

强调
<em> 是用作强调的,<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。

例如:
<p><em>强调</em> 的文本通常用斜体显示,
然而, <strong>特别强调</strong> 的文本通常以粗体显示。</p>
强调 的文本通常用斜体显示, 然而, 特别强调的文本通常以粗体显示。

表格
XHTML中的表格不应用来布局。然而如果是为了标记列表的数据,就应该使用表格了。为了使数据表格有更强的访问性,了解和使用各种构造表格的组件就很重要了。比如表格标题 (<th>)、摘要(summary 属性)和首部说明 ( <caption>标签).

例如:
<table class="举例" summary="1999年到2003年,列表显示中国的平均人口增长率。">
    <caption>中国的年均人口的增长, 1999-2003</caption>
    <thead>
        <tr>
            <td>&#160;</td>
            <th scope="col">1999</th>
            <th scope="col">2000</th>
            <th scope="col">2001</th>
            <th scope="col">2002</th>
            <th scope="col">2003</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>人口</th>
            <td scope="row">8 861 426</td>
            <td scope="row">8 882 792</td>
            <td scope="row">8 909 128</td>
            <td scope="row">8 940 788</td>
            <td scope="row">8 975 670</td>
        </tr>
        <tr>
            <th>增长</th>
            <td scope="row">7 104</td>
            <td scope="row">21 366</td>
            <td scope="row">26 368</td>
            <td scope="row">31 884</td>
            <td scope="row">34 882</td>
        </tr>
    </tbody>
</table>
中国的年均人口的增长, 1999-2003   1999 2000 2001 2002 2003
人口 8 861 426 8 882 792 8 909 128 8 940 788 8 975 670
增长 7 104 21 366 26 368 31 884 34 882

想了解更多的关于表格及其使用的细节, 请参阅Tables in HTML documents 和 HTML Techniques for Web Content Accessibility Guidelines 1.0.

发表评论 共有 条评论
用户名: 密码: 验证码: 匿名发表
咨询QQ:番禺网站建设149900898 番禺网络公司296823656 番禺网页设计466741366 番禺域名注册598784086 番禺域名注册(售后技术支持)296823656
咨询信箱:001#py001.com  001#001.gd.cn (请将#改为@)
免费咨询电话:4000-848485   020-8484 8485   传真:020-8484 8485   手机:13600028769高先生
番禺区市桥地址:广州市番禺区大北路118号(番禺宾馆旁)来访前请预约
番禺零零壹网络(广州金概念信息科技有限公司) 法律顾问:广东威信律师事务所陈彬律师
《中华人民共和国增值电信业务经营许可证》 粤ICP备05100331号-2
请使用1024*768分辨率浏览本站以达到浏览企业建站的最佳视觉效果,如果您有任何番禺建网站,南沙,花都网页设计,网站空间,番禺域名注册,番禺企业邮局的问题请与我们联系