一、表格元素

1、table元素的基础元素组成

  • 一个可选的 元素
  • 一个可选的 元素
  • 下列任意一个:
    • 零个或多个
    • 零个或多个
    • 零个或多个
    • 零个或多个

  • 一个可选的 元素

    2、table的基础使用

  • table是表格的最外层

  • caption： 展示一个表格的标题， 它常常作为 的第一个子元素出现，同时显示在表格内容的最前面
  • tr就是表格的每一行
  • th表示表头单元格 默认居中和加粗
  • td表示普通单元格 ```javascript <!DOCTYPE html>
    • 1206班就业表
    姓名 就业薪资 备注
    小王 15
    老王 14
    王中王 14
    大王 18 
  1. 效果：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21621156/1638264249872-c9d41676-3e50-424c-b375-992d83622f63.png#clientId=u76ac30ec-5187-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=232&id=u189f369e&margin=%5Bobject%20Object%5D&name=image.png&originHeight=464&originWidth=928&originalType=binary&ratio=1&rotation=0&showTitle=false&size=29627&status=done&style=none&taskId=u88daf540-e78e-4aa0-a347-8577041aafc&title=&width=464)<br />一个简单表格：
  2. ```javascript
  3. <table border="1">
  4. <tr>
  5. <th>语文</th>
  6. <th>数学</th>
  7. <th>外语</th>
  8. </tr>
  9. <tr>
  10. <td>100</td>
  11. <td>100</td>
  12. <td>100</td>
  13. </tr>
  14. <tr>
  15. <td>100</td>
  16. <td>100</td>
  17. <td>100</td>
  18. </tr>
  19. </table>

3、table的常用属性

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

  • border：（废弃）

    • 使用像素，定义了表格边框的大小如果设置为1，表示表格具有1px大小的边框。

  • cellpadding ：（废弃）

    • 这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边

  • cellspacing ：（废弃）

    • 这个属性（使用百分比或像素）定义了两个单元格之间空间的大小（从水平和垂直方向上）

  • width ：（废弃）

    • 该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。

image.png
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>table</title>
  6. </head>
  7. <body>
  8.     <table width="400" border="1" cellpadding="10" cellspacing="10">
  9.         <caption>1206班就业表</caption>
  10.         <tr>
  11.             <th>姓名</th>
  12.             <th>就业薪资</th>
  13.             <th>备注</th>
  14.         </tr>
  15.         <tr>
  16.             <td>小王</td>
  17.             <td>12</td>
  18.             <td></td>
  19.         </tr>
  20.         <tr>
  21.             <td>老王</td>
  22.             <td>13</td>
  23.             <td></td>
  24.         </tr>
  25.         <tr>
  26.             <td>王中王</td>
  27.             <td>14</td>
  28.             <td></td>
  29.         </tr>
  30.         <tr>
  31.             <td>大王</td>
  32.             <td>15</td>
  33.             <td></td>
  34.         </tr>
  35.     </table>
  36. </body>
  37. </html>

效果：
image.png

4、合并单元格

  • colspan:设置跨列，谁合并，给谁设置
  • rowspan：设置跨行,谁合并，给谁设置 ```javascript <!DOCTYPE html>
1206班就业表
姓名 就业薪资 备注
小王 12
老王 13
王中王
大王 15 

![image.png](https://cdn.nlark.com/yuque/0/2021/png/21621156/1638264951853-2f72b281-7d58-4532-b704-db786ee59674.png#clientId=u76ac30ec-5187-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=420&id=uc7fb6ee7&margin=%5Bobject%20Object%5D&name=image.png&originHeight=840&originWidth=1128&originalType=binary&ratio=1&rotation=0&showTitle=false&size=61180&status=done&style=none&taskId=ubd252f26-3f5a-4025-aaa6-45407f84085&title=&width=564)
<a name="gXuZ2"></a>
## 5、table样式

- 合并边框线：border-collapse:collapse
- 宽度平均分布：table-layout：fixed （前提：table 要写宽度）
```javascript
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>table</title>
  <style>
    table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 320px;
    }
  </style>
</head>

<body>
  <table border="1">
    <caption>1206班就业表</caption>
    <tr>
      <th>姓名</th>
      <th>就业薪资</th>
      <th>备注</th>
    </tr>
    <tr>
      <td>小王</td>
      <td>12</td>
      <td></td>
    </tr>
    <tr>
      <td>老王</td>
      <td>13</td>
      <td></td>
    </tr>
    <tr>
      <td>王中王</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <td>大王</td>
      <td>15</td>
      <td></td>
    </tr>
  </table>
</body>

</html>

效果：
image.png

二、表单元素

表单在网页中就是将本地数据提交给远程的服务器 使用form标签来创建一个表单：

1、form元素

  • 为用户创建html表单
  • 表单可以向服务器发送数据

  • form标签中可以包含很多表单元素

    <form action="1.html">

  • action属性：

    • 表单提交的地址

2、表单的提交

  • 表单提交需要在表单中书写提交按钮。
  • 提交按钮可以是 或

  • 提交按钮只会提交当前按钮所在的form表单中的内容 如果没有form标签，表单提交失效

    3、html表单的类型

    input：type类型的值不一样，呈现的状态也是不一样的

  • text：单行文本输入框没有长度和内容限制，只能输入一行，明文显示

  • password：密码输入框 默认把输入的内容呈现出小黑点

  • radio：单选框 书写name属性后，相同name的可视为一组，即可实现单选功能，应该书value 值，是向后台提供的数据。

  • checkbox：多选框

  • button: 单纯的按钮，没有任何作用和功能，只是长了按钮的样子。

  • reset: 重置按钮 当重置按钮被点击，就会重置当前reset所在的表单，变成默认的状态

  • submit：提交按钮 input标签的type类型是submit代表提交， value是按钮显示的内容 。提交按 钮只会提交当前按钮所在的form表单中的内容 如果没有form标签，表单提交失效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>

    <form action="1.html">
        请输入用户名：
                 <!-- 数据要提交到服务器，必须要为input指定一个name值 -->
        <input type="text" name="user" value="chengxiaohui">
        <br>

        请输入密码：
        <input type="password" name="pass">
        <br>

        请选择性别：
                <!-- 像选择框都要指定一个value属性，value属性最终会成为用户填写的值 -->
        男：<input type="radio" name="sex" value="男">
        女：<input type="radio" name="sex" value="女">
        未知：<input type="radio" name="sex" value="未知">
        <br>

        选择你最喜欢的语言：
        PHP：<input type="checkbox" name="lang" value="PHP">
        JAVA：<input type="checkbox" name="lang" value="JAVA">
        JS：<input type="checkbox" name="lang" value="JS">
        HTML：<input type="checkbox" name="lang" value="HTML">
        <br>

        请上传你的照片：
        <input type="file" name="photo">
        <br>

        <input type="hidden" name="id" value="00000000001">

        <input type="button" value="点我啊" id="btn">

        <br>

        <input type="reset" value="重置啊">


        <input type="submit" value="提交">
    </form>
</body>
</html>

4、input属性

  - 属性：placeholder 提示文字
  - 属性：autofocus 自动获取焦点
  - 属性：required 校验（非空）
  - 属性：checked （input的默认选中）
  - 属性：autocomplete：on/off 开启/关闭自动补全（如果要关闭所有的则写在form上即可）
  - 属性：readonly  只读 提交数据
  - 属性：disabled  禁用 不提交数据

5、其他表单元素