发挥结构的潜力

除了容易使用样式之外,结构化标记也便于服务器端软件进行处理,带来有趣的应用.

举例来说,易用性提倡者Mark pilgrim在他个人网站"Dive into mark"(http://www.diveintomark.com/)里使用了不少<cite>标签,由于在网志内使用<cite>标签标记引用的任何出版物,因此Mark能够撰写程序,解析所有文章建立资料库吗然后根据参考到的引用来源进行分类(http://www.diveintomark.com/archives/citations/)

下图6-3是搜索我自己的结果,在Mark的网志中能找到两篇相关的文章,这全是靠<cite>标注"Dan Cederholm"完成的.

图6-3 Mark Pilgrim在"Dive into mark"制作的"posts by citation"结果(http://www.diveintomark.org/archives/citations/dan_cederholm/)

<abbr>和<acronym>

我还想提出两个短语元素,就是<abbr>(缩写名词)和<acronym>(略称).使用这些标签能够为缩写名词提供定义,让所有使用者看懂内容,提升网页的易用性.

让我们从新看看W3C在HTML4.01规范内定义的<abbr>和<acronym>用途:

<abbr> 代表缩写名词(像WWW,HTTP,URL,Mass.等)
<acronym> 代表略称(像WAC,radar等)

配合适当的title属性是这些元素能帮助不了解特定名词的使用者,举例来说,在标识"XHTML"缩写的时候,我们能这样使用<abbr>标签:

<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>

在这里使用<abbr>会使屏幕阅读器拼出缩写内容(X-H-T-M-L),而不是念出完整内容,相对的,使用<acronym>的话则会让他念出完整内容,而不是缩写.

使用<acronym>标签的示例如下:

<acronym title="North Atlantic Treaty Organization">NATO</acronym>

我们也能使用两条听觉CSS规则,再次强调这些差异:

abbr {
  speak:spell-out;
  }
acronym {
  speak:normal;
  }

听觉样式让作者能特别为屏幕阅读器指定朗读方式,这能修改页面的听觉表达方式,引导标记结构,改变音调,音色等,让页面朗读的效果与视觉效果更一致.

定义一次

许多人都建议只定义一次在页面内反复出现的缩写,略称,他们认为每次名词出现时重复定义太浪费空间了,而最好只在首次出现的时候加上title属性,我认为这么做有些道理,虽然当使用者被导引到页面特定段落时,可能因为看不到页首展开缩写,略称,从而无法从定义中获利.

利用你的判断力,决定何时(以及要多频繁)定义放在<abbr>和<acronym>内的名词吧.

显示效果

要在视觉上吸引读者,有些浏览器预设会在<abbr>和<acronym>下面加上1像素的点状底部边线,引诱使用者将鼠标移到缩写名词,略称上面,当鼠标移到上面后,浏览器就会以"工具提示"的方式显示title属性提供的定义内容.

对那些不预设显示点状底部边线的浏览器来说,可以通过定义CSS达到同样的效果.

abbr, acronym {
  border-bottom: 1px dotted;
  cursor: help;
  }

我们也加上额外的规则,把光标转成"求助"(大多数浏览器都会支持),帮助使用者看出这不是可以点选的链接,而是以"工具提示"显示的定义内容(Mark Newhouse,"Real World Style:CSS Help",http://realworldstyle.com/css_help.html).

图6-4就是浏览器的显示效果,将"XHTML"扩展成定义文字,以及点状底部边线,求助光标:

图6-4.一般浏览器显示<abbr>的示例

出处：蓝色理想
责任编辑：bluehearts

上一页 短语元素 [3] 下一页 短语元素 [5]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。