应根据功能选择标签：触发js用，跳转用；可置于中但须服务于导航，如菜单切换；需注意type属性、flex布局细节、事件绑定时机及可访问性。
导航栏里该用 <button></button> 还是 <a></a>？
功能按钮是否需要跳转，直接决定该用哪个标签。如果点击后只是触发 JS（比如打开搜索框、切换语言、展开菜单），用 <button type="button"></button>；如果目标是跳转到新页面或锚点，必须用 <a href="..."></a> —— 即使它被 CSS 渲染得像按钮，语义和可访问性也更可靠。
<button></button> 放在 <nav></nav> 里会不会破坏语义？
不会，但要注意位置和用途。HTML5 允许 <button></button> 出现在 <nav></nav> 中，前提是它服务于导航上下文：比如“切换菜单”“搜索”“登录”这类操作型入口。但别把纯表单提交按钮（如“提交订单”）塞进主导航栏——它不属于导航逻辑，应放在表单容器内或页面其他区域。
- ✅ 合理：带
aria-expanded的汉堡菜单按钮、语言切换<button></button> - ❌ 不合理：购物车结算按钮、注册表单的
submit按钮 - ⚠️ 注意：
<button></button>必须有明确的type属性，省略时默认为submit，可能意外触发表单提交
多个功能按钮横向排列时常见布局陷阱
用 Flex 布局最稳妥，但容易忽略三项细节：对齐方式、键盘焦点顺序、移动端缩放。
- 别只靠
margin控制间距，优先用gap—— 它自动处理首尾无额外空白的问题 - 确保所有按钮都可通过
Tab键聚焦，且focus样式可见（例如加outline或自定义高亮） - 小屏幕下，
flex-wrap: wrap可能导致按钮换行错位，建议配合min-width: fit-content或媒体查询限制最小宽度 - 若按钮含图标+文字，用
white-space: nowrap防止文字折行破坏布局
为什么有些功能按钮点击没反应？
最常踩的坑不是 JS 写错，而是 DOM 结构或事件绑定方式不对。
- 把
onclick直接写在<img>或文字节点上，而父级<button></button>没包裹完整内容 —— 点击空白处就失效 - 用
document.querySelector绑定事件，但脚本执行早于 DOM 加载，应确保在DOMContentLoaded后执行，或把<script></script>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
