列表标签
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>
