应优先使用语义化button元素;其次可选input type="button";表单内用type="submit"/"reset";均需用addEventListener绑定点击事件,并确保键盘可访问性。

如果您希望在HTML5页面中创建具有交互功能的按钮,则需要根据语义化、可访问性及实际用途选择合适的标签。以下是几种标准且兼容性良好的写法:
一、使用button元素创建语义化按钮
button元素是专门用于定义可点击按钮的语义化标签,支持内嵌内容(如图标、文本组合),默认为submit类型,但可通过type属性明确指定行为。
1、在HTML文档的body内添加
2、在button标签内部直接写入按钮显示文本,例如“提交”或“取消”。
立即学习“前端免费学习笔记(深入)”;
3、为提升可访问性,可添加aria-label属性说明按钮功能,尤其当按钮仅含图标时。
4、通过class或id属性绑定CSS样式或JavaScript事件监听器。
二、使用input type="button"创建简易按钮
input元素的type="button"形式简洁,不包含子内容,适用于纯文本触发按钮,兼容所有HTML5浏览器,但语义化程度低于button元素。
1、插入标签,设置type="button"。
2、通过value属性指定按钮上显示的文字内容。
3、添加id或class属性以便于CSS控制外观或JS绑定点击事件。
4、注意:该写法无法在标签内部插入HTML元素(如或)。
三、使用input type="submit"或type="reset"实现表单专用按钮
当按钮作用于form容器内且需触发表单提交或重置操作时,应优先选用具备明确语义的submit和reset类型,浏览器会自动赋予相应行为。
1、确保button或input位于










