HTML列表、表单和表格的使用及区别

2023-11-02 12:01:38

HTML列表

HTML列表用于将相关信息分组并以更清晰、更结构化的方式显示。有两种主要类型的HTML列表：无序列表和有序列表。

无序列表

无序列表使用项目符号来标记列表项，通常用于列出不按特定顺序排列的信息。要创建无序列表，可以使用<ul>和<li>标签，其中<ul>表示列表的开头，<li>表示列表中的每个项目。

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

有序列表

有序列表使用数字或字母来标记列表项，通常用于列出按特定顺序排列的信息。要创建有序列表，可以使用<ol>和<li>标签，其中<ol>表示列表的开头，<li>表示列表中的每个项目。

<ol>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ol>

HTML表单

HTML表单用于从用户收集信息，例如姓名、电子邮件地址、密码等。表单由各种表单控件组成，包括文本输入框、复选框、单选按钮、下拉列表等。要创建表单，可以使用<form>标签，其中包含各种表单控件。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name">

  <label for="email">电子邮件地址：</label>
  <input type="email" id="email">

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

HTML表格

HTML表格用于组织和显示数据，以便更易于阅读和理解。表格由行和列组成，每个单元格包含一个数据项。要创建表格，可以使用<table>、<tr>和<td>标签，其中<table>表示表格的开头，<tr>表示表格中的每一行，<td>表示表格中的每个单元格。

<table>
  <tr>
    <th>姓名</th>
    <th>电子邮件地址</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>jane.smith@example.com</td>
  </tr>
</table>