按钮模块应通过fetch+domparser动态加载外部html文件实现复用，用fieldset+legend保证语义正确，a标签替代button处理跳转并校验url协议，css需命名空间隔离、分层设圆角，加载后须手动管理焦点。
按钮模块怎么从HTML文件里单独抽出来？
直接把按钮代码写死在每个页面里，改一个样式就得全站搜替换——这不是模块化，是埋雷。真正可复用的按钮模块，必须脱离主文档、独立存在、按需加载。
最轻量可行的方案是用 fetch + DOMParser 动态加载外部 HTML 文件：
- 把按钮结构存为
button-primary.html，内容只保留按钮本身：<button type="button" class="btn btn-primary">确认</button>，不要或 - 主页面中预留容器：
<div id="cta-button"></div> - JS 里用
fetch('button-primary.html').then(r => r.text()).then(html => { const frag = new DOMParser().parseFromString(html, 'text/html'); document.getElementById('cta-button').appendChild(frag.body.firstChild); }) - 注意：如果按钮含内联
<script></script>，innerHTML不会执行，而DOMParser解析后也不会自动运行脚本——得手动提取并eval或创建script节点（慎用eval）
多个按钮怎么拼成一组且保持语义正确？
用 div 包着一堆 <button></button> 看似简单，但会丢失“这是一组相关操作”的语义，屏幕阅读器无法识别逻辑关系，键盘导航也容易跳过中间项。
正确做法是用 <fieldset></fieldset> + <legend></legend>：
-
<fieldset></fieldset>必须包裹全部按钮，<legend></legend>是第一个子元素，文字描述该组用途，例如<legend>操作选项</legend> - 按钮本身用
<button type="button"></button>，别用@#@#@#@#@#@#@#@#@#@0，不用javascript:协议 - 样式上通过 CSS 让
a看起来像按钮：a.btn { display: inline-block; padding: 8px 16px; text-decoration: none; } - 如果业务强制要求用
<button></button>（比如要触发声控或无障碍焦点管理），那就用button.addEventListener('click', () => window.location.href = url)，而不是onclick属性 - URL 必须校验：开头只能是
https://、http://或相对路径，过滤掉javascript:、data:、vbscript:等危险协议
按钮模块拼接后样式错乱怎么办？
从外部文件加载的按钮，经常出现圆角不统一、边框重叠、禁用态失效等问题——根源不是代码写错，而是 CSS 作用域没隔离。
关键控制点只有三个：
- 按钮类名必须全局唯一或带命名空间，比如
my-btn-primary，避免和主页面已有.btn冲突 - 如果用 Flex 布局拼按钮组，
gap比margin更可靠；但要注意gap在老版 Safari 需加-webkit-gap - 圆角必须分层设置：首按钮设
border-top-left-radius和border-bottom-left-radius，尾按钮设右圆角，中间按钮设border-radius: 0，同时确保border宽度一致、无margin - 加载完成后，若按钮内含 SVG 图标或字体图标，可能因字体未就绪导致尺寸抖动——给容器设
min-height或用font-display: optional控制字体加载策略
button.focus() 或设 tabindex="0"，否则无障碍就断了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
