一、HTML button标签的基本用法
在 HTML 中，使用 <button> 标签即可创建一个可点击的按钮。开始标签 <button> 和结束标签 </button> 之间的文本就是按钮上显示的内容。
<button>这是一个按钮</button>
二、button标签的常用属性
<button> 标签提供了多个属性，用于控制按钮的行为和状态：
type：规定按钮的类型（最核心属性）。
disabled：规定按钮应该被禁用，使其不可点击。
name：规定按钮的名称，用于在表单提交时标识该按钮。
value：规定按钮的初始值，随表单数据一起提交。
三、按钮类型（type属性）设置
type 属性是 <button> 标签最重要的属性，它有三个可选值：
submit：默认值。如果按钮位于表单（
<form>）内部，点击该按钮会自动提交表单数据。button：普通按钮，没有默认行为，通常配合 JavaScript 触发自定义事件。
reset：如果按钮位于表单内，点击该按钮会将表单中的所有输入控件重置为初始值。
下面是一个包含不同类型按钮的表单示例：
<form action="https://www.ipipp.com/api/login" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br><br>
<button type="submit">提交表单</button>
<button type="reset">重置表单</button>
<button type="button" onclick="alert('我是一个普通按钮！')">普通按钮</button>
</form>特别注意：由于 type="submit" 是默认值，如果在表单内使用 <button> 且未指定 type，点击它将会提交表单。为了避免误操作，强烈建议始终为 <button> 标签显式声明 type 属性。
四、禁用按钮（disabled属性）
当需要阻止用户点击按钮（例如在表单未填写完整时），可以添加 disabled 属性。被禁用的按钮会变灰，并且无法响应点击事件。
<button type="button" disabled>我被禁用了</button>
五、按钮内部嵌入内容
与 <input type="button"> 不同，<button> 标签是一个容器，其内部可以包含 HTML 元素（如文本、图片、甚至是其他行内标签），这使得按钮的展现形式更加丰富。
<button type="button"> <img src="https://www.ipipp.com/images/icon.png" alt="图标" style="width:16px; height:16px; vertical-align:middle; margin-right:5px;"> 带图标的按钮 </button>
六、HTML按钮样式美化（CSS设置）
默认的 HTML 按钮外观通常比较简陋，在实际开发中，我们往往需要使用 CSS 来对其进行美化，包括背景色、边框、圆角、悬停交互效果等。
首先，为按钮添加一个类名：
<button type="button" class="custom-btn">自定义样式按钮</button>
然后，在 CSS 中定义该类名的样式：
.custom-btn {
background-color: #4CAF50; /* 设置绿色背景 */
border: none; /* 移除默认边框 */
color: white; /* 设置白色文字 */
padding: 12px 24px; /* 设置上下与左右的内边距 */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer; /* 鼠标悬停时变为手型指针 */
border-radius: 4px; /* 添加圆角 */
transition: background-color 0.3s; /* 添加背景色过渡动画 */
}
.custom-btn:hover {
background-color: #45a049; /* 鼠标悬停时的深绿色背景 */
}七、总结
HTML <button> 标签是构建交互式网页不可或缺的元素。通过合理设置 type 属性可以控制表单行为，利用 disabled 属性可以管理交互状态，结合 CSS 可以打造出美观的用户界面，而其支持嵌入 HTML 内容的特性则提供了极大的灵活性。在实际开发中，请始终记得明确指定按钮的 type 属性，以避免在表单上下文中出现意外的提交行为。