HTML5提供button和input[type="button"]两种按钮实现方式：前者语义强、支持嵌套内容与无障碍，后者兼容性好但仅通过value设文本；二者均支持disabled禁用及JavaScript交互，并需注意CSS样式与可访问性优化。
如果您希望在网页中添加可交互的按钮元素，HTML5 提供了两种主流方式：使用 button 元素 和使用 input 元素的 type="button"。二者在语义、默认行为和可定制性上存在差异。以下是具体实现方法：
一、使用 <button> 元素创建按钮
<button> 是语义化更强的原生按钮标签，支持嵌套内容（如图标、文本、SVG），默认提交行为可控，且无障碍支持更完善。它在表单内外均可独立使用。
1、在 HTML 文件的 body 区域内，输入 <button> 开始标签，中间插入按钮显示文本，再闭合标签，例如：<button>点击我</button>。
2、为按钮添加 type 属性以明确其行为，常用值包括 button（无默认提交）、submit（触发表单提交）、reset（重置表单）；若未声明，默认为 submit。
立即学习“前端免费学习笔记（深入）”；
3、可通过添加 class 或 id 属性配合 CSS 控制样式，例如：<button class="primary-btn">确认操作</button>。
4、在 JavaScript 中可通过 document.querySelector('button') 获取该元素，并绑定 click 事件监听器。
二、使用 <input type="button"> 创建按钮
<input type="button"> 是自闭合表单控件，仅通过 value 属性定义显示文本，不支持嵌套内容，语义性较弱但兼容性极广，尤其适用于需严格适配老旧浏览器的场景。
1、在需要插入按钮的位置，输入 <input type="button" value="按钮文字">，注意该标签无需闭合。
2、若需设置唯一标识以便脚本操作，可添加 id 属性，例如：<input type="button" id="actionBtn" value="执行">。
3、该元素无法直接包含子节点，因此不能内嵌 <img> 或 <span> 等标签来增强视觉表现。
4、与 <button> 类似，可通过 addEventListener('click', handler) 绑定点击响应逻辑。
三、禁用按钮状态的统一控制方式
无论采用哪种按钮类型，均可通过 disabled 属性使其变为不可点击状态，并自动呈现灰化视觉效果，防止重复提交或误操作。
1、在 <button> 标签中直接添加 disabled 属性，例如：<button disabled>已禁用</button>。
2、在 <input type="button"> 中同样添加 disabled，例如：<input type="button" value="暂不可用" disabled>。
3、JavaScript 中可通过 element.disabled = true 或 element.removeAttribute('disabled') 动态切换状态。
4、禁用状态下按钮不会触发 click 事件，且不会被表单序列化提交。
四、按钮样式与可访问性增强实践
原生按钮默认样式简陋且跨浏览器不一致，需通过 CSS 显式定义外观；同时应确保键盘焦点可见、屏幕阅读器能正确识别角色与状态。
1、为 <button> 和 <input type="button"> 统一设置 outline: none 时，必须提供替代焦点样式，例如使用 outline: 2px solid #007bff。
2、为按钮添加 role="button" 属性仅在非标准元素（如 <div>）模拟按钮时需要，原生 button 和 input 已内置正确 ARIA 角色。
3、对图标按钮，应添加 aria-label 属性说明功能，例如：<button aria-label="关闭窗口"><svg>...</svg></button>。
4、避免仅用颜色传达状态（如红色表示删除），须辅以图标或文字提示。
