三十五 TABLE / FROM

三十五章 — 表格/表单和高级选择器

一、掌握表格的使用

表格是我们在日常生活中用到的非常多的一种数据表现形式。

它的结构清晰，稳定，易于管理，且使用简单

例如：工资条/后台管理系统各种数据表，成绩单等…

1.表格的基本语法

<table><!--表格标签-->
    
     <!--先考虑是几行几列的表格-->
    
    <!--table  row 行 想要几行就写几个tr-->
    
     <!--table  列  想要几列就写几个td-->
    
    <!--th  列  表头默认加粗-->
    
    <tr><!--行标签-->
        <th>姓名</th><!--1行1列的标题-->
        <th>性别</th><!--1行2列的标题-->
        <th>年龄</th><!--1行3列的标题-->
    </tr>
    
    <tr>
        <td>小明</td><!--单元格标签-->
    	<td>男</td><!--1行2列的单元格-->
		<td>23</td><!--1行3列的单元格-->
    </tr>
    
   
</table>

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>

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>

二、掌握表单的使用

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

1.表单的基本语法

<!--最通俗的表单形态：form表单-->
<!--
	action:表单数据提交地址
	method：请求的方式（HTTP请求方式）默认的值为GET
	GET POST [put delect head]
-->

<from action = "" method = "">
    表单元素们
</from>

2.常见的表单元素

<!-- 
	type: 类型 表示input表单类型（默认值为text 表示文本输入框）

	name： 目前了解 只要想要将此表单填写的数据传输到后台 必须写此属性

	value：表单默认值

	maxlength:允许输入的最大字符长度

	size：设置输入框的长度最大值为7

下面仨往往用于type=number输入框

	max:输入的最大值

	min：输入的最小值

	step：步进 默认为1 例如：123456 如果改为了2则变为了 13579
-->

<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"

• 文本域

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

• 文件域：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><!-- 未来要结合js使用 -->
<input type = "button" value = "普通按钮">
<br/>
<from action = "success.html">
    用户名：<input type = "text" name = "username" value = "张三"/>
    <!-- 提交表单 -->

</from>

• 时间输入框type = "date"

• 数值输入框type = "number"

• 列表框

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

注意：在使用浏览器预览我们的页面内容是，小心自带的缓存功能，如果正确更改了代码但未出现预期的效果记得排除此问题。ctrl+F5强刷（CTRL+Fn+F5）

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/>

4.数据请求

GET和POST请求的基本区别：

• GET请求方式：

  他在进行数据传输的时候 会采用CRL地址后？+数据键值对（name = value）键值对以&分隔

  success.html?

  username=%E6%A2%81%E6%B6%9B&pwd=123456&gender=on&city=

• POST请求方式：

  它会通过请求体来传输数据 不会再地址栏显示请求数据 所以相对安全

三、掌握CSS的高级选择器

选择器作用： 选中要被设置样式的标签

基本选择器： 类选择器 标签选择器 ID选择器

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{   
}

2.复合选择器

• 并集选择器

E,F表示E 和F选择器都会被选中

• 交集选择器

其他选择器.类选择器/ID选择器

例如：p.active

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


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

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;
}