WebVTT 字幕语法详解：时间码到样式的开发调试指南

标准WebVTT文件第一行必须是WEBVTT声明，后续可接空格和文件描述文本，空行分隔不同结构块。不添加WEBVTT头的文件，多数HTML5播放器无法正常解析。

NOTE注释块用于添加开发标注或字幕说明，支持单行或多行内容，不会被播放器渲染展示。开发调试阶段可使用NOTE块标记待修改的字幕段落，不影响最终播放效果。

每个字幕 cue 由时间码和显示文本组成，时间码格式支持两种毫秒分隔符写法，可使用点号分隔，也可使用逗号分隔，绝大多数现代浏览器仅支持点号写法。

时间码的小时位为可选配置，时长不满1小时的字幕可以省略小时位，省略后格式为MM:SS.sss，完整格式为HH:MM:SS.sss，起始时间与结束时间用 --> 符号分隔。

WebVTT支持六类标准行内标签，用于修改局部文本的展示样式。其中b/i/u分别对应加粗、斜体、下划线，规则与HTML对应标签一致，开发者可直接手写使用。

ruby标签用于标注拼音，lang标签用于标记不同语种文本，voice标签用于标注说话人，这类标签主要用于元数据分类，播放器可基于标签做差异化渲染。

::cue伪元素是CSS针对WebVTT字幕提供的专属伪元素，开发者可通过该伪元素修改网页中所有字幕的默认样式，支持修改颜色、字体、背景等常规CSS属性。

STYLE块用于在WebVTT文件内部定义全局或特定cue的样式，REGION块用于定义字幕的渲染区域，支持多区域同时展示不同字幕，常用于多语言字幕分栏展示场景。

HTML5的track元素用于引入外部WebVTT字幕文件，track元素的kind属性定义字幕类型，共有subtitles、captions、descriptions、chapters、metadata五种取值。

其中subtitles对应通用翻译字幕，captions对应听力障碍用户的字幕，包含环境音标注，chapters对应章节导航，metadata存储页面元数据，不做显示。不同播放器会根据kind属性做差异化处理。