label点击可触发表单控件，span完全不能；label通过for属性或嵌套绑定input实现焦点/选中，span无任何表单功能。
label 点击能触发表单控件，span 完全不能
这是最核心的区别：只要 label 正确关联了 input（通过 for 属性或嵌套），点击 label 文字就会让对应控件获得焦点、选中或激活；span 无论怎么写、加不加 for、放多近，都毫无反应。
常见错误现象：
- 写了
<span for="user">用户名</span><input id="user">，结果点击“用户名”没反应 - 把
label当成纯样式容器，删掉for或没写id匹配，功能就失效
使用场景明确：只在需要「扩大可点击区域」或「提升无障碍访问」时用 label，比如表单里的 checkbox、radio、text、select 等。
label 的两种绑定方式：for 属性 vs 嵌套写法
for 属性是主流且推荐的方式，它靠 id 关联，结构松散但灵活：
立即学习“前端免费学习笔记（深入）”；
<input id="agree" type="checkbox" name="agree"> <label for="agree">我已阅读并同意用户协议</label>
嵌套写法把 input 直接包进 label，省去 id，但有兼容性风险：
<label><input type="radio" name="gender" value="male">男</label>
注意点：
- 嵌套写法在 IE6 中不生效，现在虽少用，但若需支持极老环境就得避开
- 嵌套时
input必须在label开始标签内，不能写成<label></label><input> -
for的值必须严格等于目标元素的id，大小写、空格、下划线都不能错
span 是纯语义中立的行内容器，不参与表单逻辑
span 的唯一职责是包裹文本或行内内容，供 CSS 或 JS 操作，它没有内置行为，也不影响表单流。它和 label 不是替代关系，而是分工不同。
典型使用场景：
- 给一段文字加颜色：
<p>价格：<span class="price">¥99/p></span> - 局部高亮关键词：
<p>搜索结果包含<span class="highlight">HTML和<span class="highlight">CSS/p></span></span> - 配合 JS 控制显示/隐藏：
<span id="loading">加载中…</span>
性能与兼容性上完全无负担，但别指望它能帮 input 获得焦点——那不是它的活。
无障碍（a11y）和 SEO 上 label 有不可替代性
屏幕阅读器会把 label 和关联的 input 当作一个整体读出，例如：“邮箱地址，编辑文本”，这对视障用户是刚需；而 span 只会被读作普通文本，不带任何控件语义。
搜索引擎也会更信任带正确 label 的表单字段，尤其当 label 含关键词时，可能轻微提升表单页的相关性。这不是黑盒技巧，而是 HTML 语义本该如此。
容易被忽略的一点：如果表单用了 aria-label 或 aria-labelledby，仍建议保留 label 元素——因为部分辅助技术对 ARIA 支持不完整，原生 label 才是最稳妥的兜底方案。
