纯html搭建的计算器界面仅为静态骨架，需javascript驱动功能；应避免使用，用作显示区，按钮按功能分组并设置data-value或data-action属性，通过事件委托统一绑定点击逻辑。
纯 HTML 搭建的“多功能计算器界面”只是静态骨架，不配 JavaScript 就没有功能——onclick 不会触发，input 的 value 不会更新，四则运算、退格、括号、连续等号都不存在。所谓“快速上手”，其实是快速搭出可被 JS 驱动的结构，而非做出能算的计算器。
用 <div> 和 <code><button></button> 组织按钮网格，别套 <form></form>
很多初学者一上来就包个 <form></form>，结果点按钮页面刷新或跳转。计算器不需要表单提交语义，<form></form> 反而引入默认行为干扰交互。
<div id="calculator"> 作为根容器，便于后续用 <code>document.getElementById('calculator')获取整块区域- 显示区统一用
<div id="display">0</div>，不用<input type="text">——后者有聚焦/光标/选中行为，干扰数字拼接逻辑；contentEditable="false"也不如纯<div> 干净 <li>按钮按功能分组：数字键（<code>0–9）、运算符（+、-、*、/）、功能键（C、←、=、.），每个<button></button>必须带明确的data-action或data-value属性，例如<button data-value="7">7</button>，避免依赖 innerText 解析（中文系统可能显示全角数字） - 显示区：
<div id="display">0</div>→ JS 中直接const display = document.getElementById('display'); - 数字键：
<button class="digit" data-value="5">5</button> - 运算符：
<button class="operator" data-value="*">×</button> - 功能键：
<button class="function" data-action="clear">C</button>、<button class="function" data-action="backspace">←</button> - 按钮保持干净：
<button class="digit" data-value="3">3</button> - JS 用事件委托绑定到父容器：
document.getElementById('calculator').addEventListener('click', handleButtonClick); - 在
handleButtonClick里判断event.target.dataset.value或event.target.dataset.action，再分发逻辑 - 这样新增一个
%按钮，只需加 HTML + 补一条if (val === '%') {...}，不用改任何已有按钮属性
id 和 class 别混用：显示区用 id="display"，按钮用 class 分类
JS 里频繁读写显示内容，必须靠唯一 id 快速定位；而按钮批量绑定事件时，靠 class 更灵活。若所有按钮都设不同 id（如 btn-7、btn-plus），后续加新键或改布局就得同步改 JS，维护成本陡增。
HTML 里别写 onclick="xxx()"，留空给 JS 统一绑定
内联事件处理器（onclick="append('7')"）看着省事，但实际带来三个硬伤：无法动态增删按钮、调试时断点难打、函数名拼错只报 Uncaught ReferenceError 不指明哪行——尤其多人协作或后期扩展时极难排查。
真正容易被忽略的是：HTML 结构一旦定型，后续 JS 逻辑就强依赖它的 DOM 路径和属性命名。比如把 data-value 写成 data-num，或者漏掉 class="digit"，JS 就会静默失效——没报错，但按钮点了没反应。检查时先看元素是否真有对应属性，再确认 JS 是否监听了正确节点，比重写逻辑快得多。
