4、HTML 常用标签 - 第二集

在这个快速变化的世界中，竞争力是通过不断学习被保持的。

---

前言

HTML 常用标签 - 第二集汇总了表格标签 table 和 3 种列表标签的基础用法、代码示例及运行截图。

---

1. 表格标签

1.1 标签描述

表格由 <table> 标签来定义。表格的数据单元格可以包含文本、图片等其他标签。

HTML 表格的基本结构：

标签	描述
<table>…</table>	table 标签定义表格，由若干行和若干列组成。 行列将表格分割成多个数据单元格。
<thead>…</thead>	thead 标签用于组合 HTML 表格的表头内容，可以包含一个或者多个 tr 标签。
<tbody>…</tbody>	tbody 标签组合了一个或者多个 tr 标签作为 table 表格的主体内容。
<tfoot>…</tfoot>	tfoot 标签用于对 HTML 表格中的表注（页脚）内容进行分组。
<th>…</th>	th 标签定义表格的表头（ table head ），一般位于表格的第一行或第一列。 表头单元格里面的文本内容默认是加粗居中显示的。
<tr>…</tr>	tr 标签定义表格的行。
<td>…</td>	td 标签定义表格的单元格。 单元格中的文本内容默认是普通的左对齐显示的。

• table 的部分属性可用于设置表格样式（一般还是推荐使用 CSS 来设置表格的复杂样式），常用属性如下：
  border属性：设置表格是否显示边框。
  cellpadding 属性：设置单元边沿与其内容之间的空白。
  cellspacing 属性：设置单元格之间的空白。
• <thead>、<tbody> 和 <tfoot> 标签默认不会影响表格的布局，三个标签应该结合起来使用，用来规定表格的各个部分（页脚、表头、主体）。
• 如果单元格横跨多个行，使用 rowspan 属性，例如：
  <th rowspan="2">多层表头</th>
<td rowspan="3">横跨多行的单元格</td>
• 如果单元格横跨多个列，使用 colspan 属性，例如：
  <th colspan="7">信息统计表格</th>
<td colspan="5">横跨多列的单元格</td>

1.2 示例代码

1.2.1 无边框表格

<h3>1. 无边框表格</h3>
<table border="0">
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>日期</th>
  </tr>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>2024-09-30</td>
  </tr>
</table>

1.2.2 默认边框表格

<h3>2. 默认边框表格</h3>
<table border="1">
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>分数</th>
    <th>评语</th>
  </tr>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>90</td>
    <td>优秀......xxxxxx</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <td>80</td>
    <td>良好......yyy</td>
  </tr>
</table>

1.2.3 设置边框表格

  <h3>3. 设置边框表格</h3>
  <table border="1" cellspacing="0" cellpadding="5" width="800">
    <thead>
      <tr>
        <th colspan="7">信息统计表格</th>
      </tr>
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>头像</td>
        <td>邮箱</td>
        <td>链接</td>
        <td>部门</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>18</td>
        <td><img src="image.png" width="50" height="50" /></td>
        <td><a href="mailto:xxx@qq.com">xxx1@qq.com</a></td>
        <td>
          <a href="https://blog.csdn.net/weixin_44637621/article/details/142068170" target="_blank">HTML入门知识点汇总</a>
        </td>
        <td>技术部</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>19</td>
        <td><img src="image.png" width="50" height="50" /></td>
        <td><a href="mailto:xxx@qq.com">xxx2@qq.com</a></td>
        <td></td>
        <td rowspan="2">市场部</td>
      </tr>
      <tr>
        <td>3</td>
        <td>王五</td>
        <td>20</td>
        <td><img src="image.png" width="50" height="50" /></td>
        <td><a href="mailto:xxx@qq.com">xxx3@qq.com</a></td>
        <td>很懒，什么也没有。</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="5">所在公司名称：xxxxxx</td>
        <td colspan="2">统计日期：2024-09-30</td>
      </tr>
    </tfoot>
  </table>

1.2.4 跨行 & 跨列的表格

<table border="1">
  <tr>
    <th rowspan="2">多层表头</th>
    <th colspan="3">信息表格</th>
  </tr>
  <tr>
    <td>序号</td>
    <td>姓名</td>
    <td>分数</td>
  </tr>
  <tr>
    <td rowspan="3">人员</td>
    <td>1</td>
    <td>张三</td>
    <td>90</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <td>80</td>
  </tr>
  <tr>
    <td>3</td>
    <td>王五</td>
    <td>70</td>
  </tr>
  <tr>
    <td>统计日期</td>
    <td colspan="3">2024-09-30</td>
  </tr>
</table>

1.3 运行截图

2. 列表标签

2.1 标签描述

2.1.1 列表标签总结

标签	子集标签	描述
<ul></ul>	<li>列表选项</li>	定义无序列表，语法： <ul> <li>列表选项</li> </ul>
<ol></ol>	<li>列表选项</li>	定义有序列表，语法： <ol> <li>列表选项</li> </ol>
<dl></dl>	<dt>列表名称</dt> <dd>列表选项</dd>	定义自定义列表（描述列表），语法： <dl> <dt>列表名称</dt> <dd>列表选项</dd> </dl>

2.1.2 无序列表

• <ul> 标签表示HTML页面中的无序列表，使用 <li> 标签来定义列表选项，使用语法如下：

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

2.1.3 有序列表

• <ol> 标签表示HTML页面中的有序列表，使用 <li> 标签来定义列表选项，列表排序默认以数字来显示，使用语法如下：

<ol>
 <li>咖啡</li>
 <li>茶</li>
 <li>牛奶</li>
</ol>

• <ol> 标签可以使用以下属性来控制有序列表的样式：

属性	值	描述
reversed	reversed	指定列表倒序(9,8,7…)。
type	枚举值：1 / A / a / I / i	规定列表的类型。不赞成使用。请使用样式代替。
start	number	HTML5不支持，不赞成使用。请使用样式取代它。规定列表中的起始点。

2.1.4 自定义列表（描述列表）

• <dl> 标签用于定义自定义列表（描述列表），该标签会与 <dt> (定义项目/名字)和 <dd> (描述每一个项目/名字)一起使用。<dl></dl> 里面只能包含 <dt> 和 <dd> 标签，且标签个数没有限制，通常是一个 <dl> 标签对应多个 <dd> ，使用语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1的第一个描述</dd>
  <dd>名词1的第二个描述</dd>
  <dt>名词2</dt>
  <dd>名词2的第一个描述</dd>
</dl>

2.2 示例代码

2.2.1 无序列表

<h3>无序列表</h3>
<ul>
  <li>
    <p>
      <span>列表第一项</span>
      <img src="image.png" width="50" />
    </p>
  </li>
  <li>
    <p>
      <span>列表第二项</span>
      <img src="image01.png" width="50" />
    </p>
  </li>
  <li>
    <p>
      <span>列表第三项</span>
    </p>
  </li>
</ul>

2.2.2 有序列表 - 字母

<h3>有序列表 - 字母</h3>
<ol type="A">
  <li>
    <p>
      <span>列表第一项</span>
    </p>
  </li>
  <li>
    <p>
      <span>列表第二项</span>
    </p>
  </li>
  <li>
    <p>
      <span>列表第三项</span>
    </p>
  </li>
</ol>

2.2.3 有序列表 - 倒序数字

<h3>有序列表 - 倒序数字</h3>
<ol type="1" start="5" reversed>
  <li>
    <p>
      <span>列表第一项</span>
      <img src="image.png" width="50" />
    </p>
  </li>
  <li>
    <p>
      <span>列表第二项</span>
      <img src="image01.png" width="50" />
    </p>
  </li>
</ol>

2.2.4 自定义列表（描述列表）

<h3>自定义列表</h3>
<dl>
  <dt>这是第一组列表名称</dt>
  <dd>
    <p>
      <span>第一项列表信息</span>
      <img src="image.png" width="50" />
    </p>
  </dd>
  <dd>
    <p>
      <span>第二项列表信息</span>
      <img src="image01.png" width="50" />
    </p>
  </dd>
  <dt>水果</dt>
  <dd>苹果</dd>
  <dd>黑布林</dd>
  <dd>榴莲</dd>
</dl>

2.3 运行截图

专栏附录

学习HTML
1、HTML 入门知识点汇总
2、HTML 常用文本格式化标签
3、HTML 常用标签 - 第一集