前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库blockquote q cite 引用 文本
HTML语义与文档

长引用、短引用和作品标题,分别该用哪个标签?

独立成段的长引文用 <blockquote>,句子里的短引文用 <q>,被引用作品的标题用 <cite>。<blockquote cite="..."> 的属性是来源 URL,不会自动在页面显示出处。

前端进阶之旅 · 一题精讲更新于 2026.09.29
HTML#语义与文档
先看核心答案读代码示例
理解线索

引用内容与作品名称分开

  1. <blockquote>独立成段的引用内容
  2. <q>行内引用内容
  3. <cite>作品或创作成果的标题

把作者姓名放进 <cite> 不等于标记作品标题;可见署名应直接写在正文。

核心回答

先记住这个答案

引用一整段话用 <blockquote>,在一句话里嵌入短引文用 <q>;<cite> 用于书、文章、电影等作品标题,不是把所有来源信息都包起来的万能标签。<blockquote> 的 cite 属性可写来源 URL,帮助机器识别出处,但浏览器不会自动把这个 URL 或作者显示给读者。要让出处可见,应在引文旁写文字和链接。

  • <blockquote> 放块级长引用
  • <q> 放行内短引用
  • <cite> 标记作品标题
  • cite 属性不自动显示署名

在评论文章里引用原话

写影评时需要引一段原文,再标明它出自哪本书。引文与作品标题是两个不同语义:一段话是引用内容,书名是来源作品名称。

段落引用与可见出处HTML
<figure>
  <blockquote cite="https://example.com/book/chapter-1">
    <p>这是被引用的一段完整文字。</p>
  </blockquote>
  <figcaption>
    出自 <cite>某本书的标题</cite>
  </figcaption>
</figure>

cite 属性里是来源地址,不会自动产生页脚;<figcaption> 把可见出处写出来。<cite> 标记的是作品标题,不是作者姓名。 若只有一句短引文嵌在自己的句子里,用 <q> 更自然。浏览器可能为 <q> 自动添加引号,避免在标记内再手写重复引号。

来源信息要能被读者看到

机器可读的引用 URL 有用,但读者在页面上需要知道谁说的、出自哪里,以及是否能点开原始材料。只写 cite 属性,读者通常看不到这些信息。

不要把自己的总结包成 <blockquote> 来制造缩进。那会把普通段落错误标记为引文;需要视觉缩进时用 CSS。区分元素的关键是内容关系,不是默认样式。

例如引用规范的一段原话,<blockquote cite="https://..."> 可以在标记里记录来源地址,但主流浏览器通常不会把这个属性自动显示成可点击出处。读者需要核对原文时,仍应在引用后面放一个可见的链接,并标明作者或文档名。<cite> 元素表示作品标题,不是随便包住说话人的姓名。若只引用一句短语并嵌在自己的句子里,使用行内的 <q> 更贴合语义。

引用时还要保留原话和自己观点的边界。<blockquote> 内可以放一个或多个段落,但不要把整篇评论都包进去;否则读者和辅助技术会以为连你的解释也是引文。cite 属性是机器可读的来源 URL,不能替代正文中可见的作者和链接。若引用内容经删节或翻译,也应在可见文字里说明,避免读者误以为是逐字原文。

回答前,多想一步

容易答错的地方

把 <cite> 用来包作者姓名
它主要标记被引用作品的标题。作者可作为普通可见文本写在署名里。
以为 cite 属性会自动显示来源
浏览器通常不会渲染该属性值。可见署名和链接需自行写在页面上。
试着用自己的话回答

面试官还会怎么问?

一句话中引用短句怎么标?

用 <q> 包短引文;如果是独立成段的较长引文,用 <blockquote>。

<blockquote> 可以没有 cite 属性吗?

可以;但正式内容仍应尽量提供可见出处,便于读者核对。

想让普通段落缩进能用 <blockquote> 吗?

不该。它表示引用语义,纯视觉缩进应使用 CSS。

从一道题,走向一组知识

把知识连起来

语义与文档

文章卡片用 article,普通内容分区用 section 吗?

文章正文可用 <article> 包围,引用元素只负责标记其中的引文。

语义与文档

header、main、footer 各放什么?页面能有几个 main?

主内容区和页脚的结构语义与引用来源是不同层级。

参考资料

  • MDN 参考文档

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 在评论文章里引用原话
  3. 来源信息要能被读者看到
  4. 容易答错的地方
  5. 面试官还会怎么问
  6. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑