自学前端第十六天:表格和input和textarea控件

一.表格 table (后期有UI/bootstrap组件辅助工具写)

一.表格概念:就是一张为 横行纵列 多行多列的单元格表

二.表格语法结构: (三层嵌套关系table>tr>td)

<table>  表格
  <tr>    行
    <td>单元格内的文字</td>  单元格/列
    ...
  </tr>
  ...
</table>

①tr 元素定义表格行(table row)

②th 元素定义表头(table head[加粗的单元格]) = ③td 元素定义表格单元(table data)

(th加粗单元格和td普通单元格都要被tr嵌套才能使用)

1.table用于定义一个表格的标签。(!!!)

2.tr(table row)用于定义表格中的一行，必须嵌套在 table标签中，在 table中第几对 tr，就表示第几行。(即和p类似,<tr></tr>会自动换行!!!)

3.td(table data)用于定义表格中的单元格/列，必须嵌套在<tr></tr>标签中，第几对 <tr> </tr>中包含第几对<td></td>，就表示第几行中的第几个单元格/第几列.

注意：

1. <tr></tr>中只能嵌套<td></td>
2. <td></td>标签，他就像一个容器，可以容纳所有的元素

三.表头标签(th 功能和td一样,只是会加粗和自动居中了)

1.表头th一般位于表格的第一行的tr行表头或第一列的td列表头，
①列表头:(第一对tr即第一行中所有单元格即列,都写上th就表示列表头了,死记!!!)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1dbyKIr-1620062698369)(C:\Users\tuyue\AppData\Local\Temp\1611830990005.png)]

②行表头:(每一对tr即每一行中的第一个单元格即列,都写上th就表示行表头了,死记!!!)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WVMv3hYG-1620062698371)(C:\Users\tuyue\AppData\Local\Temp\1611831220473.png)]

2.th会使其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

<table border="1" align="right">
  <caption>1班花名册<caption>//表格标题(默认居中)
      
  <tr>          //第一行,全部都是th就是列表头
    <th>姓名</th>   
    <th>性别</th>
   	<th>年龄</th>
  </tr>   
  <tr>             //第二行,第一个写th就是一个行表头
    <th>张三</th>
    <td>男</td>
    <td>119</td>
  </tr>
  <tr>
   	<th>小花</th>
    <td>女</td>
    <td>17</td>
  </tr> 
</table>

三.table标签属性

(注意:不是table的CSS样式,而是table标签属性,大多过时得用CSS代替)

1.PS:标签属性内的属性值不要加px等单位:切记,默认有!!!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-alj58pvp-1620062698378)(C:\Users\tuyue\AppData\Local\Temp\1611830562158.png)]

2.table的border属性(<'table border=“1”>) != CSS的border

table的border 属性**仅仅用来规定表格单元周围是否显示边框,**具体边框用css的border来。

table,th,td {

	border: 1px solid blue; (这里css才是设置真正的设置边框border)

}

**3.cellpadding: (建议用CSS的padding代替) **

4.cellspacing:规定单元格之间的间距。(类似单元格之间的margin,但是table没有margin属性)

cellspacing 属性规定单元之间的空间，以像素计。若不设置该属性，则其默认值为 cellspacing=“2”。

**注意：table的属性cellspacing=0 时,就等同于设置了table的CSS折叠样式border-collapse: collapse; **

四.一个综合的表格结构（table>thead(caption,tr>th)>tbody(tr>th=td)）

在使用表格进行布局时，可以可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：

表格头部:<thead></thead>  , 一般包含网页的logo和导航等头部信息。

表格的主体:<tbody></tbody>：用于定义主体内容

上述两个标签都必须位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

PS: thead, tbody, 和 tfoot 元素"不写"默认也不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

<table border="1">
  <thead>
   <caption>1班花名册<caption>//表格标题(默认居中)
    <tr>
      <th>Month</th>  //列表头
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>        
      <td>Sum</td>    //这里也可以插入行表头的,看需求
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

五.合并td单元格(合并都是针对td/th上面写属性的)

1.跨行合并：rowspan 跨列合并：colspan

2.合并单元格的思想：

​ 将多个单元格的多个内容合并的时候，就会有多余单元格内的东西，你要取舍删除多余的内容。
例如 把 3个 td 合并成1个，则需要取舍删除3-1个的内容(删除的单元格自己抉择都行)。(x个td你要合并为y个,就要删x-y

3.应用展示:
①colspan:向右列合并,合并为一行显示
(列合并注意删什么内容就行了,注意是向右合并的)

<tr>
<td>李四</td>
<td colspan="2">不明</td>  
//表示:第n行的第n个单元格中:向右2个单元格合并为1个单元格的列合并,显示为一行.
</tr>

  <table width="400" height="100" border="1">
    <tr>
      <td>张三</td>
      <td>12</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td colspan="2">不明</td>
        //表示:第n行的第n个单元格中:向右2个单元格合并为1个单元格的列合并,显示为一行.
    </tr>
    <tr>
      <td>王五</td>
      <td>33</td>
      <td>男</td>
    </tr>
  </table>

②rowspan:向下行合并,合并为一列显示
PS: 行合并有毒,只往下合并,因此如果选定多行合并的话,是只能去最上面那一个tr行内的td去合并写rowspan,下面行对应的td都要删即可

<table width="400" height="100" border="1">
    <tr>
      <td>张三</td>
      <td>12</td>
      <td rowspan="3">男</td> //代表第一行中的第三个单元格,向下由由三个单元格合并,显示为一列
    </tr>
    <tr>
      <td>王五</td>
      <td>33</td>
        
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>

    </tr>
  </table>

六.Table和tr和td相关CSS样式(仅了解)

1.表格和th和td边框:border属性。

table, th, td {     border: 1px solid black; }

PS:请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，请使用 下面的border-collapse属性。或者 cellspacing=0 table属性样式。

2.折叠边框:border-collapse

(由于 table、th 以及 td 元素都有默认自己的边框,因此默认是隔开border-collapse :separate)
因此border-collapse属性用于设置表格的边框是否被折叠成一个 单一的边框 或 隔开双边框

table, th, td {
  border: 1px solid blue;  (默认表格的边框的模式为分离状态: border-collapse :separate)
}

table {
	border-collapse: collapse;    //设置为折叠单一边框,即cellspacing=0小盒子之间的外边距为0
}

3.表格填充:(padding,td不支持margin)

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

td {     padding:15px; }

4.th/td边框距离 :border-spacing (不常用,表格一般都是紧凑的,td不支持margin)

table{
  border-collapse:separate;
  border-spacing:10px 50px; 
 }
PS:(调整td单元格间距不能自己一个一个td盒子单独调会失效的,只能通过整体table 的标签css样式
border-spacing 或者 table行内属性cellspacing 来整体调整)

①border-spacing 属性设置相邻单元格的边框间的距离
(也类似margin,仅用于双边框有间隙的“边框分离”模式 border-collapse: separate ,一旦
变为border-collapse: collapse就会使border-sapcing失效 )。

②border-spacing和cellspacing的区别?(都类似margin)
[1]都得在双边框border-collapse: separate模式下才能进行,否则盒子之间的间隙都没,无法调.
[2]border-spacing是table标签的CSS样式 , 而cellspacing是table标签内部属性.
[3]border-spacing是可以固定顺序:左右,上下分开设置(常用), cellspacing只能上下左右一起设置一个:

③cellspacing表单元格与单元格之间的距离
cellpading表单元格与单元格边框的距离
margin 表示对象所有外边框与相邻内对象的距离，但是TD不支持
padding 表示对象内容与其边框的距离, 而TD支持
cellspacing和cellpading是表的属性，
TD 的Style有 padding值时，使用该值；否则继承表cellpading属性值。
TD 的Style不支持margin

5.表格宽度和高度:(tr和td的heigth高度是一个东西来的)

(设置了就按列数平均分,不设置就是默认内容多宽或者多高,每一列宽度高度取决于最宽或者最高那个)

下面的例子是设置继承父盒子的100％的宽度，50px像素的th元素的高度的表格：

table  {     width:100%; } 
th {     height:50px; }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4AsWxrSn-1620062698395)(C:\Users\tuyue\AppData\Local\Temp\1611916961874.png)]

6.表格文字对齐

①表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心：

td {     text-align:center; }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1SzhPKVV-1620062698397)(C:\Users\tuyue\AppData\Local\Temp\1611916220877.png)]

②垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

td
{
    height:50px;
    vertical-align:bottom;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ydlBDYE-1620062698400)(C:\Users\tuyue\AppData\Local\Temp\1611916124169.png)]

7.表格各种颜色:

指定:①边框的颜色，②th元素的文本 ③背景颜色：

table, td, th {     border:1px solid green; } 
th {     background-color:green;     color:white;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z9amPkdj-1620062698402)(C:\Users\tuyue\AppData\Local\Temp\1611916530883.png)]

8.标题位置 caption-side

该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。

caption {
	caption-side: bottom
}

9.总结表格知识点:

1. 表格提供了HTML 中定义表格式数据的方法。

2. 表格中由行中的单元格组成。

3. 表格中没有列元素，列的个数取决于行的tr内的td单元格个数。

4. 实际开发中表格表现基本使用成熟UI库实现 !!!

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <style>
    #customers {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      width: 100%;
      border-collapse: collapse;
    }

    #customers td,
    #customers th {
      font-size: 1em;
      border: 1px solid #98bf21;
      padding: 3px 7px 2px 7px;
    }

    #customers th {
      font-size: 1.1em;
      text-align: left;
      padding-top: 5px;
      padding-bottom: 4px;
      background-color: #A7C942;
      color: #ffffff;
    }

    #customers tr.alt td {
      color: #000000;
      background-color: #EAF2D3;
    }
  </style>
</head>

<body>
  <table id="customers">
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr class="alt">
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr class="alt">
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr class="alt">
      <td>Königlich Essen</td>
      <td>Philip Cramer</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr class="alt">
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>North/South</td>
      <td>Simon Crowther</td>
      <td>UK</td>
    </tr>
    <tr class="alt">
      <td>Paris spécialités</td>
      <td>Marie Bertrand</td>
      <td>France</td>
    </tr>
  </table>
</body>

二.表单标签 (常用)

一.表单概念:

1.表单目的是为了收集用户信息。

2.在我们网页中， 我们也需要跟用户进行信息交互，收集用户资料，此时也需要表单。

3.在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

二.表单组成三要素

1.表单控件标签：input(定义输入域和按钮控件)

select(下拉菜单控件)

textarea(文本域控件)

button(按钮控件) :不讲button,兼容性不好,因此宁愿用input控件里的botton属性)

​ 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

2.提示信息：label 标签

​ 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

3.表单域： form标签

​ 他相当于一个容器，用来容纳上述所有的表单控件和提示信息，

​ 作用:可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器server。

三.深入input 输入控件 : [input +type类型属性=定义用户输入域]

1.在上面的语法中，<input> 标签为单标签，type属性是input最基本的标签内部属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input >标签还可以定义很多其他的内部属性，其常用属性如下表所示。

2.input标签内部全部属性分类:

常用属性	属性值	描述描述
type	见下表	控制input的输入类型
name	自定义	控件名称, 作为前后端提交数据时的key: 告诉后端服务器你的前端控件是输入的什么信息 比如:你在input输入控件中设置了属性name="passerword" 则会告诉后端,从前端我们的用户输入的并且传过来的是一组信息 因此写name是有利于前后端交互的.
<>
value	自定义或输入默认值 有些按钮是有默认value字 但也可以value变为自定义字	input控件中的默认 或 用户输入的文本(但一般都是用户输入)
size	正整数	input在当前页面中的可输入的字符数,并且以宽度显示, PS:不是最大字符数maxlength
checked	checked	一直保持input控件上的按钮选中状态
maxlength	正整数	规定控件容许输入的最大字符数
required	required	该input控件为必填项
readonly	readonly	input控件内容只读,无法修改
placeholder	文本	提醒用户要输入的文本(是一层影子)
multiple	multiple	文件上传时可选多文件

3:input内部type属性值的分类(!!!重要)

4.input内部checked 属性: 页面保持按钮的选中状态!!! (手动可取消)

(PS:当但单选按钮radio,被加上required成为必选项时,也是会一直保持按钮的选中状态,并且无法取消!!!)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9j0laDS8-1620062698417)(C:\Users\tuyue\AppData\Local\Temp\1611921120462.png)]

5.上面讲述的input控件的内部属性,则input的CSS样式看一看下面:**

一般outline不要写复合形式(除非写清除格式的outline:0),
写了完整的复合形式比如:outline:1px solid red 就会和border属性重合变为边框了,
推荐直接outline-colar颜色就行

四.label标签(理解)

1.label 双标签为 input 元素定义标注（类似span/p,文本框隔壁的文字,解释文本框的是用来干啥的)

那么问题来了,拿为什么不直接使用span或者p呢?
**2.label作用：标签内部的for属性可以用于绑定一个表单input元素的id属性,如果for属性值=id的属性值时,那么当点击label标签的文字的时候: **
①如果被绑定的表单input元素是的text文本框,则就会获得文本输入焦点.

②当label的for绑定的是单选按钮radio的id时,则绑定形式就是自动帮我们选中单选按钮.

3.那么问题来了,label是如何绑定input标签元素呢？(label+input联动)
for 属性规定 label 与id属性值一致的表单元素绑定。(类似一个超链接绑定)

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

五.textarea控件(文本域)

1.如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框
2.textarea标签内部属性如下：

<textarea cols="每行中的字符数" rows="显示的行数">(默认在浏览器可拖拽,鸡肋,建议CSS定义宽高)
  文本内容
</textarea>

3.textarea的CSS简单属性如下:

textarea {
      width: 200px;
      height: 200px;
      resize: none; (不可拖拽)
    }

六.select控件(下拉菜单)

1.使用select控件内部属性的基本语法格式如下:

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option >选项3</option>
  ...
</select>

注意：

1. <select></select>中至少应包含一对<option></option>。
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。
   

2.select控件基本CSS语法:

select {
      border: 0;
      outline: 0; (聚焦框,和input的outline是一样的)
      width: 100px;
      background-color: #f1f1f1;
      font-size: 14px;
      line-height: 20px;
    }

七.form(表单域[包含各种表单控件])

1.在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

1. action:
   在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method:
   用于设置表单数据的提交方式，其取值为get或post。(先用get,后面学AJAX前后台交互再细讲)
3. name:
   用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都必须 有自己表单域。

2.举例简单表单域应用:

(PS:可以两个input放一起,组合成为文本框和按钮)