XHTML站点设计10个小技巧

文章目录

  • 1. 指定正确的DOCTYPE
  • 2. 定义命名空间(namespace)和默认语言(Default Language)
  • 3. 添加合适的Meta标签
  • 4. 使用易用的导航
  • 5. 正确转义JavaScript
  • 6. 正确转义 HTML实体
  • 7. 只使用小写的标签和属性
  • 8. 对所有输入元素表单使用Label
  • 9. 提供图片的替代文本(Alternative Content )
  • 10. 正确地使用CSS属性"id" 和 "class"
  • 总结:验证、验证、验证!

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

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

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

1. 指定正确的DOCTYPE

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

标准.

文件类型声明(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)

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

标准.

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标签

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

标准.

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

我为何需要它?

http-equiv meta标签相比其他的是最重要的。结合DOCTYPE使用,它可以帮助浏览器正确显示你的网页。language meta标签对非英语的网页是很重要的,但是它已经成为每个网页的普遍做法,不管你使用的是什么语言。descriptionkeywords 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中指定的encodinghttp-equiv meta标签中的charset是一致的。

4. 使用易用的导航

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

标准.

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

我为何需要它?

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

那我该怎么做呢?

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

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

<title>露兜博客</title>

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

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

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

错误写法:

<h2><img src="https://www.ludou.org/logo.png" alt="露兜博客" /></h2>

正确写法:

<h2><img src="https://www.ludou.org/logo.png" alt="露兜博客" />露兜博客</h2>

5. 正确转义JavaScript

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

标准.

当直接在网页上包含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实体

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

标准.

&,引号,大于号和小于号及其他一些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. 只使用小写的标签和属性

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

标准.

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

我为何需要它?

因为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

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

标准.

所有的表单元素都应该添加 <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 )

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

标准.

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

我为何需要它?

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

那我该怎么做呢?

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

错误写法:

<img src="https://www.ludou.org/picture.png" />

<img src="https://www.ludou.org/spacer.gif" alt="" />

正确写法:

<img src="https://www.ludou.org/picture.png" alt="A warm sunset" width="450" height="350" />

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

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

标准.

当使用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>

总结:验证、验证、验证!


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

  • W3C标记验证服务
  • W3C CSS验证器
  • HiSoftware Cynthia Says Accessibility Validation
  • 功能辅助评估

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

-- 完 --

以上是 XHTML站点设计10个小技巧 的全部内容, 来源链接: www.h5w3.com/116173.html

回到顶部