必须用+或+标注引用来源，仅限作品标题且须紧贴引用内容，用于完整出处信息并须为直接子元素。
HTML 里不能靠 <b></b>、<i></i> 或 style 属性“格式化”出合法、语义正确的引用来源；必须用专门的语义标签组合，否则对屏幕阅读器、SEO、文档结构都是无效的。
用 <blockquote></blockquote> + <cite></cite> 标注短引用与作品名
<cite></cite> 只能标作品标题（书名、文章名、视频名等），不是作者名或网址。它必须紧贴引用内容，通常放在 <blockquote></blockquote> 内部末尾或紧跟的 <footer></footer> 里：
<blockquote> “Web 标准不是由浏览器决定的，而是由人决定的。” <footer><cite>《Web标准之道》</cite></footer> </blockquote>
-
<cite></cite>里不能写作者：XXX或https://example.com，那是错误用法 - 如果引用来自网页，
<cite></cite>仍只写标题，如<cite>MDN Web Docs: blockquote</cite> - 浏览器默认会把
<cite></cite>渲染为斜体，但这是表现，不是语义——别用<i></i>替代它
用 <figure></figure> + <figcaption></figcaption> 呈现完整来源说明
当需要显示作者、出版社、年份、URL 等详细信息时，<figure></figure> 是更合适的选择：<figcaption></figcaption> 支持多行、混合文本，且语义上明确表示“该块内容的说明”：
<figure><blockquote>
“渐进增强不是技术妥协，而是面向用户的价值优先。”
</blockquote>
<figcaption>
摘自 Jeremy Keith《Resilient Web Design》第2章，
<a href="https://www.php.cn/link/571545ff7272f7c39090a5f8108a4b16" rel="noopener noreferrer">resilientwebdesign.com</a>，2016年
</figcaption></figure>
-
<figcaption></figcaption>必须是<figure></figure>的**直接子元素**，且只能有一个 - 里面可以嵌
<a></a>，但记得加rel="noopener noreferrer"防安全风险 - 若引用附带截图或代码片段，
<figure></figure>更自然——它本就是为“独立内容单元”设计的
避免用 <u></u>、<span></span> 或纯 CSS 模拟引用来源
有人试图用 <u>来源：《XXX》</u> 或 <span style="font-style:italic"></span> 来“看起来像引用”，这在语义和可访问性上完全失效：
-
<u></u>在 HTML5 中已弃用，且现代浏览器默认把它关联到链接样式，易造成混淆 - 屏幕阅读器不会把
<span></span>或内联样式识别为“出处”，盲人用户根本听不到来源信息 - 搜索引擎无法提取这类伪标记中的结构化数据，影响内容被正确索引
- 如果未来要导出为 EPUB 或 PDF，只有语义标签才能被正确转换为引用样式
最常被忽略的一点：引用来源不是装饰，是文档结构的一部分。写完 <blockquote></blockquote> 后，下意识补一句 <cite></cite> 或包一层 <figure></figure>，比事后加 class 或 JS 补救要可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
