目录

列表标签

有序列表

type属性

有序列表嵌套

 无序列表

type属性

无序列表嵌套

常见应用场景

表格标签

表格展示效果

表格属性

 表格单元格合并

单元格合并属性

---

列表标签

HTL作为构建网页内容的标记语言，提供了多种列表标签，用于在网页中展示不同类型的信息。在本篇博客中，我们将深入了解无序列表、有序列表和定义列表这三种主要的HTML列表标签，以及它们的用法和示例。

有序列表

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li>标签。

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

type属性

<ol>的属性type 拥有的选项

1. 1 表示列表项目用数字标号（1,2,3...）
2. a 表示列表项目用小写字母标号（a,b,c...）
3. A 表示列表项目用大写字母标号（A,B,C...）
4. i 表示列表项目用小写罗马数字标号（i,ii,iii...）
5. I 表示列表项目用大写罗马数字标号（I,II,III...）

有序列表嵌套

列表是可以进行嵌套的

<ol>
  <li>csdn</li>
  <li>
    <ol>
      <li>博客主页</li>
      <li>编写文章</li>
    </ol>
  </li>
  <li>创作者</li>
</ol>

 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

无序列表始于 <ul> 标签。每个列表项始于<li> 标签。

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

type属性

<ul>的属性type 拥有的选项

• disc 默认实心圆
• circle 空心圆
• square 小方块
• none 不显示

无序列表嵌套

列表是可以进行嵌套的

<ul>
  <li>csdn</li>
  <li>
    <ul>
      <li>播客主页</li>
      <li>编写文章</li>
    </ul>
  </li>
  <li>创作者</li>
</ul>

常见应用场景

1. 无序的列表效果
2. 导航效果

<ul>
  <li>Xiaomi手机</li>
  <li>Redmi 红米</li>
  <li>电视</li>
  <li>笔记本</li>
</ul>

快捷键

快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改）

表格标签

表格展示效果

表格在数据展示方面非常简单，并且表现优秀

表格组成与特点

行、列、单元格

单元格特点：同行等高、同列等宽。

---

表格标签

表格：<table>

行：<tr>

单元格(列)：<td>

表格 (<table>)： 表格标签定义了整个表格的开始和结束。

<table>
    <!-- 表格内容将在这里添加 -->
</table>

 表格行 (<tr>)： 表格行标签定义了表格中的一行数据。

<table>
    <tr>
        <!-- 行中的单元格将在这里添加 -->
    </tr>
</table>

表格标题 (<caption>)： 表格标题标签用于为整个表格添加标题，位于表格标签之后。

<table>
    <caption>这是表格标题</caption>
    <!-- 表格内容将在这里添加 -->
</table>

 表格头部 (<thead>)、表格主体 (<tbody>)、表格底部 (<tfoot>)： 这些标签用于将表格内容分为不同的部分，其中<thead>用于表头，<tbody>用于表格主体，<tfoot>用于表格底部。

<table>
    <thead>
        <tr>
            <!-- 表头单元格内容 -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- 主体单元格内容 -->
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <!-- 底部单元格内容 -->
        </tr>
    </tfoot>
</table>

 表格单元格 (<td>) 和 表头单元格 (<th>)： <td>标签用于定义表格中的普通单元格，而<th>标签用于定义表头单元格，通常加粗显示。

<table>
  <tr>
    <td>csdn</td>
    <td>博客主页</td>
  </tr>
  <tr>
    <td>阿里云</td>
    <td>腾讯云</td>
  </tr>
</table>

快捷键

快速生成表格结构：table>tr*2>td{单元格}

表格属性

1. border：设置表格的边框
2. width：设置表格的宽度
3. height：设置表格的高度

 表格单元格合并

单元格合并属性

• 水平合并：colspan
• 垂直合并：rowspan

<table border="1" width="500px" height="200px">
  <tr>
    <td colspan="3">单元格1单元格2单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
  </tr>
  <tr>
    <td rowspan="2">单元格6-11</td>
    <td>单元格7</td>
    <td rowspan="3">单元格81318</td>
    <td colspan="2" rowspan="2">单元格9101415</td>
  </tr>
  <tr>
    <td>单元格12</td>
  </tr>
  <tr>
    <td>单元格16</td>
    <td>单元格17</td>
    <td>单元格19</td>
    <td>单元格20</td>
  </tr>
</table>