上一篇
下一篇
网页优化技巧
作者:泡泡糖 日期:2009-06-08
<title>：一个优质网页最重要的元素
HTML 中的 <title> 元素用于在下列情况中提供一小段能够代表该网页的文字：
* 窗口标题栏
* 书签列表
* 搜索服务的结果列表
一个好标题
因此，请给你的网页拟定一个好标题：
别太短
类似“第一部分”这种标题在搜索结果中并不能提供足够的信息。什么东西的 第一部分？一个较好的标题：<title>现代音乐指南，第一部分</title> 或者更好的标题：<title>Time Frame（现代音乐指南，第一部分）</title>
但也别太长
因为很多窗口标题栏和菜单中只能显示 60 至 80 个字符；你可以在网页文档的顶级标题中给出一个更详细、更能表达意思的标题。例如：<h1>第一部分：对于音乐来说，现代从何时开始？</h1>（包含指向整个现代音乐背景的链接）。
不要使用“点击这里”作为链接文字
链接意味着什么
当需要读者点击时，使用简短但有意义的链接文字：
* 在阅读上下文时能提供一些信息
* 能解释该链接将提供什么
* 不要写出太多具体的说明
* 不要使用动词短语
一个例子
例如，在你的网页中避免使用下列句子：
点击这里，下载 W3C 的编辑器/浏览器 Amaya。
或者：
请到 Amaya 网站 下载 Amaya 及其他必须的软件。
这两个句子都提供了太多关于获得 Amaya 软件的具体说明。如果你想让你的读者进行点击，可以使用如下表达：
获取 Amaya！
请注意“获取”在链接之外；我们不推荐在链接文字中使用动词短语。因此，你不应该使用：
告诉我更多 关于 Amaya 的信息。
而应该这样写：
告诉我更多关于 Amaya 的信息：W3C 的免费编辑器/浏览器，它能让你创建 HTML，SVG，和 MathML 文档。
应该使用的方法和应该避免的技术
不要使用“refresh”进行重定向
如果你想让地址 http://www.example.org/foo 显示存放在 http://www.example.org/bar 的页面内容，你不应该 像这样使用“refresh”技术：
<META HTTP-EQUIV=REFRESH CONTENT="1; URL=http://www.example.org/bar">.
为什么呢？因为它将破坏“后退”按钮。想象一下读者按下“后退”按钮之后，网页将被再次刷新，读者将看到同一个页面。读者很有可能会变得不舒服，然后关闭浏览器窗口——这是作为网页作者的你不太想得到的效果吧。
请使用 HTTP 重定向
在使用“refresh” meta 标签的处理重定向的时候，我们用的是一个文档内部的特殊指令。用户代理（浏览器或是 Markup Validator）会下载该页面，查找其上下文，找到“refresh”指令，等待指定的时间（设置“0”秒，可以得到立即刷新的效果，也可以设置具体的等待秒数），然后继续导入新地址。
另一方面，“HTTP 重定向”执行得更直接，因为它是在 另一层内 完成的。当 User Agent (i.e. a browser or the validator) 首次访问服务器并请求该文档时，_服务器_自身就会判断出该文档要重定向到另一个地址，于是服务器便主动告知 user-agent 它应该直接访问新地址。
同时，“HTTP 重定向”能提供更多的方法进行重定向，因为它除了能提供给 User Agent 新地址外，还有很多功能：服务器能提供关于重定向的目的和类型的信息，这些信息允许 User Agent 根据不同的重定向种类进行不同的动作。HTTP 重定向（根据服务器发送的相关 HTTP status code）的种类如下：Permanent Redirect (HTTP 301)、 Temporary Redirect (307)、undefined redirect (302)。
参阅下面的文档和教程学习如何通过你的服务器使用它。
使用 <h1> 作为顶级标题
<h1> 在 HTML 元素中作为文档的第一级标题。
* 如果该文档是独立的，比如 教你游览日内瓦，它的顶级标题就可以和文档名称相同。
* 如果该文档是某个集子的一部分，例如，它是一个宠物集里面关于狗的部分，那么，顶级标题就应该包括一定的相关文字（如果只写 <h1>狗</h1> 就会显得意义不明）：狗 —— 您的宠物指南。
不像 <title> 元素，该元素可以包含链接、强调，以及其他 HTML 短语元素。
由于一些浏览器的默认字体大小问题，很多文档作者和编辑工具会选择 <h2> 元素代替 <h1>。这会导致一些支持页面标题层次结构的工具，例如 Amaya 的 TOC（导航目录）视图 发生混乱。因此，我们推荐使用 CSS（级联样式表），它能使网页文档作者分别设置 <h1>、<h2> 等元素的字体大小。
使用 alt 属性描述每幅图像
alt 属性有什么用？
alt 属性可以在一系列标签中使用（如 img，area 和 input 以及 applet），它能为该对象提供一个替代文本。
替代文本在下列常见的情况下，能为你的网站和访客提供一些好处：
* 现在，各种不同平台都有功能不一的网页浏览器，有些根本无法显示图像，或只能显示特定的几种图像；有些能够设定为不载入图像。如果你的图像代码中包含 alt 属性，在这种情况下，绝大多数的浏览器都能显示该属性的内容来代替缺失的图像
* 你的一些访客无法看清图像，比如他们患有弱视、色盲，或近视，alt 属性对他们的帮助就很大了。他们可以根据该属性中的内容来了解你页面中的信息
* 搜索引擎机器人就属于上述两种类型：如果你想让你的网站被完整收录到搜索引擎中，使用 alt 属性可以保证搜索引擎机器人不会错过你页面中的重要部分。
我应该在 alt 属性中放置什么？
alt 属性内容的一般规则是：使用与图片具有相同功能的文字。
一些更具体的规则：
* 如果该图片用于配合少量文字，则将这些文字放置到 alt 属性中
* 如果该图片用于列表符、水平线等类似的装饰效果，alt 属性可以留空（例如 alt=”"），但如果能在 CSS 中使用 list-style-image 则更好
* 如果该图片代表许多重要信息，则最好能概括出一小行文字放入 alt 属性中，然后添加一个 longdesc 链接，指向更详细的描述
不要忘记添加 doctype
添加什么？
HTML 的种类可不止一种，实际上有 HTML 4.01 Strict、HTML 4.01 Transitional、XHTML 1.0 Strict 等等。HTML 的种类由其各自的 W3C 规范定义，同时，它们也由一种机读语言规范定义了每种 HTML 合法的结构、元素，以及属性。
上述定义被称作“文档类型定义（Document Type Definition）”，简称 DTD。
用于处理 HTML 文档的工具，比如网页浏览器，需要知道一个 (X)HTML 文档实际使用的是哪种 DTD：这就是为什么每个 (X)HTML 文档需要在起始处有一个 DTD 声明，就像这样：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
鉴于其语法，DTD 声明常被简称作“Doctype”。
为什么？
为什么要指定 doctype？因为它定义了你的文档实际使用的是哪个版本的 (X)HTML，并且这也是浏览器或其他文档处理工具所需的关键信息。
例如，指定了文档的 doctype 后，你就可以使用 Markup Validator 等工具来检查其 (X)HTML 语法正确性（并找出可能导致你的页面在不同浏览器下无法正常显示的错误）。如果上述工具不知道你使用的文档种类，那么它们将无法工作。
最重要的是，对大多数的浏览器来说，一个简单的 doctype 声明能减少许多不必要的猜测行为，并能触发“标准”解析模式，这就意味着不仅浏览器对文档的理解（对访客来说就是网页显示的速度）能变快，而且它符合规范，不会出现未定义 doctype 的文档常有的错误。
在你的文档中使用 <link>
LINK 元素
HTML 和 XHTML 有种机制能让网页作者添加与一份 HTML 文档相关的额外信息。这些额外的资源可以是样式信息（CSS）、浏览导航帮助、信息的另一种格式（RSS）、联系方式等。
LINK 元素（<link>）被用作在文档前端的 HEAD 元素中添加这些信息。
一个例子
我们来看一个很实用的例子。这是某个天文学网站上的一个页面，内容是描述太阳系的章节中关于地球的那部分。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>Earth - Astronomy Weblog</title>
这是一份 HTML 文档的经典开头代码。
<link rel=”Start” href=”/solar-system/” />
<link rel=”Prev” href=”/solar-system/venus/” />
<link rel=”Next” href=”/solar-system/mars/” />
这些 link 能够帮助某些用户代理（浏览器）进行浏览导航。
* Start 指向本章节的开始处
* Prev 指向前一项，本例中是金星（Venus）
* Next 指向后一项，本例中为火星（Mars）
<link rel=”Contents” href=”/solar-system/contents.html” />
Contents 指向本章节的索引
<link rel=”Help” href=”/website-help.html” />
Help 能够链接到一个为访客提供网站使用帮助的页面。
<link rel=”alternate”
type=”application/rss+xml”
title=”RSS”
href=”/updates.rdf” />
它为 RSS 阅读器找到网站更新的订阅地址提供了可能。请注意，在本文写作时， mime 类型application/rss+xml 仍然是一份草稿“The application/rss+xml Media Type”，而且还没有被 IETF 认可。
<link rel=”meta”
type=”application/rdf+xml”
title=”FOAF”
href=”http://astro.example.org/foaf.xrdf” />
它为 FOAF 阅读器找到文档中的元数据（metadata）提供了可能。它可以是作者。请注意，在本文写作时，mime 类型 application/rdf+xml 还没有被 IETF 认可，而且自从上次提议过之后没有更进一步的研究。
<link href=”mailto:webmaster@example.org” rev=”made” />
这是联系网站作者的一种方法。
<link rel=”stylesheet”
type=”text/css”
media=”screen”
href=”/style/astro.css” />
定义你的网站所使用的 CSS 样式表。本例中，我们将该样式表定义为用作屏幕绘制。我们可以为其他媒体定义额外的样式表。
<link rel=”alternate”
href=”/solar-system/earth.fr”
hreflang=”fr”
title=”French Translation” />
它使你能够访问该文档的另一种语言的翻译版，本例中是法语版。
</head>
<body>
…. Here the rest of the page.
该代码承上启下，关闭了 head 部分，开启了 body 部分。
这些 link 是为用户代理（浏览器）和其他工具准备的，它们能帮助他人使用你的网站。
如果你指定了一种颜色，请指定所有的颜色
数量惊人的网站为其正文、标题和链接设置了各种各样的颜色，唯独忘记了设置背景颜色。因为你的访客可能在他们浏览器的偏好设置中指定了不同的颜色，他们有可能：
* 看到不协调或令人不舒服的颜色搭配。
* 更坏的情况是，如果访客浏览器的偏好设置是浅色字体配深色背景，而你的站点设置为深色字体配浅色背景，那么，访客可能会看不清楚网页上的文字，因为变成了深色文字在深色背景上，反之亦然。
避免这些问题的经验法则是：如果你指定了一种颜色，必须指定所有的颜色，包括背景色。
推荐实例
忘掉 <font>，使用 CSS
使用级联样式表在网页中设置颜色的方法不仅是新式的，也是很好的。我们强烈推荐使用这种方法来取代在 HTML 中使用 <body> 属性和 <font> 元素的方法，因为 CSS 更灵活，更容易维护，而且能节省带宽。下面将讲述如何使用 CSS 属性 <color> 和 <background-color> 或其简写 <background> 来指定颜色。
一个例子
背景色、前景色，和链接的颜色都被指定为黑色字体白色背景。
html, body {
background: #fff;
color: #000;
}
a:link {
background: #fff;
color: #037;
}
a:visited {
background: #fff;
color: #636;
}
注意字体大小
网页设计者中有这么一种倾向：他们认为小字体能让网页看起来更漂亮，并能提供更多空间给每个网页中的实际内容。但这有时会导致字体太小，不便于阅读。
更加不幸的是，这个问题又随着用于访问网页的平台不同而发生变化，从小屏幕的移动设备到连接在计算机上的投影仪。甚至在某个特定平台内，字体设置也可能不同。
这是一个基本的易用性及可访问性问题：一份好的设计应该看起来漂亮，并且 不需要访客手动调整字体大小。
忘掉 <font>，使用 CSS
目前较好的处理网页字体大小设置问题的方法是使用级联样式表（CSS）。我们强烈推荐使用该方法来替代 HTML 中 <font> 标签的使用，因为 CSS 更灵活，更容易维护，同时也节省带宽。本条小贴士的目的并不在于讨论 CSS 与 <font> 标签比有什么好处，如果你想获得此问题的更多详细信息，请使用你常用的搜索引擎… 我们将着重讨论如何使用 CSS 技术创建易读性网页。
善用 CSS 的 font 属性
下面有一些使用 CSS 的 font 属性来创建易读的网页时应该遵守的基本规则。
大小：考虑用户的默认字体大小，避免太小的字体
* 1em（或 100%）作为网页文档的基本字体大小，等价于用户的默认字体大小。使用这个值作为基本字体大小，并避免使用小于这个值的基本字体大小为佳
* 在正文中避免设置 em 标签中的字体小于 1em，除非是版权声明或其他协议条款等。
单位：避免使用绝对长度单位
* 不要使用 pt 或其他绝对 长度单位 来定义用于 screen 的 CSS 中的 font-size。他们会根据不同的平台而有所不同，并且不能被用户代理（如浏览器）调整大小。这种单位可以用于固定的并且知道物理属性的 media CSS（例如 print）。
* 使用百分比，或（更好一点）em 之类的相对 长度单位
* 再好一点，如果一个文档已经设置了基本字体大小，在定义该文档中的某个元素时，可以使用 绝对大小（[ xx-small | x-small | small | medium | large | x-large | xx-large ]）或 相对大小（[ larger | smaller ]）。
易读的 font-family
如果要使用较小的 font-size，可以指定一个带有高度值的易读的 font-family （参见 CSS2 规范中的 font-size-adjust 部分关于 aspect 值的解释 [译者注：aspect 值是该字体的大小与该字体中小写字母 x 的高度之比]），这样能使小号的字更容易阅读。
使用国际日期格式（ISO）
人们在网络上一般怎样写日期？日期格式有那么多种，而且大多数与其他格式都不兼容。这样一来，对于编写一个国际性的、拥有跨文化访客的网站来说，选择一个大家都能明白的日期格式就显得很困难了。幸运的是，使用 ISO 的国际日期格式是较好的解决办法。
日期解读的困难
最差可能出现的情况是，日期只由数字组成（见下方例子），对日期的解读会因为各国之间的文化差异而有所不同。
想象一下这样的日期：02/04/03
它代表什么意思呢？
* 2nd of April 2003 [译者注：2003年4月2日，日/月/年，欧洲风格]
* 4th of February 2003 [译者注：2003年2月4日，月/日/年，美国风格]
* 3rd of April 2002 [译者注：2002年4月3日，年/月/日]
你的回答很可能与你所居住国家的文化习惯有关。
大多数情况下，日期用字母表示会比上述例子好。例如 Apr. 3rd, 2002 [译者注：2002年4月3日]，对懂英语的人来说很容易理解。
但这套系统并没有比之前的纯数字日期记法好很多：你知道法语中的 12 Ao?t 2042 是指4月12日还是10月12日？[译者注：实际上是8月12日 ]
ISO 日期格式
ISO（IS0 8601）规定的国际日期格式定义了如下的数字日期系统以期解决上述问题： YYYY-MM-DD。其中的
* YYYY 代表年份 [纯数字，例如 2012]
* MM 代表月份 [01（一月）到 12（十二月）]
* DD 代表日期 [01 到 31]
例如，“3rd of April 2002 （2002年4月3日）”，用国际日期格式写作： 2002-04-03。
请注意，该格式也可以被用作描绘包括时区在内的精确的日期和时间
使用数字日期系统的确有一些易读性方面的问题，这在 日期格式 FAQ中已有说明。尽管这种方法并不完美，但 ISO 日期格式仍然是全球访客都能理解（并且精确的）日期记法的最佳选择。
GIF 还是 PNG？
PNG 与 GIF 比较
本贴士中，我们将探究网络上常用来描绘简单图像、模式图或标识的两种主要图像格式：
* GIF 格式（Graphics Interchange Format，图形交换格式的英文缩写）于 80 年代后期开发，目前仍然被广泛使用。
* PNG（Portable Network Graphics，可移植网络图形的英文缩写）于 1995 年左右开发，1996 年被 W3C 所推荐，1998 年时就已经被大多数网页浏览器所支持。
GIF
GIF 格式使用了一种通过保存颜色痕迹来减小文件体积的被称为 LZW 的压缩算法。
GIF 的优点在于它被极广泛地支持，并且是既定的简单网络图像的默认选择。与其它格式（尤其是 PNG）相比，GIF 并没有技术上的优势，但在 PNG 格式刚起步并仍在成长阶段时，它的确是更安全的选择。也许在本优质小贴士写就的时候，它仍然是更安全的选择，虽然程度比以前降低了。
但 GIF 格式存在一个问题，那就是 LZW 算法被美国公司 Unisys 持有的 专利 所保护。Unisys 公司的 LZW 专利在美国于2003年6月20日失效。LZW 专利目前已在Canada、法国、意大利、德国、英国和日本 失效。
PNG
PNG（可移植网络图形），一种无损、可移植、良好压缩储存作光栅图像的可扩展文件格式。PNG 提供了不受专利限制的替代 GIF 和在多数情况下替代 TIFF 的选择。支持索引色、灰度，和真彩色图像，并且提供一个可选的 alpha 通道。色深支持 1 至 16 位。
对于网络应用来说，PNG 对比 GIF 有三个主要优点：
* alpha 通道（可变的透明度），
* 跨平台的 gamma 校正（控制图像的亮度）和颜色校正
* 二维隔行扫描（一种渐进显示的方法）。
另外，PNG 常比 GIF 有更高的压缩率（一般高出 5% 到 25%）。
这里需要说明的是，一些老的浏览器对 PNG 支持不好，或者不支持透明特性。关于不同的浏览器对 PNG 的支持程度，请参见下面这些文章：
* Miscellaneous Transparent PNG Images using IMG Tags
* Current Status of PNG
* Browsers with PNG support
使用分级标题来构建你的文档
构建你的文档
大多数页面（尤其是文本，但也包括图像和多媒体） 的作者都使用了一定的结构使网页内容更有条理。在 (X)HTML 中，使用不同级别的标题元素能够实现上述结构。
分级标题常被用作导航目录（Table Of Content，简称 TOC）（许多工具能使用分级标题生成目录），或将页面分隔成几块，例如把页面发送给小型移动设备时。分级标题还能被用作一个页面信息的关键词（某些搜索引擎会这样做）。
Markup validator 能提供 (X)HTML 页面的大纲视图来突出显示其结构 - 这通常由特殊的文本样式来呈现，尽管你的网页的正常浏览方式已经设置为使用某个样式表。如果你的页面只有一些普通文本样式而没有标题元素，那么可能那些文本的确是标题，只是被另外的样式标记为段落了。（本句原文如下：If your page has several regular text styles but no heading elements, it may be that those really are headings, but are only being marked as paragraphs with a different style.[翻译建议]）
分级标题的标签
各种不同的 (X)HTML 定义了 6 个级别的标题：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。可以预见，XHTML 2 也将提供由其所在结构中的深度决定的分级标题。
明智地选择 URI
没有什么比走到你最喜欢的商店门口，却发现店门紧闭，而且没有看见店面搬迁告示这种事情还要令人不爽了。店主也许有 N 个搬迁不贴告示的理由，但发生这种令人不愉快的事情的原因归根到底就是缺乏好的计划和管理。
同样的事情也会发生在网络上…
发布前请三思
很明显，提出这条建议的原因就是它并没有被很好的遵循。例如，除了关心网络资源的质量，你也应该谨慎选择发布的位置使其适合该资源的风格和目的。
理想状况下，URI（“Universal or Uniform Resource Identifier，通用或统一资源标识符”的简称）被用作指向网络上的某个资源，不应该具有任何重要性，也不必与发布该资源的服务器上的文件系统有关系。然而，考虑到很少的网络服务器能提供给用户足够的灵活性来映射 URI，而且 URI 有多种用途，所以在你发布网络资源前，最好遵守下面的少数几条原则以及技术提示。
URI 选择一览表
当你为一个新位置选择 URI 的时候请先考虑下面几个问题：
* 你能在一张纸上轻易写出选中的 URI 吗？换句话说，你能轻易记住它吗？
* 你能在打电话的时候拼出选中的 URI 吗？
* 选中的 URI 能给出关于其指向的网络资源的提示吗？如果该资源演变了，它还有意义吗？
* 你有没有把 URI 定位在你网络服务器的根目录附近？你确定它是最好的位置了吗？
* 你有没有想过由于某些原因，有一天你将被迫迁移整个网站？新的资源能否适用当前的位置？会不会导致整个服务器需要重新组织？
好的选择必备的一些技术提示：下面的提示还不够详细，本文的 延伸阅读 部分提供了更详细的解释。
* 保持简短。在 URI 中尽量使用小写字母。
* 按主题大类组织你的网站，对单个文档使用带有日期的 URI，如 http://www.example.org/2003/10/meeting-minutes。
* 使用格式协商（format negotiation）来隐藏 URI 中的文件扩展名，它具有足够的灵活性，能使你较容易地改变这些网站背后的技术。
最后，所谓人无完人，当你发现你的选择一点都不好的时候，请继续学习如何 管理 URI。
管理 URI
移动并重命名网络资源
当你在网上发布一个新的资源时，谨慎为上。考虑其存放位置及名称时的一些注意事项在“明智地选择 URI”一文中已经提到过。然而，会有潜在的好原因让你移动或重命名一个资源，况且这种操作不应该成为问题。
当然了，如果该操作没有正常执行，那就另当别论了。考虑最坏的情况，当你移动或重命名一个网络资源后，导致其他网站指向该资源的链接被破坏，导致别人保存的收藏夹/书签失效，导致缓存和搜索引擎除错。简而言之，它会导致你的网站访问量大降。
有没有能避免这种会破坏链接、降低访问量的负面效应，又能正常执行移动或重命名操作的方法呢？回答是肯定的——使用标准的 HTTP 重定向 将访客和用户代理（浏览器）指向新位置：临时重定向、永久重定向，还有我们下面将看到的，甚至有一种方法来说明一个资源不仅仅是被移动了，而实际上是被移除了。
移除网络资源
即使网络被认为是“永久性”的媒介，即理想状况下，网络上的文档将永久存在，这也不意味着这些资源在发布到网上之后就不能被移除了。所以，当你想移除一个资源时，应该使用一种能告知访客、缓存，和用户代理（浏览器）该资源不仅是消失了，而且是出于一些目的被移除了的方法。
实现这种目的的方法是将你的网络服务器配置为发送“410 Gone”状态，来代替在请求这些被你移除的资源时出现著名的“404 not found”页面。
验证之后
验证自己的网页越来越成为一般性的质量检查。但如果一个符合规范的网页没有良好的内容，那就是金玉其外，败絮其中。
下面是一些能帮你增进其他质量的想法和工具。
考虑内容，考虑样式，考虑导航
内容：数据和元数据（Metadata）
有用的工具
1. Markup Validator 有一个“大纲”选项，能快速检测一个页面是否良构：如果大纲功能没什么用，说明文档亦非良构。
2. 轻松检测页面中的数据和元数据级别：Semantics extractor 能分析一个文档，并给出该文档所包含信息的概要。
样式
大家不要忘记 HTML 不仅仅是“标记语言”，同时也是“超文本”。超级链接是能使一个文档内部导航（例如从目录中可以跳转到该文档的特定部分）和几个文档间的导航变得非常简单的强大工具，好好使用它。
有用的工具
1. 不管你的样式表是单独的还是嵌入到 HTML 文档中，W3C CSS 验证服务 都能为你检查它。
导航
大家不要忘记 HTML 不仅仅是“标记语言”，同时也是“超文本”。超级链接是能使一个文档内部导航（例如从目录中可以跳转到该文档的特定部分）和几个文档间的导航变得非常简单的强大工具，好好使用它。
有用的工具
1. Link Checker 服务能检测你网页中的链接和锚点，并为你找出其中坏的链接、错别字和存取控制等问题。它甚至能够递归运作。
使用 class 时考虑其实际意义
人们通常使用 bluetext，或 redborder等作为 class 的名称。命名 class 更好的方法是在名称中包含该 class 在某个 HTML 元素中所扮演的角色。
好的名称不会经常改变
想想 为什么 你想让某个事物看起来要那样，而没有真正认识到它应该看起来 怎么样。事物的外观总是要变的，但赋予它某个外观的原因没有变。
好的名称
warning、important、 downloadableImage，和 submenu 都是好的名称。它们描述了某个元素代表的事务，而且它们不太可能改变。一个警告（warning）总是警告，不管页面外观如何改变。
坏的名称
border4px、lighttext，和 prettybackground 是坏名称的一些例子。你也许会将那条边线（border）改为 5 像素（5px），或者那个背景（background）在一段时间后就显得陈旧了，而且也不漂亮（pretty）了。使用 CSS 的好处就是能让你在想改变网站外观时不用改变很多东西。如果你想把所有浅色文本变为深色文本，只需将 所有 HTML 页面中的 class 从 lighttext 改为 darktext 即可，你可能还嫌工作量太少呢。
无序列表：你用过吗？
列表的观念
当网页中的内容属于某种列表时，你可以考虑使用无序列表（<ul>）来展示这些内容。这不仅能改进 HTML 代码的可读性，还能为某些原本没有意义的内容赋予明确的意义。
未被广泛使用的现状
许多网站不喜欢使用无序列表来标记文档。在这些网站上，你常会看到许多由 <hr> 元素分隔的 <div> 标签，或由类似 |（竖线）或 ?（•）的符号分隔的一堆 <a> 标签。发生这种情况的最主要原因可能是 CSS 样式表中 <ul> 元素的属性（padding，bullets 等）。许多网页作者发现对 <div> 之类熟悉的元素 应用 各种样式要比从 <ul> 中将这些样式 移除 更方便。再加上各种浏览器平台对 默认样式的不一致呈现 使得情况变得更复杂了。
幸运的是，目前绝大多数可视化浏览器已经支持 CSS 样式表，列表元素在这些浏览器中也统一了样式，这样一来就能避免传统的 <div> 或 <span> 标签的滥用了。延伸阅读 部分列出的一些站点解释了应如何操作。
使用无序列表的好处:没有样式表照样起作用
类似 <div> 和 <span> 的元素除了把内容分块外，在语义上毫无意义。它们所要表达的意义必须通过 CSS 样式表作用在网页浏览器上才能起作用。
而如果你将某些内容组织成列表，那么它就能直接从列表标记上表达其意义，而不需要 CSS 样式表的作用。某些只扫描网页内容（并忽略 CSS 样式表）的用户代理，如纯文本浏览器、文本转换为语音的浏览器，甚至一些 搜索引擎机器人 就能识别出那些用列表组织的内容，并通过列表方式将其呈现（或朗读）出来。
更好的易用性
将一系列链接（<a> 元素）直接放在一块儿会导致文本浏览器一起显示它们，这使得用户难以选择想要的链接。许多教程推荐在这样的链接中插入某些符号，作为防止混淆的临时解决办法E#同样的问题发生在使用 <div></div> <div></div> 标签显示内容，使用 <hr> 标签或 CSS 的 border 元素作为内容分隔线时。而这种方法可能无法给人以多个内容块属于同一个相关系列的印象。
如果对上述情况中的内容使用无序列表，就可以让非可视化浏览器将这些内容以列表的方式呈现出来，而不是乱糟糟的一堆链接或排成一行不便于查看的元素。有意义的内容分组将自动出现，不再需要你添加分隔符号或使用 <hr> 元素。
这是一种好方法
列表的使用，能从语义上为意义相关的内容分组，即使你的 CSS 样式表被忽略也没有关系。在恰当的地方使用无序列表是构建一份好文档的聪明选择。
HTML 中的 <title> 元素用于在下列情况中提供一小段能够代表该网页的文字：
* 窗口标题栏
* 书签列表
* 搜索服务的结果列表
一个好标题
因此，请给你的网页拟定一个好标题：
别太短
类似“第一部分”这种标题在搜索结果中并不能提供足够的信息。什么东西的 第一部分？一个较好的标题：<title>现代音乐指南，第一部分</title> 或者更好的标题：<title>Time Frame（现代音乐指南，第一部分）</title>
但也别太长
因为很多窗口标题栏和菜单中只能显示 60 至 80 个字符；你可以在网页文档的顶级标题中给出一个更详细、更能表达意思的标题。例如：<h1>第一部分：对于音乐来说，现代从何时开始？</h1>（包含指向整个现代音乐背景的链接）。
不要使用“点击这里”作为链接文字
链接意味着什么
当需要读者点击时，使用简短但有意义的链接文字：
* 在阅读上下文时能提供一些信息
* 能解释该链接将提供什么
* 不要写出太多具体的说明
* 不要使用动词短语
一个例子
例如，在你的网页中避免使用下列句子：
点击这里，下载 W3C 的编辑器/浏览器 Amaya。
或者：
请到 Amaya 网站 下载 Amaya 及其他必须的软件。
这两个句子都提供了太多关于获得 Amaya 软件的具体说明。如果你想让你的读者进行点击，可以使用如下表达：
获取 Amaya！
请注意“获取”在链接之外；我们不推荐在链接文字中使用动词短语。因此，你不应该使用：
告诉我更多 关于 Amaya 的信息。
而应该这样写：
告诉我更多关于 Amaya 的信息：W3C 的免费编辑器/浏览器，它能让你创建 HTML，SVG，和 MathML 文档。
应该使用的方法和应该避免的技术
不要使用“refresh”进行重定向
如果你想让地址 http://www.example.org/foo 显示存放在 http://www.example.org/bar 的页面内容，你不应该 像这样使用“refresh”技术：
<META HTTP-EQUIV=REFRESH CONTENT="1; URL=http://www.example.org/bar">.
为什么呢？因为它将破坏“后退”按钮。想象一下读者按下“后退”按钮之后，网页将被再次刷新，读者将看到同一个页面。读者很有可能会变得不舒服，然后关闭浏览器窗口——这是作为网页作者的你不太想得到的效果吧。
请使用 HTTP 重定向
在使用“refresh” meta 标签的处理重定向的时候，我们用的是一个文档内部的特殊指令。用户代理（浏览器或是 Markup Validator）会下载该页面，查找其上下文，找到“refresh”指令，等待指定的时间（设置“0”秒，可以得到立即刷新的效果，也可以设置具体的等待秒数），然后继续导入新地址。
另一方面，“HTTP 重定向”执行得更直接，因为它是在 另一层内 完成的。当 User Agent (i.e. a browser or the validator) 首次访问服务器并请求该文档时，_服务器_自身就会判断出该文档要重定向到另一个地址，于是服务器便主动告知 user-agent 它应该直接访问新地址。
同时，“HTTP 重定向”能提供更多的方法进行重定向，因为它除了能提供给 User Agent 新地址外，还有很多功能：服务器能提供关于重定向的目的和类型的信息，这些信息允许 User Agent 根据不同的重定向种类进行不同的动作。HTTP 重定向（根据服务器发送的相关 HTTP status code）的种类如下：Permanent Redirect (HTTP 301)、 Temporary Redirect (307)、undefined redirect (302)。
参阅下面的文档和教程学习如何通过你的服务器使用它。
使用 <h1> 作为顶级标题
<h1> 在 HTML 元素中作为文档的第一级标题。
* 如果该文档是独立的，比如 教你游览日内瓦，它的顶级标题就可以和文档名称相同。
* 如果该文档是某个集子的一部分，例如，它是一个宠物集里面关于狗的部分，那么，顶级标题就应该包括一定的相关文字（如果只写 <h1>狗</h1> 就会显得意义不明）：狗 —— 您的宠物指南。
不像 <title> 元素，该元素可以包含链接、强调，以及其他 HTML 短语元素。
由于一些浏览器的默认字体大小问题，很多文档作者和编辑工具会选择 <h2> 元素代替 <h1>。这会导致一些支持页面标题层次结构的工具，例如 Amaya 的 TOC（导航目录）视图 发生混乱。因此，我们推荐使用 CSS（级联样式表），它能使网页文档作者分别设置 <h1>、<h2> 等元素的字体大小。
使用 alt 属性描述每幅图像
alt 属性有什么用？
alt 属性可以在一系列标签中使用（如 img，area 和 input 以及 applet），它能为该对象提供一个替代文本。
替代文本在下列常见的情况下，能为你的网站和访客提供一些好处：
* 现在，各种不同平台都有功能不一的网页浏览器，有些根本无法显示图像，或只能显示特定的几种图像；有些能够设定为不载入图像。如果你的图像代码中包含 alt 属性，在这种情况下，绝大多数的浏览器都能显示该属性的内容来代替缺失的图像
* 你的一些访客无法看清图像，比如他们患有弱视、色盲，或近视，alt 属性对他们的帮助就很大了。他们可以根据该属性中的内容来了解你页面中的信息
* 搜索引擎机器人就属于上述两种类型：如果你想让你的网站被完整收录到搜索引擎中，使用 alt 属性可以保证搜索引擎机器人不会错过你页面中的重要部分。
我应该在 alt 属性中放置什么？
alt 属性内容的一般规则是：使用与图片具有相同功能的文字。
一些更具体的规则：
* 如果该图片用于配合少量文字，则将这些文字放置到 alt 属性中
* 如果该图片用于列表符、水平线等类似的装饰效果，alt 属性可以留空（例如 alt=”"），但如果能在 CSS 中使用 list-style-image 则更好
* 如果该图片代表许多重要信息，则最好能概括出一小行文字放入 alt 属性中，然后添加一个 longdesc 链接，指向更详细的描述
不要忘记添加 doctype
添加什么？
HTML 的种类可不止一种，实际上有 HTML 4.01 Strict、HTML 4.01 Transitional、XHTML 1.0 Strict 等等。HTML 的种类由其各自的 W3C 规范定义，同时，它们也由一种机读语言规范定义了每种 HTML 合法的结构、元素，以及属性。
上述定义被称作“文档类型定义（Document Type Definition）”，简称 DTD。
用于处理 HTML 文档的工具，比如网页浏览器，需要知道一个 (X)HTML 文档实际使用的是哪种 DTD：这就是为什么每个 (X)HTML 文档需要在起始处有一个 DTD 声明，就像这样：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
鉴于其语法，DTD 声明常被简称作“Doctype”。
为什么？
为什么要指定 doctype？因为它定义了你的文档实际使用的是哪个版本的 (X)HTML，并且这也是浏览器或其他文档处理工具所需的关键信息。
例如，指定了文档的 doctype 后，你就可以使用 Markup Validator 等工具来检查其 (X)HTML 语法正确性（并找出可能导致你的页面在不同浏览器下无法正常显示的错误）。如果上述工具不知道你使用的文档种类，那么它们将无法工作。
最重要的是，对大多数的浏览器来说，一个简单的 doctype 声明能减少许多不必要的猜测行为，并能触发“标准”解析模式，这就意味着不仅浏览器对文档的理解（对访客来说就是网页显示的速度）能变快，而且它符合规范，不会出现未定义 doctype 的文档常有的错误。
在你的文档中使用 <link>
LINK 元素
HTML 和 XHTML 有种机制能让网页作者添加与一份 HTML 文档相关的额外信息。这些额外的资源可以是样式信息（CSS）、浏览导航帮助、信息的另一种格式（RSS）、联系方式等。
LINK 元素（<link>）被用作在文档前端的 HEAD 元素中添加这些信息。
一个例子
我们来看一个很实用的例子。这是某个天文学网站上的一个页面，内容是描述太阳系的章节中关于地球的那部分。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>Earth - Astronomy Weblog</title>
这是一份 HTML 文档的经典开头代码。
<link rel=”Start” href=”/solar-system/” />
<link rel=”Prev” href=”/solar-system/venus/” />
<link rel=”Next” href=”/solar-system/mars/” />
这些 link 能够帮助某些用户代理（浏览器）进行浏览导航。
* Start 指向本章节的开始处
* Prev 指向前一项，本例中是金星（Venus）
* Next 指向后一项，本例中为火星（Mars）
<link rel=”Contents” href=”/solar-system/contents.html” />
Contents 指向本章节的索引
<link rel=”Help” href=”/website-help.html” />
Help 能够链接到一个为访客提供网站使用帮助的页面。
<link rel=”alternate”
type=”application/rss+xml”
title=”RSS”
href=”/updates.rdf” />
它为 RSS 阅读器找到网站更新的订阅地址提供了可能。请注意，在本文写作时， mime 类型application/rss+xml 仍然是一份草稿“The application/rss+xml Media Type”，而且还没有被 IETF 认可。
<link rel=”meta”
type=”application/rdf+xml”
title=”FOAF”
href=”http://astro.example.org/foaf.xrdf” />
它为 FOAF 阅读器找到文档中的元数据（metadata）提供了可能。它可以是作者。请注意，在本文写作时，mime 类型 application/rdf+xml 还没有被 IETF 认可，而且自从上次提议过之后没有更进一步的研究。
<link href=”mailto:webmaster@example.org” rev=”made” />
这是联系网站作者的一种方法。
<link rel=”stylesheet”
type=”text/css”
media=”screen”
href=”/style/astro.css” />
定义你的网站所使用的 CSS 样式表。本例中，我们将该样式表定义为用作屏幕绘制。我们可以为其他媒体定义额外的样式表。
<link rel=”alternate”
href=”/solar-system/earth.fr”
hreflang=”fr”
title=”French Translation” />
它使你能够访问该文档的另一种语言的翻译版，本例中是法语版。
</head>
<body>
…. Here the rest of the page.
该代码承上启下，关闭了 head 部分，开启了 body 部分。
这些 link 是为用户代理（浏览器）和其他工具准备的，它们能帮助他人使用你的网站。
如果你指定了一种颜色，请指定所有的颜色
数量惊人的网站为其正文、标题和链接设置了各种各样的颜色，唯独忘记了设置背景颜色。因为你的访客可能在他们浏览器的偏好设置中指定了不同的颜色，他们有可能：
* 看到不协调或令人不舒服的颜色搭配。
* 更坏的情况是，如果访客浏览器的偏好设置是浅色字体配深色背景，而你的站点设置为深色字体配浅色背景，那么，访客可能会看不清楚网页上的文字，因为变成了深色文字在深色背景上，反之亦然。
避免这些问题的经验法则是：如果你指定了一种颜色，必须指定所有的颜色，包括背景色。
推荐实例
忘掉 <font>，使用 CSS
使用级联样式表在网页中设置颜色的方法不仅是新式的，也是很好的。我们强烈推荐使用这种方法来取代在 HTML 中使用 <body> 属性和 <font> 元素的方法，因为 CSS 更灵活，更容易维护，而且能节省带宽。下面将讲述如何使用 CSS 属性 <color> 和 <background-color> 或其简写 <background> 来指定颜色。
一个例子
背景色、前景色，和链接的颜色都被指定为黑色字体白色背景。
html, body {
background: #fff;
color: #000;
}
a:link {
background: #fff;
color: #037;
}
a:visited {
background: #fff;
color: #636;
}
注意字体大小
网页设计者中有这么一种倾向：他们认为小字体能让网页看起来更漂亮，并能提供更多空间给每个网页中的实际内容。但这有时会导致字体太小，不便于阅读。
更加不幸的是，这个问题又随着用于访问网页的平台不同而发生变化，从小屏幕的移动设备到连接在计算机上的投影仪。甚至在某个特定平台内，字体设置也可能不同。
这是一个基本的易用性及可访问性问题：一份好的设计应该看起来漂亮，并且 不需要访客手动调整字体大小。
忘掉 <font>，使用 CSS
目前较好的处理网页字体大小设置问题的方法是使用级联样式表（CSS）。我们强烈推荐使用该方法来替代 HTML 中 <font> 标签的使用，因为 CSS 更灵活，更容易维护，同时也节省带宽。本条小贴士的目的并不在于讨论 CSS 与 <font> 标签比有什么好处，如果你想获得此问题的更多详细信息，请使用你常用的搜索引擎… 我们将着重讨论如何使用 CSS 技术创建易读性网页。
善用 CSS 的 font 属性
下面有一些使用 CSS 的 font 属性来创建易读的网页时应该遵守的基本规则。
大小：考虑用户的默认字体大小，避免太小的字体
* 1em（或 100%）作为网页文档的基本字体大小，等价于用户的默认字体大小。使用这个值作为基本字体大小，并避免使用小于这个值的基本字体大小为佳
* 在正文中避免设置 em 标签中的字体小于 1em，除非是版权声明或其他协议条款等。
单位：避免使用绝对长度单位
* 不要使用 pt 或其他绝对 长度单位 来定义用于 screen 的 CSS 中的 font-size。他们会根据不同的平台而有所不同，并且不能被用户代理（如浏览器）调整大小。这种单位可以用于固定的并且知道物理属性的 media CSS（例如 print）。
* 使用百分比，或（更好一点）em 之类的相对 长度单位
* 再好一点，如果一个文档已经设置了基本字体大小，在定义该文档中的某个元素时，可以使用 绝对大小（[ xx-small | x-small | small | medium | large | x-large | xx-large ]）或 相对大小（[ larger | smaller ]）。
易读的 font-family
如果要使用较小的 font-size，可以指定一个带有高度值的易读的 font-family （参见 CSS2 规范中的 font-size-adjust 部分关于 aspect 值的解释 [译者注：aspect 值是该字体的大小与该字体中小写字母 x 的高度之比]），这样能使小号的字更容易阅读。
使用国际日期格式（ISO）
人们在网络上一般怎样写日期？日期格式有那么多种，而且大多数与其他格式都不兼容。这样一来，对于编写一个国际性的、拥有跨文化访客的网站来说，选择一个大家都能明白的日期格式就显得很困难了。幸运的是，使用 ISO 的国际日期格式是较好的解决办法。
日期解读的困难
最差可能出现的情况是，日期只由数字组成（见下方例子），对日期的解读会因为各国之间的文化差异而有所不同。
想象一下这样的日期：02/04/03
它代表什么意思呢？
* 2nd of April 2003 [译者注：2003年4月2日，日/月/年，欧洲风格]
* 4th of February 2003 [译者注：2003年2月4日，月/日/年，美国风格]
* 3rd of April 2002 [译者注：2002年4月3日，年/月/日]
你的回答很可能与你所居住国家的文化习惯有关。
大多数情况下，日期用字母表示会比上述例子好。例如 Apr. 3rd, 2002 [译者注：2002年4月3日]，对懂英语的人来说很容易理解。
但这套系统并没有比之前的纯数字日期记法好很多：你知道法语中的 12 Ao?t 2042 是指4月12日还是10月12日？[译者注：实际上是8月12日 ]
ISO 日期格式
ISO（IS0 8601）规定的国际日期格式定义了如下的数字日期系统以期解决上述问题： YYYY-MM-DD。其中的
* YYYY 代表年份 [纯数字，例如 2012]
* MM 代表月份 [01（一月）到 12（十二月）]
* DD 代表日期 [01 到 31]
例如，“3rd of April 2002 （2002年4月3日）”，用国际日期格式写作： 2002-04-03。
请注意，该格式也可以被用作描绘包括时区在内的精确的日期和时间
使用数字日期系统的确有一些易读性方面的问题，这在 日期格式 FAQ中已有说明。尽管这种方法并不完美，但 ISO 日期格式仍然是全球访客都能理解（并且精确的）日期记法的最佳选择。
GIF 还是 PNG？
PNG 与 GIF 比较
本贴士中，我们将探究网络上常用来描绘简单图像、模式图或标识的两种主要图像格式：
* GIF 格式（Graphics Interchange Format，图形交换格式的英文缩写）于 80 年代后期开发，目前仍然被广泛使用。
* PNG（Portable Network Graphics，可移植网络图形的英文缩写）于 1995 年左右开发，1996 年被 W3C 所推荐，1998 年时就已经被大多数网页浏览器所支持。
GIF
GIF 格式使用了一种通过保存颜色痕迹来减小文件体积的被称为 LZW 的压缩算法。
GIF 的优点在于它被极广泛地支持，并且是既定的简单网络图像的默认选择。与其它格式（尤其是 PNG）相比，GIF 并没有技术上的优势，但在 PNG 格式刚起步并仍在成长阶段时，它的确是更安全的选择。也许在本优质小贴士写就的时候，它仍然是更安全的选择，虽然程度比以前降低了。
但 GIF 格式存在一个问题，那就是 LZW 算法被美国公司 Unisys 持有的 专利 所保护。Unisys 公司的 LZW 专利在美国于2003年6月20日失效。LZW 专利目前已在Canada、法国、意大利、德国、英国和日本 失效。
PNG
PNG（可移植网络图形），一种无损、可移植、良好压缩储存作光栅图像的可扩展文件格式。PNG 提供了不受专利限制的替代 GIF 和在多数情况下替代 TIFF 的选择。支持索引色、灰度，和真彩色图像，并且提供一个可选的 alpha 通道。色深支持 1 至 16 位。
对于网络应用来说，PNG 对比 GIF 有三个主要优点：
* alpha 通道（可变的透明度），
* 跨平台的 gamma 校正（控制图像的亮度）和颜色校正
* 二维隔行扫描（一种渐进显示的方法）。
另外，PNG 常比 GIF 有更高的压缩率（一般高出 5% 到 25%）。
这里需要说明的是，一些老的浏览器对 PNG 支持不好，或者不支持透明特性。关于不同的浏览器对 PNG 的支持程度，请参见下面这些文章：
* Miscellaneous Transparent PNG Images using IMG Tags
* Current Status of PNG
* Browsers with PNG support
使用分级标题来构建你的文档
构建你的文档
大多数页面（尤其是文本，但也包括图像和多媒体） 的作者都使用了一定的结构使网页内容更有条理。在 (X)HTML 中，使用不同级别的标题元素能够实现上述结构。
分级标题常被用作导航目录（Table Of Content，简称 TOC）（许多工具能使用分级标题生成目录），或将页面分隔成几块，例如把页面发送给小型移动设备时。分级标题还能被用作一个页面信息的关键词（某些搜索引擎会这样做）。
Markup validator 能提供 (X)HTML 页面的大纲视图来突出显示其结构 - 这通常由特殊的文本样式来呈现，尽管你的网页的正常浏览方式已经设置为使用某个样式表。如果你的页面只有一些普通文本样式而没有标题元素，那么可能那些文本的确是标题，只是被另外的样式标记为段落了。（本句原文如下：If your page has several regular text styles but no heading elements, it may be that those really are headings, but are only being marked as paragraphs with a different style.[翻译建议]）
分级标题的标签
各种不同的 (X)HTML 定义了 6 个级别的标题：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。可以预见，XHTML 2 也将提供由其所在结构中的深度决定的分级标题。
明智地选择 URI
没有什么比走到你最喜欢的商店门口，却发现店门紧闭，而且没有看见店面搬迁告示这种事情还要令人不爽了。店主也许有 N 个搬迁不贴告示的理由，但发生这种令人不愉快的事情的原因归根到底就是缺乏好的计划和管理。
同样的事情也会发生在网络上…
发布前请三思
很明显，提出这条建议的原因就是它并没有被很好的遵循。例如，除了关心网络资源的质量，你也应该谨慎选择发布的位置使其适合该资源的风格和目的。
理想状况下，URI（“Universal or Uniform Resource Identifier，通用或统一资源标识符”的简称）被用作指向网络上的某个资源，不应该具有任何重要性，也不必与发布该资源的服务器上的文件系统有关系。然而，考虑到很少的网络服务器能提供给用户足够的灵活性来映射 URI，而且 URI 有多种用途，所以在你发布网络资源前，最好遵守下面的少数几条原则以及技术提示。
URI 选择一览表
当你为一个新位置选择 URI 的时候请先考虑下面几个问题：
* 你能在一张纸上轻易写出选中的 URI 吗？换句话说，你能轻易记住它吗？
* 你能在打电话的时候拼出选中的 URI 吗？
* 选中的 URI 能给出关于其指向的网络资源的提示吗？如果该资源演变了，它还有意义吗？
* 你有没有把 URI 定位在你网络服务器的根目录附近？你确定它是最好的位置了吗？
* 你有没有想过由于某些原因，有一天你将被迫迁移整个网站？新的资源能否适用当前的位置？会不会导致整个服务器需要重新组织？
好的选择必备的一些技术提示：下面的提示还不够详细，本文的 延伸阅读 部分提供了更详细的解释。
* 保持简短。在 URI 中尽量使用小写字母。
* 按主题大类组织你的网站，对单个文档使用带有日期的 URI，如 http://www.example.org/2003/10/meeting-minutes。
* 使用格式协商（format negotiation）来隐藏 URI 中的文件扩展名，它具有足够的灵活性，能使你较容易地改变这些网站背后的技术。
最后，所谓人无完人，当你发现你的选择一点都不好的时候，请继续学习如何 管理 URI。
管理 URI
移动并重命名网络资源
当你在网上发布一个新的资源时，谨慎为上。考虑其存放位置及名称时的一些注意事项在“明智地选择 URI”一文中已经提到过。然而，会有潜在的好原因让你移动或重命名一个资源，况且这种操作不应该成为问题。
当然了，如果该操作没有正常执行，那就另当别论了。考虑最坏的情况，当你移动或重命名一个网络资源后，导致其他网站指向该资源的链接被破坏，导致别人保存的收藏夹/书签失效，导致缓存和搜索引擎除错。简而言之，它会导致你的网站访问量大降。
有没有能避免这种会破坏链接、降低访问量的负面效应，又能正常执行移动或重命名操作的方法呢？回答是肯定的——使用标准的 HTTP 重定向 将访客和用户代理（浏览器）指向新位置：临时重定向、永久重定向，还有我们下面将看到的，甚至有一种方法来说明一个资源不仅仅是被移动了，而实际上是被移除了。
移除网络资源
即使网络被认为是“永久性”的媒介，即理想状况下，网络上的文档将永久存在，这也不意味着这些资源在发布到网上之后就不能被移除了。所以，当你想移除一个资源时，应该使用一种能告知访客、缓存，和用户代理（浏览器）该资源不仅是消失了，而且是出于一些目的被移除了的方法。
实现这种目的的方法是将你的网络服务器配置为发送“410 Gone”状态，来代替在请求这些被你移除的资源时出现著名的“404 not found”页面。
验证之后
验证自己的网页越来越成为一般性的质量检查。但如果一个符合规范的网页没有良好的内容，那就是金玉其外，败絮其中。
下面是一些能帮你增进其他质量的想法和工具。
考虑内容，考虑样式，考虑导航
内容：数据和元数据（Metadata）
有用的工具
1. Markup Validator 有一个“大纲”选项，能快速检测一个页面是否良构：如果大纲功能没什么用，说明文档亦非良构。
2. 轻松检测页面中的数据和元数据级别：Semantics extractor 能分析一个文档，并给出该文档所包含信息的概要。
样式
大家不要忘记 HTML 不仅仅是“标记语言”，同时也是“超文本”。超级链接是能使一个文档内部导航（例如从目录中可以跳转到该文档的特定部分）和几个文档间的导航变得非常简单的强大工具，好好使用它。
有用的工具
1. 不管你的样式表是单独的还是嵌入到 HTML 文档中，W3C CSS 验证服务 都能为你检查它。
导航
大家不要忘记 HTML 不仅仅是“标记语言”，同时也是“超文本”。超级链接是能使一个文档内部导航（例如从目录中可以跳转到该文档的特定部分）和几个文档间的导航变得非常简单的强大工具，好好使用它。
有用的工具
1. Link Checker 服务能检测你网页中的链接和锚点，并为你找出其中坏的链接、错别字和存取控制等问题。它甚至能够递归运作。
使用 class 时考虑其实际意义
人们通常使用 bluetext，或 redborder等作为 class 的名称。命名 class 更好的方法是在名称中包含该 class 在某个 HTML 元素中所扮演的角色。
好的名称不会经常改变
想想 为什么 你想让某个事物看起来要那样，而没有真正认识到它应该看起来 怎么样。事物的外观总是要变的，但赋予它某个外观的原因没有变。
好的名称
warning、important、 downloadableImage，和 submenu 都是好的名称。它们描述了某个元素代表的事务，而且它们不太可能改变。一个警告（warning）总是警告，不管页面外观如何改变。
坏的名称
border4px、lighttext，和 prettybackground 是坏名称的一些例子。你也许会将那条边线（border）改为 5 像素（5px），或者那个背景（background）在一段时间后就显得陈旧了，而且也不漂亮（pretty）了。使用 CSS 的好处就是能让你在想改变网站外观时不用改变很多东西。如果你想把所有浅色文本变为深色文本，只需将 所有 HTML 页面中的 class 从 lighttext 改为 darktext 即可，你可能还嫌工作量太少呢。
无序列表：你用过吗？
列表的观念
当网页中的内容属于某种列表时，你可以考虑使用无序列表（<ul>）来展示这些内容。这不仅能改进 HTML 代码的可读性，还能为某些原本没有意义的内容赋予明确的意义。
未被广泛使用的现状
许多网站不喜欢使用无序列表来标记文档。在这些网站上，你常会看到许多由 <hr> 元素分隔的 <div> 标签，或由类似 |（竖线）或 ?（•）的符号分隔的一堆 <a> 标签。发生这种情况的最主要原因可能是 CSS 样式表中 <ul> 元素的属性（padding，bullets 等）。许多网页作者发现对 <div> 之类熟悉的元素 应用 各种样式要比从 <ul> 中将这些样式 移除 更方便。再加上各种浏览器平台对 默认样式的不一致呈现 使得情况变得更复杂了。
幸运的是，目前绝大多数可视化浏览器已经支持 CSS 样式表，列表元素在这些浏览器中也统一了样式，这样一来就能避免传统的 <div> 或 <span> 标签的滥用了。延伸阅读 部分列出的一些站点解释了应如何操作。
使用无序列表的好处:没有样式表照样起作用
类似 <div> 和 <span> 的元素除了把内容分块外，在语义上毫无意义。它们所要表达的意义必须通过 CSS 样式表作用在网页浏览器上才能起作用。
而如果你将某些内容组织成列表，那么它就能直接从列表标记上表达其意义，而不需要 CSS 样式表的作用。某些只扫描网页内容（并忽略 CSS 样式表）的用户代理，如纯文本浏览器、文本转换为语音的浏览器，甚至一些 搜索引擎机器人 就能识别出那些用列表组织的内容，并通过列表方式将其呈现（或朗读）出来。
更好的易用性
将一系列链接（<a> 元素）直接放在一块儿会导致文本浏览器一起显示它们，这使得用户难以选择想要的链接。许多教程推荐在这样的链接中插入某些符号，作为防止混淆的临时解决办法E#同样的问题发生在使用 <div></div> <div></div> 标签显示内容，使用 <hr> 标签或 CSS 的 border 元素作为内容分隔线时。而这种方法可能无法给人以多个内容块属于同一个相关系列的印象。
如果对上述情况中的内容使用无序列表，就可以让非可视化浏览器将这些内容以列表的方式呈现出来，而不是乱糟糟的一堆链接或排成一行不便于查看的元素。有意义的内容分组将自动出现，不再需要你添加分隔符号或使用 <hr> 元素。
这是一种好方法
列表的使用，能从语义上为意义相关的内容分组，即使你的 CSS 样式表被忽略也没有关系。在恰当的地方使用无序列表是构建一份好文档的聪明选择。
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论