教育网站HTML布局须用语义标签+流式控制：课程模块用带标题的，时间用，导航用带aria-label的（限2–3个），主结构用grid、内部对齐用flex。
教育网站的 HTML 布局不是“怎么堆元素”，而是「用对语义标签 + 控制好容器流式行为」。错用 <div> 套一层再加 class，或硬塞 <code><table> 排课程表，会导致结构不可读、屏幕阅读器失效、响应式改起来像拆炸弹。
<h3>课程模块必须用 <code><section></section> 包裹，且带标题
每门课（含标题、简介、时间、教师、报名按钮）是一个独立主题单元，<section></section> 是唯一符合语义的标签。用 <div class="course-item"> 看似一样，但搜索引擎和读屏软件无法识别其内容边界。
<ul>
<li>
<code><section></section> 内必须有 <h2></h2>～<h6></h6>，不能空着；没有标题就不是“节”
<section></section>，但层级别超两层<section></section>，也别把单个时间点单独抽成 <section></section>
<section><p>Python 入门</p></section> → 缺标题，语义断裂课程时间必须用 <time datetime></time> 标记
纯文本“每周三 19:00–20:30”对机器毫无意义。搜索引擎、日历工具、语音助手依赖 datetime 属性提取结构化时间。
立即学习“前端免费学习笔记（深入）”；
- 固定时段：
<time datetime="T19:00">19:00</time>–<time datetime="T20:30">20:30</time> - 开课日期：
<time datetime="2026-05-10">5月10日</time> - 持续周期（ISO 8601）：
<time datetime="P8W">8周</time> - 错误示例：
<p>开课时间：2026-05-10</p>→ 无datetime，不被解析为日期
分类导航用 <nav></nav>，但限 2–3 个且带 aria-label
顶部课程类别栏（如“编程｜设计｜语言”）或侧边难度筛选（“入门｜实战”）属于站点级导航，该用 <nav></nav>。但滥用会污染辅助技术上下文。
- 一个页面最多 2–3 个
<nav></nav>，每个必须加aria-label区分用途，例如：<nav aria-label="课程分类导航"></nav> - 轮播图下方的标签云、每门课内的“上一节｜下一节”不是
<nav></nav>场景，后者应放在<footer></footer>或用更轻量方式处理 - 移动端折叠菜单展开后，DOM 结构必须仍在原
<nav></nav>内，不能动态移出 - 点击切换分类时，焦点要同步移到新激活项，否则键盘用户会卡住
主布局优先用 display: grid 划区域，内部用 display: flex 对齐
教育网站常见结构是 header + nav + main（课程列表）+ aside（侧边筛选）+ footer，Grid 天然适合这种二维划分；而课程卡片内按钮组、讲师头像+姓名排列，则用 Flex 更自然。
- 外层容器设
display: grid，用grid-template-columns和grid-template-rows定义骨架，比grid-template-areas更易维护 - 避免只给子元素写
grid-area却忘了父容器没设display: grid—— 这是最常发生的“完全没效果”原因 - 课程卡片内部用
display: flex对齐按钮或讲师信息，注意加min-width: 0防止长 URL 撑破容器 - IE11 不支持 Grid，若需兼容，得 fallback 到 Flex 或 float，不能指望 autoprefixer 补全
最容易被忽略的是：语义标签不是“锦上添花”，而是布局生效的前提。比如 <main></main> 的存在会影响某些 screen reader 的跳转逻辑，<time datetime></time> 缺失会让课程日历集成直接失败——这些都不是样式问题，而是结构契约。
