标签：
label标签为input元素定义标注。
label元素不呈现任何特殊效果。不过他为鼠标用户改进了可用性。如果你在label元素内点击文本就会触发此控件。就是说当用户选择该标签是，浏览器就会自动的将焦点转到与表单相关的控件上来。
其有两个属性for from。
for 规定绑定到哪一个表单元素上。（label元素的for属性值必须和相关表单元素的id属性值相同）
from规定字段所属的一个或多个表单。
例：常见的网页侧边栏弹出效果也可以完全用css动画实现。此时label标签就得到应用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } p{ padding: 10px 0; } body{ min-height: 100%; } input{ display: none; } aside{ position: absolute; left: -200px; top: 0; bottom: 0; width: 200px; background-color: #BB6868;
transition:0.25s ease-out; -webkit-transition:0.25s ease-out; } #sidebutton:checked + aside{ left: 0; } #sidebutton:checked ~ #wrap{ padding-left: 220px; } #wrap{ margin-left: 20px; padding: 10px;
transition:0.25s ease-out; -webkit-transition:0.25s ease-out; } #wrap>label{ border:none; background-color: green; color: white; } #wrap>label:hover{ background: #000; } </style> </head> <body> <input type="checkbox" id="sidebutton"> <aside>导航栏</aside> <div id="wrap"> <label for="sidebutton">Menu</label> <p>HTML和CSS实现侧边栏弹出效果</p> </div> </body> </html>
此例很好的展示了label标签的应用。通过label标签与input的结合在应用上css动画可以很好的解决网页上面的一些简单点击动画效果。（如ppt效果的幻灯片也可以用此实现）
标签：
原文地址：http://www.cnblogs.com/wenyi1992/p/5583450.html
