当前位置：首页 > article >正文

如何在 HTML 中添加按钮

article 2025/6/6 14:05:45

原文：如何在 HTML 中添加按钮 | w3cschool笔记

（请勿将文章标记为付费！！！！）

在网页开发中，按钮是用户界面中不可或缺的元素之一。无论是用于提交表单、触发动作还是导航，按钮都能提供直观的交互方式。本文将详细介绍如何在 HTML 中添加按钮，并通过实际示例帮助你快速掌握这一技能。

一、HTML 中添加按钮的基本方法

（一）使用 `<button>` 标签

<button> 标签是 HTML 中专门用于创建按钮的元素。它提供了丰富的属性，使我们能够创建功能多样的按钮。

1. 基本语法

<button>点击我</button>

2. 常用属性

属性名	取值	描述
`autofocus`	`autofocus`	指定按钮在页面加载时自动获得焦点。
`disabled`	`disabled`	指定按钮是否禁用。
`form`	`form_id`	指定按钮所属的表单。
`formaction`	URL	指定表单提交的目标 URL。
`formenctype`	`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`	指定表单数据提交时的编码类型。
`formmethod`	`get`、`post`	指定表单提交的方法。
`formnovalidate`	`formnovalidate`	指定表单提交时不进行验证。
`formtarget`	`_blank`、`_self`、`_parent`、`_top`	指定表单提交结果的显示目标。
`name`	文本	指定按钮的名称。
`type`	`button`、`reset`、`submit`	指定按钮的类型。
`value`	文本	指定按钮的初始值。

（二）使用 `<input>` 标签

除了 <button> 标签，我们还可以使用 <input> 标签创建按钮。<input> 标签的 type 属性指定按钮的类型。

1. 基本语法

<input type="button" value="点击我">

2. 常用类型

type="button"：普通按钮
type="reset"：重置按钮，用于重置表单中的输入字段
type="submit"：提交按钮，用于提交表单数据

二、按钮的样式定制

（一）使用内联样式

我们可以在按钮标签中直接使用 style 属性来设置样式。

<button style="background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">点击我</button>

（二）使用内部样式表

在文档的 <head> 部分定义样式，然后通过类选择器应用到按钮上。

<head><style>.custom-button {background-color: blue;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}</style>
</head>
<body><button class="custom-button">点击我</button>
</body>

（三）使用外部样式表

将样式定义在一个单独的 CSS 文件中，然后通过 <link> 标签引入。

styles.css

.custom-button {background-color: blue;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;
}

HTML 文件

<head><link rel="stylesheet" href="styles.css">
</head>
<body><button class="custom-button">点击我</button>
</body>

三、按钮的交互效果

（一）使用 JavaScript 添加点击事件

我们可以通过 JavaScript 为按钮添加点击事件，实现交互效果。

<button id="myButton">点击我</button>
<script>document.getElementById('myButton').addEventListener('click', function() {alert('按钮被点击了！');});
</script>

（二）使用表单提交

如果按钮用于提交表单，可以使用 type="submit"。

<form action="/submit" method="post"><input type="text" name="username" placeholder="请输入用户名"><button type="submit">提交</button>
</form>

四、完整示例：创建一个功能按钮

以下是一个完整的示例，展示如何创建一个带有样式和交互效果的按钮。

<!DOCTYPE html>
<html>
<head><title>HTML Button Tag - 编程狮教程</title><style>body {font-family: 'Microsoft YaHei', sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;background-color: #f5f5f5;}.demo-container {background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}button {padding: 10px 20px;font-size: 16px;border: none;border-radius: 4px;cursor: pointer;margin: 10px;}.default-btn {background-color: #4CAF50;color: white;}.primary-btn {background-color: #2196F3;color: white;}.danger-btn {background-color: #f44336;color: white;}.disabled-btn {background-color: #cccccc;color: #666666;cursor: not-allowed;}</style>
</head>
<body><h1>HTML 按钮示例 - 编程狮教程</h1><div class="demo-container"><h2>基本按钮</h2><button type="button" class="default-btn">默认按钮</button><h2>不同类型的按钮</h2><button type="button" class="primary-btn">普通按钮</button><button type="submit" class="primary-btn">提交按钮</button><button type="reset" class="primary-btn">重置按钮</button><h2>禁用按钮</h2><button type="button" class="disabled-btn" disabled>禁用按钮</button><h2>按钮事件</h2><button type="button" class="default-btn" onclick="showAlert()">点击显示提示</button></div><script>function showAlert() {alert('按钮被点击了！');}</script>
</body>
</html>

五、总结

本文详细介绍了如何在 HTML 中添加按钮，并通过多种方式实现样式定制和交互效果。希望这个教程能帮助你更好地理解和使用 HTML 按钮元素。

如何在 HTML 中添加按钮

原文：如何在 HTML 中添加按钮 | w3cschool笔记 （请勿将文章标记为付费！！！！） 在网页开发中，按钮是用户界面中不可或缺的元素之一。无论是用于提交表单、触发动作还是导航&#xff0…...

编程日记 2025/6/6 14:05:45

【优秀三方库研读】quill 开源库中的命名空间为什么要用宏封装

将命名空间封装成宏的作用与优势 QUILL_BEGIN_NAMESPACE 和 QUILL_END_NAMESPACE 这种宏封装是 C++ 库开发中的常见技巧，主要解决以下问题并提供显著优势： 1. 解决核心问题：命名空间嵌套与版本控制问题场景：库需要支持多版本共存（如 quill::v1, quill::v2），但希望默认…...

编程日记 2025/6/6 10:09:52

1. chemical_component_sets.pickle 运行alphafold3遇到下面的问题: FileNotFoundError: [Errno 2] No such file or directory: /xxx/xxx/anaconda3/envs/alphafold3/lib/python3.11/site-packages/alphafold3/constants/converters/chemical_component_sets.pickle搜索你的系…...

编程日记 2025/6/6 18:28:12

Linux--进程的程序替换

问题导入： 前面我们知道了，fork之后，子进程会继承父进程的代码和“数据”（写实拷贝）。那么如果我们需要子进程完全去完成一个自己的程序怎么办呢？ 进程的程序替换来完成这个功能！ 1.替换原理…...

编程日记 2025/6/6 6:26:15

调教 DeepSeek - 输出精致的 HTML MARKDOWN

【序言】不知道是不是我闲的蛋疼，对百度AI 和 DeepSeek 的回答都不太满意。 DeepSeek 回答句子的引用链接，始终无法准确定位。有时链接只是一个域名，有时它给的链接是搜索串如: baidu.com/?q"搜索内容"。百度AI 回答句子的引用…...

编程日记 2025/6/6 7:13:09

【笔记】Windows系统部署suna基于 MSYS2的Poetry 虚拟环境backedn后端包编译失败处理

基于 MSYS2（MINGW64）中 Python 的 Poetry 虚拟环境包编译失败处理笔记一、背景在基于 MSYS2（MINGW64）中 Python 创建的 Poetry 虚拟环境里，安装 Suna 开源项目相关包时编译失败，阻碍项目正常部署。后端…...

编程日记 2025/6/6 14:17:17

GQA（Grouped Query Attention）：分组注意力机制的原理与实践《一》

GQA（Grouped Query Attention）是近年来在大语言模型中广泛应用的一种注意力机制优化方法，最初由 Google 在 2023 年提出。它是对 Multi-Query Attention (MQA) 的扩展，旨在平衡模型性能与计算效率。 🌟 GQA 是什么&…...

编程日记 2025/6/6 8:17:40

【深度学习优化算法】02：凸性

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈PyTorch深度学习 ⌋ ⌋ ⌋ 深度学习 (DL, Deep Learning) 特指基于深层神经网络模型和方法的机器学习。它是在统计机器学习、人工神经网络等算法模型基础上，结合当代大数据和大算力的发展而发展出来的。深度学习最重…...

编程日记 2025/6/5 6:02:13

JAVA国际版一对一视频交友视频聊天系统源码支持H5+APP

全球畅连无界社交：JAVA国际版一对一视频交友系统源码（H5APP双端覆盖） 在全球化社交需求激增的今天，构建一个支持多语言、适配国际支付且功能丰富的视频交友平台，成为出海创业者和企业的核心诉求。JAVA国际版一对一视频…...

编程日记 2025/6/6 18:37:31

策略公开了：年化494%，夏普比率5.86，最大回撤7% | 大模型查询akshare，附代码

原创内容第907篇，专注智能量化投资、个人成长与财富自由。这位兄弟的策略公开了，年化494%，夏普比率5.86，最大回撤7%，欢迎大家前往围观： http://www.ailabx.com/strategy/683ed10bdabe146c4c0b2293 系统代…...

编程日记 2025/6/6 18:22:47

【C++】string类的模拟实现（详解）

文章目录上文链接一、整体框架二、构造函数1. default2. copy3. range 三、析构函数四、拷贝构造(1) 传统写法(2) 现代写法五、赋值重载(1) 传统写法(2) 现代写法六、获取元素1. operator[ ] 七、迭代器1. begin2. end 八、容量相关1. size2. reserve3. clear 九、修改操作1…...

编程日记 2025/6/6 18:54:04

业界宽松内存模型的不统一而导致的软件问题, gcc, linux kernel, JVM

当不同CPU厂商未能就统一的宽松内存模型（Relaxed Memory Model）达成一致，很多软件的可移植性会收到限制或损害，主要体现在以下几个方面： 1. 可能的理论限制 1.1. 并发程序的行为不一致现象上，同一段多线程…...

编程日记 2025/6/6 19:12:31

多模态大语言模型arxiv论文略读（101）

ML-Mamba: Efficient Multi-Modal Large Language Model Utilizing Mamba-2 ➡️ 论文标题：ML-Mamba: Efficient Multi-Modal Large Language Model Utilizing Mamba-2 ➡️ 论文作者：Wenjun Huang, Jiakai Pan, Jiahao Tang, Yanyu Ding, Yifei Xing, …...

编程日记 2025/6/6 18:46:31

量化Quantization初步之--带量化(QAT)的XOR异或pyTorch版250501

量化(Quantization)这词儿听着玄，经常和量化交易Quantitative Trading (量化交易)混淆。其实机器学习(深度学习)领域的量化Quantization是和节约内存、提高运算效率相关的概念（因大模型的普及，这个量化问题尤为迫切）。揭秘机器…...

编程日记 2025/6/6 15:44:32

Linux Maven Install

在 CentOS（例如 CentOS 7 或 CentOS 8）中安装 Maven（Apache Maven）的方法主要有两种：使用包管理器（简单但可能版本较旧），或者手动安装（推荐，可获得最新版&…...

编程日记 2025/6/5 5:54:47

#Java篇：学习node后端之sql常用操作

学习路线 1、javascript基础； 2、nodejs核心模块 fs: 文件系统操作 path: 路径处理 http / https: 创建服务器或发起请求 events: 事件机制（EventEmitter） stream: 流式数据处理 buffer: 处理二进制数据 os: 获取操作系统信息 util: 工具方…...

编程日记 2025/6/6 18:52:05

电网“逆流”怎么办？如何实现分布式光伏发电全部自发自用？

2024年10月9日，国家能源局综合司发布了《分布式光伏发电开发建设管理办法（征求意见稿）》，意见稿规定了户用分布式光伏、一般工商业分布式光伏以及大型工商业分布式光伏的发电上网模式，当选择全部自发自用模式时&#x…...

编程日记 2025/6/6 18:27:30

如何查看电脑电池性能

检查电脑电池性能的方法如下： 按下winR键，输入cmd回车，进入命令行窗口在命令行窗口输入powercfg /batteryreport 桌面双击此电脑，把刚刚复制的路径粘贴到文件路径栏，然后回车回车后会自动用浏览器打开该报告红…...

编程日记 2025/6/6 13:24:51

kubernetes》》k8s》》kubectl proxy 命令后面加一个

命令后面加一个& 在Linux终端中，如果在命令的末尾加上一个&符号，这表示将这个任务放到后台去执行 kubectl proxy 官网资料是 Kubernetes 提供的一个命令行工具，用于在本地和 Kubernetes API Server 之间创建一个安全的代理通道。…...

编程日记 2025/6/6 17:32:29

深入理解Linux系统进程切换

目录引言一、什么是进程切换？ 二、进程切换的触发条件三、进程切换的详细步骤 1、保存当前进程上下文： 2、更新进程控制块(PCB)： 3、选择下一个进程： 4、恢复新进程上下文： 5、切换地址空间： 6…...

编程日记 2025/6/6 12:41:24

网络安全运维实训室建设方案

一、网络安全运维人才需求与实训困境在数字化时代，网络安全已成为国家安全、社会稳定和经济发展的重要基石。随着信息技术的飞速发展，网络安全威胁日益复杂多样，从个人隐私泄露到企业商业机密被盗，从关键基础设施遭受攻击到社会…...

编程日记 2025/6/6 19:04:55

DBeaver 连接mysql报错：CLIENT_PLUGIN_AUTH is required

DBeaver 连接mysql报错：CLIENT_PLUGIN_AUTH is required 一、必须要看这个 >> ：参考文献二、补充 2.1 说明 MySQL5、6这些版本比较老，而DBeaver默认下载的是MySQL8的连接库，所以连接旧版本mysql报错：CLIEN…...

编程日记 2025/6/6 19:10:19

联通专线赋能，亿林网络裸金属服务器：中小企业 IT 架构升级优选方案

在当今数字化飞速发展的时代，中小企业面临着日益增长的业务需求与复杂多变的市场竞争环境。如何构建高效、稳定且具性价比的 IT 架构，成为众多企业突破发展瓶颈的关键所在。而亿林网络推出的 24 核 32G 裸金属服务器，搭配联通专线的千兆共享带…...

编程日记 2025/6/6 12:32:53

Web3时代的数据保护挑战与应对策略

随着互联网技术的飞速发展，我们正步入Web3时代，这是一个以去中心化、用户主权和数据隐私为核心的新时代。然而，Web3时代也带来了前所未有的数据保护挑战。本文将探讨这些挑战，并提出相应的应对策略。数据隐私挑战在Web3时代&a…...

编程日记 2025/6/6 8:52:13

Qwen3与MCP协议：重塑大气科学的智能研究范式

在气象研究领域，从海量数据的解析到复杂气候模型的构建，科研人员长期面临效率低、门槛高、易出错的挑战。而阿里云推出的Qwen3大模型与MCP协议的结合，正通过混合推理模式与标准化协同机制，为大气科学注入全新活力。本文将深入解析…...

编程日记 2025/6/6 15:40:13

CppCon 2015 学习:Benchmarking C++ Code

关于性能问题与调试传统 bug（如段错误）之间差异的分析。以下是对这一页内容的详细解释： 主题：传统问题（如段错误）调试流程清晰问题类型：段错误（Segmentation Fault） …...

编程日记 2025/6/6 19:07:51

URL 结构说明+路由（接口）的认识

一、URL 结构说明以这个为例：http://127.0.0.1:5000/zhouleifeng 1.组成部分: http://：协议 127.0.0.1：主机（本地地址） :5000：端口号（Flask 默认 5000） /zhouleifeng&#xff1a…...

编程日记 2025/6/6 18:29:21

省赛中药检测模型调优

目录一、baseline性能二、baseline DETR head三、baseline RepC3K2四、baseline RepC3K2 SimSPPF五、baseline RepC3K2 SimSPPF LK-C2PSA界面1.引入库2.读入数据总结一、baseline性能 Epoch GPU_mem box_loss cls_loss dfl_loss Instances Size120/120 …...

编程日记 2025/6/6 11:17:22

linux 故障处置通用流程-36计+1计

通用标准处置快速索引编号通用标准处置索引 001 Linux操作系统标准关闭 002 Linux操作系统标准重启 003 Linux操作系统强行关闭 004 Linux操作系统强行重启 005 检查Linux操作系统CPU负载 006 查询占用CPU资源最多的进程 007 检查Linux操…...

编程日记 2025/6/6 7:00:36

BEV和OCC学习-3:mmdet3d 坐标系

目录坐标系转向角 (yaw) 的定义框尺寸的定义与支持的数据集的原始坐标系的关系 KITTI Waymo NuScenes Lyft ScanNet SUN RGB-D S3DIS 坐标系坐标系 — MMDetection3D 1.4.0 文档https://mmdetection3d.readthedocs.io/zh-cn/latest/user_guides/coord_sys_tuto…...

编程日记 2025/6/6 9:29:52

一、HTML 中添加按钮的基本方法

（一）使用 <button> 标签

1. 基本语法

2. 常用属性

（二）使用 <input> 标签

1. 基本语法

2. 常用类型

二、按钮的样式定制

（一）使用内联样式

（二）使用内部样式表

（三）使用外部样式表

三、按钮的交互效果

（一）使用 JavaScript 添加点击事件

（二）使用表单提交

四、完整示例：创建一个功能按钮

五、总结

相关文章：

（一）使用 `<button>` 标签

（二）使用 `<input>` 标签