语义化七日天气列表应使用结构，每项含、带aria-label的天气图标、温度及描述，并用CSS Grid实现响应式横竖布局，预留data-day属性供JS动态更新。
用 <ul></ul> + <li> 做语义化七日天气结构
纯 HTML 实现七日天气列表，核心是结构清晰、可读性强、便于后续加样式或 JS 交互。不要用 <table> 或一堆 <code><div> 堆砌——天气是典型的时间序列列表，<code><ul></ul> 最贴切。
每个 <li> 代表一天，内部用 <time></time> 标记日期（支持 datetime 属性），用 <span></span> 区分天气图标占位、温度、天气描述等逻辑块：
<ul class="weather-week">
<li>
<time datetime="2024-06-10">周一</time>
<span class="weather-icon" aria-label="多云">☁</span>
<span class="temp">22°/28°</span>
<span class="desc">多云</span>
</li>
<li>
<time datetime="2024-06-11">周二</time>
<span class="weather-icon" aria-label="晴">☀</span>
<span class="temp">24°/31°</span>
<span class="desc">晴</span>
</li>
<!-- 后续5天依此类推 -->
</ul>-
<time></time>的datetime属性值必须是 ISO 8601 格式（如2024-06-10），否则屏幕阅读器和搜索引擎无法正确解析日期 - 图标用
aria-label补充文字说明，避免纯符号影响无障碍访问 - 温度范围用
<span class="temp"></span>包裹，方便 CSS 单独控制上下标或颜色（比如高温红色、低温灰色）
用 CSS Grid 快速实现响应式横排/竖排切换
移动端要竖排（每天占满一行），桌面端要横排（7天并列），靠 float 或 inline-block 容易错位、换行不可控。直接上 display: grid，几行代码搞定：
.weather-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5rem;
}
.weather-week li {
text-align: center;
}
@media (max-width: 768px) {
.weather-week {
grid-template-columns: 1fr;
}
}- 桌面端
repeat(7, 1fr)让 7 天均分容器宽度；移动端用媒体查询切为单列 -
gap控制间距，比用margin更干净——它不触发外边距合并，也不影响:first-child/:last-child - 别给
<li>设固定宽高，Grid 会自动按内容撑开，适配不同长度的天气描述（比如“雷阵雨伴有短时大风”比“晴”长得多）
用 data- 属性预留 JS 动态更新入口
纯静态 HTML 只能写死数据。真项目里，天气数据大概率来自 API，需要 JS 注入。提前在 HTML 里埋好结构锚点，比后期 DOM 拼接更可靠：
立即学习“前端免费学习笔记（深入）”；
<li data-day="0"> <time datetime=""></time> <span class="weather-icon" aria-label=""></span> <span class="temp"></span> <span class="desc"></span> </li>
-
data-day="0"表示“今天”，data-day="1"是明天……方便 JS 循环填充时精准定位 -
<time datetime=""></time>留空但保留属性，JS 获取 API 返回的 ISO 时间后直接赋值el.dateTime = '2024-06-10'，再更新 innerText 显示“周一” - 所有文本内容都用
innerText（不是innerHTML）写入，防止 XSS 风险——天气描述里不可能有合法 HTML 标签
注意字体图标和 emoji 的 fallback 方案
直接用 ☀️☁️?️ 这类 emoji 虽快，但在 Windows 旧版系统、某些 Linux 发行版或禁用 emoji 渲染的浏览器里可能显示为方框或问号。如果设计要求稳定，得准备降级路径：
- 优先用 SVG 图标：每个天气状态一个内联
<svg></svg>，体积小、缩放无损、颜色可控 - 若坚持用 emoji，至少加一层
<span class="weather-icon">☀<span class="visually-hidden">晴</span></span>，配合 CSS 隐藏文字但保留给读屏软件读取 - 千万别用 Web Font（如 iconfont）加载天气图标——字体文件大、渲染延迟、跨域问题多，且无法用 CSS 直接改色
真正难的不是写出七天结构，而是让「周一」在 6 月 10 日那天自动对应到正确的日期，同时保证弱网下图标不炸、旧系统不崩、读屏器能念出“周三，小雨，19° 到 25°”。这些细节没塞进 HTML 骨架里，后面补就费劲了。
