https://blog.csdn.net/weixin_59101810/article/details/118862074
基本用法
1
2
3
4
5
6
7
8
9
| 将一个 <label> 和一个 <input> 元素相关联
可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，
让用户更容易激活这个元素。将一个 <label> 和一个 <input> 元素匹配在一起，
你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。
另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在
|
1 第一种就是隐式关联，只要把关联的元素放到label里面即可
1
| <label>Click me<input type="text"></label>
|
只要点击click me那个区域也能激活input框的input的focus事件
2 第二种就是使用 for 属性，关联inpt上的id
1
2
| <label for="username">Click me</label>
<input type="text" id="username">
|
也能做到相同的效果
其实label跟span 这些行内元素没什么区别，设置样式什么都一样，不过最常见的就是form表单中跟input
标签配合，获得更好的用户体验和更语义化的编程习惯
