2020-12-03&12-04

学习内容：

学习时间：

周四，周五

---

学习产出：

1、表格的样式：

table是个块元素
border-spacing：table和td边框之间默认有个距离，可以使用border-spacing改变，在table里面设置

border-collapse：设置表格的边框合并

如果设置了边框合并，那么spacing自动失效
th标签来表示表头中的内容，用法和td一样，会默认居中和加粗【可以同时给设置td,th的属性
tr:nth-child选择行，odd奇数，even偶数
可以设置伪类hover

2、长表格：

表头【thead】，表格的主题[【tbody】，表格的底部【tfoot】，都是table的子标签
thead中的内容永远会显示在表格头部，tfoot中的内容永远会显示在表格的底部，tbody中的内容永远在中间。
如果没有写tbody，浏览器会自动写入，然后将tr自动写入tbody里面，所以tr不是table的子元素，而是tbody的子元素，通过table>tr无法选中行

3、使用表格布局

表格可以嵌套

4、完善clearfix

使用空的table可以隔离父子元素外边距，阻止外边距重叠；
选中box1的before，设置内容为空，并且display:table

.box1:before{
				display: table;
				content: "";		
				}

解决高度塌陷问题：

<div class="box3 clearfix">
.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}

解决两个问题

<div class="box3 clearfix">
<div class="box1 clearfix">
.clearfix:before,
.clearfix:after{
	content: "";
	display: table;
	clear: both;
}

6、表单简介，7、表单项一：

表单：提交信息给服务器，比如百度的搜索框，注册，登录
使用form标签，必须指定一个action属性，该属性指向一个服务器地址，提交表单时，就会提交到该属性对应的地址。
文本框创建：input创建文本框，<input type="text" />
如果希望表单项中的数据提交到服务器中，还需要给表单项指定一个name属性，表示提交内容的名字用户名<input type="text" name="username"/>。
浏览器网址上：username=送人头【查询字符串，名值对结构，属性名=属性值】，用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器。可以有多个名值对结构，用&分开。
【在文本框中指定value属性值，该值作为文本框的默认值显示】

提交按钮：<input type="submit" />，可以使用value属性来指定按钮上的文字

<input type="submit" value="吃饭" />

【ctr+f5 强制清空缓存】

【密码框：使用input创建密码框，type属性值是password】

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

单选按钮：使用input创建单选框，type属性值是radio

性别<input type="radio" />男<input type="radio" />女

【单选按钮通过name属性分组，name属性相同的是一组按钮】

性别<input type="radio" name="gender" />男<input type="radio" name="gender"  />女

此时浏览器后缀:username=热狗&username=二哥&password=2r43&gender=on
on表示按钮开启像这种需要用户选择但是不需要用户直接填写内容的表单项，需要指定一个value属性，这样被选中的表单项的value属性值将会最终提交给浏览器

性别<input type="radio" name="gender"  value="male"/>男<input type="radio" name="gender" value="female" />女

此时username=4343&username=3434&password=3434&gender=female

【多选框：使用input创建多选框，type属性值是checkbox】

   爱好         <input type="checkbox" name="hobby" value="1"/>1
				<input type="checkbox" name="hobby" value="2"/>2
				<input type="checkbox" name="hobby" value="3"/>3
				<input type="checkbox" name="hobby" value="4"/>4

此时浏览器后缀：?username=we&password=weew&gender=female&hobby=2&hobby=3

【下拉列表：使用select来创建一个下拉列表，在下拉列表中使用option来创建一个一个的列表项，有几个选项就写几个option。name属性指定给select，value属性给option】

你喜欢的明星
				<select name="star">
					<option value ="1">1</option>
					<option value ="2">2</option>
					<option value ="3">3</option>
				</select>

此时浏览器后缀：username=我&password=we+&gender=female&hobby=2&hobby=3&star=1

如果希望在单选或者多选框中指定默认选中的选项，则可以在希望默认选中的项中添加checked="checked"；下拉列表中则是在option中添加selected="selected"

当为select添加一个multiple="multiple"，那么下拉列表变为一个多选下拉列表（ctr+鼠标选中）

【在select中使用optgroup对选项进行分组】

<optgroup label="女明星">
					<option value ="1" >1</option>
					<option value ="2" selected="selected" >2</option>
					<option value ="3">3</option>
					</optgroup>
					<optgroup label="男明星">
					<option value ="a" >a</option>
					<option value ="b">b</option>
					<option value ="c">c</option>

通过label属性指定组的名字

8、表单项二

【使用textarea创建一个多行文本框，或者说文本域】

自我介绍<textarea name="infer" ></textarea>

【使用reset创建重置按钮】

<input type="reset" value="重置"/>

【使用button创建按钮】

<input type="button"  value="按钮" />

就只有点击的作用，没有别的意义，一般结合js一起用

【也可以使用Button标签创建按钮】这种方式更好

<button type="button">注册</button>

【label选中表单中提示文字】这样方便改变字体

<label>用户名</label>

并且可以指定一个for属性，该属性的值需要指定一个表单项的id值，这样会改变光标的位置，比如点击用户名就会出现光标

<label for="um">用户名</label>
<input id="um" type="text" name="username"/><br>

【在表单项中使用fieldset来为表单项进行分组】
将同一项放入一个fieldset里面,并且可以使用legend设置组名

<fieldset id="">
		    <legend>用户信息</legend>
			<label for="m">用户名</label>
			<!-- 用户名 --><input id="m" type="text" name="username"/><br>
			 密码<input type="password" name="password"/><br>
			性别<input id="um" type="radio" name="gender"  value="male"/><label for="um">男</label>
			<input type="radio" name="gender" value="female" />女<br>
</fieldset>

9、框架集

框架集和内联框架作用类似，用于在一个页面中引入其他页面，框架集可以同时引入多个页面，推荐使用框架集
【使用frameset来创建框架集】 注意：使用frameset标签就不可以有body标签
使用frame标签引入<frame src="浮动一.html" / >
使用rows指定框架集中所有的框架，一行一行的排列<frameset rows="50%,50%" />
使用cols指定框架集中所有的框架，一列一列的排列

<frameset cols="50%,50%" />

这两个属性至少选择一个，并且指定每一部分所占的比例，表示比例是可以用*表示占用剩下的比例

frameset中可以再嵌套一个frameset

<frameset cols="30%,30%,*" >
			<frame src="浮动一.html" / >
			<frame src="背景.html" >
			<frameset rows="50%, 50%">
				<frame src="否定伪类.html" />
				<frame src="定义列表.html" />
			</frameset>
</frameset>

frameset和iframe一样，搜索引擎都无法检索；
使用frameset，则意味着只能引入其他页面；
引入几个页面就发送几次请求，所以不推荐使用，就算使用，建议frameset。