目录
列表标签
有序列表
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>