让整个li元素可点击的正确做法是将内部a标签设为display:block或inline-block并用padding撑开热区，同时确保href属性、cursor:pointer、焦点样式及语义正确。
让整个 li 元素可点击，而不是只点文字
默认 li 是块级容器，但内部的 a 若仍是行内元素，点击热区就只包文字。真正生效的做法是：把 a 设为 display: block 或 inline-block，并用 padding 撑开可点击范围。
常见错误是给 li 加 onclick 或监听事件，却忘了加 cursor: pointer 和焦点样式（:focus），导致键盘用户无法感知可交互性。
-
a必须带href属性（哪怕只是href="#"），否则语义缺失、屏幕阅读器不识别为链接 - 避免对
a使用margin来“制造点击空间”——它不参与点击热区，只会留白不可点 - 若
li本身需悬停反馈（比如整行变色），直接给a写:hover即可，别在li上写，否则鼠标移入空白处不触发
ul 里嵌套 button 还是 a？关键看语义和跳转行为
如果点击后要跳转页面或锚点，必须用 a；如果只是触发 JS 行为（如展开子菜单、提交表单），优先用 button。
用 button 的好处是原生支持空格/回车触发、自动获得焦点管理、无需手动处理 preventDefault()；缺点是不能直接 href 跳转，得靠 JS 模拟。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 若用
button，记得加type="button"，防止表单意外提交 - 若用
a做 JS 触发，href应设为javascript:void(0)或#，但后者需在 JS 中event.preventDefault()，否则页面跳到顶部 - 无论哪种，都要补上
role="button"（仅当语义被覆盖时）和tabindex="0"（若原生不可聚焦）
移动端列表项点击区域太小，怎么安全扩大？
移动端最小可点击区域建议 ≥44×44px，但直接放大字体或 padding 可能破坏布局。更稳妥的方式是：保持视觉尺寸不变，用 padding 向内扩展热区，并确保父容器不裁剪溢出。
容易被忽略的一点：iOS Safari 对 :active 伪类有 300ms 延迟，且默认禁用非 a/button 元素的点击反馈。所以不要依赖 div + onclick 模拟按钮。
- 给
a或button设置min-height: 44px和padding，比单纯调大font-size更可靠 - 避免用
transform: scale()扩大点击区——它只缩放渲染，不改变实际热区坐标 - 测试时真机连 Chrome DevTools 的 “Device Toolbar”，别只靠响应式模拟器
用 CSS 实现整行高亮 + 点击态，但别踩这些坑
很多人想让选中项整行背景变色，结果 hover 和 active 效果打架，或者点击后状态不保留。核心在于：hover 是临时态，active 是瞬时态，而“已选中”需要 JS 控制 class。
例如下拉菜单列表，点击某项后应保持高亮，直到下次点击其他项。这时不能只靠伪类，得用 JS 切换 aria-current="true" 和自定义 class。
- 别用
!important强行覆盖:hover，会导致键盘聚焦态（:focus）被压制 -
li上设outline: none前，务必先提供替代焦点样式（如box-shadow），否则 WCAG 2.4.7 失败 - 若列表含图标（如 SVG），确保其
pointer-events: none，否则可能拦截点击事件
li，本质上是个交互组件，不是装饰容器。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
