HTML button 语法
在 HTML 中，button 标签用于创建一个按钮，用于用户与网页进行交互。button 按钮可以触发各种操作，例如触发事件、提交表单等。
语法：
<button>按钮内容</button>说明：
button 标签的常用属性有以下几个。
type（可选）：用于指定按钮类型，常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| button | 普通按钮 |
| submit（默认值） | 提交按钮 |
| reset | 重置按钮 |
value（可选）：用于提交表单时传递的数据。disabled（可选）：是否禁用按钮。autofocus（可选）：是否自动获取焦点。form（可选）：指定按钮所属的表单元素，值为表单元素的 ID。
需要注意的是，button 标签 type 属性的默认值是 "submit"，而不是 "button"。因此为了防止意外提交表单，建议小伙伴们养成给所有按钮显式指定 type 的习惯。
提示： button 是双标签，内部可以包含图片、图标甚至 div 等，样式表现力更强；而 input 是单标签，只能显示纯文本。 这也是为什么在现代开发中，几乎都是用 button 的原因。
HTML button 摘要
| 属于 | HTML 按钮 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML button 示例
接下来，我们通过一个简单的例子来讲解一下 HTML button 标签是如何使用的。
示例 1：button 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
<p><button type="button">普通按钮</button></p>
<p><button type="submit">提交按钮</button></p>
<p><button type="reset">重置按钮</button></p>
</form>
</body>
</html>页面效果如下图所示。
分析：
type 属性用于定义 button 标签的类型，这 3 种类型的按钮从外观上看不出有什么区别，但它们的功能却是不一样的。
示例 2：为 button 标签添加鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">表白</button>
<script>
const oBtn = document.getElementById("btn");
oBtn.addEventListener("click", function() {
alert("I ❤ HTML！");
});
</script>
</body>
</html>默认情况下，页面效果如下图所示。当点击【表白】按钮后，会弹出对话框，如下图所示。
分析：
在上面例子中，我们使用 JavaScript 来为 button 标签添加了一个鼠标单击事件（onclick）。
