q标签

q标签

前言

笔者最近阅读技术文章时，发现一篇文章提到了HTML的q标签，虽然是个基础的标签，但是以前工作当中确实没有使用过，所以今天就简单记录一下。

概述

HTML 引用标签 (<q>) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用<blockquote>替代。

备注： 大多数现代浏览器，会为 <q> 文本添加引号。旧浏览器可能需要使用 CSS 添加引号。IE、Edge 与 Firefox、Chrome 引号样式略有不同。

语法

特朗普说：<q>大而美法案是美国再次伟大的关键</q>

实际输出结果为：
特朗普说：大而美法案是美国再次伟大的关键

实际使用场景

在实际使用中，我们可以通过CSS设置q的样式及引号的样式，以便展现丰富的效果。

根据语言显示引号

可以通过lang属性，让q根据不同的语言显示不同的引号。

<div lang="fr"><q>Voici un paragraphe en français.</q></div>
<div lang="de"><q>Hier ist eine deutsche auszeit.</q></div>
<div lang="en"><q>Here is a passage in English.</q></div>
<div lang="zh"><q>这里是一段中文。</q></div>
<div lang="ru"><q>Это отрывок из русского языка.</q></div>
<div lang="ja"><q>こちらは日本語です。</q></div>

实际输出结果为：

用CSS设置引号样式

通过CSS设置q的样式及引号的样式，以便展现丰富的效果。q标签默认通过伪元素:before和:after添加引号：

q:before{
    content: open-quote;
}
q:after {
    content: close-quote;
}

所以我们可以通过设置伪元素的content属性，来改变引号的样式。下面的样式，将引号修改为中文引号：

q:before{
    content: "“";
}
q:after {
    content: "”";
}

更简单的，我们也可以使用CSS3的quotes属性设置引号的样式：

/* Keyword value */
q{
    quotes: none;

    /* <string> values */
    quotes: "«" "»"; /* 用一对字符串定义前后的引号*/
    quotes: "«" "»" "‹" "›"; /* 用于标签嵌套的情况 */

    /* Global values */
    quotes: inherit;
    quotes: initial;
    quotes: unset;   
}