必须用 JavaScript 调用 OpenWeatherMap API 实现天气查询，HTML 仅负责结构；需注册获取 API key，用 fetch 获取 JSON 数据并动态注入 DOM，注意 URL 编码、温度转换、图标路径拼接及表单默认行为阻止。
怎么用原生 HTML + JavaScript 调用免费天气 API 展示城市天气
不能只靠 HTML 实现天气查询——它没能力发网络请求，必须搭配 JavaScript。主流免费方案是调用 OpenWeatherMap 的 current weather data 接口，需先注册获取 API key（免费 tier 限制 1000 次/天）。
关键点：接口返回的是 JSON，不是 HTML；页面要靠 fetch() 获取数据，再用 document.getElementById() 或 querySelector() 注入到 DOM 中。
- 别把
API key硬写在前端代码里——公开仓库或审查源码时会泄露，临时调试可接受，上线必须后端代理 -
OpenWeatherMap默认返回开尔文温度，要转摄氏度得手动减273.15 - 城市名参数用
q=beijing最简单，但注意 URL 编码：中文城市名（如 “上海”）必须用encodeURIComponent()包裹
为什么搜索框回车没反应？检查事件监听和表单默认行为
常见现象：输入城市名，按回车，页面没变化，控制台也没报错——大概率是表单自动提交导致页面刷新，清空了 JS 状态。
解决方法很简单：给 <form> 绑定 submit 事件，第一行就加 event.preventDefault()。
立即学习“前端免费学习笔记（深入）”；
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
const city = document.querySelector('#city-input').value;
fetchWeather(city);
});
- 别用
onclick绑定搜索按钮——用户习惯按回车，仅靠按钮不覆盖所有场景 - 输入框一定要有
id="city-input"或其他可选中标识，否则querySelector()找不到元素 - 如果用了
async/await，确保fetchWeather()函数声明为async，不然await不生效
显示天气图标失败？别直接拼接 OpenWeatherMap 的 icon URL
OpenWeatherMap 返回的 icon 字段值是类似 "04d" 这样的字符串，不是完整 URL。官方图标准确路径是：https://openweathermap.org/img/wn/${icon}@2x.png。
容易漏掉的细节：
- 返回的
icon值可能带后缀（如"04d"表示白天多云，"04n"表示夜间），直接拼@2x.png就能用，不用判断昼夜 - 图片加载失败时，
<img>标签不会报 JS 错误，但会显示空白或缺省图标——建议加onerror处理：<img src="..." onerror="this.style.display='none'"> - 不要用本地
./icons/xxx.png映射——维护成本高，且无法覆盖全部 50+ 种 icon 状态
响应式布局下天气卡片错位？用 CSS Grid 比 float 更稳
天气信息通常包括城市名、温度、体感、湿度、风速、图标，6 个字段。用 float 或旧式 inline-block 容易在小屏上换行错乱。
推荐直接用 display: grid 控制卡片内部结构：
.weather-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
- 别设固定宽度（如
width: 300px）——移动端撑出横向滚动条 -
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))更灵活，但初学者容易写错括号层级，先用两列稳妥 - 温度数字建议单独包一层
<span class="temp">，方便用font-size: 2em放大，避免影响其他文字行高
真实项目里，天气数据来源、错误提示、加载状态、缓存策略这些都会叠加进来——但纯静态 HTML 页面起步，先把 fetch 跑通、DOM 更新不抖动、图标能加载，就已经越过最大门槛了。
