标记语言——清单(4)

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