HTML无原生参考文献标签，应使用语义化组合：用<section>包裹，<h2>设标题，每条文献置于<ol>（需顺序引用）或<ul>（无序推荐）的<li>中；标题和出版物名用<cite>，作者、标识符用<span class="...">，URL必须用包裹并添加rel和aria-label。
HTML里没有原生参考文献标签，别硬套<cite>或<blockquote>
HTML规范本身不定义参考文献的语义化标签，<cite>只表示作品标题（如书名、文章名），不是整条文献条目；<blockquote>是引用内容，不是出处信息。强行用它们模拟参考文献列表，会导致语义错误、屏幕阅读器误读、SEO效果差。
正确做法是用标准语义组合：<section>包裹整体，<h2>标标题，每条用<li>放在<ol>或<ul>中——编号与否取决于是否需顺序引用（如论文脚注对应编号，网页底部通用参考可不编号）。
参考文献列表必须用<ol>还是<ul>？看引用逻辑
如果文献在正文中用数字上标（如“已有研究[1]”），且序号与列表严格一一对应，必须用<ol>——浏览器和辅助技术会自动关联序号，支持跳转和朗读。
如果只是展示推荐读物、延伸资料，无正文锚点，用<ul>更合理，避免误导用户存在强制顺序。
立即学习“前端免费学习笔记（深入）”；
-
<ol>内每项<li>开头不手动写“[1]”“[2]”，让CSS或浏览器控制编号显示 - 若需自定义编号格式（如“[1]”“[2]”带方括号），用CSS
ol { list-style-type: none; }+::before伪元素生成，而非硬编码文本 - 避免用
<div>模拟列表——失去语义、键盘导航断裂、无法被AT（辅助技术）识别为列表结构
怎么让参考文献条目既可读又可访问？关键在结构和链接
一条合格的参考文献至少包含作者、标题、来源（期刊/网站）、年份、URL（如有）。纯文本堆砌不可取，必须分层标记：
- 作者名用
<span class="author">（无原生标签，需靠class明确角色） - 标题用
<cite>——这是它唯一合规用途 - 出版物名称（如《Nature》《MDN Web Docs》）也用
<cite>，但加class="publication"区分层级 - URL必须用
<a href="...">包裹，且添加rel="noopener noreferrer"（安全必需）和aria-label说明链接目的（如aria-label="Open PDF of this paper"） - DOI、PMID等标识符单独包裹在
<span class="identifier">里，方便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等），否则仍要先清洗。
