1. 列表标签
在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等。按照行的方式,整齐显示内容。其种类可分为:无序列表、有序列表、自定义列表。
无序列表
在网页中表示一组无顺序之分的列表,如:新闻列表。
<ul>
<li></li>
<li></li>
<li></li>
...
</ul>
特点:
- 列表中的每一项前默认显示原点标识
- ul标签中只允许li标签
- li标签可以有任意内容
有序列表
在网页中表示一组有顺序之分的列表,如:排行榜。
<ol>
<li></li>
<li></li>
<li></li>
...
</ol>
特点:
- 列表标签中的每一项默认显示序号标识
- ol标签中只允许包含li标签
- li标签可以有任意内容
自定义列表
在网页的底部导航中通常会使用自定义列表实现。
<dl>
<dt>列表主题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
...
</dt>
特点:
- dd前会默认显示缩进效果
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
2. 表格标签
在网页中以行+列的单元格的方式整齐展示数据,如:学生成绩单。
<table>
<caption>表格标题</caption>
<-- 表示一行数据 -->
<tr>
<th>小标题</td>
<th>小标题</td>
...
</tr>
<tr>
<td>单元格内容</td>
<td>单元格内容</td>
...
</tr>
...
</table>
表格基本标签
标签名 | 说明 |
---|---|
table | 表格整体,可用于包裹多个tr |
tr | 表格每行,可用于包裹td |
td | 表格单元格,可用于包裹内容 |
caption | 表示表格整体的大标题,默认在表格整体顶部居中位置显示 |
th | 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 |
表格相关属性
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
表格的结构标签
让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰。
标签名 | 名称 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
注意:
- 表格结构标签内部用于包裹tr标签
- 表格的结构标签可以忽略
表格合并单元格
将水平或者垂直多个单元格合并成一个单元格。
合并单元格步骤:
-
明确合并哪个单元格
-
通过左上原则,确定保留谁删除谁
- 上下合并 --> 只保留最上的,删除其他
- 左右合并 --> 只保留最左的,删除其他 -
给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
属性名 属性值 说明 rowspan 合并单元格个数 跨行合并,将多行的单元格垂直合并 colspan 合并单元格个数 跨列合并,将多列的单元格水平合并
注意:
- 不能跨结构标签合并内容