HTML--3标签及简单使用（div、ul ol li 、table tr td th）---外加注释标签＜!-- xxx --＞ align(区域内部所有元素的对齐操作)

本文链接：https://blog.youkuaiyun.com/weixin_47295886/article/details/125772510

本文介绍了HTML中用于布局的div元素，它作为一个容器，方便对页面区域进行独立样式设置。此外，讲解了无序列表ul和有序列表ol的使用，以及如何在表格table中组织数据。同时，展示了如何利用th和td标签创建带有表头的表格，并通过超链接和ol结合展示有序列表。这些基础知识对于网页设计和前端开发至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区域：div （将网页许多元素组合在一起------------可能是一个板块每个区域进行单独子u该）
相当于一个容器container

id给区域取的名字

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		span{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
<!-- 诗词 -->
	<div id="nav" align="center">
		<p><h3>诗经.击鼓| xxx |xxx</h3></p>
	<hr>
	</div>
	<div align="center">
		<h1>《诗经·击鼓》</h1>
		<img src="https://pics3.baidu.com/feed/b812c8fcc3cec3fdf84f4e36cced0538869427e8.jpeg?token=78fff178d922d44f17693fead907928b&s=FB829A094D42C2CC121CB0CC0100C0B1" alt="图片">
		<p>死生契阔<sup>1</sup>， 与子成说。</p>
		<p>执子之手， 与子偕老。</p>
		<p>于嗟阔兮， 不我活兮。</p>
		<p>于嗟洵兮， 不我信兮<sub>10</sub>。</p>
	</div>
	<hr>
	<div align="center">
		<p>
			<h2>
			1:buee<br>
			10ddd
			</h2>
		</p>
	</div>
</body>
</html>

好处是每个区域的样式可以单独设置

列表：ul（无序）--ol（有序、会出现标号） +i

无序列表：先后链接是无关的（比如是超链接组成的）

ul表示无序列表，ul标签的成对出现表示无序列表的起始和结束

无序列表的里面都有列表项使用li标签

有序列表：排行榜ol li

表格：table tr（表示每一行每一行一个Tr标签） td （每一行的单元格在tr里面）

表头：th在tr里面设置加粗显示

表格单元格也有表盒

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		span{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
<!-- 无序-->
 <table border="2px" align="center">
 	<tr>
 		<th>    </th>
 		<th>学生数</th>
 		<th>平均成绩</th>
 	</tr>
 	<tr>
 		<th>一班</th>
 		<td>45</td>
 		<td>77</td>
 	</tr>
 	<tr>
 		<th>二班</th>
 		<td>77</td>
 		<td>33</td>
 	</tr>
 	<tr>
 		<th>三班</th>
 		<td>45</td>
 		<td>96</td>
 	</tr>
 </tablb>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<style type="text/css">
		span{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
	<div align="center">
		<table border="1px"><!--两行一列 -->
			<tr>
					<th><h1>star top10</h1></th>
			</tr>

			<tr>
				<td>
					<!--有序列表 ——超链接 -->
					<ol>
						<li><a href="#">时代的</a></li>
						<li><a href="#">单独</a></li>
						<li><a href="#">单独</a></li>
						<li><a href="#">Lorem, ipsum.</a></li>
						<li><a href="#">Lorem, ipsum.</a></li>
						<li><a href="#">Lorem, ipsum.</a></li>
						<li><a href="#">Lorem, ipsum.</a></li>
						<li><a href="#">Lorem, ipsum.</a></li>
						<li><a href="#">Lorem, ipsum.</a></li>
						<li><a href="#">Lorem, ipsum.</a></li>
					</ol>
				</td>
			</tr>
		</table>
	
	</div>
</body>
</html>