cite标签应在blockquote外部紧邻位置使用，而非其内部直接子元素；正确结构是用figure包裹blockquote和figcaption，后者包含cite标明来源，同时blockquote的cite属性提供URL。
blockquote 标签用于标记一段来自外部的引用内容，而 cite 标签则专门用于标明引用的来源（如作者、作品名、网址等）。两者配合使用，能清晰表达引用关系，符合HTML语义化规范，也利于SEO和辅助技术识别。
正确嵌套结构：cite 放在 blockquote 内部或外部？
根据 HTML5 规范，cite 不应作为 blockquote 的直接子元素放在其内部（除非是引用内容中自然出现的书名/作品名），而应在 blockquote 外部、紧邻位置使用，用来说明“这段话是谁说的”或“出自哪里”。常见合规写法如下：
- 引用内容用
<blockquote>包裹 - 引用来源用独立的
<cite>元素放在<blockquote>后（或前），并建议用<footer>或<figcaption>等语义容器包裹以增强结构 - 若需链接到原始出处，可将
<a>套在<cite>外，但不要把<cite>直接写成<cite><a>...</a></cite>—— 因为<cite>本身不承载超链接语义
标准证言模块 HTML 示例
以下是一个语义清晰、可访问性强的客户证言模块写法：
<blockquote cite="https://example.com/testimonial/123">
这款工具极大提升了我们的协作效率，上线两周就减少了30%的重复沟通。
</blockquote>
<figcaption>
<cite>张明，产品总监，XYZ科技有限公司</cite>
</figcaption>
</figure>
说明：
– blockquote 的 cite 属性（非 <cite> 标签）用于提供引用的完整URL，供机器解析，用户不可见；
– <cite> 标签出现在 <figcaption> 中，以人类可读方式标明说话人及身份；
– 使用 <figure> + <figcaption> 组合，明确表示这是一个独立的引用单元，语义更完整。
样式与可访问性提示
默认情况下，浏览器会对 <blockquote> 添加左右缩进，<cite> 默认为斜体。但不应依赖默认样式传达语义：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 明确设置引号（如
quotes属性或伪元素::before/::after）增强视觉识别 - 确保
<cite>中的姓名和职位对屏幕阅读器可朗读（避免仅靠颜色或图标区分） - 若证言含头像或公司Logo，用
<img>并配alt描述，不要让图像替代文字信息
常见错误避免
以下写法不符合规范或削弱语义：
- 把
<cite>当作“加粗”或“强调”标签使用（它不是<em>或<strong>） - 在
<blockquote>内部直接写<cite>作者名</cite>作为署名（这会让辅助技术误判为“引用内容里提到了作者名”，而非“这是引用的来源”） - 省略
<figure>或其他包裹结构，让<blockquote>和<cite>孤立并列，失去上下文关联 - 用
<div>+ class 模拟引用效果（放弃语义，不利于SEO和无障碍）
