bmi计算器需用html输入框（type="number"）、按钮和结果容器，js校验单位（身高米/体重千克）、计算bmi并按中国标准分类显示颜色。
怎么用 HTML + JavaScript 实现一个能算 BMI 的页面
直接能跑的 BMI 计算器，不需要框架、不依赖外部库，纯原生写法。核心就三块：输入身高体重的 <input>、一个触发计算的 <button></button>、一个显示结果的 <div> 或 <code><p></p>，再加一段 JS 算逻辑。
注意：HTML 本身不处理计算，必须配合 JavaScript；否则只能做静态展示，不能“算”。
-
<input type="number">比type="text"更可靠，能限制用户只输数字（但依然要 JS 校验，因为用户可能清空或输负数） - 身高单位默认用米（如 1.75），体重用千克（如 68）——这是 WHO 公式
BMI = weight / (height * height)的标准单位，别用厘米或磅直接代入 - 把
<button></button>的type显式设为"button"，避免表单默认提交刷新页面
为什么输入 170 和 65 会算错？单位陷阱在这里
常见错误是用户填“170”当身高（以为是厘米），代码却按米算：65 / (170 * 170) ≈ 0.002，结果荒谬。必须明确单位归属，并在界面上写清楚。
- 方案一（推荐）：输入框旁标注单位，比如
<label>身高（米）</label><input id="height" type="number" step="0.01"> - 方案二：接受厘米输入，JS 里自动除以 100，即
const h = parseFloat(heightInput.value) / 100; - 别用
parseInt()处理身高，它会截断小数（parseInt("1.75") → 1），改用parseFloat()或直接Number()
怎么根据 BMI 值返回中文分类和颜色提示
WHO 分类只是参考，国内《中国成人超重和肥胖症预防控制指南》略有不同。实际用时建议按后者分段，且用 CSS 类名控制颜色，别用内联 style 写死。
- 常见分段（中国标准）：
＜18.5 → 偏瘦（class="underweight"）
18.5–23.9 → 正常（class="normal"）
24.0–27.9 → 超重（class="overweight"）
≥28.0 → 肥胖（class="obese"） - 判断时用
和 <code>>=要小心边界，比如bmi >= 24.0 && bmi ，别漏掉等于号 - 给结果容器设置
id="result"，JS 里用resultElement.className = "normal"切换样式，比反复拼字符串更可控
移动端输入数字键盘不弹出？这个属性很关键
在 iOS Safari 和部分安卓浏览器中，type="number" 不一定弹出数字键盘，尤其当 inputmode 缺失时。
- 补上
inputmode="decimal"（身高可能带小数）或inputmode="numeric"（体重通常整数），能显著提升软键盘匹配度 - 同时加
pattern="[0-9]*"和inputmode是稳妥组合，但注意pattern只影响表单校验，不影响 JS 读值 - 别依赖
maxlength限制位数，它对小数无效（比如maxlength="3"会卡住 1.75），优先靠 JS 截断或提示
最易被忽略的是输入容错：用户可能粘贴非数字字符、连续点小数点、输科学计数法（如 1e2）。上线前至少加一行 value = value.replace(/[^0-9.]/g, "").replace(/\.{2,}/g, "."); 清洗。
