前端学习系列：HTML 核心标签详解
无序列表（Unordered List） · 有序列表（Ordered List） · 表格（Table）
这是前端入门阶段最常用、最必须掌握的三类结构化标签（2025–2026 最新 HTML 标准视角）。
下面用最清晰的对比 + 代码 + 常见写法 + 注意点帮你一次搞懂。
1. 无序列表 <ul> + <li>
特点：项目顺序无关，用符号（bullet）标记，默认是圆点。
核心标签：
<ul>：无序列表容器<li>：列表项（list item）
<!-- 基本写法 -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React / Vue</li>
</ul>效果（浏览器默认）：
- HTML
- CSS
- JavaScript
- React / Vue
常用自定义样式方式（2025 主流做法）：
| 需求 | 写法（推荐用 CSS） | 旧属性（了解即可，不建议用） |
|---|---|---|
| 实心圆点（默认） | list-style-type: disc; | type=”disc” |
| 空心圆 | list-style-type: circle; | type=”circle” |
| 正方形 | list-style-type: square; | type=”square” |
| 无符号（常用于导航） | list-style-type: none; | — |
| 小箭头/图片 | list-style-image: url(…); | — |
嵌套示例（非常常见，如菜单、分类）：
<ul>
<li>前端技术栈
<ul>
<li>HTML + CSS</li>
<li>JavaScript 基础</li>
<li>框架
<ul>
<li>React</li>
<li>Vue 3</li>
</ul>
</li>
</ul>
</li>
<li>后端技术栈</li>
</ul>2. 有序列表 <ol> + <li>
特点：有明确顺序，用数字/字母/罗马数字自动编号。
核心标签同上，只是容器换成 <ol>。
<!-- 基本写法 -->
<ol>
<li>克隆仓库</li>
<li>安装依赖 npm install</li>
<li>启动项目 npm run dev</li>
<li>打包上线 npm run build</li>
</ol>效果：
- 克隆仓库
- 安装依赖 npm install
- 启动项目 npm run dev
- 打包上线 npm run build
常用属性 & CSS 控制（type 属性在 HTML5 中仍支持，但推荐 CSS）：
| 编号类型 | CSS 写法 | 旧属性写法 |
|---|---|---|
| 阿拉伯数字（默认） | list-style-type: decimal; | type=”1″ |
| 小写字母 | list-style-type: lower-alpha; | type=”a” |
| 大写字母 | list-style-type: upper-alpha; | type=”A” |
| 小写罗马 | list-style-type: lower-roman; | type=”i” |
| 大写罗马 | list-style-type: upper-roman; | type=”I” |
| 从指定数字开始 | — | start=”5″ |
start 属性示例（从 10 开始编号）：
<ol start="10">
<li>第十步</li>
<li>第十一步</li>
</ol>反向排序（倒序，很少用但面试会问）：
<ol reversed>
<li>第三步</li>
<li>第二步</li>
<li>第一步</li>
</ol>3. 表格 <table> 家族
核心标签对比（必须记住这 7 个）：
| 标签 | 含义 | 是否必须 | 常见属性 |
|---|---|---|---|
<table> | 表格容器 | 是 | — |
<caption> | 表格标题（推荐放最上面） | 强烈推荐 | — |
<tr> | 表格行（table row） | 是 | — |
<th> | 表头单元格 | 常见 | scope=”col/row”（无障碍） |
<td> | 普通数据单元格 | 是 | rowspan / colspan |
<thead> | 表头分组（可选） | 推荐 | — |
<tbody> | 主体分组（可选） | 推荐 | — |
<tfoot> | 表尾分组（合计等） | 少用 | — |
最完整推荐写法（带语义、无障碍、响应式准备）：
<table>
<caption>2025 年季度销售统计</caption>
<thead>
<tr>
<th scope="col">季度</th>
<th scope="col">销售额（万元）</th>
<th scope="col">同比增长</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Q1</th>
<td>1280</td>
<td>+18%</td>
</tr>
<tr>
<th scope="row">Q2</th>
<td>1650</td>
<td>+22%</td>
</tr>
<tr>
<th scope="row">Q3</th>
<td>1420</td>
<td>+9%</td>
</tr>
<tr>
<th scope="row">Q4</th>
<td>1980</td>
<td>+35%</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">全年总计</th>
<td colspan="2">6330 万元</td>
</tr>
</tfoot>
</table>合并单元格（面试/简历项目必考）：
<tr>
<td rowspan="2">华东区</td> <!-- 纵向合并两行 -->
<td>上海</td>
<td>850</td>
</tr>
<tr>
<!-- 第一列已被 rowspan 占用，所以这里从第二列开始 -->
<td>南京</td>
<td>620</td>
</tr>
<tr>
<td colspan="3">备注：数据为初步统计</td> <!-- 横向合并三列 -->
</tr>快速对比总结表（背下来）
| 特性 | 无序列表 <ul> | 有序列表 <ol> | 表格 <table> |
|---|---|---|---|
| 顺序重要吗 | 不重要 | 重要 | 行列都有结构意义 |
| 默认标记 | • 圆点 | 1. 数字 | 无（需加 border） |
| 主要子标签 | <li> | <li> | <tr> → <th>/<td> |
| 可嵌套 | 是 | 是 | 是（td 里可放 ul/ol/table） |
| 常见用途 | 菜单、特性列表、导航 | 步骤、排行、章节 | 数据展示、表单布局（慎用） |
| 推荐加语义分组 | — | — | thead / tbody / tfoot |
| 推荐加标题 | — | — | <caption> |
练习建议（当天就能上手）
- 用
<ul>写出你今天的学习计划（嵌套二级） - 用
<ol>写出“如何学习前端”的 8 步步骤（从第 3 步开始编号） - 做一个 4 行 5 列的课程表（合并周一上午的“高数”两节课）
- 把上面三个放到同一个 HTML 文件，用
<h2>标题区分
需要我给你：
- 带边框 + 隔行变色的 CSS 美化版表格模板
- 响应式表格（手机上横向滚动）的写法
- 列表转 Flex / Grid 的现代导航菜单示例
随时说一声，我直接贴代码给你！
