用语义化HTML（section/ol/li）与CSS Grid构建响应式运动计划页，信息层级清晰、适配手机与打印，支持无障碍访问和锚点跳转，无需JS即可实现高效维护与长期可用。
直接用 HTML + CSS 做一个可用的运动计划页，不需要框架、不依赖 JS 就能清晰展示训练日、动作、组数和休息时间——关键不是“多炫”，而是信息层级分明、手机上不挤、打印时还能保留结构。
用语义化 <section></section> 和 <ol></ol> 组织训练日与动作顺序
很多人一上来就用 <div> 套来套去，结果改个标题都要翻三遍代码。运动计划本质是「有序的分组列表」：每周 4 天训练，每天 6 个动作，每个动作带组数/次数/休息。用 <code><section></section> 表示一天，<ol></ol> 表示动作执行顺序，浏览器和屏幕阅读器都能自然理解逻辑。
实操建议：
-
<section></section>加aria-label="周一：上肢推"，方便无障碍访问 - 每个动作用
<li>包裹，内部用<strong></strong>标动作名，<span></span>标参数（如<span>4×10 @60s</span>） - 避免把组数写成图片或 SVG 图标——复制、搜索、翻译全失效
响应式表格替代方案：用 display: grid 控制「动作｜组次｜休息」三列对齐
传统 <table> 在小屏上横向溢出严重，而纯 flex 容易在动作名长度不一时错行。用 <code>display: grid 设三列固定语义轨道更稳：
立即学习“前端免费学习笔记（深入）”；
.exercise-row {
display: grid;
grid-template-columns: 1fr minmax(80px, 120px) minmax(70px, 100px);
gap: 0.5rem;
}
常见错误现象：给每列设死宽度（如 150px），导致中文动作名换行挤压右侧参数；或用 grid-template-areas 写一堆点位，维护成本陡增。
使用场景：
- 动作名较短（如「卧推」「划船」）→ 左列撑开，右两列紧凑
- 动作名带说明（如「哑铃单臂俯卧划船（肩胛收紧）」）→ 自动折行，不影响组次列对齐
- 打印 PDF 时加
@media print { grid-template-columns: 1fr 100px 90px; }防止缩放失真
避免用 <h2></h2> 堆砌每日标题：用 <h3></h3> + id 实现锚点跳转
用户常滚动找「周四腿日」，但页面没跳转入口。别把每天标题都写成 <h2></h2>——语义过重且破坏大纲层级。正确做法是用 <h3></h3>，并加 id，配合顶部导航链接：
<a href="#day-thu">周四：下肢+核心</a> ... <h3 id="day-thu">周四：下肢+核心</h3>
容易踩的坑：
- 用中文或空格作
id值（如id="周四下肢"）→ 锚点失效，必须用字母数字和短横线（id="day-thu-legs"） - JS 强制平滑滚动但没降级：加
scroll-behavior: smooth;到样式里，CSS 原生支持，无需 JS - 移动端点击锚点后标题被顶部导航栏遮住 → 给
<h3></h3>加scroll-margin-top: 60px;
真正难的不是写出页面，而是让别人（包括三个月后的你自己）一眼看懂哪天练什么、每个动作怎么执行、数值单位是否统一。字体大小别小于 16px，组次写法保持全站一致（比如永远用「×」不用「x」或「*」），休息时间统一用「@」符号分隔——这些细节比动画效果更能决定这个计划页到底能不能被坚持用下去。
