cite属性仅存URL且不渲染，必须用footer手动添加可见出处；blockquote需包含块级元素，q适用于嵌入式短引用。

blockquote 本身不显示来源文字，cite 属性只存 URL、不渲染，强行指望它“自动显示出处”会白忙活。

为什么写了 cite 属性却看不到作者或书名

cite 是纯语义属性，值必须是合法 URL（如 cite="https://example.com/article"），浏览器完全不把它当文本内容处理——既不插入 DOM，也不参与渲染。屏幕阅读器可能读出这个 URL，但用户在页面上永远看不见“张三《论语新解》”这类信息。

• 常见错误：写成 cite="张三《论语新解》" 或 cite="《论语新解》" —— 这违反 HTML 规范，属于无效值
• 真实用途：供爬虫、SEO 工具识别原始出处；DOM 中可通过 blockquote.cite 读取或修改
• 如果 URL 返回 404 或跳转到首页，cite 就失去语义价值

怎么让引用来源真正显示在页面上

必须手动添加可见结构，footer 是最推荐的方式，语义清晰且兼容性好。

• 用 <footer> 包裹作者、作品名、时间等，放在 <blockquote> 内部末尾（不是外面）
• 别用 <small> 或 <cite> 单独撑场面：<cite> 只能标作品标题（如《史记》），不能标人名或网址；<small> 是视觉降级，无引用语义
• 多段引用时，每段都得套 <p>，不能把几段文字直接塞进 <blockquote> —— 否则 HTML 验证失败，CSS 也难精准控制行距和缩进

<blockquote>
  <p>学而时习之，不亦说乎？</p>
  <p>有朋自远方来，不亦乐乎？</p>
  <footer>——《论语·学而》</footer>
</blockquote>

blockquote 和 q 到底该选哪个

区分核心是「是否独立成段」，不是「字数多少」。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• <blockquote>：内容需换行、缩进，语义上脱离原文上下文（比如摘录整段评论、论文节选）
• <q>：嵌在普通段落中，浏览器自动加引号（受 CSS quotes 控制），适合一句话引用，如“用户体验应优先于功能堆砌”
• 别在 <q> 里套 <blockquote>；但 <blockquote> 里可以嵌 <q>（比如长引文中再引一句别人的话）
• <q> 的 cite 属性同样不显示，用法与 <blockquote> 一致

容易被忽略的兼容性和验证细节

XHTML 或严格模式下，<blockquote> 必须包含块级元素，裸文本会触发验证错误。

• 错误写法：<blockquote>这里是一段引用</blockquote>（无子块级标签）
• 正确写法：<blockquote><p>这里是一段引用</p></blockquote>
• 所有主流浏览器支持 <blockquote>，但默认样式差异大：Chrome/Safari 缩进靠 margin，Firefox 还可能加斜体，建议重置 margin 和 font-style 再统一设计
• cite 属性在任何浏览器里都没有视觉表现，别花时间调试它的颜色或字体

最常出问题的地方，是把 cite 当成“显示用字段”去填作者名，又忘了补 <footer>；结果页面空着一块，审查元素才发现 DOM 里根本没那段文字。