标签仅包裹作品标题，不可包含作者、年份等元数据；必须置于引用上下文中使用；参考文献中应分层处理，仅标题用；需配合css与语义结构保障可访问性。
标签只负责包裹作品标题本身，不是整条参考文献的容器，也不是作者、年份或出版社的占位符。它语义明确：仅用于书名、电影名、文章标题等被引用对象的正式名称。
只包标题，不混元数据
正确做法是让内容严格限定为可独立识别的作品名称。中文如平凡的世界、英文如The Structure of Scientific Revolutions。一旦加入“卢梭著”“商务印书馆2017年”等信息，就破坏了语义纯净性，辅助技术会误读，SEO 也可能降权。
- ✅ 正确：
<p>我重读了<cite>设计模式</cite>中关于抽象工厂的部分。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - ❌ 错误：
<p><cite>设计模式, Gamma 等著, Addison-Wesley, 1994</cite></p>
必须配合引用上下文使用
单独出现的缺乏语义支撑。HTML5 规范强调它需出现在引用行为中，比如、
或描述性句子内。脱离上下文，屏幕阅读器无法判断这是“被引用的作品”，而可能仅播报“引用”二字，造成干扰。
- ✅ 正确：
<blockquote cite="https://example.com/book"> <p>"对象应隐藏其内部细节。"</p> <footer>— <cite>设计模式</cite>, Gamma et al.</footer> </blockquote> - ❌ 错误：
<cite>设计模式</cite>（孤立存在，无父级引用结构）
参考文献列表中要分层处理
整条参考文献不能塞进一个里。应使用或
作为容器，每条用
- 用
- 管理编号逻辑，避免手动写“[1]”“[2]”
- 每项内作者名用或普通文本，年份用，URL用，仅标题套
- 示例：
<li> <cite>Web Content Accessibility Guidelines</cite>, W3C, <time datetime="2023">2023</time>. <a href="https://www.w3.org/TR/WCAG22/">https://www.w3.org/TR/WCAG22/</a> </li>
注意样式与可访问性细节
浏览器对默认不加斜体（尤其在中文环境），且不提供自动链接或朗读优化。若需视觉区分，应主动设置 CSS；若需无障碍支持，可配合aria-label说明用途，但不可替代语义结构。
- 推荐 CSS：
cite { font-style: normal; } /* 中文避免斜体干扰可读性 */ - 不建议：
<cite aria-label="引用自《三体》">三体</cite>——语义已明确，额外 label 反而冗余 - 更关键的是确保
的cite属性值为真实可访问 URL，而非书名或 ISBN
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
