label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。

标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

作用：

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面 标签的 for 属性应当与相关元素的 id 属性相同。

——W3school的解释

经常见到这样的表单元素，比如：点击一张图片可以重新更换图片，或者点击下图所示的复选框

之前的做法是写一个input标签，设置type为file或者checkbox，设置大小为想要的大小，然后把想要的效果比如上图所示或者一个图片，放在input标签的下面，使input标签刚好可以覆盖住图片，

最后把input设置成visibility：hidden，所以此时点击的虽然是图片，但是实际上点击的是input框，这样造成的假象就是点击图片实现上传更新。(这样的实现是挺蠢的OTZ)

后来偶然了解到label标签的作用，才知道label元素和对应id的input元素是互相绑定的，也就是说点击label就相当于点击了input，那这样就好办了，就不需要营造假象了

所以现在代码可以这么写：

(1)复选框样式：

主要HTML代码：

多选框1

主要CSS代码

：input{
display: none;
}
input:checked~em{
color: #c6636c;
border:1px solid #c6636c;
}

选中之前的样式和选中之后的样式

这样的用法就显得高级多啦

(2)上传图片样式：

HTML代码：

点击上传图片

CSS代码：

input{
display: none;
}
em{
display: inline-block;
width: 175px;
height: 173px;
background: url(./add.png);
}

点击下图所示的图片之后，便可以调用file文件实现图片的选择和上传，之后在进行其他操作