-

,

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

Apples
Spaghetti
Green Beans
Milk

整个清单有一个容器元素,所有的食品项目都包含在里面,以这种方式归类项目,可以基于XML的应用轻松的从清单里面抽取出所有的项目.
举例来说,一个开发者需要编写一份XSLT样式表,将这个清单转成xhtml,纯文字,甚至是pdf文件,因为列表项目的结构表现的非常清晰,所以程序可以轻松的获取信息并作出一些有用的处理.
虽然在这本书里我并不直接处理XML,但是这些原则也适用于XHTML世界,如果文档使用非常语义化的标签结构,将可以提升文档今后的灵活度,不管是为结构清晰的文档加上css样式表还是修改容易理解的文档 — 只要提供正确的结构,就能节省许多今后在维护时可能浪费掉的时间.
接着,我们仔细的看看方法D,看看这些怎么样结合在一起 — 一个能被大多数浏览器和屏幕阅读器识别并显示的文档,同时又允许我们使用各种不同的方法为文档加上样式.

方法 D: 愉快的包装者

• Apples


• Spaghetti


• Green Beans


• Milk

是什么让方法D变得如此特别?首先,它的语法完全正确,正确的无序清单具备了

容器元素,同时每个项目都已
• 元素闭合起来.到这里你会想问,我们花费了那么多力气只来示范为了正确而正确?我们来看看这样做能带来的好处:
  由于我们正确的标记了我们的食品清单,每个项目都会独占一行(因为块级元素
• 的关系),而且大多数浏览器会给每个项目的左边增加一个小圆点符号,并且进行正确的行内缩进换行.(见图 1 - 3)
  
  图1 - 3
  PDA,移动电话,或者其他的小屏幕设备的用户也可以看到清楚的,关系明确的组织方式,由于我们告诉了这些设备这些资料的类型(在这个示例里是清单),因此这些设备能够根据自己的能力决定怎样显示才能达到最好的效果.
  如果因为放大字号或者缩小浏览器视窗宽度等原因造成换行,那么被换行的文字会行内缩进到与第一行文字对齐的位置,所以不管浏览器环境如何,都可以轻松的识别每个清单项目.
  
  概要
  我们已经针对每种可能的方法进行讨论了,现在让我们快速的回顾一下刚才讨论过的东西: 方法A:
  无法为清单加上独特的样式
  在狭窄的列里或者小屏幕设备上,较长的内容可能会因为换行而造成误解
  缺乏语义性 方法B:
  增加小圆点符号来帮助识别每个项目,但是一些浏览器会在缺失父级标签
  时可能不显示小圆点符号
  没有放在
  中,缺少闭合标签意味着难于加上样式
  不标准 方法C:
  加上了闭合标签后就不需要
  标签了
  省略了
  元素使得我们难于为这个清单添加特定的样式
  不标准 方法D:
  符合标准!
  使文档语义化,结构性
  大多数浏览器都会在每个项目左边显示小圆点符号
  在大多数浏览器上都会在换行后行内缩进
  很容易就可以定义特定的css样式
  正如你所见,你可以从一个看起来很简单的问题上获得不少知识.就算是你已经在你所有的页面上都是用了方法D,还是可以你为什么这样做比较好,我们会在这本书里一直探索"为什么"的问题,让你在各种情况下选用最恰当的方法.
  
  技巧延伸
  让我们利用我们构造出来的食品清单来试看看几种用定义css样式的方法,我们将抛开预设样式,加入自定义的圆点符号,接着把它转成横向,把它变作一个导航条.
  扔掉圆点
  "我真的不喜欢食品清单里的那些个小圆点,我想我还是用回
  吧."
  不需要回到老习惯 — 我们仍然可以使用我们结构化的无序清单,然后使用css关闭掉小圆点符号和行内缩进,关键在于我们保留了清单的结构,然后以css具体的呈现出来.
  首先,加上一段去掉圆点符号的css规则:
  ul{
  list-style:none;
  }
  显示的结果见图1 - 4
  
  图 1 - 4 去掉小圆点符号
  接着我们来去掉行内缩进,根据预设值,所有无序清单左边都会留有一些内补丁(padding),但是不用担心,我们可以随心所欲的裁掉:
  ul{
  list-style:none;
  padding-left:0;
  }
  显示结果可见图1 - 5
  
  图 1 - 5
  虽然图 1 - 5 看起来和使用了几个
  标签的效果几乎一样,但是它还是符合标准的,结构化的无序列表 — 不管什么浏览器,设备都能正常显示,如果必要的话只需要更新几条css规则就能换上不同的样式了.
  
  使用自定义圆点符号来完成自己的想象
  或许你想要在清单里保留小圆点符号,但是不想用浏览器无趣的默认设置,更像用自己的小圆点图案.有两种方法可以达成你想要的 — 而我更推崇第二种方法,因为它可以在各种浏览器之间更好的兼容.
  第一种方法是用 list-style-image 属性来指定用来替代默认小圆点的图片名称.
  ul{
  list-style-image:url(i_hot.gif)
  }
  这是最简单的方法,但是它会在不同浏览器之间的图片垂直对齐位置上有所不同,有些浏览器会把图片和项目文字中线对齐,也有的会把图片放得稍微高一点,它们之间有一点不一致.
  为了避免 list-style-image 造成的几个流行浏览器之间的对齐问题,我比较喜欢用一种替代方法:把图片作为每个
  • 元素的背景.
    首先,我们要去掉默认的圆点,然后再加上我们自己的背景图片:
    ul{
    list-style:none;
    }
    li{
    background-image:url(i_hot.gif) no-repeat 0 50%;
    padding-left:25px;
    }
    no-repeat 会告诉浏览器不把背景图片进行平铺操作(默认会平铺),而0 50%会告诉浏览器把背景图片放置在距离左边 0 像素,距离上面 50% 的地方,让背景图片 i_hot.gif 根据中线对齐.我们也可以用精确的像素来指定位置,比如说 0 6px 会让图片放置在距离左边0像素,距离上面 6 像素的位置上.
    我们还要在清单项目的左边加上17像素的内补丁(padding),以便我们把宽20像素高11像素的图片能够完整显示出来,同时又留有一点空白,而不会和文字有重叠.这些数据应该根据你所使用的图片尺寸进行调整( 图 1 - 6 )
    
    图 1 - 6 自定义圆点图片的清单