html中的lable怎么写,HTMLlabel标签

标签的作用

在HTML中标签不会向用户展示任何特殊内容,它的作用是把自己与其他标签"绑定"起来&＃xff0c;也可以说是与其他元素关联到一起&＃xff0c;粗暴点说就是 有一腿。

与其他标签关联的方式

与其他元素关联的方式有两种

1、显式联系&＃xff1a;显式联系通过的 "for" 属性和目标标签的 ID 来完成

2、隐式联系&＃xff1a;隐式联系可通过标签嵌套完成

显式联系

定义一个表单&＃xff0c;表单中有单选框&＃xff0c;看下面HTML代码

确定

取消

运行结果

现在我们用显式的方式来为两个选项创建额外的"选择按钮"&＃xff0c;接着上面代码写。

点击这里也可选择 确定 选项

点击这里也可以选择 取消 选项

运行结果

从上面可以看到&＃xff0c;我们通过点击标签可以间接的选择表单中的选项了。

隐式联系

由于隐式联系不需要用 标签的 ID 所以我把第一个例子中的表单代码中的标签的ID去掉

确定

取消

运行结果

注意看&＃xff0c;当我把鼠标移动到 "确定" 或 "取消" 时&＃xff0c;鼠标变为了 "工" 形&＃xff0c;是不可以点击的

现在我把标签嵌套到标签中

确定

取消

运行结果

从运行结果可以看到&＃xff0c;我把鼠标移动到 "确定" 或 "取消" 上时&＃xff0c;鼠标并没有改变样式&＃xff0c;是可点击的。当我点击 "确定" "取消" 时&＃xff0c;也可以把选项选上&＃xff0c;这是因为我点击 "确定" "取消" 其实是点击了&＃xff0c;由于我们把与隐式关联了。所以达到了点击文字确定选项的效果。

在 H5 中还可以用标签关联表单&＃xff0c;本文只是举一个简单的例子。为什么不再写一个关于关联表单的例子&＃xff1f;像我这种懒癌晚期的人来说&＃xff0c;录制GIF图片 真&＃xff01;的&＃xff01;很&＃xff01;烦&＃xff01;人&＃xff01;。

忧愁