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