纯HTML文件无法获取真实天气数据，因其无网络请求能力且受CORS限制；需JS+合法API+服务端代理或开发服务器才能拉取实时数据。
直接用纯 HTML 文件无法“在线运行”真实天气预报——它没有网络请求能力，也不能执行 JavaScript，更绕不过浏览器的 CORS 限制。所谓“在线运行”，实际是指：在本地双击打开 index.html 后，页面能立即展示（哪怕只是静态模板），而真要拉取实时数据，必须靠 JS 驱动 + 合法 API + 服务端代理或开发服务器。
为什么双击 HTML 打不开 OpenWeatherMap 数据？
浏览器禁止本地文件（file:// 协议）发起跨域请求。你写好 fetch("https://api.openweathermap.org/...")，控制台会直接报错：Access to fetch at 'https://...' from origin 'null' has been blocked by CORS policy。这不是代码写错了，是安全机制卡死的。
常见误操作包括：
- 把
main.js放在script标签里，但没起本地服务，直接双击 HTML —— fetch 永远失败 - 用 iframe 嵌入第三方天气代码（如天琪天气的
src="http://i.tianqi.com/..."），看似能显示，实则依赖对方是否允许被嵌入、是否支持 HTTPS、是否已下线 - 把 API Key 硬编码进 HTML 源码，导致密钥泄露风险极高
前端 UI 设计的三步落地顺序
别先写 JS，UI 结构决定后续数据怎么塞进去。按“占位→适配→响应”推进：
立即学习“前端免费学习笔记（深入）”；
-
语义化占位：用
<section aria-label="当前天气">替代<div class="now-weather">；温度数字单独包一层<span data-field="temperature">--</span>，不写死 “26°C” -
移动端优先断点：当前天气卡片默认
flex-direction: column；桌面端用@media (min-width: 768px)切成grid-template-columns: 1fr 2fr左图右文 -
图标与文字基线对齐：如果用 Weather Icons 字体，必须设
font-size和line-height，否则<i class="wi wi-day-cloudy"></i>会和文字上下错位
如何让页面“看起来能运行”又不翻车？
本地开发阶段，用最简方式验证流程通不通，而不是强求实时数据：
- 写一个
mockData.json文件，内容是 OpenWeatherMap 返回的典型结构（含main.temp、weather[0].main等字段），放在同目录下 - JS 里先
fetch("./mockData.json")，成功后再换真实 URL；避免一上来就因密钥或网络问题卡住 - 所有动态字段都加 fallback：比如
data?.main?.temp ?? "--"，防止字段缺失时整个页面崩溃 - 城市输入框回车触发查询，比只绑
click更符合用户习惯；同时加input事件监听防空提交
真正容易被忽略的是：不同天气 API 的字段名根本不统一。OpenWeatherMap 的 weather[0].description 是“scattered clouds”，和风天气的 now.text_day 是“多云”。硬编码字段名等于把接口耦合进 UI 层，后期换服务商就得重写 JS 渲染逻辑。
