Label核心要点
label标签主要用来绑定表单控件，给表单控件提供更好的用户体验
1️⃣ 作用
- 扩大点击区域（尤其对✅复选框/单选按钮）
- 提升可访问性（屏幕阅读器朗读）
- SEO优化（明确表单字段含义）
2️⃣ 两种写法
<!-- 方法1：for+id（推荐） -->
<label for="username">用户名</label>
<input id="username">
<!-- 方法2：包裹写法 -->
<label>
密码：<input type="password">
</label>
3️⃣ 必记区别
| 方法 | 优点 | 缺点 |
|---|---|---|
| for | 灵活布局 | 需管理唯一ID |
| 包裹 | 自动关联 | 嵌套限制 |
高频面试题
-
为什么用label？
→ 答：三点作用（点击区域/可访问性/SEO） -
两种写法区别？
→ 答：for需要ID，包裹自动关联 -
没有label怎么办？
→ 答：用aria-label（例：<input aria-label="搜索">）
记忆口诀
"label三作用：点得准、读得清、搜得到
两种写法：for配id，或直接包"
面试回答： label标签主要是用来绑定表单控件，让表单控件有一个好的用户体验。 它的作用细分的话主要有三条:
1.提升可访问性：屏幕阅读器可以进行朗读，方便视障人士使用 2.seo浏览器搜索引擎优化，语义化的label标签明确了表单字段的含义 3.可以扩大点击区域：尤其是针对点选框和复选框可以使用label标签绑定。
使用方法的话主要有两种， 1.使用label标签直接包裹表单控件 2.使用for和id配合的形式，给表单组件加上id属性，在label标签中使用for=id的形式即可完成label标签绑定表单组件，进而提升seo和用户体验
