纯HTML无法实现实时天气展板，必须用JavaScript调用天气API（如OpenWeatherMap）获取数据，HTML仅负责结构与样式；最小可行结构用语义化div划分区域，配合fetch动态更新内容，并注意API密钥安全、单位设置及错误处理。
用纯 HTML 搭建「今日天气展板」根本不需要复杂框架，但直接写容易变成静态页面——真要显示实时天气，必须接入 API，否则只是个好看摆设。
为什么不能只写 HTML？
HTML 本身不提供获取网络数据的能力。你看到的“今日天气”如果没连外部服务，就只能是手写死数据，比如：26°C，多云——第二天就过期。真实可用的展板，得靠 JavaScript 调用天气 API（如 OpenWeatherMap、和风天气），而 HTML 只负责结构和样式。
最简可行结构：用 <div> 组织核心区块
别一上来就套 Bootstrap 或 Tailwind。先用语义清晰的 <div> 划分区域，方便后续加 JS 和 CSS：
<div id="weather-board"> <div class="location">北京</div> <div class="temp">26°C</div> <div class="condition">多云</div> <div class="update-time">更新于 10:23</div> </div>
-
id="weather-board"是 JS 操作入口，后续用document.getElementById更新内容 - 每个
class名直白对应字段，避免用box1、item-a这类无意义命名 - 不要提前写太多嵌套层级，JS 动态插入图标或湿度/风速时再扩展
调用天气 API 的最小 JS 脚本怎么写？
以 OpenWeatherMap 为例（需免费注册获取 API key），关键不是“怎么发请求”，而是“怎么安全、可读地塞进 HTML”：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
fetch("https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=YOUR_KEY&units=metric")
.then(r => r.json())
.then(data => {
document.querySelector(".location").textContent = data.name;
document.querySelector(".temp").textContent = Math.round(data.main.temp) + "°C";
document.querySelector(".condition").textContent = data.weather[0].description;
document.querySelector(".update-time").textContent = "更新于 " + new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
});
-
units=metric决定温度单位，漏写会返回开尔文（299.15K），看着像 bug -
data.weather[0].description是中文描述，但 API 默认返回英文，加&lang=zh_cn才能得“多云”而非“scattered clouds” - 别把
YOUR_KEY硬编码在前端 HTML 里——公开仓库或分享页面等于泄露密钥；本地调试可暂放，上线务必用后端代理
字体、颜色、响应式这些怎么快速搞定？
不用下载字体库或写媒体查询。直接用系统级安全字体 + 简单内联样式：
<style>
#weather-board {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
text-align: center;
padding: 24px;
}
.temp { font-size: 3rem; font-weight: bold; }
.condition { color: #555; margin-top: 8px; }
@media (max-width: 480px) {
.temp { font-size: 2.2rem; }
}
</style>
-
-apple-system等是 iOS/macOS 安卓都兼容的默认字体栈，比"Microsoft YaHei"更稳妥 -
@media查询只针对手机窄屏，平板和桌面无需额外适配——展板通常固定尺寸，没必要过度响应 - 避免用
!important强覆盖，后期维护时你会找不到谁改了颜色
真正卡住人的从来不是 HTML 标签怎么写，而是 API 返回字段名记错（比如把 main.temp 写成 temperature），或者忘记处理网络失败状态——加个 .catch() 至少让展板显示“加载失败”，别让它空着干等。
