HTML Label 标签详解：用法、属性及样式

label 标签是用于为表单元素提供标签的 HTML 标签。它通常与 input 元素一起使用，以便用户可以通过单击标签来选择或聚焦到相关的表单元素。

以下是一些常见的用法和属性：

1. for 属性

指定与该标签关联的表单元素的 id。例如：

<label for='username'>用户名：</label>
<input type='text' id='username'>

2. 嵌套元素

可以在 label 标签中嵌套其他元素，例如：

<label for='color'>选择颜色：<input type='color' id='color'></label>

3. 隐藏标签

可以使用 CSS 将 label 标签隐藏，但仍可以通过与相关表单元素关联来提供可访问性。例如：

<label for='password' class='sr-only'>密码：</label>
<input type='password' id='password'>

其中的 class 'sr-only' 是 Bootstrap 框架中的一个 CSS 类，用于将元素隐藏，但仍可以通过屏幕阅读器等助手工具访问。

4. 自定义样式

可以使用 CSS 样式来自定义 label 标签的外观和行为，例如：

label {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  cursor: pointer;
}

这些样式将使 label 标签以块级元素的形式显示，加粗字体，下边距为 10px，以及指针光标，使其看起来更像一个可点击的元素。