应优先使用语义化button元素；其次可选input type="button"；表单内用type="submit"/"reset"；均需用addEventListener绑定点击事件，并确保键盘可访问性。
如果您希望在HTML5页面中创建具有交互功能的按钮，则需要根据语义化、可访问性及实际用途选择合适的标签。以下是几种标准且兼容性良好的写法：
一、使用button元素创建语义化按钮
button元素是专门用于定义可点击按钮的语义化标签，支持内嵌内容（如图标、文本组合），默认为submit类型，但可通过type属性明确指定行为。
1、在HTML文档的body内添加<button>标签，并设置type属性为"button"以避免表单提交默认行为。
2、在button标签内部直接写入按钮显示文本，例如“提交”或“取消”。
立即学习“前端免费学习笔记（深入）”；
3、为提升可访问性，可添加aria-label属性说明按钮功能，尤其当按钮仅含图标时。
4、通过class或id属性绑定CSS样式或JavaScript事件监听器。
二、使用input type="button"创建简易按钮
input元素的type="button"形式简洁，不包含子内容，适用于纯文本触发按钮，兼容所有HTML5浏览器，但语义化程度低于button元素。
1、插入<input>标签，设置type="button"。
2、通过value属性指定按钮上显示的文字内容。
3、添加id或class属性以便于CSS控制外观或JS绑定点击事件。
4、注意：该写法无法在标签内部插入HTML元素（如<img>或<span>）。
三、使用input type="submit"或type="reset"实现表单专用按钮
当按钮作用于form容器内且需触发表单提交或重置操作时，应优先选用具备明确语义的submit和reset类型，浏览器会自动赋予相应行为。
1、确保button或input位于<form>标签内部。
2、将type设为"submit"，点击后触发表单默认提交动作；设为"reset"则清空表单字段。
3、可省略onclick事件，除非需执行额外逻辑（如表单验证前置）。
4、若阻止默认提交行为，必须在JavaScript中调用event.preventDefault()。
四、为按钮添加基础交互行为（JavaScript绑定）
无论采用button还是input type="button"，均需通过脚本赋予响应能力。推荐使用addEventListener方式，避免内联事件污染HTML结构。
1、为按钮设置唯一的id属性，例如id="myBtn"。
2、在script标签或外部JS文件中，使用document.getElementById获取该元素。
3、调用addEventListener方法，监听"click"事件，并传入处理函数。
4、禁止在HTML中直接使用onclick="xxx()"内联写法，以保障关注点分离。
五、无障碍与键盘交互适配要点
符合HTML5规范的按钮必须支持键盘操作（如Enter、Space键触发），并正确通告屏幕阅读器。这要求按钮本身具有可聚焦性与角色识别。
1、确保button元素未设置tabindex="-1"，默认即可获得焦点。
2、避免对input type="button"使用role="button"——它已自带正确ARIA角色。
3、若使用div或span模拟按钮，必须同时添加role="button"、tabindex="0"及keydown事件监听（捕获Enter/Space）。
4、任何非原生按钮元素都必须手动实现键盘交互逻辑，否则不符合WCAG 2.1标准。
