前端剑法第四式————御风

御扶摇而上者九万里，绝云气，负青天

风往矣，吾亦往矣

今日学习内容

目录

一，表格

1.table tr和td

2.合并单元格 rowspan和colspan

二，表格样式

表格单线边框border-collapse

三，长表格 

thead，tbody ， tfoot

四，表单

1，创建表单  form标签

    （1）input来创建一个文本框

    （2）input创建一个密码框

    （3）input创建一个单选按钮

    （4）input创建一个多选框

      (5)select来创建一个下拉列表

    （6）textarea创建一个文本域

    （7）input创建一个提交按钮，点击后表单就会提交

    （8）创建一个重置按钮，type="reset"

    （9）创建一个单纯的按钮，

    （10）button标签来创建按钮

           input属性补充

---

一，表格

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，

  表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单

 在网页中也可以来创建出不同的表格。

1.table tr和td

 1、在HTML中，使用table标签来创建一个表格

 2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr

 3、 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

 4、table标签里有自带的属性： border="1" width="40%" align="center"

2.合并单元格 rowspan和colspan

 5、rowspan用来设置纵向的合并单元格

注意：合并方向是纵向的，即从上往下合并

 6、colspan横向的合并单元格

注意：合并方向是横向的，即从左往右合并

二，表格样式

一、设置表格的宽度，表格居中，边框，设置内部边框

等同div做法

表格单线边框border-collapse

        /* 方法一 */

        /*  border-spacing:0px ; */边框距离为0

        /*方法二*/

        /* border-collapse [kə'læps] 设置行和单元格的边是否合并

            如果设置了边框合并，则border-spacing自动失效

              可选值

                separate  默认值，不合并

                collapse  合并边框    

             设置隔行变色 tr:nth-child(even)

              调整td文字在表格中的位置  vertical-align、text-align

三，长表格 

thead，tbody ， tfoot

有一些情况下表格是非常的长的

  这时就需要将表格分为三个部分，表头，表格的主体，表格底部

在HTML中为我们提供了三个标签

   thead  表头  永远在表格的头部

   tbody  表格的主体  永远在表格中间

   tfoot  表格的底部  永远在表格底部

   用来区分表格不同的部分，顺序，浏览器会自动调整

如果表格中没有写tbody，浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素

通过table > tr 无法选中行 需要通过tbody > tr

四，表单

    将用户信息等本地的数据信息提交给服务器的

    比如：百度的搜索框 注册 登录这些操作都需要填写表单

1，创建表单  form标签

    属性：

        action属性（必须要写）