表格、表单和高级选择器

1. 表格的使用

1.1 表格的基本语法

<!-- 声明表格 -->
<table>
	<!-- 表格由行和列组成 -->
	<!-- table row 行  你想要几行内容就写几个tr -->
	<tr>
		<!-- 单元格(列) 你在一行想要几个列就写几个td -->
		<td></td>
	</tr>
</table>

1.2 合并单元格-跨列合并

合并单元格需要进行以下三步

1. 先考虑没有进行合并时的行与列数
2. 找到需要合并的单元格 给其添加属性colspan（column span跨列），并赋值为要合并的单元格个数
3. 删除逻辑上已经被合并的单元格

<table border="1">
    <tr>
        <td colspan="2">学生成绩</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>20</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>99</td>
    </tr>
</table>

1.3 合并单元格-跨行合并

1. 先考虑未进行合并时的行数和列数
2. 找到需要合并的单元格 给其添加属性rowspan(row span 跨行)，并赋值为要合并的单元格个数
3. 删除逻辑上已经被合并的单元格

<table border="1">
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>20</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>99</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>99</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>20</td>
    </tr>
</table>

2. 表单的使用

表单是由一系列表单元素，例如输入框、单选按钮、复选框、下拉框等组成的用于方便用户使用填选信息的一种数据填写方式。

2.1 表单基本语法

<!-- 最通俗的表单形态：form表单 -->
<!-- 
	action：表单数据提交地址
	method：请求的方式(HTTP请求的请求方式)  默认请求方式为GET
		GET POST  [PUT  DELETE HEAD ...]
-->
<form action=""  method=“”>
    表单元素们
</form>

2.2 常见的表单元素

<input type=""  name=""  value="" maxlength=""  size=""  max=""  min="" step=""/>
<!-- 
	type:类型	表示input表单类型
	name：将此表单填写的数据传输到后台	必须要写此属性
	value：表单默认的值
	maxlength：允许输入的最大字符长度
	size：设置输入框的长度	取值范围
	
	max、min、step用于type=number输入框
	max：输入的最大值
	min：输入的最小值
	step：步进		默认为1 每次递增1，如果改为2，每次递进2 例如 1 3 5 7
 -->

• 文本输入框type="text"
  如果在value中输入，就会在文本框内默认显示输入的数值

输入框<input type="text" name="" value=""/>
输入框<input type="text" name="" value="默认"/>

• 密码输入框type="password"输入内容将变为实心原点

输入框<input type="password" name="" value="123456"/>

• 单选按钮type="radio"，有多个单选按钮时，将不同input标签内的name属性值设置为相同值可以用来区别选择，从而不会发生多选的情况

单选按钮<input type="radio" name="" value=""/>

• 复选框type="checkbox"

    复选框1<input type="checkbox" name="" value=""/>
    复选框2<input type="checkbox" name="" value=""/>
    复选框3<input type="checkbox" name="" value=""/>
    复选框4<input type="checkbox" name="" value=""/>

• 文件域type="file"显示一个文件选择按钮

文件选择<input type="file" name="" value=""/>

• 按钮

1. 普通按钮

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

2. 提交按钮

<input type="submit" value="提交"/>

3. 图片提交按钮

<input type="image" src="login.gif" />

4. 重置按钮

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

• 时间输入框type="date"

<input type="date" value="" />

• 数值输入框\点输框type="number"
  
  

• 列表框

<select name="">
    <!-- 下拉列表项 -->
    <option value="">请选择</option>
    <option value="">选择1</option>
    <option value="">选择2</option>
</select>

• 文本域

<!-- 
    cols控制列数
    rows 控制行数
    文本域的标签内写的内容就是它的value属性值
    style：resize:none; 可以取消可缩放效果
-->
自我介绍：<textarea name="" cols="" rows="" style="resize: none;">121</textarea>

2.3表单的高级应用

• 增强鼠标可用性的小标签，创建标签在标签内设置for值，并在标签内用id值与其关联，可以实现点击文本即可选中按钮的效果

性别：
<input id="male" type="radio" name="gender" />
<!-- for属性用来关联表单元素的id属性 -->
<label for="male">男</label>

<input id="female" type="radio" name="gender" />
<label for="female">女</label>

• 隐藏域：它不会显示出来，但是如果绑定好name和value可以作为隐藏的数据传递

<input type="hidden" name="token" id="token" value="ee3322xx" />

• 禁用

<!-- 禁用  -->
<input type="button" name="" id="" value="普通按钮" disabled />

运行代码后发现按钮无法点击

• 只读

<!-- 只读 -->
<input type="text" name="" id="" value="只能看不能摸" readonly />

运行代码发现无法对输入框内的文本进行修改、删除等操作

2.4 数据请求

GET和POST请求的基本区别：

• GET请求方式：
  它在进行数据传输的时候 会采用URL地址后?+数据键值对(name=value) 键值对以&分隔
  success.html?username=%E6%A2%81%E6%B6%9B&pwd=123456&gender=on&city=
• POST请求方式：
  它会通过请求体来传输数据 不会在地址栏显示请求数据 所以相对安全

3.CSS高级选择器

3.1 层级选择器

• 后代选择器
  E F表示选择E选择器下的F选择器（包含后代）

div p{

}

• 子选择器
  E>F表示选择E选择器下的F选择器（只会选择直接子元素）

div>p{

}

• 相邻兄弟选择器
  E+F表示选择E选择器后紧挨着的F选择器内容

div~p{

}

3.2 复合选择器

• 并集选择器
  E,F表示E和F选择器都被选中
• 交集选择器

/*1.使用并集选择器将p选择器和ul选择器的范围内背景颜色都设置为绿色*/
p,ul{
background: green;
}

/*2.使用交集选择器将p选择器和.active选择器的范围内公共的交集部分颜色设置为红色*/
/*p.active{
background: red;
}*/

3.3 属性选择器

根据属性选择内容