<label> 标签的作用
在HTML中<label>标签不会向用户展示任何特殊内容,它的作用是把自己与其他标签"绑定"起来，也可以说是与其他元素关联到一起，粗暴点说就是 有一腿。
与其他标签关联的方式
<label>与其他元素关联的方式有两种
1、显式联系：显式联系通过<label>的 "for" 属性和目标标签的 ID 来完成
2、隐式联系：隐式联系可通过标签嵌套完成
显式联系
定义一个表单，表单中有单选框，看下面HTML代码
<form>
<input type="radio" name="yes-no" id="yes">确定
<input type="radio" name="yes-no" id="no">取消
</form>
现在我们用显式的方式来为两个选项创建额外的"选择按钮"，接着上面代码写。
<form>
<input type="radio" name="yes-no" id="yes">
<input type="radio" name="yes-no" id="no">
</form> <br />
<label for="yes">点击这里也可选择 确定 选项</label> <br />
<label for="no">点击这里也可以选择 取消 选项</label> <br />
从上面可以看到，我们通过点击<label>标签可以间接的选择表单中的选项了。
隐式联系
由于隐式联系不需要用 标签的 ID 所以我把第一个例子中的表单代码中的<input>标签的ID去掉
<form>
<input type="text" name="yes-no">确定
<input type="text" name="yes-no">取消
</form>
注意看，当我把鼠标移动到 "确定" 或 "取消" 时，鼠标变为了 "工" 形，是不可以点击的
现在我把<input>标签嵌套到<label>标签中
<form>
<label><input type="radio" name="yes-no">确定</label>
<label><input type="radio" name="yes-no">取消</label>
</form>
从运行结果可以看到，我把鼠标移动到 "确定" 或 "取消" 上时，鼠标并没有改变样式，是可点击的。当我点击 "确定" "取消" 时，也可以把选项选上，这是因为我点击 "确定" "取消" 其实是点击了<label>，由于我们把<input>与<label>隐式关联了。所以达到了点击文字确定选项的效果。
在 H5 中还可以用<label>标签关联表单，本文只是举一个简单的例子。为什么不再写一个关于关联表单的例子？像我这种懒癌晚期的人来说，录制GIF图片 真！的！很！烦！人！。
