组织视频播放列表应使用语义化html：用section包裹模块并配h2/h3标题，每个视频用figure+figcaption封装，提供mp4+webm双格式source及降级文本，添加controls、aria-label和track字幕。
组织视频播放列表页面，关键在于结构清晰、语义明确、适配多端，同时兼顾可访问性与浏览器兼容性。不用堆砌 div，而是用对的标签表达对的逻辑。
用 section 包裹整个播放列表模块
每个播放列表（如“最新课程”“热门推荐”）应独立成块，section 最适合表达这种有标题、有上下文的内容区块。
- 添加 h2 或 h3 作为列表标题，利于 SEO 和屏幕阅读器识别
- 避免用 div class="playlist" 替代，它没有语义含义
- 示例结构：
入门教程视频
每个视频用 figure + figcaption 封装
figure 表示一个独立的媒体单元，figcaption 提供标题或说明——这对理解内容、支持无障碍访问非常关键。
- 即使不加封面图（poster），也建议保留 figcaption 描述视频主题
- figcaption 可包含时长、更新时间等辅助信息，提升信息密度
- 示例：
为每个视频提供多格式源和降级文本
仅写一个 MP4 源容易在某些浏览器（如旧版 Firefox、部分 Linux 环境）中失败。必须通过 source 标签提供至少两种格式，并内置提示文字。
- 推荐组合：MP4（H.264+AAC） + WebM（VP9+Opus），覆盖绝大多数现代浏览器
- video 标签内部最后一行应是纯文本，用于不支持 video 的环境（如极简终端、老旧设备）
- 不要省略 type 属性，它帮助浏览器快速跳过不支持的格式
响应式布局与可访问性补充
播放列表常需网格或横向滚动展示，但底层结构不能牺牲语义。
- CSS 中给 video 设置 max-width: 100% 和 height: auto，防止溢出容器
- 为每个 video 添加 controls 属性，确保基础操作可用；若需自定义控件，先移除 controls 再用 JS 实现
- 添加 aria-label（如 aria-label="观看《CSS Flex 布局详解》视频"），辅助屏幕阅读器用户定位
- 如有字幕，用 track 标签引入 WebVTT 文件，属性 kind="subtitles"、srclang、label 不可少
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
