HTML 中的 <button></button> 标签主要用于创建可点击的按钮，通常用于提交表单、触发 JavaScript 函数或其他客户端操作。它比 <input type="button"> 标签更灵活，允许在按钮内部包含 HTML 内容，例如文本、图像甚至其他 HTML 元素。
创建交互式网页元素。
<button></button> 标签的不同 type 属性及其应用
<button></button> 标签的 type 属性定义了按钮的行为。常见的 type 属性包括：
立即学习“前端免费学习笔记（深入）”；
-
submit: 这是默认值。当按钮位于<form></form>内部时，点击该按钮会提交表单数据到服务器。例如，一个登录表单的提交按钮。 -
reset: 点击该按钮会重置表单中的所有元素到它们的初始值。在复杂表单中，提供重置功能方便用户清除错误输入。 -
button: 这个类型没有默认行为。通常与 JavaScript 结合使用，通过onclick事件监听器来触发自定义函数。例如，一个用于显示/隐藏某个区域的按钮。
选择正确的 type 属性对于保证表单的正确行为至关重要。如果你不希望按钮有任何默认行为，一定要明确指定 type="button"。
如何使用 CSS 美化 <button></button> 标签
默认的 <button></button> 样式在不同浏览器中可能存在差异，所以通常需要使用 CSS 进行美化。以下是一些常用的 CSS 属性：
-
background-color: 设置按钮的背景颜色。 -
color: 设置按钮文本的颜色。 -
padding: 设置按钮内部的空白区域。 -
border: 设置按钮的边框样式。 -
border-radius: 设置按钮的圆角。 -
font-size: 设置按钮文本的大小。 -
cursor: 设置鼠标悬停在按钮上时的光标样式。
一个简单的 CSS 示例：
.my-button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
.my-button:hover {
background-color: #3e8e41;
}这段代码创建了一个绿色背景、白色文本、带有圆角的按钮，并且在鼠标悬停时颜色会变深。
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
<button></button> 标签与 JavaScript 的交互
<button></button> 标签经常与 JavaScript 结合使用，以实现各种动态效果。可以使用 onclick 事件监听器来触发 JavaScript 函数。
<button type="button" onclick="myFunction()">点击我</button>
<script>
function myFunction() {
alert("按钮被点击了！");
}
</script>当用户点击按钮时，会弹出一个警告框。更复杂的应用场景包括：
- 发送 AJAX 请求
- 修改页面内容
- 执行动画效果
使用 JavaScript 可以为 <button></button> 标签添加丰富的交互功能。
<button></button> 标签的禁用状态及其控制
有时需要禁用 <button></button> 标签，防止用户点击。可以使用 disabled 属性来实现。
<button type="button" disabled>禁用按钮</button>
被禁用的按钮通常会显示为灰色，并且无法点击。可以使用 JavaScript 动态地控制 disabled 属性。例如，在表单验证未通过时禁用提交按钮。
<button type="submit" id="submitButton">提交</button>
<script>
const submitButton = document.getElementById('submitButton');
const form = document.querySelector('form');
form.addEventListener('input', function() {
if (form.checkValidity()) {
submitButton.disabled = false;
} else {
submitButton.disabled = true;
}
});
</script>这段代码会在表单验证通过时启用提交按钮，否则禁用它。
<button></button> 标签内部可以包含哪些 HTML 元素
与 <input type="button"> 不同，<button></button> 标签可以包含任意 HTML 元素。这使得可以创建更丰富的按钮内容。例如，可以在按钮内部包含图像和文本。
<button type="button"> @@##@@ <span>点击这里</span> </button>
这种方式可以创建视觉上更吸引人的按钮。需要注意的是，按钮内部的元素可能会影响按钮的布局，需要使用 CSS 进行适当的调整。
