🌱 HTML 学习笔记（二）——表格、列表与表单全梳理> 学完 HTML 的基础结构后，第二天终于开始接触**真正“像

学完 HTML 的基础结构后，第二天终于开始接触真正“像网页”的东西了：
表格、列表、表单。
这三块内容，看起来零碎，但在实际开发中使用频率极高，尤其是后台页面。

一、表格（Table）——专门用来展示数据的利器

1️⃣ 表格是干嘛的？

一句话总结：

表格不是用来布局页面的，而是用来展示数据的。

典型使用场景：

后台管理系统
用户列表
订单列表
数据统计页面

👉 优点很明显：
规整、清晰、可读性强

2️⃣ 表格的基本结构（必背）

<table>
  <tr>
    <td>单元格内容</td>
  </tr>
</table>

对应关系：

标签	作用
table	定义表格
tr	定义一行
td	定义一个单元格（数据）

📌 td 是 table data 的缩写。

3️⃣ 表头单元格 `<th>`

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
</table>

特点：

默认加粗
默认居中
常用于第一行或第一列

📌 <th> 本质也是单元格，只是语义更强。

4️⃣ 表格的结构标签（语义更清晰）

当表格数据很多时，可以拆分结构：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

总结一下：

<thead>：表头区域
<tbody>：主体数据
都必须写在 <table> 内

5️⃣ 合并单元格（重点）

跨行合并

<td rowspan="2"></td>

👉 最上面的单元格是目标单元格

跨列合并

<td colspan="2"></td>

👉 最左侧的单元格是目标单元格

合并单元格三步走

1️⃣ 判断是跨行还是跨列
2️⃣ 找到目标单元格，写 rowspan / colspan
3️⃣ 删除多余的单元格

📌 表格小总结

表格知识点分三块：

标签：table / thead / tbody / tr / th / td
属性（了解即可，后期用 CSS）：border / width / cellpadding / cellspacing
合并单元格：rowspan / colspan

二、列表（List）——前端布局的常客

如果说表格负责展示数据，
那么列表更偏向布局结构。

列表的优势

整齐
结构清晰
灵活度高
非常适合导航栏、菜单

1️⃣ 无序列表 `<ul>`

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

特点：

没有顺序
默认有小圆点
<ul> 中只能放 <li>

📌 实际开发中，样式几乎都会用 CSS 重置。

2️⃣ 有序列表 `<ol>`

<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

特点：

有顺序（数字）
<ol> 中只能嵌套 <li>

3️⃣ 自定义列表 `<dl>`

使用场景：名词解释、术语说明

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
</dl>

结构说明：

dt：名词
dd：解释

📌 列表总结

类型	标签
无序列表	ul + li
有序列表	ol + li
自定义列表	dl + dt + dd

三、表单（Form）——网页和用户交互的桥梁

1️⃣ 为什么需要表单？

表单的本质：收集用户信息

现实例子：

登录
注册
提交评论
上传文件

2️⃣ 表单的三大组成

表单域（form）
表单控件（input / select / textarea）
提示信息

3️⃣ 表单域 `<form>`

<form>
  表单元素
</form>

📌 当前阶段重点记住两点：

所有表单元素都要放在 <form> 里
现在不用关心数据提交，先会写结构

四、表单控件详解

1️⃣ `<input>`（最重要）

<input type="text" />

常见 type 值：

type	作用
text	文本框
password	密码框
radio	单选框
checkbox	复选框
submit	提交按钮
file	上传文件

📌 <input> 是 单标签

2️⃣ `<label>`（提升用户体验）

<label for="male">男</label>
<input type="radio" id="male" />

核心规则：

label 的 for 必须等于 input 的 id

好处：
点击文字，也能选中表单元素 👍

3️⃣ 下拉列表 `<select>`

<select>
  <option>北京</option>
  <option>上海</option>
</select>

适合选项多、节省空间的场景。

4️⃣ 多行文本 `<textarea>`

<textarea rows="3" cols="20"></textarea>

使用场景：

留言板
评论区
反馈意见

📌 实际开发中，尺寸通常用 CSS 控制。

5️⃣ 表单元素的统一规则

都必须放在 <form> 中
都应该有 name 属性
当前阶段关注 结构和样式

四、三个容易混淆的标签

标签	用途
form	表单域
file	input 的 type，用于上传
textarea	多行文本输入

五、学习建议 & 查阅文档

📌 一个好的前端，必须会查文档

✨ 总结一下

第二天 HTML 的核心收获：

表格：展示数据
列表：辅助布局
表单：用户交互入口
结构永远大于样式

HTML 看似简单，但每一个标签，都是后续 CSS 和 JS 的基础。
地基打牢，后面才不会崩。

🌱 HTML 学习笔记（二）——表格、列表与表单全梳理