<label>标签的使用

相信大家写前端的都写过这样的代码↓↓↓

<input type="radio" name="demo1" id="demo1" value="" /><span>请点击我</span>

他的显示效果如下↓↓↓

效果图1

怎么样，是不是和你们写的大同小异，你们认为这就没问题了么，给你们三行时间思考问题
。
。。
。。。
想到了吗，没想到我就来公布答案吧。
首先你们可以按一按你们的选项，看看你们在选择文字时有没有效果。我敢打赌照着我上面代码敲的同学肯定是没效果的。
那么你们再回忆一下，平时你们在使用选项是不是随便点点就能选中呢？所以，现在有请我们今天的主角<label>!!!(破音！)
在了解<label>标签的作用之前，我们可以直接先用用它，复制下面的代码去试试，你就会有最直观的感受↓↓↓

<label><input type="radio" name="demo1" id="demo1" value="" /><span>请点击我</span></label>

怎么样，是不是很神奇，其实<label>标签的作用，是将它覆盖范围内的所有元素关联起来。
比如你将两个buttom按钮用label标签框起来，那么在你点击其中一个按钮时，另一个按钮也会被选定，我们就利用这种特性，将点选按钮的按钮与他的描述关联起来，这样就写出了我们平时常见的单选按钮了。
那么你可能会说，这东西不写，又不是不能用，那我懒得写了，那我要在这里给你普及一个编程人员最基础的知识：你写的程序，有99%的时间都不是你在使用，也许你觉得一点瑕疵没问题，但是你的客户不会这么想，他们有很大概率因为一点瑕疵而pass掉你的项目，所以像这种小细节，一定不要因为偷懒而不去做！！！
扯了那么远，让我们回到<label>的使用上，也许有的人会问，<label>标签只有这一种用法吗？实际上，<label>标签还可以“远程”使用。如下图↓↓↓

效果图2
如果我们想实现图中所说的，只点击红色的字体才有反应，而点击黑色的字体没有反应该怎么做呢？
很简单，看下列代码↓↓↓

<input type="radio" name="demo" id="demo1" value="" />
<p>别点我</p>
<p>别点我</p>
<p>别点我</p>
<p>别点我</p>
<p>别点我</p>
<p>别点我</p>
<p>别点我</p>
<label for="demo1"><span style="color: red;font-weight: bold;">请点我</span></label>

将上面↑↑↑的代码复制去看看，你会发现，现在就只有红色的字关联到了单选按钮，这是因为，<label>标签给我们提供了一个for属性，我们可以通过给这个for属性赋值，来关联一些布局上隔得很远的元素，而这个for属性的值，就是你所要关联的元素的id值。