HTML（二）-- 表格、表单

目录

• 1.表格
  • 1.1常用表格
    • 标签
    • 属性
  • 1.2长表格（特殊表格）
    • 属性（特殊情况用到）
  • 1.3表格的样式
    • 实现表格隔行双色显示
    • 实现页面居中的另一种方式(用的不多)
• 2.表单
  • 2.1form的属性
  • 2.2表单项
    • 文本框
    • 提交按钮
    • 密码框
    • 单选按钮
    • 多选框
    • 下拉列表
    • 按钮button
    • 重置表单（reset）
    • button（按钮，input的变体）
    • 颜色选择框（color）

在现实生活中，我们经常需要使用表格来表示一些格式化数据，例如：课程表、人名单、成绩单。。。
在网页中也要使用表格
通过table标签创建一个表格

1.表格

1.1常用表格

标签

• table
• tr 表示一行
• td 表示一个单元格
  • 默认情况下元素在td中是垂直居中的，可以通过vertical-align来修改

属性

• rowspan纵向合并单元格
• colspan横向合并单元格

<table>
      在tablezhong使用tr表示表格中的一行，有几个tr就有几行
      <tr>
      在tr中使用td表示一个单元格，有几个td就有几个单元格
            <td>A1</td>
      rowspan纵向的合并单元格
            <td rowspan=“2”>A1</td>
      </tr>
      <tr>
            <td>A1</td>
            <td>A1</td>
      </tr>
      <tr>
      colspan横向的合并单元格
            <td colspan="2">A1</td>
      </tr>
</table>

1.2长表格（特殊表格）

属性（特殊情况用到）

• th：表示头部的单元格
• thead：表示头部的一行
• tbody：表示中部的行
  • 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中
  • tr不是table的子元素，而是tbody的子元素
• tfoot：表示尾部的行

1.3表格的样式

• border-spacing：指定边框之间的距离
• border-collapse：collapse；设置边框的合并
• text-align:center；让表格文本居中
• vertical-align：middle；让表格文本居中

实现表格隔行双色显示

使用伪元素
tr:nth-child(odd){
background-color:#bfa;
}

实现页面居中的另一种方式(用的不多)

使用display：table-cell；将其变为表格布局

.box1{
      300px;
      height:300px;
      background-color:orange;
      /*将元素设置为单元格*/
      display：table-cell;
      vertical-align:middle;
}
.box2{
      100px;
      height:100px;
      background-color:yellow;
      margin:0 auto;
}

2.表单

• 在现实生活中表单用于提交数据
• 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
• 使用form标签来创建一个表单

2.1form的属性

• action：表单要提交的服务器的地址

2.2表单项

(https://blog.csdn.net/weixin_43970743/article/details/88824324)

文本框

注意：数据要提交到服务器中，必须要为元素指定一个name值(成为kv键值对的key)

• 属性：
  • autocomplete:"off";关闭文本框的自动补全（历史记录）功能，on：开启
  • readyonly：将表单项设置为只读（可以被提交）
  • disabled：将表单设置为禁用（不能被提交）
  • autofocus：设置表单项自动获取焦点（打开页面自动获取焦点，为输入框）
  • placeholder="Hello World":显示初始内容,颜色为灰色，点击文本框后消失

<input type="text">

提交按钮

<input type="submit">

密码框

<input type="password">

单选按钮

<input type="radio">

• 通过name分组，如果name一样那么就完成了多选一的设置
• 必须要指定一个value属性，value属性最终会作为用户填写的值传递给服务器
• checked可以将单选按钮设置为默认选中

多选框

<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
      <option value="i">选项一</option>
      <option value="ii">选项二</option>
      <option value="iii">选项三</option>
<select>

按钮button

没有其他功能仅仅代表一个按钮，可以由js自定义

<input type="button">

重置表单（reset）

以按钮的形式表示，重置表单信息

<input type="reset">

button（按钮，input的变体）

因为是成对标签所以可以添加一些其它标签，所以更灵活

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

颜色选择框（color）

点击后会出现颜色选择框

<input type="color">