value属性仅影响表单提交值，不影响按钮显示文本；IE提交按钮文本内容，Chrome/Firefox等提交value值；多按钮同name时需显式设value以区分操作。
value 属性在 <button> 元素中只在特定场景下起作用：它决定表单提交时该按钮发送的值，但**不控制按钮上显示的文字**——这点和 <input type="button"> 或 <input type="submit"> 完全不同。
为什么点击 button 提交的值有时是 text、有时是 value？
浏览器行为不一致是最大陷阱。IE（包括旧版 Edge）会提交 <button>文本内容</button> 中的文本；而 Chrome、Firefox、现代 Edge 则严格按 value 属性提交。这意味着：
- 如果你写
<button name="action" value="delete">删除</button>，Chrome 提交action=delete，IE 提交action=删除 - 如果不设
value，IE 提交空字符串或按钮文本，其他浏览器可能提交空值或忽略该按钮 - 这种差异会导致后端收到不可预测的参数，尤其在多语言界面或含空格/符号的按钮文本中极易出错
什么时候必须显式设置 button 的 value？
仅当按钮用于表单提交（type="submit"），且你希望服务端通过统一 key 区分不同操作时才需要。典型场景：
- 同一
name下多个提交按钮，对应不同动作：<button name="cmd" value="save">保存草稿</button>和<button name="cmd" value="publish">立即发布</button> - 按钮文本含 HTML 标签或空格（如
<button><span>✓</span> 确认</button>），此时不设value会导致 IE 提交带标签的混乱字符串 - 需要与后端约定纯英文/机器可读的 action 值（如
value="export_csv"），而非用户可见文案
value 和 innerText / innerHTML 的关系
value 是独立于按钮内容的提交值，它不影响渲染。按钮上显示什么，完全由标签内文本或子元素决定：
立即学习“前端免费学习笔记（深入）”；
<button name="mode" value="dark"><svg>...</svg> 深色模式</button>
这段代码中：
- 用户看到的是 SVG 图标 + “深色模式”文字
- 提交时只发
mode=dark（现代浏览器）或mode=深色模式（IE） -
document.querySelector('button').value返回"dark"，但document.querySelector('button').textContent返回" 深色模式"（含空格）
真正容易被忽略的是：一旦用了 <button>，就必须同时管理 value（提交值）、textContent（可读文案）、以及可能存在的子节点（图标、badge 等）——三者语义分离，却常被混为一谈。
