HTML中无caption标签用于字幕，正确字幕标签是track，须作为video/audio子元素且kind="subtitles"，src指向合法WebVTT文件，srclang符合BCP 47格式。
HTML 中没有 <caption></caption> 标签用于字幕（subtitles），你遇到的“字幕标签解析报错”，大概率是误用了 <caption></caption>、<track></track> 或手写了不存在的 <subtitle></subtitle> 标签——浏览器直接忽略或报错，根本不会解析为字幕功能。
为什么 <caption></caption> 不是字幕标签
<caption></caption> 是表格（<table>）的标题容器，语义上与视频/音频字幕完全无关。写成 <code><caption>你好</caption> 放在 <video></video> 里，浏览器既不报错也不渲染，只是当普通文本塞进 DOM；若放在表格外，HTML5 甚至会静默丢弃它。
常见错误现象：
- 开发者把
<caption></caption>当作视频下方文字框，结果页面空白或位置错乱 - W3C 验证器报
Element caption not allowed here，尤其在<video></video>或<div> 内 <li>用 JS 动态插入 <code><caption></caption>后调用element.textContent能取到值，但无法触发任何字幕行为
<track></track> 才是合法字幕载体，但必须配合 <video></video> 或 <audio></audio>
真正支持字幕的原生 HTML 标签只有 <track></track>，且它必须作为 <video></video> 或 <audio></audio> 的子元素，且 kind 属性设为 "subtitles"。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
<video controls> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" label="中文" srclang="zh" src="zh.vtt" default> </video>
关键点：
-
<track></track>是 void element，禁止写或<track></track>—— 后者在部分构建工具中会被截断 -
src必须指向有效的 WebVTT 文件（.vtt），不能是 HTML 片段或内联文本 -
srclang必须是 BCP 47 格式（如zh-CN），空值或错写（如zh）会导致字幕不加载 - 浏览器只在用户开启字幕菜单时才加载并渲染
<track></track>，不会自动显示
校验 <track></track> 是否生效的三步实操
别依赖肉眼观察，很多问题在 DOM 里“看起来正常”，实际被浏览器静默忽略。
第一步：检查控制台是否有媒体相关警告
- 打开 DevTools → Console，播放视频，看是否有
Failed to load resource: net::ERR_ABORTED（src路径 404） - 或
Text track language is invalid（srclang格式错误）
第二步：确认 <track></track> 已被识别为启用状态
- 在 Elements 面板中右键
<track></track>→Break on > attribute modification - 刷新页面并播放，若
readyState始终为0（TRACK_OFF），说明未加载成功
第三步：用 html-validate 拦住源头问题
- 在
.htmlvalidate.json中加规则："track-required-srclang": true、"track-valid-kind": true - CI 流水线中运行
npx html-validate src/**/*.html，自动拦截缺失srclang或kind="metadata"误配
最容易被忽略的兼容性陷阱
<track></track> 在 Safari 和旧版 Edge 中对 WebVTT 的语法极其敏感：一个空行、BOM 头、或注释里的中文标点，都可能导致整条字幕不显示，且控制台零报错。
务必做到：
- WebVTT 文件用 UTF-8 无 BOM 编码保存（VS Code 右下角确认）
- 首行必须是
WEBVTT，后面紧跟空行，不能有空格或注释 - 时间戳格式严格为
00:00:01.000 --> 00:00:03.000，毫秒位必须三位 - 避免在 .vtt 文件中使用
<b></b>等 HTML 标签——仅支持<c></c>、<i></i>、<u></u>等有限样式标签
