DAY07

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，&nbsp空格 &lt< &gt>

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;
        }

3.2两个兄弟元素之间，margin重合的问题（暂时无解）