如果您曾经查看过HTML元素列表,您可能会发现自己在问“什么是块引用?” blockquote元素是一个HTML标记对,用于定义长引号。以下是根据W3C HTML5规范对此元素的定义:
blockquote元素表示从另一个源引用的部分。
如何在您的网页上使用Blockquote
当您在网页上编写文本并创建该页面的布局时,有时您需要调出一段文本作为引用。这可能是来自其他地方的引用,例如伴随案例研究或项目成功案例的客户证言。这也可以是一种设计处理,从文章或内容本身重复一些重要的文本。在发布中,这有时被称为拉引用。在网页设计中,实现这一目标的方法之一(以及我们在本文中介绍的方式)称为blockquote。
那么让我们来看看如何使用blockquote标签来定义长引号,例如Lewis Carroll的“The Jabberwocky”摘录:
'Twas brillig和slhehey toves摇晃中的gyre和gimble:所有的模仿都是borogoves,而且这个家庭咆哮着。
(作者刘易斯卡罗尔)
使用Blockquote标记的示例
blockquote标记是一个语义标记,它告诉浏览器或用户代理内容是长引号。因此,您不应在blockquote标记内包含非引号的文本。请记住,“引用”通常是某人所说的实际单词或来自外部来源的文本(如本文中的Lewis Carroll文本),但它 能够 也是我们之前介绍过的pullquote概念。当您考虑它时,该pullquote是文本的引用,它恰好来自引用本身出现的同一篇文章。
大多数Web浏览器在块引用的两侧添加一些缩进(大约5个空格),以使其从周围文本中脱颖而出。一些非常古老的浏览器甚至可能以斜体显示引用的文本。请记住,这只是blockquote元素的默认样式。使用CSS,您可以完全控制blockquote的显示方式。您可以增加甚至删除缩进,添加背景颜色或增加文本大小以进一步调出引号。您可以将该引号浮动到页面的一侧,并将其他文本环绕,这是用于印刷杂志中的pullquotes的常见视觉样式。你可以通过CSS控制blockquote的外观,我们将在稍后讨论。现在,让我们继续看看如何将引用本身添加到HTML标记中。
要将blockquote标记添加到文本中,只需使用以下标记对包围作为引用的文本 -
例如:
'Twas brillig和slhehey toves 摇晃中的gyre和gimble: 所有的模仿都是borogoves, 而且这个家庭咆哮着。如您所见,您只需在引号本身的内容周围添加一对blockquote标记。在这个例子中,我们还使用了一些break标签()来在文本内部的适当位置添加单个换行符。这是因为我们正在重新创作一首诗中的文字,其中那些特定的休息很重要。如果您正在创建客户推荐引用,并且行不需要在特定部分中断,则您不希望添加这些中断标记并允许浏览器本身根据屏幕大小进行换行和中断。
不要使用Blockquote缩进文本
多年来,人们使用blockquote标签,如果他们想在他们的网页上缩进文本,即使该文本不是一个pullquote。这是一个不好的做法!您不希望仅出于视觉原因使用blockquote的语义。如果你需要缩进文本,你应该使用样式表,而不是blockquote标签(当然,除非你试图缩进的是引用!)。如果您只想添加缩进,请尝试将此代码放入您的网页:
这将是缩进的文本。
接下来,您将使用CSS样式定位该类
.indented {
填充:0 10px;}
这会在段落的任一侧添加10个像素的填充。