纯html无法实现实时天气展板，必须用javascript调用天气api（如openweathermap）获取数据，html仅负责结构与样式；最小可行结构用语义化div划分区域，配合fetch动态更新内容，并注意api密钥安全、单位设置及错误处理。
用纯 HTML 搭建「今日天气展板」根本不需要复杂框架，但直接写容易变成静态页面——真要显示实时天气，必须接入 API，否则只是个好看摆设。
为什么不能只写 HTML？
HTML 本身不提供获取网络数据的能力。你看到的“今日天气”如果没连外部服务，就只能是手写死数据，比如：26°C，多云——第二天就过期。真实可用的展板，得靠 JavaScript 调用天气 API（如 OpenWeatherMap、和风天气），而 HTML 只负责结构和样式。
最简可行结构：用 <div> 组织核心区块
<p>别一上来就套 Bootstrap 或 Tailwind。先用语义清晰的 <code><div> 划分区域，方便后续加 JS 和 CSS：
<pre class="brush:php;toolbar:false;"><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></pre>
<ul>
<li>
<code>id="weather-board" 是 JS 操作入口，后续用 document.getElementById 更新内容
class 名直白对应字段，避免用 box1、item-a 这类无意义命名调用天气 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() 至少让展板显示“加载失败”，别让它空着干等。
