HTML—表格/单标签

一.table表格标签

作用：页面中设置单元格

- 一套组合标签 
    - table 标签，一个标签就是一个表格
    - tr 表格中的一行
    - td 表格中的一个单元格
    - thead 表头  
     - th单元格有两种 th表头中的单元格，加粗和剧中的效果，td存储基本数据的普通单元格
    - tbody 表体，如果没有设置的时候会自动添加，一定要写tbody
     - caption 表格的标题，始终相对于表格居中，caption写在table标签内
    - tfoot 表尾

<table>
    #标题
    <caption>
        <h></h>
    </caption>
    #表头
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    #表体
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    #表尾
    <tfoot>
        <tr>
            <td></td>
             <td></td>
             <td></td>
        </tr>
    </tfoot>
</table>

二.合并单元格

• 合并单元格步骤:

1.明确合并哪几个单元格

2.通过左上原则，确定保留谁删除谁

· 上下合并→只保留最上的，删除其他

· 左右合并→只保留最左的，删除其他

3. 给保留的单元格设置:跨行合并(rowspan) 或者跨列合并(colspan)

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

• 注意点:

  只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨: thead、tbody、tfoot)

三.form表单标签

作用：页面设置表单，表单的作用为收集用户信息，上传到服务器

​ form标签有一套组合标签，表单内的标签是表单元素（有默认的样式）

 - form 表单
   - action属性就是设置表单上传时的服务器地址
 - input  行内块元素 
    - type 属性取值不同标签的表现不同
         取值：text
                 默认值 明文输入框
               password 
                掩文输入框
               button 
                普通按钮，需要和js配合操作 没有名称需要使用value属性设置按钮名称
               reset 
                重置按钮,有按钮名称可以value修改，点击后将表单信息恢复到用户输入之前的状态
               submit 
                提交按钮，有按钮名称，点击之后将表单信息上传到服务器
                点击提交按钮后会提交具有name属性的表单元素的信息上传到服务器,然后刷新页面
  - placeholder 占位符 设置提示信息
    - value 输入框设置默认值，在按钮设置按钮名称
    - autofocus 自动获取焦点（自动聚焦）
   
 ```html
 <form action="URL" method="get">
     第一个问题：<input type="text" placeholder="提示信息" autofocus>
     第二个问题：<input type="password" placeholder="输入密码" autofocus>
 ```
 

• label标签

  作用： 当点击文字（上例的“第一个问题”的时候使输入框获取焦点）

  ​ 将文字和输入框绑定

  ​ - 格式1：

  ​ 使用label包裹文字，给输入框设置id，将id给label标签的for属性

<label for="baby">
    我是不是你最爱的宝贝：<input type="text" id="baby" value="当然是" name="mhx" autofocus>
</label>

四.单选/多选框

4.1单选框

input

​ - type属性取值为radio的时候为单选框

​ 一组单选框默认是不会互斥，想要互斥需要给这一组单选框设置相同的name属性值

​ - checked属性给单选框和复选框设置默认选中

1+2=?
<br>
3<input type="radio" name="aa" value="3" checked>
4<input type="radio" name="aa" value="4">
5<input type="radio" name="aa" value="5">
<br>

4.2多选框

input标签的 type属性取值为checkbox的时候为复选框

2+5<input type="checkbox" name="hp" value="7" checked>
2*3<input type="checkbox" name="hp" value="6">
1+5<input type="checkbox" name="hp" value="6">

五.按钮属性

5.1普通按钮

<input type="button" value="普通按钮">

5.2重置按钮

<input type="reset" value="重置按钮" >

5.3提交按钮

<input type="submit" value="提交按钮">