1.深入了解html label标签
HTML <label>元素表示用户界面中项目的标题。
它通常关联一个控件，或者是将控件放置在label元素内，或者是用作其属性。这样的控制称作label元素的labeled control 。
属性
该元素包含 全局属性.
**accesskey
** HTML 4 HTML5
从键盘访问该元素的快捷键。
for
**
可标记的 form相关元素的ID，在同一文档中作为label元素。 第一个这样的元素在文档中有一个ID匹配属性值，作为这个label元素的labeled control。注意： label元素可同时有属性和包含控件元素（contained control element），只要此属性指向包含控件元素。
**form
** HTML5
表示label元素关联的form元素（它的表单拥有者）。此属性值必须是同一文档中<form>元素的后代。应用此属性值，你可以将label元素放置在文档的任何位置，而不仅仅是作为它的拥有者<form>元素的后代。
本次示例是在firefox演示(如果其他浏览器对accesskey操作不成功的,请参考文章最后各浏览器下的快捷键)label的for属性是和input的id绑定，当我们点击input前面的文本标识会自动聚焦到文本框，例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<label for="name">用户名</label>
<input type="text" name="name" accesskey="c" id="name" />
<br/>
<a href='./show.php' accesskey="h">去我的主页</a>
</form>
</body>
</html>
这个例子，当我点击用户名的时候，会自动聚焦到文本框里头，也就是光标会自动定位到文本框里
accesskey 属性规定激活（使元素获得焦点）元素的快捷键。
注释：以下元素支持 accesskey 属性：<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。
以上示例 : shift+alt+c值 ,可以发现光标聚焦到该input内,shift+alt+h值 ,可以发现页面跳转到该a标签的href地址
各种浏览器下accesskey快捷键的使用方法
IE浏览器
按住Alt键，点击accesskey定义的快捷键(焦点将移动到链接)，再按回车.
FireFox浏览器
按住Alt+Shift键，点击accesskey定义的快捷键.
Chrome浏览器
按住Alt键，点击accesskey定义的快捷键.
Opera浏览器
按住Shift键，点击esc，出现本页定义的accesskey快捷键列表可供选择.
Safari浏览器
按住Alt键，点击accesskey定义的快捷键.
2.了解CSS边框、背景、伪元素、伪类等属性的设置
