当前位置：首页 > article >正文

【HTML】关于列表标签和表格标签

article 2024/12/1 5:59:56

列表标签

无序列表 `<ul>`

<ul>标签用于创建无序列表，其内部包含若干个 <li>列表项标签。无序列表通常以项目符号（如圆点、方块等）来标识每个列表项，用于展示一组相关但没有特定顺序的项目。例如：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

浏览器会自动在每个<li>元素前添加默认的项目符号使列表呈现出无序的视觉效果，而项目符号可以通过CSS来修改。例如，可以使用list-style-type属性改变项目符号的形状，取值包括disc（实心圆点，默认值）、circle（空心圆圈）、square（实心方块）等。如：

<style>
  ul {
    list-style-type: circle;
  }
</style>

还可以使用list-style-image属性将项目符号替换为自定义的图片，如list-style-image: url('custom-bullet.png');，从而使列表样式更贴合网页的整体设计风格。

有序列表`<ol>`

<ol>标签用于生成有序列表，有序列表会按照特定的顺序为每个列表项编号，如数字、字母或罗马数字等，适用于展示有先后顺序或层次关系的内容。例如：

<ol>
  <li>第一步：准备食材</li>
  <li>第二步：烹饪食材</li>
  <li>第三步：装盘享用</li>
</ol>

浏览器会根据列表的顺序自动为<li>元素添加相应的编号，默认是阿拉伯数字编号（1、2、3 等）可以通过type属性指定编号的类型，取值有 1（阿拉伯数字，默认）、a（小写字母）、A（大写字母）、i（小写罗马数字）、I（大写罗马数字）等。例如：

<ol type="a">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

也可以使用 CSS 对有序列表的编号样式进行更精细的调整，如调整编号的颜色、大小、位置等。

定义列表`<dl>`

<dl>标签用于创建定义列表，它包含多个定义术语 <dt>和对应的定义描述<dd>。这种列表结构常用于解释术语、展示词汇表或呈现键值对信息。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于构建网页结构。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于控制网页的样式和布局。</dd>
</dl>

<dt> 元素定义需要解释的术语，<dd>元素则提供该术语的详细描述，使页面能够清晰地传达概念和信息。定义标签有助于搜索引擎理解页面内容，它可以灵活地应用于各种场景，如产品详情页面中对产品参数的说明、文档中对专业词汇的解释等。

表格标签

基本表格结构

`<table>`标签：

<table>是表格的根标签，所有的表格内容都应包含在<table>标签对内。它定义了一个表格区域，用于整合其他表格相关标签，构建完整的表格结构。

`<tr>`标签：

<tr>表示表格行（Table Row），每个<tr>标签内包含若干个表格单元格标签<td>或<th>，用于创建一行表格内容。例如：

<table>
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

以上代码创建了一个包含两行两列的简单表格，通过多个 <tr> 标签的嵌套，能够构建具有多行数据的表格。

`<td>` 与 `<th>` 标签：

<td>是普通的表格单元格用于存放表格中的数据内容。而<th>是表头单元格，通常用于表格的第一行或第一列，浏览器会对 <th>元素应用特殊的样式（如加粗、居中对齐）。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

此表格在第一行使用了 <th>标签作为表头，清晰地标识了每列数据的含义，后续行使用 <td>标签填充具体的数据内容。

表格属性与样式

表格边框与间距：

可以使用border属性为表格添加边框，设置 border="1"则会在表格及单元格周围显示宽度为 1 像素的边框线。例如：

<table border="1">
  <!-- 表格内容 -->
</table>

cellspacing属性用于控制表格单元格之间的间距，cellpadding属性则控制单元格内内容与边框之间的距离。如：

<table border="1" cellspacing="5" cellpadding="10">
  <!-- 表格内容 -->
</table>

跨行与跨列：

rowspan属性用于实现单元格跨行合并，colspan属性用于实现单元格跨列合并，这两个属性可以创建复杂的表格布局。

<table border="1">
  <tr>
    <td rowspan="2">合并两行</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
  </tr>
  <tr>
    <td colspan="2">合并两列</td>
  </tr>
</table>

在第一个 <tr>中，第一个<td>使用了 rowspan="2"，使其垂直跨越两行；在第三个 <tr>中，第一个 <td>使用了 colspan="2"，使其水平跨越两列，从而构建出一个不规则但布局合理的表格结构。

表格样式美化：

可以通过 CSS 可以设置表格的背景颜色、文字颜色、对齐方式、边框样式等，实现更丰富多样的表格外观设计。

<style>
  table {
    width: 100%;
    border-collapse: collapse; /* 合并边框 */
  }
  th, td {
    border: 1px solid #ccc;
    text-align: center;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
  }
</style>