Web标准中常见问题.pdfVIP

Web 标准中的常见问题 Common Problems of Web Standard 张子阳 jimmy_dev@163.com 引言 大概在 2004 年的时候，Web 标准的概念藉由一本名为《网站重构》的书开始被国内人所了 解。随后的几年中，其更少的代码量、更好的搜索引擎友好性、更好的浏览器兼容性使得 Web 标准迅速受到重视并逐渐普及，网易、新浪等各大网站相继采用 Web标准进行网站重构。 在今年，我浏览了不少采用Web标准进行重构的网站，并在国内著名设计与制作论坛 蓝色理 想 浏览了很多网页制作人员发表的言论。发现许多制作人员对Web标准的理解不够深入，有的地 方甚至存在误区，在这篇文档中，我将就我所了解的问题做一点分析，以供参考。 NOTE：很可惜，这个文档中提到的范例页面全部都失效了，重新制作这些页面很花时间，计 划在这篇文章的第三版中提供。缺少范例可能会对某些地方的理解造成影响，我多加了注释。 以访客为中心的 可访问性 和 可使用性 如果有人问我，国外的网页设计师和国内的最大区别是什么？我会毫不犹豫的告诉他，国外 的设计师最注重的是网页的可访问性(Accessibility)和可用性(Usability)。而国内的设计师则 很少考虑，甚至不考虑这方面的问题。 什么是可访问性(Accessibility) ？ 可访问性就是说你的网页可以在任何情况下、被任何人，特别是一些受到某种限制的访客所 访问到。受到某种限制的意思是说：视力障碍的访客、只使用键盘不使用鼠标的访客。或者在浏 览器不支持，或仅支持很少的 css 和 javascript 的情况下，页面依然可以访问。 以页面一来说，注意到左边有“相关链接”，你可能会奇怪，在上面的导航中已经可以访问 到“相关链接”里的全部内容，这里为什么还要多此一举呢？为了好看么？为了可访问性！假设 你只使用键盘会怎样(只能通过 TAB 遍历所有的链接和表单项)？你在这个页面该如何访问到 Music 目录下的其他页面？NO WAY！因为根本就没有鼠标的 onmouseover和 onmouseout 事件。 NOTE：由于页面失效，我在这里多做一点说明：这个页面在上方有一个很常见的鼠标悬停显 示二级下拉菜单的导航条，而在页面左边，我又放置了一些链接，其内容与下拉菜单里的链接相 同。 什么是可用性(Usability) ？ 举一个简单的例子：在我给大家展示的这个页面里，如果所有的 JavaScript 脚本都失效， 页面会怎样？如果你想选择所有的复选框，你将不得不一个一个的去点击它，它的可用性降低了， 但是可访问性无损。如果你想按时间长度排序表格，则没有办法完成，但是丝毫不影响你了解每 首歌曲的长度。 看了这个例子，你应该明白可访问性和可用性的区别：可访问性关心的是某个页面是否能被 用户访问到；可用性关心的是在诸如 JavaScript 等脚本失效后，页面的功能是否依然有效。 NOTE：同样是由于页面失效的原因，我想再举一个可用性的例子，我们在提交表单的时候， 很多时候都会加一个 Ctrl + Enter 直接提交的功能。这样的做法就是提高可用性的一个典型例 子，而如果你的表单只能通过 Ctrl + Enter 提交，但用户的浏览器不支持 JavaScript，那么 他将无法提交表单，这时对于此用户，网页的可用性可以认为是 0。 最错误的概念：Web 标准就是Div + Css 这里首先要搞懂什么是 Web 标准。Web 标准不是一个标准，而是一个标准的集合。包括了结 构化标记语言 XHTML(语义和文档结构)、样式表CSS(表现)以及 Javascript+DOM(行为)。 当我们用 Web 标准来进行网页设计的时候，我们首先做什么？我们首先需要的是一个结构良 好的 HTML 文件。 那么什么叫结构良好的 HTML 文件？ 结构良好的主要含义就是，每一个标记都是自解释的，是有语义的，放置的每一个 HTML 标 记都是有确切含义的。比如说：当我写下h1标题文字/h1的时候，我仅仅告诉浏览器，这里 放置的，