正在加载...

HTML 引用

你已经用格式化标签标出了重要性和强调。引用不同:你在重复别人的话(或某部作品中的一段),HTML 应该把这一点说清楚。专用的引用元素帮助浏览器、辅助工具和读者把引用与周围正文区分开——单靠装饰性引号并不能完整传达这个信息。当文档用语义方式标记引用时,即便以后用 CSS 改变外观,含义依然稳定。本课把你已知的格式化与新角色连起来:给并非完全属于你的文字标出声音与来源。

HTML 里什么算引用?

引用是你呈现为来自另一位说话者、作者或来源的文字。它可以是嵌在你句子里的短短语,也可以是单独成块的较长段落。HTML 给短行内情况提供 q,给较长块级情况提供 blockquote。来源方面还有额外工具:可见作品标题用 cite 元素,blockquote 上的 cite 属性则存放机器可读的来源 URL。先判断引用是行内还是块级,再决定如何同时向人和工具标明出处。

直接回答

句子内的短引用用 q。能独立成段的较长引文用 blockquote。对读者有帮助时,用可见文本里的 cite 元素写出作品或文章名称。在 blockquote 上还可设置 cite="https://…" 指向来源 URL——该 URL 面向机器,通常不会单独显示为可读标题。若只需要排版引号而没有引用含义,那是呈现问题;若真的在引用某人的话,请在 HTML 里标出角色。

引用工具一览

📊 q、blockquote 与 cite

工具 作用 常见位置
q 短行内引用 段落或句子内部
blockquote 较长引文 独立块,常嵌套 p
cite 元素 可见文本中的作品标题 引用附近的正文
cite 属性 blockquote 的来源 URL blockquote 开始标签上

用 q 做短行内引用

当被引的话落在你自己的句子里时,用 q 包起来。多数浏览器会自动加上引号。你仍在标签之间写下所说或所写的词语;通常不必手打装饰性弯引号。让 q 保持狭窄:只包被引短语,不要包周围叙述。若引用长到多句,或需要在页面上单独占位,请改用 blockquote,不要硬撑出一个巨大的 q。

用 q 的行内引用

html
HTML Code
<p>
She said <q>Practice every day</q> and closed the book.
</p>

阅读示例

  • 外层 p 是你的叙述
  • q 只包裹被引短语
  • 闭合 q 后,句子其余部分回到普通正文
  • 若这是多句长摘录,更适合用 blockquote
  • 引用含义落在元素上,而不仅是浏览器可能画出的引号

用 blockquote 做较长段落

当引用长到足以自成一块时——常常是一个或多个段落——使用 blockquote。把被引内容放进 blockquote 里。cite 属性可存放来源 URL。用 cite 元素在可见文本中写出人类可读的作品标题,通常放在引用附近。常见做法是在 blockquote 内嵌一个或多个 p,以保持结构清晰。不要仅为缩进而用 blockquote;缩进是呈现,假引用块不如 CSS 合适。

带来源 URL 的块引用

html
HTML Code
<blockquote cite="https://example.com/tips">
<p>Clear HTML is easier to maintain than clever HTML.</p>
<p>Readers thank you for structure they can trust.</p>
</blockquote>

为什么只有 cite 属性不够

cite 属性帮助工具了解来源 URL。许多访客永远看不到属性值。也请给人们一行可读的出处说明。把属性看作来源元数据,把 cite 元素看作读者在页面上真正读到的署名。两种角色互补:URL 给机器,可见标题给人。

用 cite 写可见来源标题

html
HTML Code
<p>Source: <cite>Example Tips</cite></p>

如何选择 q 与 blockquote

问两个问题:引用有多长?它打断句子还是独立成段?

  • 嵌在你句子里的短短语 → q
  • 自成一块的较长段落 → blockquote
  • 正文中的书名、文章名或站点名 → cite 元素
  • 块引用的来源 URL → blockquote 上的 cite 属性
    不要整页包进一个巨大的 blockquote 只为了缩进。缩进是呈现;blockquote 用于真实引用。若不确定,大声读页面:若引用听起来像句中的短插入语,用 q;若像单独的引文块,用 blockquote。

含义相对仅靠 CSS 的引号

你可以用 CSS 或手打 " 字符伪造引号。对真实引用,优先用 q 或 blockquote,让文档标出含义。视觉标记仍可出现——浏览器常给 q 加引号样式——但即便样式表稍后改变外观,元素仍携带角色。单靠排版引号对眼睛说「这看起来像引用」;q 与 blockquote 对文档说「这是引用」。对屏幕阅读器、内容抽取工具以及日后的设计变更,这个差别很重要。

在编辑器中练习

  1. 写一段包含来自虚构教练或老师的短 q 引用的段落。
  2. 添加一个含两句短句、来自虚构文章的 blockquote。
  3. 在下方用 cite 写出文章标题。
  4. 可选:在 blockquote 上设置 cite="https://example.com/article"。
  5. 保存并打开页面。确认行内引用与块引用看起来有区别。
  6. 临时把 q 换成纯文本和手打引号,再放回 q——留意标记角色与单纯装饰的差别。
    这个短练习同时训练元素选择与来源署名,也是真实页面中会反复用到的模式。

模糊引用的常见错误

  • 没有真实引用却把整页包进一个巨大的 blockquote
  • 文本确属引用、应使用 q / blockquote 时,却只用 CSS 或手打引号
  • 把唯一来源标题放进 cite 属性,并假定读者能看见
  • 没有明确理由就把 blockquote 嵌进 q
  • 为装饰而引用自己——把这些元素留给真正被引的话
  • 忘记闭合 q 或 blockquote,导致后面的文字仍被标成引用
  • 把大段叙述塞进 q,而不是把元素限制在被引词语上

小结

  • 句中短引用 → q
  • 较长引文块 → blockquote
  • 可见作品标题 → cite 元素
  • 可选来源 URL → blockquote 上的 cite 属性
  • 在 HTML 中标记真实引用;不要只靠样式表达含义
  • 保持诚实:真正引用来源时才使用这些元素
  • 给人们可读署名,必要时给工具来源 URL

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己,看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部