HTML标签介绍（五）

HTML 表格与表单元素

表格内容

这些元素用于创建和处理表格数据。

元素	描述
<caption>	指定表格的标题。
<col>	定义表格中的列，并用于定义所有公共单元格上的公共语义。通常位于 <colgroup> 元素内。
<colgroup>	定义表中的一组列。
<table>	表示表格数据，通过二维（由行和列组成）数据表表示的信息。
<tbody>	封装了一系列表格的行 (<tr> 元素)，代表表格主要内容的组成部分。
<td>	定义包含数据的表格单元格。它是表格模型的一部分。
<tfoot>	定义表格中各列的汇总行。
<th>	定义表格内的表头单元格。特征由 scope 和 headers 属性定义。
<thead>	定义表格的列头行。
<tr>	定义表格中的一行。可包含 <td>（数据单元格）和 <th>（列头单元格）。

表格元素示例

<table border="1">
  <caption>学生成绩表</caption>
  <colgroup>
    <col span="1" style="background-color:lightblue">
    <col span="1" style="background-color:lightyellow">
    <col span="1" style="background-color:lightgreen">
  </colgroup>
  <thead>
    <tr>
      /* scope="col": 用于指定 `<th>` 的作用范围，这里是定义列头。*/
      <th scope="col">学号</th>
      <th scope="col">姓名</th>
      <th scope="col">成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1001</td>
      <td>张三</td>
      <td>95</td>
    </tr>
    <tr>
      <td>1002</td>
      <td>李四</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总平均分</td>
      <td>91.5</td>
    </tr>
  </tfoot>
</table>

示例

1. 表格标题 <caption> ：
   表格的上方有一个标题：“学生成绩表”，这个标签确保表格有一个清晰的标题，让用户一眼就能知道这个表格的内容。
2. 列分组 <colgroup> 和 <col> ：
   使用 <colgroup> 标签，我们把表格中的列进行了分组，每组列可以独立设置样式。在这个例子中，我们为三列分别设置了不同的背景色：蓝色、黄色和绿色，目的就是为了让数据看起来更加分明、清晰。
3. 表头 <thead> 和表头单元格 <th> ：
   表头部分包含了三列标题：学号、姓名和成绩。每个 <th> 都使用 scope="col"，意味着它们是列标题。这告诉浏览器和辅助技术工具（如屏幕阅读器），这些单元格描述的是后续每一列的数据类型。
4. 表体 <tbody> ：
   表体部分包含了学生的具体成绩数据。每一行（<tr>）都包含了学生的学号、姓名和成绩。数据单元格使用 <td> 来展示具体的数据。
5. 表尾 <tfoot> ：
   表格底部的 <tfoot> 用来展示一些汇总信息。在这个例子中，它展示了“总平均分”，并合并了前两列（学号和姓名），使用 colspan="2" 表示这两个列单元格将会合并成一个单元格。

表单内容

HTML 提供了许多可一起使用的元素，用于创建用户可以填写并提交到网站或应用程序的表单。

元素	描述
<button>	可交互元素，通过用户的鼠标、键盘、手指、声音指令或其他辅助技术激活，执行提交表单或打开对话框等动作。
<datalist>	包含 <option> 元素，这些元素表示其它表单控件可选值。
<fieldset>	用于对 web 表单中的控件和标签（<label>）进行分组。
<form>	表示文档中的一个区域，包含交互控件，用于向 Web 服务器提交信息。
<input>	创建交互式控件，用于接受来自用户的数据。具有多种类型和属性组合。
<label>	为用户界面中的元素提供说明。
<legend>	表示其父元素 <fieldset> 的内容标题。
<meter>	用于显示已知范围的标量值或分数值。
<optgroup>	为 <select> 元素中的选项创建分组。
<option>	定义在 <select>、<optgroup> 或 <datalist> 元素中包含的选项。
<output>	显示计算或用户操作的结果。
<progress>	用于显示任务的完成进度，通常为进度条。
<select>	提供选项菜单的控件。
<textarea>	用于多行纯文本输入，例如评论或反馈表单中的意见。

表单元素示例

<form action="/submit" method="post">
  <fieldset>
    <legend>用户信息</legend>

    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    <br><br>

    <label for="email">电子邮件：</label>
    <input type="email" id="email" name="email" required>
    <br><br>

    <label for="gender">性别：</label>
    <input type="radio" id="male" name="gender" value="male"> 男
    <input type="radio" id="female" name="gender" value="female"> 女
    <br><br>

    <label for="language">喜欢的编程语言：</label>
    <select id="language" name="language">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">JavaScript</option>
    </select>
    <br><br>

    <label for="skills">技能：</label>
    <input type="checkbox" id="html_skill" name="skills" value="html"> HTML
    <input type="checkbox" id="css_skill" name="skills" value="css"> CSS
    <input type="checkbox" id="js_skill" name="skills" value="js"> JavaScript
    <br><br>

    <label for="rating">评价：</label>
    <meter id="rating" name="rating" min="0" max="10" value="7">7</meter>
    <br><br>

    <label for="feedback">反馈：</label>
    <textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
    <br><br>

    <button type="submit">提交</button>
  </fieldset>
</form>

示例

1. <form> 标签：
   这是整个表单的容器，它规定了表单提交的路径（action="/submit"）和方法（method="post"）。当用户填写完表单并点击提交时，表单数据将会通过 POST 方法发送到服务器。
2. <fieldset> 和 <legend> ：
   <fieldset> 用于将表单的控件分组，而 <legend> 提供了对该组控件的描述。这里的 "用户信息" 解释了表单内包含的是关于用户的个人信息。
3. <label> 标签：
   每个输入控件（如文本框、单选按钮等）前面都有一个 <label>，这个标签提供了每个控件的说明文字。例如，"用户名"、"电子邮件" 和 "性别" 等。for 属性将标签与对应的输入控件关联起来，增强了可访问性。
4. <input> 标签：
   用于用户输入数据的控件。不同类型的 <input> 控件用来接受不同类型的数据，如文本框（type="text"）、电子邮件框（type="email"）和单选按钮（type="radio"）。通过设置 required 属性，确保用户在提交表单前填写该项。
5. <select> 和 <option> ：
   <select> 创建了一个下拉菜单，用户可以从中选择一项。每个 <option> 标签定义了下拉菜单中的一个选项。在这个例子中，用户可以选择他们喜欢的编程语言。
6. <textarea> 标签：
   提供了一个多行文本框，用户可以在其中输入较长的文本，如反馈意见。
7. <meter> 标签：
   用于显示一个标量值（例如评分）。这里设置了从 0 到 10 的范围，当前值为 7。
8. <button> 标签：
   创建了一个按钮，用户点击时将提交表单。