表格、表单和高级选择器
1. 掌握表格的使用
1.1 表格的基本语法
表格是我们在日常生活用到的非常多的一种数据表现形式。
它的结构清晰、稳定、易于管理,且使用简单。
例如:工资条、后台管理系统各种数据表、考试成绩单、简历模板…
<!-- 声明表格 -->
<table>
<!-- 表格由行和列组成 -->
<!-- table row 行 你想要几行内容就写几个tr -->
<tr>
<!-- 单元格(列) 你在一行想要几个列就写几个td -->
<td></td>
</tr>
</table>
<!-- 考虑是几行几列的表格 -->
<!-- border 边框 -->
<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 合并单元格-跨列合并
- 先考虑未进行合并时的行数和列数
- 找到需要合并的单元格 给其添加属性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 常见的表单元素
<!--
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"
性别: <!-- 我们希望 单选按钮在性别需求上实现互斥效果 --> <!-- name除了作为关键的数据传输作用之外 还承担可以实现单选按钮的互斥效果 --> <!-- checked 默认选中 --> <input type="radio" name="gender" value="" checked /> 男 <input type="radio" name="gender" value="" /> 女
-
复选框
type="checkbox"
-
文件域
type="file"
可以显示出一个文件选择按钮 -
按钮
- 普通按钮
- 提交按钮
- 图片提交按钮
- 重置按钮
<!-- 未来要结合js使用 --> <input type="button" value="普通按钮" /> <br/> <form action="success.html"> 用户名:<input type="text" name="username" value="张三" /> <!-- 提交表单 --> <input type="submit" value="提交"/> <!-- 效果等同于提交按钮 但是可以设立图片 --> <input type="image" src="login.gif" /> <!-- 重置按钮 可以恢复为表单初始的状态 --> <input type="reset" value="重置" /> <!-- button系列的按钮 --> <!-- 默认效果和提交按钮一样 --> <button type="submit">提交按钮</button> <button type="button">普通按钮</button> <button type="reset">重置</button> </form>
-
时间输入框
type="date"
-
数值输入框
type="number"
-
列表框
<select name=""> <!-- 下拉列表项 --> <option value="">xxx</option> </select>
<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="" style="resize: none;">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 属性选择器
根据属性选择内容。
/*1.将所有拥有id属性的元素背景颜色设置为黄色*/
/*a[id]{
background: yellow;
}*/
/*2.将id属性值为first的元素背景颜色设置为红色*/
/*a[id=first]{
background: red;
}*/
/*3.将所有拥有class属性且属性值中包含links字符串的元素背景颜色设置为红色*/
/*a[class*=links]{
background: red;
}*/
/* 4.将所有拥有title属性并且属性值是以web开头的元素背景颜色设置为红色*/
/*a[title^=web]{
background: red;
}*/
/*5.将所有拥有title属性并且属性值是以site结尾的元素背景颜色设置为红色*/
a[title$=site]{
background: red;
}