HTML5规范要求<cite>必须嵌套在<blockquote>的<footer>内且仅用于作品标题。错误嵌套会破坏语义、影响无障碍访问与SEO；中文需重置<cite>斜体样式，避免语义误用。
blockquote里放不是标准用法
直接在<blockquote>标签内部写<cite>是常见误解。HTML5规范明确要求：<cite>不能作为<blockquote>的直接子元素——除非它被包裹在<footer>里。浏览器虽不会报错，但语义失效，无障碍工具可能跳过或误读。
正确结构：必须用<footer>包裹<cite>
<footer>是<blockquote>内唯一被允许承载署名信息的语义容器，<cite>只能出现在其中，且仅用于作品标题（不是作者名、网址或说明文字）。
-
<blockquote cite="https://example.com">里必须先有<p>等流内容，再以<footer>收尾 -
<footer>中可写作者/机构名（不加标签），<cite>只包书名、文章名等标题 - 示例：
<blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"> <p>The <code><blockquote></code> element represents content that is quoted from another source.</p> <footer>— WHATWG, <cite>HTML Living Standard</cite></footer> </blockquote>
常见错误写法及后果
这些结构看似能渲染，但破坏语义、影响可访问性和SEO：
-
<blockquote><cite>《前端手记》</cite><p>引文内容</p></blockquote>——<cite>位置非法，部分屏幕阅读器忽略 -
<blockquote><p>引文</p><cite>作者，《书名》</cite></blockquote>——<cite>混入作者和标点，违反HTML5对的定义 -
<blockquote><footer><cite>https://example.com</cite></footer></blockquote>——<cite>里塞URL，不是作品标题，语义错位
中文场景下<cite>样式需重置
浏览器默认给<cite>加font-style: italic，但中文斜体几乎不可辨，容易被当成普通强调。实际项目中应主动重置：
立即学习“前端免费学习笔记（深入）”；
- 加CSS：
cite { font-style: normal; }，再用引号、颜色或小字号区分 - 避免依赖斜体传递语义，尤其在多语言混合排版时
- 若需视觉强调，可用
<span class="citation-title">替代，但会丢失原生语义
<cite>——它只认作品标题，不认作者、出处链接、出版信息，也不管你是不是“引用了整篇论文”。这个边界模糊的地方，最容易被当成装饰性标签滥用。 
