健身网站需严格遵循HTML语义化规范：主标题用唯一，简介置于内，封面图用，动作列表必须用而非，评论区用带aria-labelledby的。
健身网站不是堆 div 拼出来的，而是靠语义结构撑起来的——用错一个标签，SEO 掉权重、屏幕阅读器读错逻辑、键盘用户跳不过列表，全在你写第一行 <header></header> 时就埋了雷。
课程页主标题和简介怎么套标签
主标题必须是全页唯一的 <h1></h1>，不是 <h2></h2> 或多个 <h1></h1>。简介段落不属于 <header></header> 的职责范围，哪怕它紧挨着标题显示。
-
<header></header>只包裹本节的元信息：比如课程名 + 难度图标 + 教练头像 + 收藏按钮，不包封面图、不包简介文字 - 简介属于主体内容，应放在
<main><section></section></main>内，用<p></p>或带辅助数据的<dl></dl>（如“训练时长：<dd></dd>45分钟”） - 封面图必须用
<figure><img><figcaption></figcaption></figure>，不能塞进<header></header>里“凑结构”
训练动作列表为什么不能用 <section></section>
动作顺序不可更改，本质是有序数据流，不是逻辑区块。用 <section></section> 会丢失顺序语义，键盘 Tab 键直接跳过整块，语音助手无法识别为“第1个动作、第2个动作……”
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须用
<ol></ol>，每个动作项用<li>包裹 -
<li>内部用<h3></h3>标动作名，<time></time>标组数/次数（如<time datetime="3x12">3组×12次</time>），<meter></meter>标强度（value="7" max="10"） - 若划分“热身→主训→拉伸”，才在外层用三个
<section></section>，每个内部再放各自的<ol></ol> - 视频演示直接放对应
<li>里，不要额外套<figure></figure>—— 除非你要加字幕轨道或下载链接
评论区该用 <section></section> 还是 <aside></aside>
评论区是强关联的独立交互模块，不是附属内容，也不是侧边栏式提示，必须用 <section></section> 并带上 aria-labelledby 指向评论标题。
-
<aside></aside>只适用于真正“可脱离上下文存在”的内容，比如同类课程推荐、营养小贴士浮层、教练资质说明 -
<section></section>配合aria-labelledby="comments-title"，能让屏幕阅读器明确告知“这是‘用户评论’区域” - 禁用
<div class="comments"> —— 它既无语义，也不支持原生焦点管理，表单提交后无法自动滚动到新评论位置 <p>最常被忽略的是：语义标签不是“锦上添花”，而是功能前提。一个没用 <code><ol></ol>的动作列表，哪怕 CSS 再漂亮，对残障用户就是不可操作的黑箱；一个把简介硬塞进<header></header>的页面，搜索引擎可能直接判定结构混乱而降权。写完第一版 HTML，先关掉样式看结构树，再用键盘 Tab 测试导航流——这才是健身网站能真正“动起来”的起点。
