标记语言——短语元素(3)
<cite>的设计
<cite>是个值得讨论的有趣元素,在替换掉单纯指定显示效果的<i>标签时尤为重要.<cite>的用途是参照引用来源:标识作者或出版物.历史上来说,设计者或许会用<i>把书籍标题显示成斜体,但是在本章稍早的地方我们学到了CSS是指定显示效果的最佳工具.
你或许会建议用<em>表示出版物的标题,但是在引用书籍或其他出版物的时候,我们并不打算去强调,也就是将书籍标题显示成斜体(在印刷界也常使用下划线,但是这明显会和链接混淆).
于是就出现了为这个工作量身打造的<cite>标签,大多数浏览器甚至预设会以斜体显示<cite>标签中的内容.而我们也能加上CSS规则达成相同的目的.
规范
W3C的<cite>标签规范有点简略,在HTML 4.01规范中只简单提了(www.w3.org/TR/html4/struct/text.html#h-9.2.1):
<cite>: 包含其他引用,参考来源的资讯
这差不多是我们能掌握的说法了,但是我们也不清楚到底哪类资料可以放在<cite>中,但是从"来源"来看,我们至少可以把作者,出版物放进去.
让我们看看<cite>的用法:
The novel, <cite>The Scarlet Letter</cite> is set in Puritan Boston and like this book, was written in Salem, Massachusetts.
使用了<cite>标签之后,标题The Scarlet Letter 在大多数浏览器中都显示成斜体,我们将加上下面这段十分简单的CSS规则,以便浏览器在没有预设的时候也显示出正确的效果.
cite {
font-style: italic;
}
回顾一下,我们把标题书籍,其他出版物标题的<i>标签替换成<cite>,在大多数浏览器中,仍然能得到斜体显示效果,也再度使页面内容变得结构化语义化.当然这个结构一样能发挥CSS,让我们一起来瞧一瞧.
改变<cite>的样式
在我们讨论以结构,语义构建页面内容的过程中,我们也同样让页面变得更容易用CSS指定样式(以及修改样式).以<cite>标签为例,如果我们固定使用这个标签标记出版物的话,我们就能完全掌握现实的样式,在任何需要的时候都能轻易的修改.
假设所制作的整个网站,过程中使用了<cite>标签标记书籍参考资料以及出版物标题,我们加上全局CSS规则用斜体显示所有的<cite>元素,但是在几个月之后,我们希望不仅以斜体显示书籍出版无标题,还要用粗体,红色文字灰色背景.
当然,可以用几个CSS规则快速完成这项任务,立刻改变先前以<cite>标记的所有参考资料标题,如果使用<i>或者<em>的话就没办法明确指明对象了.
cite {
font-style: italic;
font-weight: bold;
color: red;
background-color: #ddd;
}
图6-2使大多数浏览器的显示效果,而这是另一个先写结构化标记的好例子,让你稍后能轻易修改全站的设计风格.
图6-2. 以<cite>标记,使用CSS样式的效果
发挥结构的潜力
除了容易使用样式之外,结构化标记也便于服务器端软件进行处理,带来有趣的应用.
举例来说,易用性提倡者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/)