label用于绑定单个控件与描述文本，legend才是fieldset分组的唯一语义标题；label通过for/id精准关联，legend必须为fieldset首个子元素且不可省略。
label 和 legend 的语义职责完全不同
label 不是“给表单加标题”，而是“把一段文字和某个具体控件绑定起来”；legend 才是真正的分组标题，它必须包裹在 fieldset 内部，且只能出现一次。混淆这两者会导致语义错误、屏幕阅读器朗读异常，甚至影响表单可访问性测试（如 axe 或 Lighthouse 报 label-missing 或 legend-required 错误）。
label 的 for 属性必须严格匹配控件 id
这是最常出错的地方：只要 for 值和目标 input 的 id 不完全一致（包括大小写、空格、连字符），点击 label 就不会聚焦或切换控件。
-
for="email"必须对应<input id="email" type="email">，不能是id="Email"或id="user-email" - 如果用内联写法（
<label>文本<input></label>），无需for和id，但该写法不支持<textarea></textarea>、<select></select>、<progress></progress>等非自闭合控件 - 一个
label只能绑定一个控件；一个控件可被多个label绑定（比如同一复选框前后各放一个 label）
legend 只能作为 fieldset 的第一个子元素
浏览器会强制将 legend 渲染为 fieldset 的顶部标题，且默认样式带边框切割效果。如果把它放在 fieldset 外面，或嵌套在其他标签里（比如 <div><legend>...</legend></div>），它就失去语义作用，等同于普通文本。
-
legend内容会被屏幕阅读器识别为该字段组的唯一说明，不可省略（除非该fieldset有其他明确的上下文标题） - CSS 中
legend默认是块级且居中，若要左对齐需显式设置text-align: left或margin-left: 0，不能只靠float（部分旧浏览器不兼容） -
fieldset没有legend时，其语义降级为普通容器，辅助技术可能忽略其分组意图
可访问性影响比视觉表现更关键
label 和 legend 都不是“为了好看而加”，而是为了让键盘用户、语音控制用户、屏幕阅读器用户能准确理解控件目的和归属关系。例如：
- 没有
label的<input type="checkbox">，视障用户无法知道这个框代表什么（仅靠 placeholder 或旁边文字不行） - 多个
fieldset分组但无legend，用户无法区分“登录信息”和“安全设置”两个区域的边界 - 用
<div class="label"> 替代 <code><label></label>，即使样式一样，也不会触发焦点转移，也不被 ARIA 检测工具识别真正容易被忽略的是：label 和 legend 的缺失，在视觉上几乎看不出问题，但会让整张表单在无障碍标准下直接不合格。
