【网页设计自习室#008】HTML中结构标签

一.列表标签

1.无序列表

标签名	说明
ul	表示无序表签的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

<ul>(只能包含li标签)
	<li>
	（可包含<p><h1>等标签）
	</li>
</ul>

2.有序列表

标签名	说明
ol	有序列表整体
li	表示有序列表的每一项，用于包含每一行的内容

<ol>(只能包含li标签)
	<li>
	（可包含<p><h1>等标签）
	</li>
</ol>

3.自定义列表

标签名	说明
dl	自定义主题，用于包裹dt和dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每项内容（默认缩进）

<dl>(只能包含dt和dd标签)
	<dt>
	（可包含<p><h1>等标签,标题标签）
	</dt>
	<dd> （任意内容和标签） </dd>
</dl>

二.表格标签

1.表格标签格式

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，用于包裹内容

嵌套关系：table>tr>td

<table>
	<tr>
		<td>
		（格子标签）
		</td>
	</tr>
	<tr>(行标签)
		<td>
		</td>
	</tr>
</table>

2.表格相关属性

标签名	说明
border	边框宽度
width	表格宽度
height	表格高度

<table border="2px">
	<tr>
		<td>

		</td>
	</tr>
</table>

3.表格标题和表头单元格标签

标签名	说明
caption	表格整体大标题，默认在表格整体顶部居中
th	表示一列小标题，通常用于表格第一行，默认加粗居中显示

<table border="2px">
	<caption>标题</caption>
	<tr>
		<th>

		</th>
	</tr>
</table>

3.表格结构标签

标签名	说明
thead	表格头部
tbody	表格主体
tfoot	表格底部

<table>

	<thead>//头部
	<tr>
		<th>

		</th>
	</tr>
	</thead>//
	
	<tbody>//主体
	<tr>
		<th>

		</th>
	</tr>
	</tbody>//
	
	<tfoot>//底部
	<tr>
		<th>

		</th>
	</tr>
	</tfoot>//
</table>

4.表格合并

水平合并（跨列合并）
只保留最左的，删除合并单位
垂直合并（跨行合并）
只保留最上的，删除合并单位
（不能跨单位合并：thead，tbody，tfoot）

标签名	说明
rowspan	跨行合并（垂直合并）
colspan	跨列合并（水平合并）

<table border="1px" width="500" height="200">
        <thead>
            <tr>
                <th>
                    2022
                </th>
                <th>
                    连夜
                </th>
                <th>
                    通宵
                </th>
                <th>
                    2022
                </th>
            </tr>
        </thead>
        <tr>
            <td colspan="2">（水平合并格数）
                2
            </td>
			（空缺合并行）
            <td>
                2
            </td>
            <td>
                2
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                0
            </td>
            <td>
                2
            </td>
            <td>
                2
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                0
            </td>
            <td>
                2
            </td>
            <td rowspan="2">（垂直合并格数）
                2
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                0
            </td>
            <td>
                2
            </td>
			（空缺合并列）
        </tr>
    </table>