[翻译]标记语言和样式手册 Chapter 4 引用

阅读：Chapter 3 * 的表格

“Misquotations are the only quotations tha are never misquoted”

 只有错误的引用永远不会被误用   -  Hesketh Pearson

所有类型的网站都经常会使用引用，不管是引用其他网页、作者或出版物的内容，以标准方法标记引用内容是非常有好处的。因为一旦完成结构之后，只需要一些简单的css就能把引用内容变成漂亮的设计元素。

让我们看看下面三种用来标记引言的方法，同时讨论一下每个方法的优缺点，在我们找到最棒的方法之后，再来研究这几个相关元素与样式在标记冗长引用内容时哪种方法最佳。

我们来仔细研究每个方法，并且找到最便于完成任务的“工具”，更重要的是，要弄清楚为什么它是最棒的工具。

方法A：缺乏语义

<p>"Misquotations are the only quotations that are never misquoted."</p> <p>— Hesketh Pearson</p>

在页面内使用引用的时候，通常会希望引用的外观与其他文字不同，最好能提示读者这段内容来自其他地方，同时（使用适当方法）与一般内容的阅读顺序分离。

方法A的标记方法与页面上的其他段落并没有不同，因此我们没有办法为它设定不同的样式，内容里的双引号就变成了引用内容的唯一提示了。

顺便提一下，在这个方法与之后的两个例子中 —  是长破折号（也就是“—”）的HTML字码，这里使用了10进制表示方法。这是支持所有浏览器最可靠的方法。或者，你也可以使用 —

方法B:以class处理?

<div class="quotation">
  <p>Misquotations are the only quotations that are never
misquoted.</p>
  <p>&#8212; Hesketh Pearson </p>
</div>

由于在包围引用内容的<div>标签里加了class="quotation",因此我们能够为它指定独特的css样式,但是HTML拥有专门解决这个问题的完美标签,因此建立这个特别分类似乎有点多余,我们马上就会看到这个完美的HTML标签.

在我们开始使用加上类的<div>之后,如果我们想让整个网站的样式保持一致,在标记各处引用的时候都会被限制在这个方法中,我们必须背下这个标签引用的特别的语法以便未来使用.如果我们管理的是以<div>与分类属性标记各种结构元素的大型网站,那就十分头疼了.因为事情很快就会变得十分散乱,而你将会需要一份记录所有自定分类的名称、用途的表格了。

使用不支持或者关闭css的浏览器访问这个方法标记的引用时也会发生问题。由于<div>只是一般容器,因此里面的内容没有任何预设样式.对使用旧版本浏览器,文字模式浏览器,屏幕阅读器的人来说,看到没有css的引用,和页面里其他内容完全一样.

方法C:<blockquote>最棒

<blockquote>
  <p>Misquotations are the only quotations that are never
misquoted.</p>
  <p>— Hesketh Pearson </p>
</blockquote>

W3C建议使用<blockquote>标记长引用(区块级内容),这个标签正是为了处理我们正在讨论的状况设计的,借着使用这个标签,我们能为内容加上结构意义,同时能提供独特的标记以便为可视化浏览器设定样式.

没有加上任何样式的话,<blockquote>标签的内容会缩进显示,这是最基本的视觉提示,足以将引用内容和一般文字区别开.然而,这种预设样式却引来了一种恶劣的习惯,我们稍后就会讨论.

用起子钉钉子

或许因为<blockquote>的内容看起来就像内缩过的段落,或者是从前需要缩进某个区块,某段文字的时候,你就会使用<blockquote>搞定.

不幸的,这是个非常糟糕的习惯,补救方法之一,是改用适当的元素加上css的padding-left或margin-left属性,以往<blockquote>常被这样滥用来设定显示效果,而不是用来标记内容结构.

由于有这种坏习惯,因此W3C建议将描述引用符号的责任交给样式表,不希望浏览器主动显示,在本章的"技巧延伸"中,我们会看到如何巧妙的加上漂亮的引用符号.

概要

让我们快速回顾一下,为什么方法C在标记长引用的时候比其他两种方法棒.

方法A:

无法轻易加上不同的样式,使它与页面其他内容区分开来
不提供任何引用的语义,结构标识.

方法B:

加上独特的分类让我们易于指定样式,但是<blockquote>可用,所以根本不需要
如果想要维持页面/网站的风格一致,在标记未来新增引用的时候,我们就会被限制在这个方法里面

方法C:

这是W3C为这个目标所设计的元素,能够标识内容的意义,结构.

容易使用CSS为<blockquote>元素内部的引用加上独特样式. 缺少CSS的时候,<blockquote>预设的表现方式足以让可视化,非可视化浏览器提供暗示. 现在是为<blockquote>打扮一番,寻找样式创意的好机会.