HTML中如何实现命令按钮

<button>

<input type="button">

<input type="submit">

<input type="reset">

<button>

<button>

<button type="button" onclick="alert('你点击了通用按钮！');">
    <img src="icon.png" alt="图标">
    <span>点击这里开始</span>
</button>

<button type="submit">提交表单</button>
<button type="reset">重置表单</button>

<input type="button">

value

<input type="button" value="点击我" onclick="console.log('按钮被点击了！');">

<button type="button">

<input type="submit">

<input>

<form action="/submit-data" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="user_name">
    <br>
    <input type="submit" value="提交信息">
    <input type="reset" value="清空">
</form>

<button type="submit">

<button type="reset">

value

<input type="button">

<button>

<button>

<button>

<span>

aria-label

<button>

<button>

div

span

<input>

<input type="button">

<button>

<button>

onclick

onclick

<button type="button" onclick="alert('你好，世界！');">点击弹窗</button>
<input type="button" value="点击控制台" onclick="console.log('按钮被点击了！');">

addEventListener

<!-- HTML部分 -->
<button type="button" id="myButton">点击我，看控制台</button>
<button type="button" id="anotherButton">另一个按钮</button>

<!-- JavaScript部分（通常放在<script>标签中，或外部JS文件） -->
<script>
    // 1. 获取按钮元素
    const button = document.getElementById('myButton');

    // 2. 定义事件处理函数
    function handleClick() {
        console.log('myButton 被点击了！');
        // 可以在这里添加更复杂的逻辑，比如修改页面内容、发送网络请求等
        button.style.backgroundColor = 'lightblue'; // 示例：点击后改变背景色
    }

    // 3. 为按钮添加点击事件监听器
    button.addEventListener('click', handleClick);

    // 也可以直接在addEventListener中定义匿名函数
    document.getElementById('anotherButton').addEventListener('click', function() {
        alert('这是另一个按钮的点击事件！');
    });

    // 对于表单提交按钮，可能需要阻止其默认行为
    const form = document.querySelector('form'); // 假设页面有一个表单
    if (form) {
        form.addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为（页面刷新）
            console.log('表单被提交了，但默认行为被阻止了。');
            // 在这里处理表单数据，比如通过Ajax发送
        });
    }
</script>

addEventListener()

'click'

'mouseover'

'keydown'

type="submit"

preventDefault()

addEventListener

/* 基础样式 */
button {
    background-color: #007bff; /* 蓝色背景 */
    color: white; /* 白色文字 */
    padding: 10px 20px; /* 内边距 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
    outline: none; /* 默认焦点轮廓可能影响美观，但要注意无障碍性 */
}

/* 悬停（Hover）状态 */
button:hover {
    background-color: #0056b3; /* 鼠标悬停时颜色变深 */
}

/* 激活（Active）状态 */
button:active {
    background-color: #004085; /* 点击时颜色更深 */
    transform: translateY(1px); /* 模拟按下效果 */
}

/* 焦点（Focus）状态：非常重要，为了无障碍性，不能移除！ */
button:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* 焦点时显示蓝色光晕 */
}

/* 禁用（Disabled）状态 */
button:disabled {
    background-color: #cccccc; /* 灰色背景 */
    color: #666666; /* 深灰色文字 */
    cursor: not-allowed; /* 鼠标悬停时显示禁止符号 */
    opacity: 0.7; /* 半透明 */
}

/* 特定按钮的样式 */
.primary-button {
    background-color: #28a745;
}
.primary-button:hover {
    background-color: #218838;
}

.danger-button {
    background-color: #dc3545;
}
.danger-button:hover {
    background-color: #c82333;
}