当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > 伴随着Web标准发展

设计理念
什么是XHTML？
启发设计灵感
网站设计的新视角
从最优化角度来设计你的网站
脱离Google生存
logo的类型
Flash的弊端
避免使用JavaScript动态导航条的7大理由
正确使用“留白”属性
商务图形设计
如何使用“哇元素”
提高网站的可访问性
让你步入专家领域
“一页站点”的概念
高级网页设计原则
接近你的客户
创建网站的黄金法则
3条帮助你成功创建“会员制营销”的方法
重新改造你的主页
避免图形文件过量

No. « 1 2 3 4 »

学院文章搜索

关键字

设计理念 中的 伴随着Web标准发展

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-03-01   浏览: 1864 ::
收藏到网摘: n/a

原文作者：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.

内容

  1. 简介
  2. 历史
  3. Web标准
  4. 结构和表现
  5. (X)HTML（可扩展超文本置标语言）
  6. CSS（层叠式样式表）
  7. 可访问性
  8. URLs（页面地址）
  9. 参考资料
  10. 专业词汇

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和其他的标准化组织共同制定的，以用它来创建和解释网页的基本内容。这些规范是专门为了那些在网上 发布的可向后兼容的文档所设计，使其能够被大多数人所访问。

结构化语言

表现类语言

对象模型

脚本语言

本文关注的是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标准，那么现在应该开始动手了，否则你会落伍的。

相关文章：

校验

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

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

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

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

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

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

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

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

4. 结构和表现

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

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

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

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

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

用表格布局

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

相关文章:

语义化的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>
  1. 项目一
  2. 项目二
  3. 项目三
<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.

相关文章:
  • SimpleQuiz

    一个很好的资源，告诉您如何用语义化的方法来标记。

5. (X)HTML

使用HTML4.01是可以制作出现代的、结构化的、兼容标准的站点的。然而，为了做到向整洁的语义化的代码的转变，并且为XML和未来的其 他标记语言做好准备，建议大家使用XHTML1.0 Strict来创建新的站点，本文中的例子用的就是XHTML1.0 Strict。

XHTML 1.0 是以XML 1.0对HTML 4的改进，它的发展，以用来代替HTML。XHTML 1.0 Strict（这是我一直所倡导的）不支持表现类的标记（HTML 4.01其实也不支持，但是现在我们讨论的是XHTML）。正因为此，XHTML1.0 Strict 就促使了表现与结构的分离。

XHTML 1.1（XHTML的最新版）从技术上说，使用起来有一些复杂。因为规定中声明XHTML 1.1的文档应当使用MIME类型 application/xhtml+xml, 不应当被看作text/html。 并不是严格的禁止使用text/html, 只是不建议使用。 另外一方面，XHTML 1.0 （应当使用 application/xhtml+xml）同样可以使用MIME类型 text/html, 如果它是可兼容的HTML。W3C的注解XHTML Media Types 中包括了MIME类型（W3C推荐使用的类型）的概要。

不幸的是，一些老的浏览器包括IE不能识别MIME类型 application/xhtml+xml, 并且会终止显示源代码，甚至会干脆拒绝显 示整个文档。

如果你想使用application/xhtml+xml, 你应当让服务器检验一下读取文档的浏览器是否支持MIME类型，如果能，就使用它， 如果不能，就使用text/html。

如果你使用的是PHP作为服务器端的脚本，那么下面的这段脚本能够让你的文档针对不同的浏览器使用不同的MIME类型。

<?php
if (stristr($_SERVER[HTTP_ACCEPT], "application/xhtml+xml") || 
stristr($_SERVER["HTTP_USER_AGENT"],"W3C_Validator")) {
 header("Content-Type: application/xhtml+xml; charset=iso-8859-1");
 header("Vary: Accept");
 echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
 }
else {
 header("Content-Type: text/html; charset=iso-8859-1");
 header("Vary: Accept");
 }
?>

这个脚本是检测是否用户代理发送了一个包含“application/xhtml+xml”的Accept HTTP头，或者如果用户代理是W3C HTML校验器（不会发 送合适的Accept HTTP头的，但是它依然支持 application/xhtml+xml）。如果上面检测的回答是肯定的，文本将被看作 application/xhtml+xml。那些浏览器 也会收到一个XML的声明。对于另外的一些浏览器（包括IE的是所有版本），文档都将被看做 text/html。在文档中也没有添加额外的XML声明，因为如果添加的话，会使IE/WIN转化到我们所不希望的Quirks模式。

在Content-Type头部之后,一个被更改过的头部，将被发送到中间的缓存中（比如一些代理服务器），用来告诉他们文档的内容类型随着客 户端对文档的请求而改变。

如果想了解更多的PHP检测脚本, 请参考Serving up XHTML with the correct MIME type. 那个脚本对请求客户端的q-rating（它声明了更够很好的支持某种MIME类型）进行了考虑，在发送text/html 文档给不支持 application/xhtml+xml的客户端之前，把XHTML转化成HTML 4。

下面的是一个相似的脚本，针对ASP（VBSscript）:

<%
If InStr(Request.ServerVariables("HTTP_ACCEPT"), "application/xhtml+xml") > 0 
Or InStr(Request.ServerVariables("HTTP_USER_AGENT"), "W3C_Validator") > 0 Then
 Response.ContentType = "application/xhtml+xml"
 Response.Write("<?xml version=""1.0"" encoding=""iso-8859-1""?>" & VBCrLf);
Else
 Response.ContentType = "text/html"
End If
Response.Charset = "iso-8859-1"
%>

值得注意的是，当一个文档的MIME type是application/xhtml+xml时，一些浏览器（像Mozilla）是不会显示包含错误的文档 的。这在 开发过程中是一件好事，但是对于那些刚刚更新完站点且不是XHTML专家的人来说，就会出现一些问题，除非您能确保所有的代码都是规范的。 如果出现了这种问题，您可以考虑使用HTML 4.01 Strict来代替XHTML。

下面列出了一些在使用XHTML 1.0 Strict中需要特别注意的地方:

  • 永远使用小写字母，让引号伴随者属性: 所有元素和属性的名字都必须使用小写，所有属性值必须使用双引号。

    错误: <A HREF="index.html" CLASS=internal>
    正确: <a href="index.html" class="internal">

  • 关闭所有的元素:在HTML中一些元素没有必要被关闭。当下一个元素开始的时候，上一个元素就自动被关闭。XHTML中 是不允许这样的。所有元素都必须被关闭，即使其中没有内容（如 <img>）

    错误: <li>Item 1
    正确: <li>Item 1</li>

    错误: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    正确: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    错误: <br>
    正确: <br />

    错误: <img src="image.jpg" alt="">
    正确: <img src="image.jpg" alt="" />

  • 属性不能被缩减: 在HTML里，一些属性可以被缩减。而XHTML则不允许这样做。

    错误: <input type="checkbox" id="checkbox1" name="checkbox1" checked>
    正确: <input type="checkbox" id="checkbox1" name="checkbox1" checked="checked" />

  • 不要使用被排斥的元素: 一些元素和属性在HTML 4.01 Transitional和XHTML 1.0 Transitional是被允许的，而在XHTML 1.0 Strict下则不被支持(还有in HTML 4.01 Strict)。比如<font>、<center>、 alink、align、width、 height (对于某些元素)和 background。

相关文章:

Doctype（文档类型）

现在只有很少的HTML文档有一个正确而完整的doctype或者DTD (文档类型声明)。它现在更多的是在起装饰作用而没有什么功能作用，但是就在几年前刚开始的时候，一个doctype的定义，对浏览器解释这个 文档起到很大的作用。

所有的HTML和XHTML文档都必须使它的doctype声明合法化。 doctype可以告诉我们在文档中使用的是什么版本的HTML和XHMTL，也决定了校 验器以何种方式校验，浏览器以何种模式解释。 如果文档中有一个正确而完整的doctype，许多浏览器将会转换到标准模式，那就意味着与CSS的规范更加接近了。因为浏览器不必再把时间用 在弥补、解释不规范的HTML上了，所以文档的显示速度也加快了。这同样也会减少在不同浏览器上显示的差异性。

下面的doctype声明是针对XHTML 1.0 Strict的，它将会促使拥有“文档类型转换器”的浏览器使用他们的标准模式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
相关文章:

字符编码

所有的XHTML文档都应当定义他们的字符编码。

最好的网页编码方法是配置你的网络服务器，使其发送带有字符编码的HTTP content-type头部。关于如何使用去做的具体细 节，请参阅你所使服务器软件的说明。

如果你使用的是Apache，你可以通过在你的.htaccess文件中添加一两条规则来定义字符编码。 例如，你的所有文件使用的都是utf-8, 添加下面的语句:

AddDefaultCharset utf-8

定义具有相同扩展名的文件的字符编码,则使用下面的代码：

AddCharset utf-8 .html

如果你的服务器允许你用PHP脚本时，你可以使用以下的代码来定义字符编码。

<?php
 header("Content-Type: application/xhtml+xml; charset=utf-8");
?>

如果你的页面是HTML, 请把application/xhtml+xml换成 text/html。不管是什么原因，如果你不能配置你的服务器使其定义为你所使用的字符编码，你可以在<head>中使用<meta> 。 即使你的服务器配置正确了，这也是个定义字符编码的好方法。

例如, 下面的<meta>告诉浏览器这是一个使用ISO-8859-1字符编码的文档:

<meta 
http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
相关文章:

6. CSS

CSS过去经常被用来定义字体的属性，而现在可以用它来控制整个文档的布局。然而，为了有效的用CSS来控制布局，需要做一些不同的处理 ，这种不同是跟用表格布局相对比的。

为了CSS可以高效的控制布局，结构化、语义化的XHTML是必不可少的。

浏览器的支持

正如前面所提到的，在过去几年，浏览器对CSS的支持程度已经改进了很多。不幸的是，浏览器的开发商好象对实施开放的标准并不感兴趣 ，所以不同浏览器对CSS的支持程度也大相径庭。就算是支持程度最好的浏览器，在软件中仍然有一些bug，使得浏览器以错误的方式运行。

现在(2004), 对CSS支持比较好的浏览器有Mozilla (还有以Gecko为内核的: Firefox, Camino, Netscape 6+), Opera和Safari (还有以 WebCore为内核的: OmniWeb 4.5 and later)。 Internet Explorer 6/Win并没有如此好的CSS支持程度，但是它将让你为其做出大量的基础工作。Internet Explorer 5/Mac对CSS 1的支持很出色, 但是却不支持CSS 2。 IE 5.* for Windows的支持性也很好, 但是仍然有一些问题值得你去注意。 早期版本的IE以及Netscape 6以前的版本就没有必要提及了。

因为现在大多数人都使用IE/WIN，所以你将不得不让它成为特殊分子。这并不是说，你不能或者不应该使用有更好支持CSS能力的浏览器来 提高他们的设计能力。

现在在用的浏览器中，并不是所有的浏览器都有很好的CSS支持能力，使其能够具有解释用CSS布局的优秀图形化站点的能力。幸运的是，对 于大多数网站，只有很小比例的访问者还在使用不能解释CSS的老浏览器。

值得注意的是，这些人并不会被排斥在外的。在90年代，浏览器检验脚本是一个很流行的方法，它告诉那些使用“错误”浏览器的使用者一 个新的网址，那个网址告诉他们去升级浏览器，好重新连接到那个网站。

现在，你可以以一种更好的办法应付不被支持的浏览器。使用逻辑化、语义化的一个最大的好处就是它使文档在没有CSS时，仍然可以使用 和访问。表现（就是文档看上去的样子）在一个支持性好的浏览器中也将呈现的不一样，但是它的内容将永远不变，大多数情况，对于访问网 站的人来说，内容实际上比表现的方式更加重要。这就是为什么给那些支持性不好的浏览器发送一个没有样式的页面，要比把他们排斥在外要 好的原因。

有好几种方式去解决这个问题：一种最常见的方法是使用 @import来链接相应的的CSS文件。Netscape 4和老的浏览器不支持@import所以将不会导入CSS文件。 还有许多方法来向浏览器隐藏CSS。大多数隐藏CSS的方法是利用了浏览器对CSS解释时的漏洞。这意味着总会存在浏览器通过升级弥补漏洞的危 险。所以越少的依赖CSS hacks（CSS漏洞）越好。

很明显的，你可以使用服务器端技术去做一个浏览器检测，然后针对不同的浏览器，发送不同的CSS文件。如果你这么做了，你必须要确保 检测脚本是通用的，以避免因为浏览器的升级或者新的浏览器发布导致发送错误的CSS文件。

相关文章:

用不同的方法应用CSS

有以下几种方法使一个HTML文档中的元素应用CSS。

外链式

把所有的CSS规则都写在一个或几个单独的文件中，这种做法有许多优点。HTML文档会变得非常的小，CSS文件被存在浏览器的缓存中，仅仅 需要下载一次即可，并且你只需要修改一个文件就可以改变整个网站的样式。一个外链式的CSS文件，见如下:

h1 {
 font-weight:bold;
}

注意:在外链的CSS中没有<style>标签。

你可以使用 <link>标签来把一个CSS链接到HTML文档中:

<link rel="stylesheet" type="text/css" href="styles.css" 
/>

或者在<style>中使用一个@import标签 :

<style type="text/css">
@import url("styles.css");
</style>

直线式

通过使用style属性,你可以直接的在HTML中应用CSS:

<h1 
style="font-weight:bold;">Rubrik</h1>

这种情况，应尽量的避免，因为他把结构和表现混在一起了。

内嵌式

内嵌式CSS是写在<style>标签中，也是写在文档的<head>中:

<style 
type="text/css">
h1 {
 font-weight:bold;
}
</style>

这种情况也应该尽量避免，最好还是把HTML和CSS用单独的文件存放。

相关文章:
  • At-Rules

    关于CSS导入和media类型的说明。

CSS的语法

一条CSS的规则是由一个选择器和一个或多个声明组成。选择器决定了CSS规则可作用于文档中的哪个或哪些元素。一个属性和一个值组成了 一个声明，声明要用大括号（{}）括起来，并且每个声明要用分号（；）结束。

一个简单的CSS规则如下:

p {
 color:#0f0;
 font-weight:bold;
}

这个例子中, p就是选择器,表示这条规则将作用于文档中的所有被<p>包围的内容。这个规则中，有两 条声明，它们共同作用，使 <p>中的内容所有字体为绿色并且加粗。

想了解更详细的CSS规则，可以参阅 CSS Beginner’s Guide, CSS from the Ground Up或者一个CSS手册。

相关文章:

多余的元素和类

当我们刚开始学CSS时，很容犯一些错误：使用不必要的XHTML元素、多余的类和额外的 <div>。并不是说这些代码是不规范的，而是它与一些原则（如结构与表现相分离，使用简单的整洁的标记）相矛盾。

下面是一个使用不必要XHTML元素的例子:

<h3><em>Headline</em></h3>

如果你想使标题行变成斜体，可以使用CSS来重新定义 <h3>元素:

h3 {
 font-style:italic;
}

下面是一个使用多余的类的例子:

<div id="main">
 <div class="maincontent">
 <p class="maincontenttext">
 CSS的用法的奥秘很多
 </p>
 </div>
</div>

下面这么写可能更好:

<div id="main">
 <div>
 <p>
 CSS的用法的奥秘很多
 </p>
 </div>
</div>

为了控制div#main中的元素，你可以在CSS代码中使用相关的的选择器，例如:

div#main p {
 /* rules */
}

多数情况下，CSS允许你把想要的样式来定义XHTML，而不用增加额外的的标记。但是有的时候，增加一些额外的代码也是必要的。

CSS小窍门

很明显，一旦你去很认真的学习使用CSS，你一定会发现某些问题，这些问题可能是由误解造成的，可能是由对规则的不了解或者浏览器的 漏洞造成的。CSS Crib Sheet就是一个好建议的荟萃，有Dave Shea整理，下面还将有一些重要的 而且是Dave没有提及的小窍门。

  • 先校验:在调试的时候，先由校验开始吧，HTML和CSS都要进行校验。许多问题都是由不规范代码引起的。

  • 先在最先进的浏览器中调试，然后才轮到其他的浏览器: 如果你刚开始就用对CSS支持不好的浏览器调试，那么你所编 的CSS将会逐渐适应这种错误的处理。当你继续在更先进的浏览器中测试，一些你所不希望的内容就会出现了。最好还是首先在一个有很好标准 兼容性的浏览器中运行，然后再把代码拿到老一点的浏览器中去测试。

  • 理解CSS的盒模型:为了获得一个元素的实际的宽度和高度，你需要用padding和border来 增加它的 width或者height。在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。

    假设你有如下的CSS代码:

    div.box {
     width:300px;
     padding:20px;
     border:10px solid;
    }

    所以这个div的总宽度是360px.

    10px + 20px + 300px + 20px + 10px = 360px

    在Internet Explorer 5.*/Win中，实际上总宽度为300px, 内容的宽度为240px.

    300px - 10px - 20px - 20px - 10px = 
    240px

    为了绕过这个问题, 你同样可以使用CSS hack来给不同的浏览器提供不同的值，或者你尽量避免在同一个元素中同时定义width 和 padding或者width和border。

    想了解关于CSS盒模型的更详细内容，请参阅 Box model。

  • 为非零的数值加上单位:CSS要求一些属性值（如width、 height、font-size）必须要有单位。当属性值为0时是可以例外的。在那种情况下，没有单位也是必须的，因 为0就是0，什么单位也都无所谓了。

  • 理解漂浮物:尽管漂浮物这个概念很难理解，但是它很重要，因为CSS中会频繁的使用它来布局。有一些关于漂浮物的 好文章，如Containing Floats、Floatutorial和Float: The Theory。

  • “LoVe/HAte?” 按照如下顺序为链接定义伪类：Link, Visited, Hover, Active.

  • “TRouBLed?”当使用简写来定义margin、padding和border时, 他们的顺 序是从上开始的顺时针方向: 上、右、下、左。

  • 以其功能给CLASS和ID命名，而不是它的表现: 如果你有一个CLASS名为.smallblue, 过后你决定用它来 定位文本，使其为大号、红色，那么CLASS的名字就会被弄混淆的。最好能用名字来描述功能和结构，如.copyright和.im portant。

  • CSS是个敏感的东西:当HTML属性中的 class和id与CSS一起使用时，那可就要小心了。 (参见CSS2 syntax and basic data types).

  • 检查你的ID:文档中一个元素只能使用一个id，且id必须唯一，而class可以被多个元素 所共享。

  • 使用合法的字符为class和 id命名: Class和id的名字只能由数字、字母和连字符组成，数字和连字符是不可以开 头的。(参见 CSS2 syntax and basic data types).

  • 正确的注释:CSS的注释是以/*开头，以*/结尾的:

    /* This is a comment 
    */

CSS布局

有很多例子和阶梯教程指导您如何使用CSS布局。建议您从简单的例子开始，学习它的原理，然后再去学习复杂的布局。

相关文章:

7. 可访问性

可访问性并不是单单针对残疾人，尽管这是这是一个创建具有可访问性站点的一个主要原因。一个具有亲和力的站点对任何人来说，显示效 果都同样出色，无论他是不是残疾人。它可以被更多使用不同浏览器或浏览设备的人所访问。

有一种对可访问性站点的常见误解，认为它与众不同，或者不如那些不具有可访问性的站点具有视觉吸引力。

这有一个例子将告诉您可访问性是如何给每一个人造福的：一个网站有一个表单，用它来进行注册参加一个研讨会，表单中，你可以选择去 参加三个城市中的一个城市的研讨会。每一个城市名字旁边都有一个单选按扭。如果表单的创建者没有可访问性的意识，那么使用图像浏览器 的人就不得不把鼠标放到很小的单选按扭上，然后点击它来选择城市。如果开发者了解可访问性，并且在每个按扭旁边用 <label>标记说明，那么您就可以点击城市的名字来选择地点了。那么，您认为哪种方法使表单使用更简便呢？

使用语义化、结构化的XHTML将使你走向可访问性站点之路。要对可访问性的文档有一个基础的概念，尝试使用一个文字化的浏览器（如：< a href="http://lynx.browser.org/">Lynx）看看内容是否依然起作用。虽然这离通过可访问性的验证（这是你必须去做的）还差很远，但 是这是一个好的开始。

框架

许多网页设计师喜欢使用框架把浏览窗口分割成几个独立的部分，每部分都是由独立的HTML文档组成，这样做对某些程序（比如一个区域网 的应用程序）可能很好，但是在公众网上，使用框架将存在许多缺点:

  • 你会令浏览者迷惑。做网页的一个基本原则是每一个页面用一个唯一的URL表示。打破这个原则，你将使浏览者很难 明了网站的结构。
  • 框架带来了搜索引擎的问题。一个搜索引擎要把一个框架编入索引中，你就必须提供指向所有页面的链接。从搜索引 擎搜到你网站的浏览者也会遇到一些问题，他们很可能访问的是缺少了某些重要信息（导航链接）的文档。一些框架结构的网站试图通过 robots.txt文件告诉搜索引擎不要把次级页面编到索引中，以此来解决上面的问题。其他的一些网站则用javascript把通过搜 索引擎过来的访问者送到首页。如果你的目标就是获得少量的浏览者，这两种方法都是可行的。
  • 框架破坏了书签。大多数浏览器不能在一个框架网站的页面上使用书签。当你打开书签后，你将打开的是框架设置的 默认地址，往往去的都是这个网站的首页。
  • 打印变得愈加的困难。许多浏览者在打印文档的时候，同样会遇到问题。大多数的浏览器都会要求你解开这个框架， 否则不能打印。
  • 通过E-mail传送链接变得更加的困难。框架很有效的消除了往一个网站中的页面发送链接的可能性。本质没有变，只 是提高了网站的复杂性。
  • 使网站具有可访问性变得更加的困难。这会让那些不使用图形化浏览器（它支持框架）的人遇到问题的。也正因为此 ，可访问性准则不建议大家使用框架。

此外，你这是在给自己找麻烦。框架将使一个网站在技术上更复杂。

表格

把“不要使用表格布局”解释成“不要使用表格”对一些人来说没什么区别。这个并不是如何去解释的问题。如果你想标记一个列表数据， 理所当然应该使用表格，这才是表格应当起的作用。然而，有一点很重要：当你建立数据表格时，有许多方法可使他们更具有逻辑性和可访问 性。

相关文章:

表单

表单通常是没必要去使用的，而且使用起来很困难，部分的原因是因为他们是用不合逻辑的方法建立的，部分是因为基本的HTML代码并没有 使用标签（标签可以使表单更具有可访问性，更容易使用）。一些相关的标签（如<label>、<fieldset>和 <legend>）是存在的，而且是应该被使用的。

一个普遍的问题是用什么给表单布局。一些人说，可以把一个表单看作一个列表数据，可以用表格来构造，然而还有一些人提议用CSS来布 局。两种方法都是可用的，但是如果你用的是表格，请确保这个表格是有意义的，而且要保证当一个包含表单的表格被线性后是可用的。

相关文章:

JavaScript和cookies

不要依靠JavaScript。许多人（包括你自己）可能都会认为如果把JavaScript从他们的浏览器中移除，就可以更加安全或者可以避免弹出窗 口。他们也可能正在使用的浏览器压根就不支持JavaScript。根据TheCounter.com的调查，6%的Web用户不使用JavaScript, 而根据W3Schools.com的调查，这个百分比为8%。

大多数情况，使用JavaScript的地方，对访问者都没什么好处。当然有一些例子显示Javascript能够给访问者提供更好的体验。一个例子就 是校验表单的输入。

值得注意的是这并不是说您不应该使用JavaScript。而是说你不应该创建一个依靠JavaScript运行的网站

同样的事也适用于cookies。如果浏览者不接受他们的网站就拒绝运行，那么你的cookie就使用错了。

8. URLs（页面地址）

这部分跟Web标准和可访问性无关，但是把它放在这是因为一个URL的创建方式将对搜索引擎如何把站点编入索引以及它对访问者的可用程度 都有很大的影响。

一些搜索引擎机器人不能跟踪以字符串结尾的地址。这种地址通常出现在一些把内容动态的存在数据库的网站里，看起来就像下面这样:

http://yourdomain.com/products.asp?item=34627393474632&id=4344

最简单的创建对搜索引擎机器人和人们都有易的URL的方法是改变它看起来的样子，使URL看起来就像直接的某个目录，上面的URL应该改变 成:

http://yourdomain.com/products/item/34627393474632/id/4344/

Web服务器将会解释新的URL，并在内部把它转换成原始的URL，最终以字符串结束。这部分的结尾是一些站点的网址，上面将会有更多的相 关信息。

一个更好的改变URL的方法（多少有一些麻烦）是彻底的把看到的URLS改写成人们易读的方式:

http://yourdomain.com/products/
flowers/tulips/

这种URLs的好处是搜索引擎机器人将把你的站点更好的收入到索引中，对于大家来说，它的可读性也更强，并使你避免了泄漏你所使用的服 务器方技术。因为在URLS中，并没有显示服务器专有文件的扩展名，如 .asp、.cf、.cgi 和 .jsp,这会使你更容易的更改服务器器方的技术， 所以这种URLs显得十分的必要。

如果你选择使用包含字符串的URLs，把&编译成HTML的实体&amp;是很重要的。如果你不这么做，一些浏览器会替你 完成这个工作，好象这是他们应该做的。当他们碰到&amp;，就把它看作一个实体的开始。如果紧接着&amp;后的文本符合HTML中的一个实体，浏览器就会转变这个URL，大多数情况，这将会破坏URL中的字符串。

还有一件事值得一提，对于大多数站点，使用 www这个次级域名是不必要的。应该用 http://yourdomain.com/来代替 http://www.yourdomain.com/。更多的内容请参阅no-www.org。无论你使不使用www，配置你的服务器地址，使其指向http://www.yourdo main.com/， http://yourdomain.com/也是同样的道理。

相关文章:

9. 参考资料

精选的一些可供参考的书籍、站点和邮件列表。

书籍

CSS

Web发展概况

  • A List Apart

    一个在线周刊，探讨设计、发展、和WEB内容的含义同时还关注着标准化设计的相关技术，以及给我们带来的好处。

  • webdesign-L

    一个热忠于开发网络的邮件列表。大多数与Web设计和Web开发相关内容列表里都有讨论。

HTML

可访问性

Web标准

XHTML

10. 专业词汇

Accessibility
一个具有可访问性的站点对于每个人都是可访问的、可用的, 无论他们使用的是什么硬件和软件, 无论使用什么作为站点的导航。
CSS (Cascading Style Sheets)
一种描述站点表现样式的规则。
HTML (HyperText Markup Language)
用它来标记文档的结构。
Presentation
一个站点看（听）起来的样子。
Structure
一个文档的主体，再加上对内容的逻辑化的标识。
Markup
通过标记一个文档，你可以赋予这篇文档及其内容以结构与意义。在网上，用HTML和XHTM作标记。
Validation
校验是一个控制过程，在过程中使文档遵守语言的规范。你可以通过对比，检查出文本中的拼写和语法错误。
W3C (World Wide Web Consortium)
一个组织，由他们来制定Web规范、准则和开发一些Web工具。
Web standards
这个就不用多说了，详情请看 W3C。
XHTML (Extensible HyperText Markup Language)
根据XML对HTML的重新改造。
XML (Extensible Markup Language)
一个标记语言，看起来就像HTML，但是它允许作者根据描述的内容来自定义相应的元素。

评论 (0) All

登陆 | 还没注册？