直接用 HTML+CSS+JavaScript 就能做出可更新的气象卡片，关键在于结构语义正确、DOM 更新精准、样式不塌陷；所有动态内容必须嵌套在 .container 内，用 textContent 安全更新数值，避免 innerHTML 引入 XSS 风险，并确保 API 数据处理与 DOM 操作在异步回调中执行。
直接用 HTML + CSS + JavaScript 就能做出可更新的气象卡片，不需要框架、不依赖后端，关键在于结构语义对、DOM 更新准、样式不塌。
HTML 结构必须严格嵌套在 .container 内
很多初学者把 <div id="temperature"> 放在 .container 外面，结果样式失效、JS 找不到元素。正确做法是所有动态内容都作为 .container 的子元素存在：
<div class="container"><div><strong>Température :</strong>—°C</div></div>- 用
—占位，而不是空格或 - 避免给每个字段加独立
id（如id="pressure"），改用 CSS 选择器定位更稳定，比如document.querySelector('.container div:nth-child(2)') - 移除冗余双引号：写
Température :，别写"Température :"，否则可能被当作文本字面量渲染
fetch() 返回数据后，用 textContent 而非 innerHTML 更新
气象 API（如 OpenWeather 或自建接口）返回的 JSON 里，温度、气压等都是纯数值，没有 HTML 标签。这时候用 innerHTML 不但没必要，还可能引入 XSS 风险（哪怕当前数据可信，也该养成习惯）：
- ✅ 正确：
tempEl.textContent = data.main.temp + '°C'; - ❌ 危险：
tempEl.innerHTML = data.main.temp + '°C';（万一某天 API 被污染，就执行了脚本） - 如果值里含单位或符号（如
hPa、km/h），统一拼在 JS 里，不要让 API 返回带标签的字符串 - 注意单位换算：OpenWeather 默认是开尔文，得先减 273.15；有些接口直接返回摄氏度，要看文档
CSS 容器宽度固定时，display: inline-block 不是必需
常见误区是以为必须加 display: inline-block 才能让多个卡片横排。其实只要 .container 有明确宽度（比如 width: 200px），且父容器是 display: flex 或 inline-block 容器，它自己保持默认 display: block 就够了：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
.container { width: 200px; margin: 0 8px; }+ 父级display: flex; flex-wrap: wrap; - ❌ 过度设计：
.container { display: inline-block; width: 200px; }—— 在 flex 布局下反而容易因 vertical-align 出现错位 - 若要响应式适配移动端，优先用
@media (max-width: 480px)调整.container宽度，而不是靠inline-block折行
真正容易被忽略的是 DOM 更新时机：API 请求是异步的，不能假设 fetch() 一调用，页面就立刻刷新。务必在 .then() 或 async/await 块里操作元素，否则拿到的是 null。
