HTML怎么做天气查询_HTML天气预报查询页面实现【进阶】-html教程-PHP中文网

优先选用明确标注“cors enabled”的天气api（如open-meteo.com），否则须通过后端代理中转，禁在前端硬编码key；渲染时用textcontent防xss，ip定位需合规提示并提供手动修正入口。

html怎么做天气查询_html天气预报查询页面实现【进阶】

用 fetch 调用免费天气 API 时，跨域被拒怎么办

浏览器直接 fetch 第三方天气接口（比如 https://api.open-meteo.com）通常没问题，但若误选了只支持服务端调用的 API（如某些需要 Origin 白名单或强制带 Referer 的私有接口），就会遇到 No 'Access-Control-Allow-Origin' header 错误。

实操建议：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

优先选明确标注 “CORS enabled” 或 “Browser-ready” 的 API，open-meteo.com 和 weatherapi.com（需注册获取 key，但默认开启 CORS）是较稳妥的选择
避免直接请求类似 http://www.weather.com.cn 这类国内门户的内部接口——它们不仅有反爬，还严格校验 Referer 和 User-Agent
如果必须用受限接口，得走自己搭的代理中转（例如用 Express 写个 /api/weather 接口，后端发请求再返回），不能靠前端硬扛

HTML + JavaScript 里怎么安全拼接天气数据，不被 XSS 注入

拿到 API 返回的天气描述（比如 data.current.condition.text 是 "Sunny <script>alert(1)</script>"），如果直接用 innerHTML = ... 渲染，就可能执行恶意脚本。

实操建议：

一律用 textContent 设置文字内容：document.getElementById('weather-desc').textContent = data.current.condition.text
若需保留简单格式（如换行、加粗），先做白名单过滤：用 DOMPurify.sanitize()（引入 dompurify.min.js）处理后再赋给 innerHTML
温度、湿度等数值字段，用 Number() 或 parseInt() 显式转换，避免隐式类型转换导致意外字符串拼接

用户没开定位，又不想手动输城市，怎么 fallback 到 IP 地理位置

navigator.geolocation 拒绝授权后，getCurrentPosition 会进 error 回调；此时可调用 IP 定位服务补位，但要注意准确度和隐私提示。

实操建议：

推荐用 https://ipapi.co/json/（免费版限 1000 次/天），它返回 city、latitude、longitude，可直接喂给天气 API
调用前必须在页面显眼处加提示：“为提供本地天气，将使用您的 IP 估算位置（不收集个人身份信息）”，否则违反 GDPR / 《个人信息保护法》
IP 定位误差常达 10–50 公里，建议把结果标为“大致位置”，并在 UI 上留个手动搜索框入口（<input id="city-search">）

为什么用 `<picture></picture>` 加载天气图标比单纯 `<img src>` 更合理

不同天气状态（晴、雨、雾、雪）需要不同图标，且要适配暗色模式、高对比度系统、2x 屏幕——全靠 JS 切换 src 容易闪动、不响应系统偏好。

实操建议：

用 <picture></picture> 配合 media 和 srcset：

<picture><source media="(prefers-color-scheme: dark)" srcset="icon-sun-dark.svg"><source media="(prefers-reduced-motion: reduce)" srcset="icon-sun-static.svg">
  @@##@@
</source></source></picture>

图标文件优先用 SVG（体积小、缩放无损），避免 PNG/JPG；所有图标统一尺寸（如 64×64），CSS 不要用 width: 100% 拉伸
不要在 JS 里动态改 img.src，而是在获取天气数据后，用 dataset 标记当前状态，让 CSS 通过 [data-weather="rainy"] .weather-icon {...} 控制显示

实际最难的不是调 API 或写 HTML，是处理「定位失败 → IP 不准 → 用户看到隔壁市的天气 → 点反馈说不准」这个链路。得在 UI 上悄悄埋一个 report-wrong-location 按钮，点完弹个 prompt("您实际所在城市是？")，把结果记到日志里——后面才能知道哪些 IP 段偏差大，该加规则还是换服务商。