2020.02.20

2020.02.20学习

完善clearfix，表单（部分）

完善clearfix

子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
使用空的table标签可以隔离父子元素的外边距，组织外边距的重叠
经过修改后的clearfix是一个多功能的，既可以解决高度塌陷又可以确保父元素各自元素的垂直外边距不会重叠

.clearfix:before，
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

表单

表单:
向服务器提供用户信息，比如百度的搜素框
使用form标签来创建表单
form标签必须指定一个action地址，该属性指向的是一个服务器的地址
当我们提交的表单时将会提交到action属性对应的地址
使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项
使用input来创建一个文本框，它的type属性是text，如果希望表单单项中的数据提交到服务器，还必须给表单指定一个name属性
name表示提交内容的名字
用户填写的信息回复在url地址的后边以查询字符串的形式发送给服务器
url地址？查询字符串
格式：属性名=属性值&属性名=属性值

用户名<input type="text" name="usrname">

提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮，他的type属性为submit，提交按钮中可以通过value属性来指定按钮上的文字

<input type="submit" value="注册">

密码框：是在input创建一个密码框，type使用password

密码<input type="password" name="123">

单选按钮：input来创建，type属性使用radio，单选按钮通过那么属性进行分组，name相同的按钮是一组，像这种需要用户选择的，但是不需要用户直接填写的，必须要有一个value

性别<input type="radio" name="1" value="male">男
		<input type="radio" name="2" value="female">女

多选框：使用input，type属性使用checkbox，用法与单选一样

爱好<input type="checkbox" name="hobby" value="1">篮球
		<input type="checkbox" name="hobby" value="2">足球
		<input type="checkbox" name="hobby" value="3">羽毛球
		<input type="checkbox" name="hobby" value="4">乒乓球

下拉列表：使用select标签来创建一个下拉列表，在下拉列表中使用option来创建一个一个列表项
name属性给select，value属性给option
如果希望在单选按钮或者是在多选框中指定默认是的选项，则可以在希望选中的项中添加checked="checked"属性
可以再option中添加selected="selected"来设置select的默认值
在我们的下拉列表添加multiple="miltiple"可以多选
在select中添加一个optgroup对选项进行分组，可以通过label属性来指定分组的名字