目录
列表标签
有序列表
type属性
有序列表嵌套
无序列表
type属性
无序列表嵌套
常见应用场景
表格标签
表格展示效果
表格属性
表格单元格合并
单元格合并属性
列表标签
HTL作为构建网页内容的标记语言，提供了多种列表标签，用于在网页中展示不同类型的信息。在本篇博客中，我们将深入了解无序列表、有序列表和定义列表这三种主要的HTML列表标签，以及它们的用法和示例。
有序列表
有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li>标签。
<ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol>
type属性
<ol>的属性type 拥有的选项
- 1 表示列表项目用数字标号（1,2,3...）
- a 表示列表项目用小写字母标号（a,b,c...）
- A 表示列表项目用大写字母标号（A,B,C...）
- i 表示列表项目用小写罗马数字标号（i,ii,iii...）
- 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>
常见应用场景
- 无序的列表效果
- 导航效果
<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{单元格}
表格属性
- border：设置表格的边框
- width：设置表格的宽度
- 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>
