应优先用语义化标签：导航用a，JS行为用button，复选用label包裹；若必须让li可点击，需加tabindex="0"、role="button"，并监听click和keydown（Enter/Space）。
让 li 元素本身可点击，而不是只靠里面文字或链接
直接给 li 绑定 onclick 或 addEventListener 是最直白的做法，但要注意：它默认不是可聚焦、不可键盘操作、也不被屏幕阅读器识别为交互元素。如果只是跳转页面，应该优先用 a 标签；如果要执行 JS 逻辑（比如展开子菜单、标记已读），才考虑让 li 可点击。
实操建议：
- 必须加
tabindex="0"，否则键盘用户无法用 Tab 进入该li - 加上
role="button"，告诉辅助技术这是一个按钮式交互区域 - 监听
click和keydown（捕获 Enter/Space），确保键盘操作等效 - 避免仅靠 CSS 的
cursor: pointer或:hover暗示可点击——这不解决可访问性问题
用 a 标签包裹整个 li 内容，但保持语义正确
很多人会写 <li><a href="...">内容</a></li>，这是合法且推荐的，前提是这个列表项本质就是导航项。但注意：不能把 a 当作“万能点击容器”滥用——比如在表单列表里用它触发 JS 提交，就违背了语义。
关键点：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
a必须有合法href值（如href="#"或href="javascript:void(0)"都是反模式；应使用真实 URL 或省略 href 改用按钮） - 若只是 JS 行为，改用
<button type="button">包裹内容更合适，再用 CSS 去掉默认样式 - 不要为了“撑开点击区”给
a设display: block后又用margin控制间距——padding才扩展热区，margin不可点击
点击整行 li 触发复选框/单选框时，别动 li，动 label
常见需求是：列表每项带一个复选框，希望点击文字、空白甚至整行都能切换状态。这时候不该给 li 加事件，而应把 input 和描述文本一起包进 label 里。
这样做的好处：
- 天然支持键盘聚焦（Tab 到
label就能空格切换） - 移动端热区自动扩大，不用额外写 JS
- 无需
id/for属性，结构更轻量：<label><input type="checkbox">通知我更新</label> - 如果
input必须和文本分离（比如响应式布局），再用for显式绑定，但务必保证id全局唯一
CSS 让 li 看起来可点击，但别掩盖行为缺陷
视觉反馈很重要，但不能替代语义和行为。以下样式组合能让 li 更像按钮，但前提是你已经处理好了可访问性基础：
- 设
cursor: pointer（仅作为视觉提示，非功能必需） - 用
padding而非margin扩展点击热区 - 添加
:hover和:focus-within状态样式，确保焦点可见 - 避免
pointer-events: none或opacity: 0.5等禁用交互的样式作用于父级 - 如果
li里有a或button，确保它们没被z-index或position错位遮挡
最容易被忽略的是：当 li 包含多个可交互子元素（比如一个 a + 一个 button 删除图标），点击区域重叠时，事件冒泡和 stopPropagation() 的使用时机必须精确——否则点删除图标可能同时触发了整行跳转。
