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<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<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<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 对文档说「这是引用」。对屏幕阅读器、内容抽取工具以及日后的设计变更,这个差别很重要。
在编辑器中练习
- 写一段包含来自虚构教练或老师的短
q引用的段落。 - 添加一个含两句短句、来自虚构文章的
blockquote。 - 在下方用
cite写出文章标题。 - 可选:在
blockquote上设置cite="https://example.com/article"。 - 保存并打开页面。确认行内引用与块引用看起来有区别。
- 临时把
q换成纯文本和手打引号,再放回q——留意标记角色与单纯装饰的差别。
这个短练习同时训练元素选择与来源署名,也是真实页面中会反复用到的模式。
模糊引用的常见错误
- 没有真实引用却把整页包进一个巨大的
blockquote - 文本确属引用、应使用
q/blockquote时,却只用 CSS 或手打引号 - 把唯一来源标题放进
cite属性,并假定读者能看见 - 没有明确理由就把
blockquote嵌进q - 为装饰而引用自己——把这些元素留给真正被引的话
- 忘记闭合
q或blockquote,导致后面的文字仍被标成引用 - 把大段叙述塞进
q,而不是把元素限制在被引词语上
小结
- 句中短引用 →
q - 较长引文块 →
blockquote - 可见作品标题 →
cite元素 - 可选来源 URL →
blockquote上的cite属性 - 在 HTML 中标记真实引用;不要只靠样式表达含义
- 保持诚实:真正引用来源时才使用这些元素
- 给人们可读署名,必要时给工具来源 URL
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己,看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部