1. 表格的使用
1.1 表格的基本语法
<!-- 声明表格 -->
<table>
<!-- 表格由行和列组成 -->
<!-- table row 行 你想要几行内容就写几个tr -->
<tr>
<!-- 单元格(列) 你在一行想要几个列就写几个td -->
<td></td>
</tr>
</table>
1.2 合并单元格-跨列合并
合并单元格需要进行以下三步
- 先考虑没有进行合并时的行与列数
- 找到需要合并的单元格 给其添加属性colspan(column span跨列),并赋值为要合并的单元格个数
- 删除逻辑上已经被合并的单元格
<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 合并单元格-跨行合并
- 先考虑未进行合并时的行数和列数
- 找到需要合并的单元格 给其添加属性rowspan(row span 跨行),并赋值为要合并的单元格个数
- 删除逻辑上已经被合并的单元格
<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=""/>
- 按钮
- 普通按钮
<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表单的高级应用
- 增强鼠标可用性的小标签,创建
性别:
<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 属性选择器
根据属性选择内容