您的位置: 首页  >  文章  >  前端简单入门第三讲 HTML标签(二)

前端简单入门第三讲 HTML标签(二)

分类: 文章 • 2025-04-16 12:40:34

为了方便大家阅读，本可以在一篇文章中就写完的东西，我将其分成多篇来写，这样每篇文章就尽可能短，初学者看下去的欲望也会增加。本讲紧接上一讲，继续介绍具体的HTML标签。

网站首页

作为一个Java后端程序员，有时也避免不了要写一点前端的东西，给你这样一个任务，根据产品文档，请完成一个商城的首页，显示效果如下。
前端简单入门第三讲 HTML标签(二)
为了解决以上需求，我们就需要学习如下HTML标签。

要学习的HTML标签

前端简单入门第三讲 HTML标签(二)

<table>

表格标签，但貌似现在不常用了。HTML文档中一个表格挺复杂的，涉及的标签很多，如<thead>、<tfoot>、<tbody>等等。但根节点总是<table>，一份表格无外乎就是各种单元格组成，而单元格标签为<td>，另外，浏览器解析表格文本时，是以行为单位来构建表格，并不是列，所以每个单元格都需要指定位于哪一行中，行标签为<tr>。而所有行的单元格都是表格的主要内容，因此都在<tbody>标签中。
以上是表格的最基本要素，因此一张最简单的表格，至少需要<table>，<tr>，<td>三种标签。
前端简单入门第三讲 HTML标签(二)
有时候，写表格标签时，如果没有其他表头<thead>部分，或者表脚<tfoot>时，会将<tbody>省略，但这并不是说就可以不用<tbody>标签，而是很多浏览器会自动将<tbody>填补上，所以如果有省略<tbody>的场景下，使用css选择器时得稍微注意一下。

<tr>、<th>与<td>

由于浏览器是以行为单位构建表格，所以一个表格有多少行就是通过<tr>标签来控制，哪些单元格属于哪一行，就放在那一行的<tr>标签中。
虽然说表格都是由一个个的单元格组成，但单元格之间还可以继续划分含义，有些单元格是表示内容，而有些单元格则是表示属性值，或者说列头或行头。通常来说，这些标题类型的表格都是在第一行或第一列的单元格：
前端简单入门第三讲 HTML标签(二)
这是一个很常见的二维表格，通过<th>和<td>来将表格的单元格含义区分开。

  • <th>标签用于表示单元格的表头；
  • <td>标签用于表示单元格的内容。

既然是单元格，那么就会存在合并单元格的现象，通俗的讲也就是有些表格的大小并不是只占据一格，而是有可能多行多列。此时，可通过属性来实现：

属性 属性值的含义
colspan 单位数值，如1表示占据1列
rowspan 单位数值，如2表示占据2行

注意，跨行或者跨列操作之后，被占掉的格子需要删除掉。

<thead>、<tbody>与<tfoot>

类似于HTML文档有一些专门用于表明文档结构的标签，表格同样有一些用于表明表格结构的标签。引入表格结构标签，是为了更好的区分出各个单元格的含义。比如，<th>标签用来表示表头类型的单元格，但不管是第一行的表头，还是第一列的表头，用的都是<th>，那如果还想继续划分这个表头是属于第一行或者第一列时该怎么做呢？
所以，引入了一些结构性标签以便于对表格各个单元格进行更加具体的细分，以满足各种复杂场景。
前端简单入门第三讲 HTML标签(二)

  • <table>是表格的根节点；
  • <thead>用来标记表格的标题行；
  • <tfoot>用来标记组成脚的行。

不用<thead>，表格最终效果也一样，但用了<thead>之后，如果CSS样式想分别作用第一行或者第一列，那么就可以很容易的通过thread th以及tbody th选择器来达到目的了。
所以，结合表格结构性标签的使用，可以让表格的结构更加明确。

<caption>

表格除了一张表格内容外，通常还会需要有表格的标题，此时用<caption>标签来标记。
前端简单入门第三讲 HTML标签(二)

案例代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			1. 创建一个8行一列的表格
			2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
			3. 第二部分: 导航栏部分 : 放置5个超链接
			4. 第三部分: 轮播图 
			5. 第四部分: 嵌套一个三行7列表格
			6. 第五部分: 直接放一张图片
			7. 第六部分: 抄第四部分的
			8. 第七部分: 放置一张图片
			9. 第八部分: 放一堆超链接
		-->
		<table width="100%">
			<!--第一部份: LOGO部分: 嵌套一个一行三列的表格-->
			<tr>
				<td>
					<table width="100%">
						<tr>
							<td>
								<img src="../img/logo2.png" />
							</td>
							<td>
								<img src="../image/header.jpg" />
							</td>
							<td>
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第二部分: 导航栏部分 : 放置5个超链接-->
			<tr bgcolor="black">
				<td height="50px">
					<a href="#"><font color="white">首页</font></a>
					<a href="#"><font color="white">手机数码</font></a>
					<a href="#"><font color="white">鞋靴箱包</font></a>
					<a href="#"><font color="white">电脑办公</font></a>
					<a href="#"><font color="white">香烟酒水</font></a>
				</td>
			</tr>
			<!--第三部分: 轮播图-->
			<tr>
				<td>
					<img src="../img/1.jpg" width="100%" />
				</td>
			</tr>
			<!--第四部分: 嵌套一个三行7列表格-->
			<tr>
				<td>
					<table width="100%" height="500px">
						<tr>
							<td colspan="7">
								<h3>最新商品<img src="../images/title2.jpg" /></h3>
							</td>
							
						</tr>
						<tr align="center">
							<!--左边大图的-->
							<td rowspan="2" width="206px" height="480px">
								<img src="../products/hao/big01.jpg" />
							</td>
							<td colspan="3" height="240px">
								<img src="../products/hao/middle01.jpg" width="100%" height="100%" />
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
						</tr>
						<tr align="center">
							
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第五部分: 直接放一张图片-->
			<tr>
				<td>
					<img src="../products/hao/ad.jpg" width="100%" />
				</td>
			</tr>
			<!--第六部分: 抄第四部分的-->
			<tr>
				<td>
					<table width="100%" height="500px">
						<tr>
							<td colspan="7">
								<h3>热门商品<img src="../images/title2.jpg" /></h3>
							</td>
							
						</tr>
						<tr align="center">
							<!--左边大图的-->
							<td rowspan="2" width="206px" height="480px">
								<img src="../products/hao/big01.jpg" />
							</td>
							<td colspan="3" height="240px">
								<img src="../products/hao/middle01.jpg" width="100%" height="100%" />
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
						</tr>
						<tr align="center">
							
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">￥998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第七部分: 放置一张图片-->
			<tr>
				<td>
					<img src="../image/footer.jpg" width="100%" />
				</td>
			</tr>
			<!--第八部分: 放一堆超链接-->
			<tr>
				<td align="center">
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					<br />
					Copyright © 2005-2016 传智商城 版权所有
				</td>
			</tr>
		</table>
	</body>
</html>

在Google Chrome浏览器中的运行效果如下，显示效果肯定很挫。
前端简单入门第三讲 HTML标签(二)

相关推荐