<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
实际应用
- <input>元素前的文本标记
- 自定义控件样式
实际上是对1的功能的扩展，在Sementic UI等前端框架中被使用，与<input type="checkbox|radio">关联的<label>被点击时会自动选中/取消<input>控件，配合相邻兄弟选择器和:checked伪类即可实现自定义控件的功能，优点在于无需Javascript且兼容性强。
至于具体的样式，可以使用伪元素或直接修改label样式
<label> + 相邻兄弟选择器实现的checkbox
input[type="checkbox"] + label::before {
content: '\a0'; /* 不换行空格 */
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}
实际效果可在http://dabblet.com/gist/e269f10328615254e29e查看
3. 页面内锚点，相比<a href="#id">不修改页面URL的hash，可以重复点击
4. 利用<label>转移焦点的特性通过多个<label>实现<input>上方字段的通透性。
注意事项
- 应给所有<input>都绑定<label>
