html无原生参考文献标签，应使用语义化组合：用包裹，设标题，每条文献置于（需顺序引用）或（无序推荐）的中；标题和出版物名用，作者、标识符用，url必须用包裹并添加rel和aria-label。
HTML里没有原生参考文献标签，别硬套<cite></cite>或<blockquote></blockquote>
HTML规范本身不定义参考文献的语义化标签，<cite></cite>只表示作品标题（如书名、文章名），不是整条文献条目；<blockquote></blockquote>是引用内容，不是出处信息。强行用它们模拟参考文献列表，会导致语义错误、屏幕阅读器误读、SEO效果差。
正确做法是用标准语义组合：<section></section>包裹整体，<h2></h2>标标题，每条用<li>放在<ol></ol>或<ul></ul>中——编号与否取决于是否需顺序引用（如论文脚注对应编号，网页底部通用参考可不编号）。
参考文献列表必须用<ol></ol>还是<ul></ul>？看引用逻辑
如果文献在正文中用数字上标（如“已有研究[1]”），且序号与列表严格一一对应，必须用<ol></ol>——浏览器和辅助技术会自动关联序号，支持跳转和朗读。
如果只是展示推荐读物、延伸资料，无正文锚点，用<ul></ul>更合理，避免误导用户存在强制顺序。
-
<ol></ol>内每项<li>开头不手动写“[1]”“[2]”，让CSS或浏览器控制编号显示 - 若需自定义编号格式（如“[1]”“[2]”带方括号），用CSS
ol { list-style-type: none; }+::before伪元素生成，而非硬编码文本 - 避免用
<div>模拟列表——失去语义、键盘导航断裂、无法被AT（辅助技术）识别为列表结构 <h3>怎么让参考文献条目既可读又可访问？关键在结构和链接</h3> <p>一条合格的参考文献至少包含作者、标题、来源（期刊/网站）、年份、URL（如有）。纯文本堆砌不可取，必须分层标记：</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> <ul> <li>作者名用<code><span class="author"></span>（无原生标签，需靠class明确角色） - 标题用
<cite></cite>——这是它唯一合规用途 - 出版物名称（如《Nature》《MDN Web Docs》）也用
<cite></cite>，但加class="publication"区分层级 - URL必须用
<a href="..."></a>包裹，且添加rel="noopener noreferrer"（安全必需）和aria-label说明链接目的（如aria-label="Open PDF of this paper"） - DOI、PMID等标识符单独包裹在
<span class="identifier"></span>里，方便CSS高亮或JS提取
动态插入参考文献时，innerHTML容易破坏可访问性
用JavaScript拼接字符串再赋值给innerHTML，极易漏掉aria-属性、跳过语义标签、忽略空格和标点处理（如中文顿号后缺空格影响朗读停顿）。
更稳妥的做法是创建元素再填充内容：
const li = document.createElement('li');
li.innerHTML = `
<span class="author">Smith, J.</span> (2023).
<cite>A Guide to HTML Semantics</cite>.
<cite class="publication">Web Standards Review</cite>,
<a href="https://www.php.cn/link/ee7b293e486f3334d7e758ffc822d40e" rel="noopener noreferrer" aria-label="Read full article">https://www.php.cn/link/ee7b293e486f3334d7e758ffc822d40e</a>.
`;
referenceList.appendChild(li);
注意：即使动态生成，也要确保每条<li>内部结构完整，不能把整个字符串当纯文本塞进去。
复杂场景（如BibTeX导入、多格式导出）建议用专门库如citeproc-js，它按CSL样式规则渲染，比手写模板可靠得多——但前提是你的数据源有标准字段（author/title/year等），否则仍要先清洗。
