无序列表
标签名 | 说明 |
---|
ul | 表示无序列表的整体,用于包裹 li 标签 |
li | 表示无序列表的每一项,用于包含每一项内容 |
<ul>
<li>香蕉</li>
<li>火龙果</li>
<li>龙眼</li>
<li>西瓜</li>
</ul>
可在css内添加 list-style: none; 去除小圆点
有序列表
标签名 | 说明 |
---|
ol | 表示有序列表的整体,用于包裹 li 标签 |
li | 表示有序列表的每一项,用于包含每一项内容 |
<ol>
<li>香蕉</li>
<li>火龙果</li>
<li>龙眼</li>
<li>西瓜</li>
</ol>
- 香蕉
- 火龙果
- 龙眼
- 西瓜
自定义列表
标签名 | 说明 |
---|
dl | 表示自定义列表的整体,用于包裹 dt/dd 标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表的针对主题的每一项内容 |
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
帮助中心
-
账户管理
-
购物指南
-
订单操作
表 格 的 用 法
标签名 | 说明 |
---|
table | 表格整体,可用于包裹多个tr |
tr | 表格每行,可用于包裹td |
td | 表格单元格,可用于包裹内容 |
表格属性
属性名 | 属性值 | 效果 |
---|
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
标签名 | 名称 | 说明 |
---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格顶部居中位置展示 |
th | 表头单元格 | 表示一列小标题,通常用于表格第一行,默认内容文字居中加粗显示 |
源码展示
<table border="2" width="100" height="100">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>A</td>
</tr>
<tr>
<td>李四</td>
<td>100</td>
<td>A</td>
</tr>
<tr>
<td>总结</td>
<td>真厉害</td>
<td>真厉害</td>
</tr>
</table>
效果展示
学生成绩单
姓名 | 成绩 | 等级 |
---|
张三 | 100 | A |
李四 | 100 | A |
总结 | 真厉害 | 真厉害 |
合 并 单 元 格
通过左上原则,确定保留谁删除谁
- 上下合并→只保留最上的,删除其他的
- 左右合并→只保留最左的,删除其他的
给保留的单元格设置,跨行合并(rowspan)或跨列合并(colspan)
属性名 | 属性值 | 说明 |
---|
rowspan | 合并单元格的个数 | 跨行合并,将多行单元格垂直合并 |
colspan | 合并单元格的个数 | 跨列合并,将多列单元格水平合并 |
<table border="1" width="5" height="5">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr>
<td>张三</td>
<!-- 2代表 将两行单元格合并 -->
<td rowspan="2">100</td>
<td>A</td>
</tr>
<tr>
<td>李四</td>
<!-- <td>100</td> -->
<td>A</td>
</tr>
<tr>
<td>总结</td>
<!-- 2代表 将两列单元格合并 -->
<td colspan="2">真厉害</td>
<!-- <td>真厉害</td> -->
</tr>
</table>
效果展示
学生成绩单
姓名 | 成绩 | 等级 |
---|
张三 | 100 | A |
李四 | A |
总结 | 真厉害 |