PHP小码农

Appearance

q 行内引用 ​

<q> 标签用于标记行内短引用。浏览器默认会在 <q> 元素的前后自动添加引号。<q> 常用于引用别人的话、名言、文献摘录等短文本。

前置知识

阅读本节前，建议先了解：dfn 定义术语

基础概念 ​

<q>（quotation）是 HTML5 中的语义标签，用于包裹行内短引用。与之相对的是 <blockquote>，用于块级别的长引用。浏览器会根据语言自动为 <q> 添加适当的引号。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>q 行内引用示例</title>
</head>
<body>
  <p>爱因斯坦曾说：<q>想象力比知识更重要。</q></p>

  <p>在 <cite>《道德经》</cite> 中有这样一句话：<q>千里之行，始于足下。</q></p>
</body>
</html>

详细说明 ​

q 的 cite 属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>q cite 属性</title>
</head>
<body>
  <p>据维基百科记载，<q cite="https://zh.wikipedia.org/wiki/HTML">HTML 是一种用于创建网页的标准标记语言。</q></p>
</body>
</html>

自动引号 ​

浏览器会根据页面语言自动添加适当的引号：

语言开引号闭引号
中文"\u201C""\u201D"
英文"\u201C""\u201D"
日文"\u300C""\u300D"

自定义引号样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义 q 样式</title>
  <style>
    q { quotes: "\u300C" "\u300D" "\u300E" "\u300F"; }
    q::before { content: open-quote; font-weight: bold; color: #d32f2f; }
    q::after { content: close-quote; font-weight: bold; color: #d32f2f; }
  </style>
</head>
<body>
  <p>老子说：<q>道可道，非常道。</q></p>
  <p>嵌套引用：<q>他说：<q>人生如梦。</q></q></p>
</body>
</html>

q 与 blockquote 的区别 ​

特性<q><blockquote>
类型行内元素块级元素
引号自动添加不添加
使用场景行内短引用独立段落的长引用

实战示例 ​

名言集锦 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>名言集锦</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: serif; line-height: 1.8; }
    .quote-item { margin: 1.5rem 0; }
    .quote-author { text-align: right; color: #888; font-size: 0.9rem; }
  </style>
</head>
<body>
  <h1>科技界名言</h1>
  <div class="quote-item">
    <p>史蒂夫·乔布斯说过：<q>创新区分领导者和追随者。</q></p>
    <p class="quote-author">—— 史蒂夫·乔布斯</p>
  </div>
  <div class="quote-item">
    <p>林纳斯·托瓦兹曾说：<q>Talk is cheap. Show me the code.</q></p>
    <p class="quote-author">—— 林纳斯·托瓦兹</p>
  </div>
</body>
</html>

注意事项 ​

  • 不要用 <q> 包裹长段落，长引用应使用 <blockquote>
  • 不要用 <q> 标记自己说的话
  • 如果不需要自动引号，可用 CSS quotes: none 取消

最佳实践 ​

  1. 用于短引用：名言、对话、文献摘录
  2. 添加 cite 属性：标注引用来源 URL
  3. 不要过度使用：只在真正引用他人内容时使用
  4. 自定义引号：根据语言设置合适的引号样式

下一节

继续学习：time 时间

参考链接 ​