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制定的标准以使您的网站更容易访问。每一部分都列出了满足您需要的内容，解释了为什么您需要了解它们，并举例说明了你该做的和不该做的。
1. 指定正确的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）
标准.
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标签
标准.
在你的网页的<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. 使用易用的导航
标准.
使用户能够轻松地区分正在查看的网页的页面和子目录。
我为何需要它?
现在大多数网站都结合使用文字，颜色和图形样式来组织和显示信息。但是许多残疾人无法看到或使用屏幕显示的图形、自定义样式表和其他辅助工具来检索信息。无论谁访问你的网站，实施易用的导航系统可以帮助他们快速而准确地找到所需的信息。
那我该怎么做呢？
为您的网站创建一个描述性的标题，然后使用标题元素（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
标准.
当直接在网页上包含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实体
标准.
&，引号，大于号和小于号及其他一些HTML实体必须转义。
我为何需要它?
使用HTML实体，尤其是在URLs中，不仅可能会出现验证可用性问题，而且会导致使用中的一些问题。例如，符号（ & ）恰好是HTML中初始字符，如果您没有正确转义符号，浏览器会假设你告诉它显示一个HTML实体，而这个实体却是不存在的。
那我该怎么做呢？
将HTML实体转义成它们对应的转义字符
- 用 & 替换 &
- 用 " 替换 "
- 用 < 替换 <
- 用 > 替换 >
- 其他 HTML 实体
例子：
<a href="http://www.example.com?page=1&view=top">A "Cool" Link</a><div id="content">Test information.</div>
7. 只使用小写的标签和属性
标准.
所有元素和元素属性必须小写。属性值可以是大写和小写.
我为何需要它?
因为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> 标签.
我为何需要它?
<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 ）
标准.
你的网页中的每一张图片都应该附上一个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"
标准.
当使用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个小技巧 的全部内容， 来源链接： utcz.com/a/116173.html
