为什么有些前端一直用 div 当按钮，而不是用 button？

1. HTML 中的 <div> 和 <button>

在了解为什么有些前端开发者更喜欢使用 <div> 作为按钮之前，让我们先来了解一下 <div> 和 <button> 标签在 HTML 中的作用和区别。

• <div>：是 HTML 中的一个通用容器元素，用于组织和布局页面中的内容。<div> 本身不会具有任何特定的行为，它通常用于创建样式化的块级元素，或者作为其他元素的容器。

• <button>：是 HTML 中专门用于创建按钮的元素。<button> 元素有默认的交互行为，当用户点击时会触发相关的事件，例如提交表单或执行 JavaScript 函数等。

2. 为什么使用 <div> 作为按钮

尽管 <button> 元素是专门用于创建按钮的，但一些前端开发者更喜欢使用 <div> 来模拟按钮的外观和行为。以下是一些可能的原因：

2.1 样式定制

使用 <div> 可以更灵活地定制按钮的外观和样式。通过 CSS，开发者可以自由控制 <div> 元素的背景、边框、阴影、圆角等样式属性，从而创建出符合设计要求的按钮样式。相比之下，<button> 元素的外观和样式在不同浏览器和操作系统下可能存在差异，定制起来相对受限。

<div class="custom-button">Click Me</div><style>.custom-button {background-color: #007bff;color: #ffffff;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}
</style>

2.2 交互行为

一些前端开发者可能更喜欢通过 JavaScript 来控制按钮的交互行为，而不是依赖 <button> 元素的默认行为。通过使用 <div>，他们可以自定义按钮的点击事件，实现更复杂的交互效果，例如动画、异步请求等。

<div class="custom-button" onclick="handleClick()">Click Me</div><script>function handleClick() {// 自定义点击事件逻辑}
</script>

2.3 响应式设计

一些前端开发者可能更倾向于使用 <div> 来创建自适应和响应式的按钮，以适应不同屏幕尺寸和设备。通过使用 CSS 媒体查询和弹性布局技术，他们可以轻松地实现按钮的自适应大小和布局，而不需要考虑 <button> 元素的默认行为对布局的影响。

<div class="custom-button">Click Me</div><style>.custom-button {/* 自适应宽度 */width: 100%;max-width: 200px;/* 响应式布局 */display: flex;justify-content: center;align-items: center;/* 其他样式 */background-color: #007bff;color: #ffffff;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;}
</style>

3. 使用 <button> 的优势

虽然使用 <div> 作为按钮具有一定的灵活性和自定义能力，但 <button> 元素也有其独特的优势：

3.1 语义化

<button> 元素具有更强的语义化，能够更好地表达其在页面中的作用。在辅助技术（如屏幕阅读器）中，<button> 元素能够被正确地识别为一个按钮，从而提高了页面的可访问性和可用性。

3.2 默认交互行为

<button> 元素具有默认的交互行为，当用户点击时会触发相关的事件。这使得在不需要特定定制的情况下，可以直接使用 <button> 元素来创建标准的按钮，减少了开发工作量。

3.3 表单提交

<button> 元素在表单中具有特殊的用途，可以用于提交表单数据或者重置表单内容。使用 <div> 无法实现这种表单提交的功能，需要额外的 JavaScript 来模拟。

在前端开发中，有些开发者喜欢使用 <div> 作为按钮，而不是 <button>，主要是因为 <div> 具有更大的灵活性和自定义能力，可以更好地满足设计要求和交互需求。然而，<button> 元素具有更强的语义化和默认交互行为，能够提高页面的可访问性和可用性，因此在一般情况下更推荐使用 <button> 元素来创建按钮。在实际开发中，开发者可以根据具体需求和设计要求，灵活选择使用 <div> 或 <button> 元素来创建按钮。

前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员