q标签和blockquote标签的区别

<q> 标签和 <blockquote> 标签都表示引用,其中 <blockquote> 标签表示块引用,<q> 标签表示行内引用,两者在展现形式上有所区别。

下面是一个 <blockquote> 块引用的例子:

<blockquote cite="https://www.perweb.com/">
    <p>这是一个 blockquote 块引用</p>
</blockquote>

cite 属性用于指定引用的来源。

展示效果如下(红框部分):

可以看出:浏览器在渲染块引用时默认会增加缩进。

再来看一个 <q> 行内引用的例子:

<p>左侧文本 <q cite="https://www.perweb.com/">这是一个行内引用</q> 右侧文本</p>

cite 属性用于指定引用的来源。

展示效果如下(红框部分):

可以看出:浏览器在渲染行内引用时会为文本加上引号。

两者的区别是:

<blockquote> 是一个块元素,独占一行,默认会添加缩进;

<q> 是一个行内元素,可以和其他行内元素并列,默认会为文本添加引号。

注意:cite 属性指定的内容是不可见的,如果想要显示来源,可以使用单独的 <cite> 标签。

<a href="https://www.perweb.com/"><cite>这是一段引用</cite></a>