[翻译]标记语言和样式手册 Chapter 1 清单（2）

提问时间

下面哪种方法最适合建立食品清单?

方法 A: 用 <br /> 换行

Apples<br />
Spaghetti<br />
Green Beans<br />
Milk<br />

方法A的确是一种被广为传用的方法,可能有数百万个页面使用过,事实上,我相信我们中的每个人都会偶尔因为使用了这种方法而感到内疚,对吧?我们希望在清单中的每一项都独占一行,而加入了换行标签(在这里使用的是符合xhtml标准的自关闭标签<br />)就会在每个项目后面生成断行,这就是他所有的效果了,看起来,挺管用的.

但是,如果我们想要给这个食品清单加上与其他页面元素不同的样式的时候该怎么办呢?比方说:如果想让清单的所有链接的颜色变成红色而不同于默认的蓝色,或者想要改变字体的大小时该怎么办呢?真的我们什么都做不了,我们被为整份html文档设定的字体风格(如果有设定的话)限制住了.同时,如果在清单外面没有任何标签围绕,我们就没办法为清单制定一个独特的css规则.

折行

如果我们在清单中加入一个类似"Five Foot Loaf of Anthony's Italian Bread".根据这个清单在页面里摆放的位置,在水平空间不足或者浏览者的浏览器视窗比较窄的情况下,过长的项目就会冒着折到下一行的风险.

同时我们也要考虑到视力不佳的用户可能会把预设的字体大小改大以便增加可读性,我们认为能够像 图1 - 1  一样把项目轻松的布置在窄栏里,但是很有可能会像 图 1 - 2 这样在意料之外的地方发生断行,读者调大字体时,设计的样式就完全变样了.


图 1 - 1 预设文字大小的范围


图 1 - 2 调大文字大小后的相同内容

唔......现在,我想我应该要买面包是没错,但是在 图 1 - 2 里,面包上面的两行字实在感到疑惑.

在使用小屏幕装置像是移动电话或者PDA阅读长行时,类似的换行问题就会展露它丑恶的嘴脸,骨灰级的科技爱好者可能会随手带着记录购物清单的Palm Pilot(而不是传统意义上的纸和笔)当他在超级市场里面闲逛的时候,最后却在货架中寻找一种叫"Anthony's Italian"的东西.

在这里我要在本质上阐明一个观点 - 使用方法A ,并没有把阅读网页时的这些设计师们所无法控制的变数考虑在内.

方法 B: 会咬人的小圆点

<li>Apples<br />
<li>Spaghetti<br />
<li>Green Beans<br />
<li>Milk<br />

大多数成熟的浏览器在解析<li>标签时都会在清单项目的左侧加上圆点符号,你能通过方法B来达到这个效果,在需要圆点符号时加入<li>标签.但是如果<li>标签没有被包含在适当的父标签中时,那有些浏览器不会显示出圆点符号,适当的父标签包括强大的<ul>以及<li>的另一个父标签<ol>(有序清单),这个会在稍后有更多的讨论.

圆点符号的出现在某种程度上的确能够帮助解决换行问题,每个食品项目在左边会有小圆点符号,如果某个项目过长折行的话,旁边没有小圆点符号应该就可以很明显的看出这并不是全新的项目,但是方法B仍然有显示结果意外的问题:它并不符合标准.

麻烦检查一下

根据W3C的XHTML 1.0规范,所有的标签最后都必须要闭合起来 — 如果我们还是继续使用上面示例中的写法,让所有的<li>保持开放状态的话,那就太丢脸了!

在行末使用<br />标签来模拟正确的无序清单自动换行的显示效果,但其实我们有更好的方法.

一向以来,养成编写正确的标签语法的习惯非常重要,正确的编写标签语法,我们可以不必在未来担心由于没有闭合标签或者不正确的嵌套元素所带来的问题.如果有人阅读这些源代码的话,也可以使他们更加深入的理解源代码想要达成的效果.

记得善用W3C的在线检测工具(http://validator.w3.org/)来检查你提交的URI或者上传的文档,最终你会觉得这样做非常值得.

方法 C: 接近了

<li>Apples</li>
<li>Spaghetti</li>
<li>Green Beans</li>
<li>Milk</li>

方法C更加的接近完美的解决方案了,但是还是悲惨的失败了,原因还是非常明显:这仍然不符合标准的标记语法.

我们已经把<li>标签关闭了,因为<li>是块级元素(block-level),因此在使用上可以去掉<br />标签,这样每个项目都独占一行,但是,我们却漏了它的外层结构,缺少了一个表示"这群项目是一个清单!"的元素.

从语义化的角度看这个问题也非常重要 — 清单是一组项目归属在一起,因此我们应该为它们加上这样的标签,此外,使用正确的清单标签能清楚告诉浏览器,软件或者显示设备"这组项目是个清单!",语义化标签的意义就在于将内容根据他们所属的类别进行结构性的搭建.

块级(block-level)与行内(inline): HTML元素可以分为块级与行内两大类型,块级元素会从新行开始,最后接着一个断行,而行内元素则会与其他的行内元素显示在同一行内,块级元素可以包括其他块级元素和行内元素,而行内元素里面不能包含块级元素.

块级元素包括:<div>,<h1>-<h6>,<form>等等,行内元素包括:<span>,<strong>,<em>,<q>等等.

如果以纯XML的角度来看我们的食品清单,或许我们会使用这样的方式进行标注:

<grocerylist>
  <item>Apples</item>
  <item>Spaghetti</item>
  <item>Green Beans</item>
  <item>Milk</item>
</grocerylist>

整个清单有一个容器元素<grocerylist>,所有的食品项目都包含在里面,以这种方式归类项目,可以基于XML的应用轻松的从清单里面抽取出所有的项目.

举例来说,一个开发者需要编写一份XSLT样式表,将这个清单转成xhtml,纯文字,甚至是pdf文件,因为列表项目的结构表现的非常清晰,所以程序可以轻松的获取信息并作出一些有用的处理.

虽然在这本书里我并不直接处理XML,但是这些原则也适用于XHTML世界,如果文档使用非常语义化的标签结构,将可以提升文档今后的灵活度,不管是为结构清晰的文档加上css样式表还是修改容易理解的文档 — 只要提供正确的结构,就能节省许多今后在维护时可能浪费掉的时间.

接着,我们仔细的看看方法D,看看这些怎么样结合在一起 — 一个能被大多数浏览器和屏幕阅读器识别并显示的文档,同时又允许我们使用各种不同的方法为文档加上样式.

方法 D: 愉快的包装者

<ul>
  <li>Apples</li>
  <li>Spaghetti</li>
  <li>Green Beans</li>
  <li>Milk</li>
</ul>

是什么让方法D变得如此特别?首先,它的语法完全正确,正确的无序清单具备了<ul>容器元素,同时每个项目都已<li>元素闭合起来.到这里你会想问,我们花费了那么多力气只来示范为了正确而正确?我们来看看这样做能带来的好处:

由于我们正确的标记了我们的食品清单,每个项目都会独占一行(因为块级元素<li>的关系),而且大多数浏览器会给每个项目的左边增加一个小圆点符号,并且进行正确的行内缩进换行.(见图 1 - 3)


  图1 - 3

PDA,移动电话,或者其他的小屏幕设备的用户也可以看到清楚的,关系明确的组织方式,由于我们告诉了这些设备这些资料的类型(在这个示例里是清单),因此这些设备能够根据自己的能力决定怎样显示才能达到最好的效果.

如果因为放大字号或者缩小浏览器视窗宽度等原因造成换行,那么被换行的文字会行内缩进到与第一行文字对齐的位置,所以不管浏览器环境如何,都可以轻松的识别每个清单项目.