html表格+表单

1. 表格

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

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

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

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

例：创建两行实列的表格

<table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        

      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

      </tr>
</table>

表格的属性

1. 设置宽高

width:设置宽；height：设置高

2. 设置边框线

border：边框线大小 边框线样式 边框线的颜色

3. 设置单线边框：

border-spacing:0px ;

border-collapse:collapse

4. 调整td文字在表格中的位置

vertical-align:水平居中

text-align 垂直居中

5. 设置隔行变色

tr:nth-child(even) 括号中的值偶数行：2n；奇数行：2n+1

6. 鼠标移入到tr以后，改变颜色

  tr:hover{
        background-color: red;
      }

2. 表单

表单：

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

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

1. 创建

form标签

属性： action属性（必须要写）

指向的是一个服务器的地址，当我们提交表单时将会表单相关的数据提交到action属性对应的地址

2. input

1. 文本：

type属性：text

name属性：提交内容的名字；如果希望表单项中的数据会提交到服务器中，必须指定一个name属性

value属性值：作为文本框的默认值显示；就是用户输入的内容，也就是要提交给服务器的值

2. 密码：

type属性值:password

name属性：提交密码的名字

3. 单选按钮

type属性：radio
            - name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择
            - value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器        
            - checked属性  默认选中  可以直接添加属性，不写属性值

4. 多选

input创建一个多选框
            -type属性:checkbox
            -checked属性  默认选中

5. 提交按钮/重置

type属性值：submit
            -value属性：指定按钮上的文字,默认是提交
创建一个重置按钮，type="reset" 
                点击重置按钮以后表单中内容将会恢复为默认值

6. 补充

1: autocomplete="off" 关闭自动补全 2: readonly 设置为只读，不能修改 3: disabled 设置为禁用 4: autofocus 自动获取焦点 5: placeholder 表单提示内容

3. 文本域

textarea创建一个文本域 -name属性 提交给服务器的名字 -cols属性 设置宽度 -rows属性 设置高度

<textarea name="" cols="40" rows="10"></textarea>

4. 下拉框

elect来创建一个下拉列表 -name属性设置给select， -value属性设置给option -selected属性设置给option，将选项设置为默认选中 - 在下拉列表中使用option标签来创建一个一个列表项

5. button

button标签来创建按钮 也可以用type属性来更改button的类型，例如submit、reset、button 方式和使用input类似，它是成对出现的标签，使用起来更加的灵活