理解 <label> 标签在表单中的作用及其对可访问性的提升
掌握两种关联标签与输入控件的方式：for 属性与嵌套方式
能够正确编写语义清晰、用户友好的 HTML 表单结构
了解 <label> 支持的表单控件类型
<label>HTML 中的 <label> 元素用于为表单控件（如输入框、单选按钮等）提供说明性文本。它不仅提升了表单的语义结构，还显著增强了可访问性：
当用户点击 <label> 文本时，浏览器会自动将焦点聚焦到与之关联的输入控件上。
屏幕阅读器等辅助技术能更准确地识别表单项，帮助视障用户操作表单。
for 属性通过 for 属性将 <label> 与具有对应 id 的表单控件关联：
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
要求：
for的值必须与目标<input>（或其他控件）的id完全一致。
<label>直接把表单控件写在 <label> 标签内部，无需 for 和 id：
<label>
用户名：
<input type="text" name="username">
</label>这种方式简洁，适用于简单控件（如复选框、单选按钮），但不便于复杂布局。
<label> 可以关联以下 HTML 表单元素：
for 属性<!DOCTYPE html>
<html>
<head>
<title>HTML label 标签示例</title>
</head>
<body>
<strong>职业选择</strong>
<br><br>
<form>
<label for="student">学生</label>
<input type="radio" name="occupation" id="student" value="student"><br>
<label for="business">商务人士</label>
<input type="radio" name="occupation" id="business" value="business"><br>
<label for="other">其他</label>
<input type="radio" name="occupation" id="other" value="other">
</form>
</body>
</html>点击“学生”、“商务人士”等文字，对应的单选按钮会被选中。
<input> 嵌套在 <label><!DOCTYPE html>
<html>
<body>
<strong>性别选择</strong>
<br><br>
<form>
<label>
男
<input type="radio" name="gender" id="male" value="male" />
</label><br />
<label>
女
<input type="radio" name="gender" id="female" value="female" />
</label><br />
<label>
其他
<input type="radio" name="gender" id="other" value="other" />
</label>
</form>
</body>
</html>
此方式无需
for和id，结构更紧凑，适合小型选项组。
注意：
form属性仅在<label>未被包含在<form>内部时才有意义。
<label> 提升表单可用性与无障碍访问能力。
两种关联方式：for + id 或 直接嵌套控件。
必须确保每个可交互控件都有对应的 <label>（或使用 aria-label 作为替代）。
避免使用纯文本描述而无 <label>，否则会降低可访问性。
为什么在表单中使用 <label> 对屏幕阅读器用户特别重要？
在什么场景下更适合使用嵌套方式（而非 for 属性）来关联标签与控件？
如果一个 <input> 没有 id，能否通过 for 属性与其 <label> 关联？为什么？