blockquote 的 cite 属性仅存储可访问的完整 url 且不渲染，署名必须用 footer 或 figcaption 手动添加；cite 元素只包裹作品标题，作者、年份等需分层标记，孤立使用 cite 无效。
blockquote 的 cite 属性只存 URL，不显示作者或书名
写了 cite="https://example.com/paper"，页面上绝不会自动冒出“张三，《语义化实践》，2024”——这是最常被当真的一件事。该属性纯属元数据：浏览器不渲染、屏幕阅读器支持不稳定、SEO 几乎不识别。它唯一合法值是可访问的完整 URL（不能是 cite="《HTML指南》" 或 cite="page12"），且仅允许出现在 blockquote、q、ins、del 上。
- 验证失败常见于：
<p cite="王教授讲座">…</p>（p不支持cite属性） - 即使 DOM 中能读到
blockquote.cite，也不代表用户看得见；别把它当“署名快捷键” - URL 应指向原始出处页，而非首页或 404 页面，否则对爬虫和语义解析无意义
真正显示引用来源，必须用 footer 或 figcaption 手动写
blockquote 内部末尾加 <footer></footer> 是目前最可靠、语义最清晰的做法。它不是装饰，而是告诉浏览器和辅助技术：“这部分文字就是这段引文的上下文归属”。
- 正确结构：
<blockquote cite="https://example.com/ref"> <p>"语义 HTML 是基础。"</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <footer>— <cite>前端可访问性模式</cite>, 李四, 2024</footer> </blockquote> -
cite元素只能包裹作品标题（如<cite>设计模式</cite>），不能包作者、年份、出版社、ISBN 或 URL - 作者名、机构、时间等用普通文本或
strong，别塞进cite里——否则屏幕阅读器会误读为“作品名叫‘李四’” - 移动端建议对
footer设置text-align: end，右对齐更符合署名习惯
单独用 cite 标签没有引用语义，必须嵌在上下文中
<cite>百年孤独</cite> 单独一行，等于没标——它既不是引用动作，也不说明谁在引、为何而引。HTML5 明确要求 cite 必须出现在引用行为中，比如 blockquote、q 内部，或描述性句子如 <p>正如<cite>设计模式</cite>所指出的…</p>。
- 错误示例：
<div><cite>三体</cite></div>（孤立存在，无父级引用结构） - 中文场景需注意：
cite默认斜体，但中文斜体无辨识度，建议 CSS 重置为正常字体 + 适当 color 或 border-left 区分 - 若引用含 DOI 或 ISBN，应放在
footer普通文本中，而非塞进cite或cite属性里
学术场景下，别把整条参考文献塞进一个标签
一条规范参考文献包含作者、年份、标题、出版信息、URL 等多个维度，而 cite 只负责其中“标题”这一项。其他字段必须拆解处理：作者用普通文本或 span，年份用 <time datetime="2024">2024</time>，URL 用 a 标签并配 aria-label 明确用途。
- 错误做法：
<cite>WCAG 2.2, W3C, 2023, https://w3.org/TR/WCAG22/</cite> - 正确分层：
<cite>Web Content Accessibility Guidelines</cite>, W3C, <time datetime="2023">2023</time>. @#@#@#@#@#@#@#@#@#@0 - 如果引用来自微博、知乎等平台，正文归
blockquote，用户名、平台名、发布时间分别用span、strong、time，别堆在footer里糊成一团
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
