HTML仅负责计算器结构，多功能逻辑（括号、连续等号等）全靠JavaScript实现；应避免内联onclick，改用addEventListener批量绑定；显示区推荐div而非readonly input以规避软键盘等问题；按钮须用class和data-value语义化区分类型；表达式解析禁用eval，需安全处理运算符优先级与括号嵌套。
纯 HTML 不能“搭建多功能计算器”——它只负责结构，不处理逻辑、不响应点击、不计算表达式。所谓“多功能”，比如支持括号、连续等号、退格、百分比、正负切换，全依赖 JavaScript 实现；HTML 做的只是把按钮和显示区摆出来。
button onclick 绑定是最直接但最易出错的写法
很多教程用 onclick="append('5')" 这种内联方式，看似简单，实际埋坑：
- 每个按钮都得手写一遍函数调用，后期改逻辑要全局搜索替换
- 函数名拼错（比如 appent）或引号漏写，浏览器控制台报 Uncaught ReferenceError 但页面无提示
- 无法统一管理键盘输入（keydown 事件）、无法禁用重复点击、无法做防抖
- 所有逻辑暴露在 HTML 中，不利于模块化和测试
建议统一用 addEventListener 在 JS 中批量绑定，例如：document.querySelectorAll('.btn').forEach(btn => btn.addEventListener('click', handleInput))
input type="text" vs div#display：显示区选哪个？
用 <input type="text" id="display" readonly> 还是 <div id="display"></div>，本质是交互控制权问题：
- input 自带焦点、光标、选中、复制粘贴能力，但 readonly 后用户无法编辑，且 iOS 上有时会意外弹出软键盘
- div 完全可控，textContent 更新快、无副作用，适合只读显示，也方便加动画（比如计算时加 opacity 过渡）
- 如果要支持键盘输入（如按 Enter 触发计算），必须用 input 并监听 keydown，否则 div 不触发键盘事件
多数“多功能”场景（含退格、清空、历史记录）推荐 div + 手动管理状态，避免 input 的隐式行为干扰。
数字键/运算符键必须用 class 区分类型，别只靠 innerText 判断
常见错误是写 if (e.target.innerText === '0') {...}，这在以下情况会失效：
- 按钮里嵌了 <span> 或空格（" 0 "）
- 用户复制粘贴进显示区后，innerText 变成带空格或换行的字符串
- 多语言环境（如按钮文字是中文“零”）
正确做法是给按钮加语义化 class：<button class="btn digit" data-value="0">0</button>、<button class="btn operator" data-value="+">+</button>，JS 中统一读 e.target.dataset.value。这样既解耦显示文案与逻辑，又为后续支持主题切换、无障碍（aria-label）留余地。
真正卡住人的不是怎么写结构，而是结构写完后，JS 里怎么安全地解析表达式——eval() 看似省事，但遇到 1+2*3 或 5--3 就容易算错，而且执行任意代码有风险；手写运算符优先级解析又容易漏掉括号嵌套和浮点误差。这点不提前想清楚，后面功能越加越难维护。
