XHTML站点设计过程中的10个小技巧

日期： 标签：网页设计
如需帮忙改代码，或者WordPress二次开发、PHP网站建设等需求，可联系我购买付费服务：  点此联系我
文章目录

     毫无疑问，当你考虑建立一个网站的时候，最重要是让别人能够顺利地浏览它。你的网站在屏幕阅读器（screen reader）前是否发挥良好呢？用户是否可以重写你的样式表，而仍然可以看到你的网站提供的内容呢？ 如果其他Web开发人员看到你的代码，他们会不会感到烦呢？如果你的网站符合标准，你可以更自信地回答这些问题。

     

     那就让我们一起来看看本文吧， 我们将多付出一点努力，包括你得遵循的非W3C制定的标准以使您的网站更容易访问。每一部分都列出了满足您需要的内容，解释了为什么您需要了解它们，并举例说明了你该做的和不该做的。

Accessibility

1. 指定正确的DOCTYPE

Specify the correct DOCTYPE

标准.

     文件类型声明（DOCTYPE）是一个位于你的网页文件顶部的说明。DOCTYPE需要告诉浏览器如何正确地显示您的网页。

我为何需要它?

     没有适当的DOCTYPE声明，浏览器会尝试自动给网页分配一个DOCTYPE。这会使您的网页加载得很慢，并导致网页在不同的浏览器中显示不一致或不正确。

那我怎么做呢?
     在你的网站每个网页顶部包含合适的DOCTYPE。推荐使用 XHTML 1.1 ，但是 XHTML 1.0 Strict 也是可选的。

XHTML 1.1

     这是对你的网站进行编码的最简洁方式。所有的网站样式需要包含在外部CSS文件中。请确保在顶部添加 XML 声明，这是至关重要的，因为XHTML 1.1被认为是真正的XML。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

注意：

     如果您正在使用的XHTML 1.1 ，对于使用Internet Explorer 6的用户，你不可以包括XML声明。相反，为了支持IE6用户，您应该有条件地显示XML声明。

XHTML 1.0 Strict

     这是XHTML 1.1 的替代。两者之间的技术差异是次要的，但XHTML 1.1是被推荐使用的，以适应未来网站的发展趋势。

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

     还有其他两个XHTML 1.0的声明，它们是被用作特殊用途的。但是使用这些 DOCTYPE 是不被提倡 。

XHTML 1.0 Transitional

     如果你的网页需要在传统的浏览器中浏览，通常这些浏览器不支持CSS，那就要使用这个声明。Transitional允许网页元素调用inline styles。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

     建议只在那些需要HTML frames的网站上才使用Frameset。当然，使用静态的CSS DIV 代替框架会更合适。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

2. 定义命名空间（namespace）和默认语言（Default Language）

Define the Namespace and Default Language

标准.

     XHTML的命名空间和默认语言必须包含在<html>元素中。

我为何需要它?

     XHTML站点应该定义默认命名空间。命名空间定义了所有你可以使用的元素。设置默认语言可让屏幕阅读器告诉访问者该网页使用的语言。这也是W3C标准所要求的。

那我该怎么做呢？

在<html>元素中附加属性<xmlns>和<lang>。在XHTML 1.1中，lang属性是xml:lang。

XHTML 1.1
1、XHTML文档使用英文

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

2、XHTML文档使用简体中文

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">

XHTML 1.0

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

 

3. 添加合适的Meta标签

Supply proper Meta tags

标准.

     在你的网页的<head>中提供http-equiv，language， description 和 keywords meta标签。

我为何需要它?

     http-equiv meta标签相比其他的是最重要的。结合DOCTYPE使用，它可以帮助浏览器正确显示你的网页。language meta标签对非英语的网页是很重要的，但是它已经成为每个网页的普遍做法，不管你使用的是什么语言。description 和 keywords meta标签调用是为了易用性，而不是为了符合标准，因为它们已被屏幕阅读器所普遍使用。

那我该怎么做呢？

     在你网页的<head>元素中包括下面四个meta标签：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="zh-CN" />
<meta name="description" content="这里填网站描述信息" />
<meta name="keywords" content="这里填网页关键字，用半角逗号隔开" />

     请确保你在<html>元素中指定的语言与meta标签中定义的语言是一致的。另外，如果您使用的是XHTML 1.1 ，请确保XML中指定的encoding与http-equiv meta标签中的charset是一致的。

 

4. 使用易用的导航

Use accessible navigation

标准.

     使用户能够轻松地区分正在查看的网页的页面和子目录。

我为何需要它?

     现在大多数网站都结合使用文字，颜色和图形样式来组织和显示信息。但是许多残疾人无法看到或使用屏幕显示的图形、自定义样式表和其他辅助工具来检索信息。无论谁访问你的网站，实施易用的导航系统可以帮助他们快速而准确地找到所需的信息。

那我该怎么做呢？

     为您的网站创建一个描述性的标题，然后使用标题元素（heading elements）将网页分裂成不通的内容。

在<head>元素内部中包含<title> 元素。

<title>露兜博客</title>

在网页页面中包含 <h1> 。 <h1>元素应该跟你的</h1> 元素部分吻合或全部吻合。

<h1>露兜博客 - 分享IT知识，书写我心情</h1>

所有的标题标签 <h1>,<h2>>等）应包含文字内容。而images也要添加alt标签。

错误写法： 

<h2><img src="logo.png" alt="露兜博客" /></h2>

正确写法： 

<h2><img src="logo.png" alt="露兜博客" />露兜博客</h2>

 

5. 正确转义JavaScript

Properly escape JavaScript

标准.

     当直接在网页上包含JavaScript时，你应该正确地将它它转义为字符数据。

我为何需要它?

     在HTML中 ，<script>元素中的文本是被当做CDATA (字符数据character data)的。在XHTML中，<script>元素中的文本是被看做PCDATA (分析的字符数据parsed character data)的。PCDATA由W3C验证服务器来处理，因此必须必须正确转义为CDATA。 此外，虽然大多数屏幕阅读器能够忽略<script>元素中的内容，不论它是什么类型的数据，如果它所包含的代码没能正确转义，那你又自找了另一个潜在的故障点。

那我该怎么做呢？

     在<script>元素的任何内容中使用CDATA标记。为了支持传统浏览器，我们还应注释掉CDATA标签。

例子： 

<script type="text/javascript">
//<![CDATA[
$(function() {
$('#divone').tipsy({fade: true, gravity: 'n'});
$('#divtwo').tipsy({fade: true, gravity: 'n'});
});
//]]>
</script>

 

6. 正确转义 HTML实体

Properly escape HTML entities

标准.

     &，引号，大于号和小于号及其他一些HTML实体必须转义。

我为何需要它?

     使用HTML实体，尤其是在URLs中，不仅可能会出现验证可用性问题，而且会导致使用中的一些问题。例如，符号（ & ）恰好是HTML中初始字符，如果您没有正确转义符号，浏览器会假设你告诉它显示一个HTML实体，而这个实体却是不存在的。

那我该怎么做呢？

     将HTML实体转义成它们对应的转义字符

  • 用 &amp; 替换 &
  • 用 &quot; 替换 "
  • 用 &lt; 替换 <
  • 用 &gt; 替换 >
  • 其他 HTML 实体

例子：

<a href="http://www.example.com?page=1&amp;view=top">A "Cool" Link</a>
<div id="content">Test information.</div>

 

7. 只使用小写的标签和属性

Use only lowercase tags and attributes

标准.

     所有元素和元素属性必须小写。属性值可以是大写和小写.

我为何需要它?

     因为W3C制定的XHTML标准是这么说的。

那我该怎么做呢？

     请务必对所有元素和属性只使用小写。一些开发人员常犯的错误是使用大写字母作为一个JavaScript元素的属性（如onClick ，onLoad等）。

错误写法：

<A href="#" onClick="doSomething();">Send us a message</A>

正确写法：

<a href="#" onclick="doSomething();">Send us a message</a>

 

8. 对所有输入元素表单使用Label

Label all form input elements

标准.

     所有的表单元素都应该添加 <label> 标签.

我为何需要它?

     <label>元素可以为使用鼠标和显示器的人添加某些功能。点击位于<label>中的文本可聚焦到相应的表单元素。屏幕阅读器（Screen readers）可读取这些标签（label ），这样读者可以知道他们需要提供哪些信息。

那我该怎么做呢？

     给每个表单的每个域（field）添加 <label> 。

例子： 

<p><label for="searchbox">Search: </label><input type="text" id="searchbox" /></p>
<p><input type="checkbox" id="remember" /><label for="remember"> Remember</label></p>

 

9. 提供图片的替代文本（Alternative Content ）

Supply alternative content for images

标准.

     你的网页中的每一张图片都应该附上一个alt标签。

我为何需要它?

     如果图片不能显示或者不能查看的时候，alt标签会告诉来访者图片显示的是什么。美国残疾人法案规定所有图片必须有一个alt标签。

那我该怎么做呢？

     让每张图片都包含一个alt标签。alt标签属性必须包含相应的文本，而且不能留空。如果你使用图片仅仅是为了设计，那就使用CSS来实现相应的样式吧。并且别忘了给你的图片定义一个确切的 width 和 height 值。

错误写法： 

<img src="picture.png" />
<img src="spacer.gif" alt="" />

正确写法：

<img src="picture.png" alt="A warm sunset" width="450" height="350" />

 

10. 正确地使用CSS属性"id" 和 "class"

Correctly use CSS attributes

标准.

     当使用CSS属性时，每个"id"只能使用一次。 "class"你想用多少次就用多少次。

我为何需要它?

     开发人员经常因为粗心大意而在同一个页面中多次使用同一个 "id"。这可能会在不同的浏览器中带来意想不到的后果，并且你会得到W3C给你的大大的红色 "Validation Failed"

那我该怎么做呢？

     一定要记住，在单个页面中只能使用一次同一个"id"。如果你需要在多个元素中使用相同样式，那就用"class"吧.

错误写法： 

<p id="leftNav">Home</p>
<p id="leftNav">Contact</p>
<p id="homeNav" class="leftNav">Home</p>
<p id="contactNav" class="leftNav">Contact</p>

 

总结：验证、验证、验证！

     使用本文提到的所有技术，你将会更顺利地建立易用而又符合标准的网站。但是别满足于此！不断地验证您的网站，并立即解决问题。 下面是你创建网页的时候应该运行的验证程序列表:

 

 

本文翻译自：Ways To Make Your XHTML Site Accessible Using Web Standards

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：露兜即刻 https://www.ludou.org/10-ways-to-make-your-site-accessible-using-web-standards-2.html
露兜
作者：露兜 » kaapass@outlook.com  QQ 825533758

业余编程爱好者。

12 条留言

点此留言
  1. magehao magehao

    链接已做好~
    你得代码插件很好哦，用的什么？这么配置的？

    回复
  2. killfox killfox

    有用，呵呵，以后自己写代码的时候参考下。

    回复
  3. Ludou

    回复@magehao
    代码高亮用的是WP-Syntax，上传后直接激活就可以用了。

    回复
  4. Ludou

    回复@killfox
    小小技巧，这是每个网页设计人员必须会的哦。就像作者说的这其实只是一个first step，并没有什么高深的东西。

    回复
  5. 123博客 123博客

    做个链接吧。
    博客名：123博客
    网址：http://www.onetwothree123.com/
    已经做好你的链接了

    回复
  6. Ludou

    回复@123博客
    呵呵,暂时不想做友情链接，看咱的博客也没有什么新鲜有趣的东西，做友情链接也没什么意义。

    回复
  7. Ludou

    回复@magehao
    代码高亮现在改用syntaxhighlighter

    回复
  8. andcat andcat

    很有心思…

    回复
  9. 萌动

    博主你好，我是做产品设计的，业余也做下网页。
    我用W3C标记验证服务检测我的网站，发现有很多提示问题，请问怎么解决啊。有没有相关的软件自动更正啊，十分感谢，
    QQ：76857737

    回复
    • Ludou

      @萌动 没有自动更正的软件，自行参照标准进行更改

      回复
  10. 1zjzy 1zjzy

    您文章里的图片是用什么工具做出倾斜的特效呢

    回复

发表留言