HTML 核心功能标签梳理：表单、表格与列表

最新推荐文章于 2025-11-24 21:21:07 发布

原创最新推荐文章于 2025-11-24 21:21:07 发布 · 2.5k 阅读

56 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文围绕 HTML 中用于数据收集、数据展示与内容排版的三类核心标签展开，系统讲解表单、表格、列表的定义、语法、属性及应用场景，结合实例帮助初学者掌握网页数据交互与结构化展示的实现方法。

一、表单标签：实现用户数据收集

表单是网页与用户交互的核心，用于收集用户输入（如登录信息、问卷答案），由表单域、表单控件、提示信息三部分组成。

1. 表单域（`<form>`）

作为表单控件的容器，负责将数据提交至服务器，核心属性决定数据提交规则：

action：指定接收数据的服务器 URL 地址；
method：提交方式（get/post），get地址栏显数据（不安全、有大小限制，适查询），post隐式提交（安全、无大小限制，适增删改）；

name：表单名称，用于区分同一页面多个表单。
示例：

<form action="http://www.baidu.com" method="post" name="userForm">
  <input type="submit" value="提交数据">
</form>

2. 表单控件

包含输入类（<input>）、下拉选择类（<select>）、多行文本类（<textarea>），满足不同输入需求：

<input>输入控件：通过type属性实现多种输入形式，核心属性含name（控件名，用于后端识别）、value（默认值）、checked（默认选中，适单选 / 多选）、maxlength（最大输入长度）。常见type值：
- text（单行文本框，用于输入普通文本，如用户名、手机号、地址等，默认显示输入内容）；
- password（密码框，输入字符以星号（*）或圆点（・）掩码显示，保护密码隐私，如登录密码、支付密码）；
- radio（单选按钮，同一 name 值的 radio 为一组，组内仅能选中一个，用于二选一或多选一场景，如性别（男 / 女）、学历（本科 / 专科 / 硕士））；
- checkbox（多选按钮，同一 name 值的 checkbox 为一组，组内可选中多个，用于多选场景，如兴趣爱好（读书 / 运动 / 旅游）、协议同意（同意用户协议 / 同意隐私政策））；
- submit（提交按钮，点击后触发表单数据提交，将表单内所有控件的 name 和 value 传递给后端，默认按钮文字为 “提交”，可通过 value 属性自定义文字，如 value="登录"）；
- reset（重置按钮，点击后清空表单内所有已输入的内容，将控件恢复到初始状态（如默认值、默认选中状态），默认按钮文字为 “重置”，可通过 value 属性自定义，如 value="重新填写"）；
- button（普通按钮，无默认功能，需配合 JavaScript 绑定点击事件实现自定义操作，如弹窗、表单验证、页面跳转等，按钮文字通过 value 属性设置，如 value="获取验证码"）；
- file（文件上传按钮，点击后弹出文件选择窗口，支持选择本地文件，可通过 accept 属性限制上传文件类型，如 accept="image/*" 仅允许上传图片，multiple 属性允许同时选择多个文件）；
- email（邮箱输入框，自带基础邮箱格式验证，提交时若输入内容不符合邮箱格式（如缺少 @、后缀错误），浏览器会弹出提示）；
- tel（电话输入框，无强制格式验证，但在移动端点击时会弹出数字键盘，提升输入体验，适用于手机号、固定电话输入）；
- number（数字输入框，仅允许输入数字、小数点和正负号，右侧自带上下调节按钮，可通过 min 属性设置最小值、max 属性设置最大值、step 属性设置每次调节的步长，如 min="0" max="100" step="1" 用于输入 0-100 的整数）；
- date（日期选择框，点击后弹出日历面板，支持选择年、月、日，输入内容格式固定为 YYYY-MM-DD，无需手动输入，避免格式混乱，适用于生日、预约日期选择）。
<label>标签：绑定表单控件，点击文字可聚焦对应控件（提升体验），需通过for属性与控件id关联。
<select>下拉控件：用于多选项精简展示，<option>定义选项，selected属性设置默认选中项。
- 核心属性：
- name：下拉控件的名称，用于后端识别该控件传递的数据；
- multiple：允许同时选择多个选项，按住 Ctrl 键（Windows）或 Command 键（Mac）可多选，未设置时仅允许单选；
- size：设置下拉框默认显示的选项数量，未设置时默认折叠为下拉按钮，设置后以列表形式展示对应数量的选项。
- <option>标签属性：
- value：选项对应的实际值，提交表单时传递给后端的是该值（而非选项文字）；
- selected：设置默认选中的选项，无需赋值，写属性名即可，一个<select>内仅能设置一个默认选中项（multiple 属性开启时可设置多个）；
- disabled：禁用该选项，选项灰显，无法选中，适用于 “请选择” 等提示性选项或不可用的选项。
<textarea>文本域：用于多行文本输入（如留言、反馈），rows/cols控制初始行数 / 列数。
示例（核心控件组合）：
- 核心属性：
- name：文本域的名称，用于后端识别数据；
- rows：设置文本域的初始显示行数，决定文本域的默认高度（每行高度由字体大小决定）；
- cols：设置文本域的初始显示列数，决定文本域的默认宽度（每列对应一个字符宽度）；
- placeholder：输入提示文本，显示在文本域内，用户输入后消失；
- required：必填标识，提交时若未输入内容，浏览器弹出提示；
- maxlength：限制最大输入字符数，超出后无法输入；
- disabled：禁用文本域，灰显且无法输入，值不提交；
- readonly：只读属性，文本域内内容可查看但无法修改，值会随表单提交（区别于 disabled）。

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" maxlength="6"><br>
  
  性别：<input type="radio" name="sex" value="男" checked>男
  <input type="radio" name="sex" value="女">女<br>
  
  爱好：<input type="checkbox" name="hobby" value="篮球">篮球
  <input type="checkbox" name="hobby" value="足球" checked>足球<br>
  
  籍贯：<select name="hometown">
    <option value="浙江">浙江</option>
    <option value="河南" selected>河南</option>
  </select><br>
  
  反馈：<textarea rows="5" cols="30"></textarea><br>
  
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

二、表格标签：实现数据结构化展示

表格用于规整展示二维数据（如排行榜、报表），核心标签构成层级结构：<table>（表格容器）→<tr>（行）→<td>（普通单元格）/<th>（表头单元格，文字加粗居中）。

1. 基础属性（需写在`<table>`中）

border：表格边框（值为 1 显示边框，默认 0）；
align：表格整体对齐方式（left/center/right）；
cellpadding：单元格内边距（文字与单元格边框距离）；
cellspacing：单元格间距（默认 2，设 0 可消除间距）；
width：表格宽度（像素值或百分比）。

2. 结构优化：`<thead>`与`<tbody>`

用于长表格语义化分割，<thead>包裹表头行，<tbody>包裹内容行，便于代码维护与折叠。

3. 单元格合并

跨行合并（rowspan）：目标单元格（最上侧）添加rowspan="合并行数"；
跨列合并（colspan）：目标单元格（最左侧）添加colspan="合并列数"。

示例（带合并单元格的表格）：

<table border="1" cellspacing="0" width="500">
  <thead>
    <tr>
      <th rowspan="2">序号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="2">Rabbit（22岁）</td>
    </tr>
  </tbody>
</table>

三、列表标签：实现内容有序 / 无序排版

列表用于规整排列同类内容（如菜单、排行榜），分三类，核心是 “容器 + 列表项” 的层级结构：

1. 无序列表（`<ul>`+`<li>`）

特点：列表项前默认圆点标记，无顺序；
规则：<ul>仅能嵌套<li>，<li>内可放任意内容（文字、图片、链接等）；

场景：导航菜单、兴趣选项等无需排序的内容。
示例：

<ul>
  <li>榴莲</li>
  <li>臭豆腐</li>
  <li>鲱鱼罐头</li>
</ul>

2. 有序列表（`<ol>`+`<li>`）

特点：列表项前默认数字标记，有顺序；
规则：同无序列表，<ol>仅嵌套<li>；

场景：排行榜、步骤说明等需排序的内容。
示例：

<ol>
  <li>鹿晗（粉丝数1）</li>
  <li>薛之谦（粉丝数2）</li>
</ol>

3. 自定义列表（`<dl>`+`<dt>`+`<dd>`）

特点：含 “名词 + 解释” 结构，<dt>定义名词，<dd>定义解释（默认缩进）；
规则：<dl>仅嵌套<dt>和<dd>，一个<dt>可对应多个<dd>；
场景：产品说明、帮助中心等需 “术语 + 解释” 的内容。
示例：
```
<dl>
  <dt>关于我们</dt>
  <dd>了解我们</dd>
  <dd>加入我们</dd>
</dl>
```

四、总结

表单、表格、列表是 HTML 实现 “数据交互” 与 “结构化展示” 的核心工具：

表单聚焦数据收集，通过<form>+ 各类控件实现用户输入与提交；
表格聚焦数据展示，通过层级标签与合并属性实现规整的二维数据呈现；
列表聚焦内容排版，通过三类列表满足有序、无序、自定义的内容排列需求。
掌握这三类标签，可完成网页基础的数据交互与结构化布局，为后续结合 CSS 美化、JS 增强交互奠定基础。