最稳妥的收藏夹列表HTML结构是<ul>+<li>，语义清晰、无障碍友好、样式复用性强；每个<li>须含唯一data-id、带href的<a>标签及title属性，禁用div或section替代，动态渲染时应清空内容并用事件委托绑定交互。
收藏夹列表用什么 HTML 结构最稳妥
直接用 <ul> + <li>，别套 <div> 或自定义标签。语义清晰、屏幕阅读器友好、CSS 选择和样式复用也最直接。
常见错误是把每个收藏项写成独立的 <section> 或一堆 <div class="item"> —— 这会让列表失去语义层级，键盘导航时无法被识别为可遍历列表，也增加 CSS 写 li:last-child 这类逻辑的难度。
- 每个收藏项必须包裹在
<li>内，不能只用<a>平铺 - 如果需要图标或操作按钮（如删除、编辑），放
<li>内部，不要提升到<ul>外层 - 避免给
<ul>设role="list"：原生<ul>已自带该 role，重复声明可能干扰部分读屏软件
收藏项里该放哪些必要信息和属性
一个最小可用的收藏项至少包含标题、跳转链接、唯一标识。不建议省略 href 或用 # 占位——这会导致空链接行为不可预测，且影响 SEO 和爬虫识别。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<li data-id="12345"> <a href="/article/abc" title="HTML收藏夹列表结构">HTML收藏夹列表结构</a> </li>
-
data-id必须有，用于 JS 操作（如删除、排序）；别依赖 DOM 位置索引，容易错位 -
title属性建议加上，鼠标悬停提示更明确，对低视力用户也有辅助作用 - 如果收藏的是外部链接，
href必须是完整 URL，并加rel="noopener noreferrer" - 避免在
<a>里嵌套<button>或其他交互元素，会触发双重焦点和点击冲突
动态渲染收藏夹时怎么避免重复 ID 和内存泄漏
JS 拼接字符串插入 <ul> 是最快但最危险的做法：容易漏转义、ID 冲突、事件绑定残留。推荐用 document.createElement 或 template 元素。
- 每次渲染前清空
<ul>内容，用innerHTML = ""或replaceChildren()（注意 IE 不支持后者） - 生成每个
<li>时，确保data-id来自后端返回的唯一字段，不要用数组下标当 ID - 绑定事件别写在循环里反复
addEventListener，改用事件委托：监听<ul>的click，再用event.target.closest("li")判断来源 - 如果用了第三方库（如 Vue/React），确认收藏数据变更后组件确实重新渲染，而不是仅更新了 JS 对象却没触发视图更新
移动端收藏夹列表的点击区域和可访问性要点
小屏幕下，<a> 文字太小、间距太窄，会导致误点或点击失败。这不是 UI 美化问题，而是基础可用性门槛。
- 给
<li>设置padding（至少 16px 垂直），让整个条目可点，不只是文字区域 - 移除
<a>的默认text-decoration: underline，改用背景色或边框区分状态，但保留:focus-visible样式供键盘用户识别 - 避免用
ontouchstart手动阻止默认行为——现代浏览器对<a>的 touch 响应已足够可靠，额外拦截反而破坏滚动惯性 - 如果收藏项支持长按菜单（如“移出收藏”），需同时提供键盘可访问路径（例如右键菜单对应
contextmenu事件，但也要支持Shift+F10）
data-id 的一致性与事件委托的边界处理——后端返回 ID 类型（字符串/数字）和前端 JS 比较时类型不匹配，或者委托监听范围设得太宽（比如监听 body），都会导致点击失效或误操作。 
