课程页应正确使用HTML5语义标签:主标题用唯一,简介放内中;课程卡片用,动作列表用而非;评论区用并关联aria-labelledby。

健身网站的课程页不需要堆砌 课程主标题必须用 训练动作是课程页的核心数据流,不是普通“章节”。用 评论区不是课程内容的一部分,也不是侧边栏式辅助信息,它是独立交互模块,且与当前课程强关联。应该用 立即学习“前端免费学习笔记(深入)”; 第3周明显感觉核心更稳了,动作控制力提升很多! 最常被忽略的是:HTML5 标签不解决样式问题,但错误嵌套会让 CSS 选择器失效、JS 获取元素逻辑错乱、甚至导致部分旧版读屏软件完全跳过整块内容。别为了“语义化”而硬套标签,先想清楚这段内容在用户心智模型里“算什么”,再选标签。课程标题和简介该套哪个标签
(全页唯一),但简介段落不能塞进 里凑数。真实场景中, 应包裹整个课程页顶部区域,包括:课程名、难度图标、教练信息、收藏按钮。简介文字属于内容主体,应放在 内部的 中,用 或 (若含训练目标/时长/消耗卡路里等辅助信息)。
不等于“页面最上面那块”,它只负责本节内容的头部元信息(比如某个训练模块的子标题) 包裹,内部再设自己的 —— 图片是内容,不是结构头;该用 + + 训练动作列表为什么别用
会模糊其功能性语义。正确做法是用 (有序列表),因为动作顺序不可调换;每个动作项用 ,内部嵌套 (动作名)、(组数/次数)、(强度值)等内联语义标签。
适合划分逻辑区块(如“热身”“主训”“拉伸”),每个区块用一个 ,内部再放 应直接放在对应 内,不要额外包 —— 除非需添加字幕或下载链接:丧失语义、键盘导航跳过、无法被语音助手识别为列表
课程评论区用
,并加 aria-labelledby 指向评论标题; 仅适用于真正“附属”的内容(比如同类课程推荐、营养小贴士浮层)。
内部,且用 标签明确标注,包含 (用户头像+昵称+时间)、(正文)、(点赞/回复按钮)hidden 属性而非 display: none,确保无障碍工具仍可感知其存在学员反馈











