标签属性里的“标题”该怎么写？说说 optgroup 和 track 的 label
在HTML里，label这个属性看似简单，用不好却很容易埋下坑。特别是对于optgroup和track这两个元素，它们的label属性规则既严格又有特定的生效场景，绝不是随便填个文字就行。下面就把这两个容易混淆的细节掰开来说说。
optgroup 的 label 属性是分组标题，不可省略或为空
当你用做一个下拉菜单，并希望把选项分组显示时，就派上用场了。而它的label属性，就是这个分组的“脸面”——浏览器全靠它来显示分组的名称。这个值不随表单提交，也不影响选项的值，但如果你漏写或者写了个空字符串（label=""），问题就来了：Chrome和Firefox会渲染出一个空白的分组项，视觉上很怪异；而Safari可能会直接忽略这个分组，甚至抛出DOM解析警告。
所以，实操的时候得记住这几点：
label的值必须是有意义的词组，比如label="国内城市"或label="Popular Brands"。别用空格、- 也别想着用CSS的
::before伪元素来伪造一个标题，屏幕阅读器根本读不到，这直接就违反了无障碍访问的基本原则。 - 如果
label的内容是动态生成的，尤其是来自用户输入，务必做好HTML实体编码。像<、>、"这些字符，不转义的话分分钟会破坏整个DOM结构。
track 的 label 属性仅在 kind="subtitles" 或 "captions" 时生效
另一个容易用错的地方是标签。它的label属性可不是摆设，这是给用户看的轨道名称，当用户在视频播放器里切换字幕或音轨时，显示的就是这个label。但这里有个关键限制：这个属性只在kind值为subtitles（字幕）、captions（说明字幕）、descriptions（音轨描述）时才起作用。如果你的kind设成了metadata或chapters，对不起，浏览器会直接无视label，它也不会出现在任何选择菜单里。
下面这几种错误，在实际开发中屡见不鲜：
- 给
kind="metadata"的轨道设置label="English"，结果用户界面上根本找不到这个选项。 - 多个
的label值重复了（比如都写成label="中文"），浏览器很可能只显示第一个，后面的会被悄无声息地合并或忽略。 label里包含了斜杠(/)、空字符(\0)这类非法字符，或者长度超过了100个字符，在一些旧版本的Edge或iOS Safari上，可能导致渲染截断甚至轨道加载失败。
两者 label 都不支持 HTML 内容，且无对应 JS 属性映射
无论是optgroup还是track，它们的label属性都只接受纯文本。别指望在里面插入标签或者内联样式来实现富文本效果，浏览器不认这个。
更需要注意的是Ja vaScript的访问方式。对于元素，DOM上并没有一个直接的label属性给你用，你必须通过getAttribute('label')来读取。而元素虽然有一个track.label属性，但它要等到轨道资源加载完成（触发onload事件后）才是有意义的，初始状态很可能是空字符串或者undefined。
这里有两个性能上的小提示：
- 频繁调用
optgroup.getAttribute('label')本身没问题，但避免在紧凑循环里反复查询同一个节点的属性。 - 监听
video.textTracks时，不要默认track.label已经准备好了。保险的做法是，等到track.mode不是'disabled'，并且确认track.kind有效之后，再去取label的值。
国际化场景下，label 不能靠 lang 属性自动切换
最后一个常见的误区是多语言支持。optgroup和track的label都是写死的静态字符串，它们不会随着页面lang属性的改变，或者用户系统语言的切换而自动变化。
要实现动态语言切换，你必须手动操作DOM：对于optgroup，可以使用setAttribute('label', localizedLabel)来更新；但对于track，由于它的label属性在大多数环境下是只读的，更稳妥的做法是移除旧的元素，然后插入一个带有新label的新元素。
这个过程中有几个细节容易踩坑：
- 更新
optgroup的label后，如果下拉框正处于展开状态，新文字不会立即刷新。用户需要先收起下拉框，再次点击打开，才能看到更新后的分组标题。 - 替换
track的label，直接调用setAttribute是无效的。必须执行remove()和append()这一套“组合拳”。 - 如果是服务端渲染（SSR）并结合国际化方案，务必确保服务端注入的
label初始值与客户端激活（hydration）时的locale设置完全一致，否则很可能引发内容不匹配的错误。
说到底，label属性虽然不起眼，但它直接关系到功能的可用性和用户体验。把这两个元素的规则理清楚，开发时就能避开不少隐藏的陷阱。
