一、列表标签
1.1列表的应用场景
列表包括有序列表、无序列表和自定义列表,用于按照展示行相互关联的内容
1.2无序列表
在网页中表示一组无顺序之分的列表
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
注意:
- 列表的每一项前默认显示圆点标识
- ul标签中只允许包含li标签
- li标签可以包含任意内容
1.3有序列表
在网页中表示一组有顺序之分的列表
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
注意:
- 列表的每一项前默认显示序号标识
- ol标签中只允许包含li标签
- li标签可以包含任意内容
1.4自定义列表
<dl>
<dt>主题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
注意:
- dd前会默认显示缩进效果
- dl标签只允许包含dd/dt标签
- dd/dt标签可以包含任意内容
二、表格标签
2.1基本标签
表格整体 table
表格每行 tr
表格单元格 td
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
2.2表格的基本属性
border 属性值为数字 表示内边框宽度
width 属性值为数字 表示表格的宽
height 属性值为数字 表示表格的高
注意:实际开发中样式应该用CSS设置
2.3表格的标题和表头单元格标签
表格大标题 caption
表头单元格 th
<table border="1">
<caption><strong>三行三列</strong></caption>
<tr>
<th></th>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr>
<th>第一行</th>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<th>第二行</th>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<th>第三行</th>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
运行效果
3.4表格的结构标签
表格的结构标签同于给表格的内容进行分类,突出表格的不同部分、
<table border="1">
<caption><strong>三行三列</strong></caption>
<thead>
<tr>
<th></th>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<th>第一行</th>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<th>第二行</th>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<th>第三行</th>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</tbody>
<tfoot>
<th>总结</th>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tfoot>
</table>
使用表格的结构标签不会改变视觉效果,但是能提升浏览器的识别效率
3.5合并单元格
3.5.1场景
将水平或垂直单元格合并成一个单元格,即水平合并和垂直合并
3.5.2代码实现
合并单元格步骤
- 明确需要合并的单元格
- 通过左上原则(上下合并保留上,左右合并保留左)确定删除谁、保留谁
- 给保留的单元格设置:跨列合并(水平合并)(colspan)或跨行合并(垂直合并)(rowspan)
- 设置属性值为合并的单元格个数
<table border="1">
<caption><strong>三行三列</strong></caption>
<thead>
<tr>
<th></th>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</thead>
<tbody>
<tr>
<th>第一行</th>
<td colspan="3">第一行的三列</td>
</tr>
<tr>
<th>第二行</th>
<td rowspan="2">第一行的两行</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<th>第三行</th>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</tbody>
<tfoot>
<th>总结</th>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tfoot>
</table>
注意:同一结构标题的单元格才能合并