安全获取实时AQI数据需选CORS友好接口（如和风天气）、设超时、后端代理生态环境部接口；HTML语义化结构+JS校验渲染+localStorage缓存+分级色值映射+错误降级兜底。
直接用 HTML 展示 AQI 指数本身不难，但真正能用、不翻车的关键在于：数据源不可控、接口格式多变、前端没做兜底时页面直接空白——这不是写几个 <div> 就能解决的事。
<h3>怎么安全拿到实时 AQI 数据（别硬写死）</h3>
<p>AQI 数据必须从外部 API 获取，常见来源有中国生态环境部公开接口、aqicn.org、或商业服务商（如和风天气）。硬编码数值（比如写死 <code>aqi: 42）只适合 demo，上线即失效。
- 优先选带 CORS 支持的接口，否则浏览器会报
Blocked by CORS policy - 和风天气免费版需申请
key，请求地址类似https://devapi.qweather.com/v7/air/now?location=101010100&key=YOUR_KEY - 生态环境部官网接口不支持跨域直连，必须走自己后端代理，否则 fetch 会静默失败
- 一定要设超时（
AbortController），避免用户卡在「加载中…」无限等待
HTML 结构怎么写才方便后续绑定与样式扩展
别用一堆嵌套 <span></span> 堆砌数字，结构要语义清晰、便于 JS 操作和 CSS 定制。
- 用
<section aria-label="空气质量指数"></section>包裹整体，提升可访问性 - AQI 数值单独用
<strong class="aqi-value"></strong>，等级描述（如“良”）用<span class="aqi-level"></span> - 污染首要因子（PM2.5、O3 等）用
<dl> <dt>PM2.5</dt> <dd>36</dd> </dl>，比纯<div> 更利于屏幕阅读器解析 <li>避免内联样式，所有颜色、背景由 class 控制（比如 <code>aqi-level-good、aqi-level-unhealthy） - 首次加载用
localStorage.getItem('aqi_cache')读缓存，避免白屏 - fetch 成功后立刻
localStorage.setItem('aqi_cache', data)，并设时间戳字段用于 15 分钟过期判断 - 渲染前校验关键字段是否存在（如
data.current?.aqi），缺失则显示暂无数据而非undefined - 不要用
document.write()或innerHTML = '...'拼接整段 HTML，容易 XSS；用textContent设文本，className控制状态类 - 中国标准 AQI 0–50 是绿色（优），51–100 是黄色（良），101–150 是橙色（轻度污染）——注意不是所有接口都按此返回
level字段 - 有些接口只返回
aqi数字，需要你自己写映射函数，别漏掉边界值（比如 100 和 101 分属两个等级） - 用 CSS 变量定义色值（
--aqi-good: #66cc66），方便后期统一换主题，而不是在 JS 里拼style.color = '#66cc66' - 深色模式下绿色可能看不清，建议同时设置
color-scheme: light dark并用@media (prefers-color-scheme: dark)微调亮度
为什么用 JavaScript 渲染而不是服务端吐 HTML
因为 AQI 每小时甚至每分钟更新，静态 HTML 缓存一小时就过期；而前端定时拉取 + localStorage 缓存可兼顾实时性与降载。
立即学习“前端免费学习笔记（深入）”；
颜色和等级映射最容易出错的地方
AQI 分级标准不止一种：国标（GB3095-2012）和美国 EPA 标准数值范围不同，直接套用别人代码里的色值表可能把「良」标成红色。
最常被忽略的是错误降级：网络失败、API 返回空对象、字段名突然变更（比如把 pm25 改成 pm2p5）——这些情况不显式处理，用户看到的就是一片空白或 NaN。留一个带 class 的 fallback 元素，比什么都强。
