1，表单
1.1，单选框
<div>
<lable for="male">男</lable>
<input id="male" type="radio" name="sex" value="男>
<lable for="female">女</lable>
<input id="male" type="radio" name="sex" value="女“>
</div>
技术要点：name名相同
1.2，复选框
<div>
<lable>爱好</lable>
<input type="checkbox" name="爱好" value="游泳"游泳
<input type="checkbox" name="爱好" value="开车">开车
</div>
1.3，下拉框
<select>
<option>洪山区</option>
<option>青山区</option>
<option>汉阳区</option>
</select>
1.4预选的下拉选框
<form >
<select>
<option>洪山区</option>
<option selected>青山区</option>
<option>汉阳区</option>
</select>
</form>
1.5文本域
<textarea placeholder="看点槽点，不吐不快！别憋着，马上大声说出来吧！">
</textarea>
1.6， 空格 << >>
1.7，display和visibility的区别
display:none;
visibility:hidden;
1.8一个简单的登陆页面
<form>
<div>
<label for="text">文本</label>
<input id="text" type="text" />
</div>
<div>
<label for="password">密码</label>
<input id="password" type="password" />
</div>
<div>
<input type="submit" value="登录" />
</div>
</form>
定义和用法
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
2，注意事项
2.1，label和input结合使用的要点：
label的for的值要和input的id一样
2.2，input是按钮的形态下，给border，padding不会改变它的width，height
3，margin的一点小问题
3.1，子元素作为父元素的第一个元素,给它margin-top会存在问题
解决方案：1.给父元素
overflow: hidden;
2.给父元素设置伪元素
parent{
content:"";
display: table;
}
