HTML标签<button>的介绍和具体实例使用

button标签概述

<button>标签用于在HTML中创建可点击的按钮，是网页交互的重要元素。

基本语法

按钮类型详解

基础按钮实例

不同类型按钮示例普通按钮提交按钮重置按钮

对应代码：

<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>

带图标的按钮

使用HTML实体图标★ 收藏🛒 购物车📧 发送邮件

对应代码：

<button>★ 收藏</button>
<button>🛒 购物车</button>
<button>📧 发送邮件</button>

按钮状态示例

正常与禁用状态可点击按钮禁用按钮

对应代码：

<button>可点击按钮</button>
<button disabled>禁用按钮</button>

按钮与表单结合

表单中的按钮使用

用户名：

密码：

登录重置取消

对应代码：

<form>
<label>用户名：<input type="text" name="username"></label><br><br>
<label>密码：<input type="password" name="password"></label><br><br>
<button type="submit">登录</button>
<button type="reset">重置</button>
<button type="button">取消</button>
</form>

按钮属性对比

按钮与JavaScript交互

事件处理示例点击我双击我鼠标交互

对应代码：

<button onclick="alert('按钮被点击了！')">点击我</button>
<button ondblclick="alert('双击事件')">双击我</button>
<button onmouseover="this.innerHTML='鼠标悬停'" onmouseout="this.innerHTML='鼠标离开'">鼠标交互</button>

按钮内容多样性

按钮大小和样式控制

通过属性控制大小小按钮中等按钮大按钮

对应代码：

<button style="font-size: 12px;">小按钮</button>
<button style="font-size: 16px;">中等按钮</button>
<button style="font-size: 20px;">大按钮</button>

按钮最佳实践

常见应用场景

• 表单提交和重置
• 对话框操作（确定、取消）
• 导航和链接跳转
• 数据操作（添加、删除、编辑）
• 文件操作（上传、下载）
• 状态切换（展开、收起）

注意事项

• 在表单中，<button>的默认类型是"submit"，建议明确指定type
• 避免在按钮中使用复杂的HTML结构
• 考虑移动端触摸操作的按钮大小
• 为重要操作按钮提供确认机制
• 注意按钮的加载状态和反馈

与input type="button"的区别