HTML表格表单和⾼级选择器
表格、表单和⾼级选择器
1. 掌握表格的使⽤
1.1 表格的基本语法
表格是我们在⽇常⽣活⽤到的⾮常多的⼀种数据表现形式。
它的结构清晰、稳定、易于管理，且使⽤简单。
例如：⼯资条、后台管理系统各种数据表、考试成绩单、简历模板…
<!-- 声明表格 -->
<table>
<!-- 表格由⾏和列组成 -->
<!-- table row ⾏你想要⼏⾏内容就写⼏个tr -->
<tr>
<!-- 单元格(列) 你在⼀⾏想要⼏个列就写⼏个td -->
<td></td>
</tr>
</table>
<table border="1">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
1.2 合并单元格-跨列合并
1. 先考虑未进⾏合并时的⾏数和列数
2. 到需要合并的单元格 给其添加属性rowspan(row span 跨⾏)，并赋值为要合并的单元格个数
3. 删除逻辑上已经被合并的单元格
语⽂20张三
数学99
语⽂99李四
数学20
<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>textarea中cols表示
</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 常见的表单元素
<!--
type：类型表⽰input表单的类型  (默认值为text 表⽰⽂本输⼊框)
name：⽬前了解只要你想要将此表单填写的数据传输到后台必须要写此属性
value：表单默认的值
可选/不常⽤属性：
maxlength：允许输⼊的最⼤字符长度
size：设置输⼊框的长度取值范围[1,7]
下⾯仨往往⽤于type=number输⼊框
max：输⼊的最⼤值
min：输⼊的最⼩值
step：步进默认为1  例如：1 2 3 4 5 6  如果改为2则变为了1 3 5 7 9
-->
<input type=""  name=""  value="" maxlength=""  size=""  max=""  min="" step=""/>
⽂本输⼊框 type="text"
密码输⼊框 type="password" 输⼊内容将变为实⼼圆点
单选按钮 type="radio"
性别：
男
⼥
复选框 type="checkbox"
⽂件域 type="file" 可以显⽰出⼀个⽂件选择按钮
按钮
普通按钮
提交按钮
图⽚提交按钮
重置按钮
⽤户名：
<!-- button系列的按钮 -->
<!-- 默认效果和提交按钮⼀样 -->
<button type="submit">提交按钮</button>
<button type="button">普通按钮</button>
<button type="reset">重置</button>
时间输⼊框 type="date"
数值输⼊框 type="number"
列表框
<select name="">
<option>请选择</option>
<!-- selected默认被选中 -->
<option value="" selected>陈旭</option>
<option value="">史浩然</option>
<option value="">梁涛</option>
</select>
⽂本域
<!--
cols控制列数
rows 控制⾏数
⽂本域的标签内写的内容就是它的value属性值
style：resize:none; 可以取消可缩放效果
-->
⾃我介绍：<textarea name="" cols="" rows="" >121</textarea>
**注意：**在使⽤浏览器预览我们的页⾯内容时，⼩⼼它⾃带的缓存功能，如果发现正确更改了代码，却并没有显⽰出预期的效果，记得要排除此问题。Ctrl+F5强制刷新 (Ctrl+Fn+F5)
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的⾼级选择器
**选择器：**作⽤：选中要被设置样式的标签
**基本选择器：**标签、类、ID
3.1 层次选择器
后代选择器
E F 表⽰选择E选择器下的F选择器(包含后代)
div p{
}
⼦选择器
E>F表⽰选择E选择器下的F选择器(只会选择直接⼦元素)
div>p{
}
相邻兄弟选择器
E+F表⽰选择E选择器后紧挨着的F选择器内容
div+p{
}
通⽤兄弟选择器
E~F表⽰选择E选择器后的所有F选择器内容
div~p{
}
3.2 复合选择器
并集选择器
E,F 表⽰E和F选择器都被选中
交集选择器(⼩⼼语法)
其他选择器类选择器/ID选择器
例如：p.div(X)
p.active
/*1.使⽤并集选择器将p选择器和ul选择器的范围内背景颜⾊都设置为蓝⾊*/
/
*p,ul{
background: green;
}*/
/*2.使⽤交集选择器将p选择器和.active选择器的范围内公共的交集部分颜⾊设置为蓝⾊*/ /*p.active{
background: red;
}*/
3.3 属性选择器
根据属性选择内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。