html5+css3+javascript实用案例：分组标签制作联系方式
作者：优品建站
发布日期：2022-05-26
访问量：35
一． 案例描述
本案例将实现明日学院网站的“联系我们”页面。观察图2-18所示明日学院网站的“联系我们”页面，会发现页面的内容较多，所以案例4将介绍<div>和<span>分组标签，对页面的内容进行分类分组处理。下面将详细介绍<div>标签和<span>标签。
图2-18 明日学院网站的“联系我们”页面
二． 技术准备
<div>和<span>分组标签
在HTML5中，我们使用<div>标签和<span>标签来分组。如同Word文档中的段落，可以使用<div>标签和<span>标签对HTML5当中的其他标签进行分组管理。
（1）语法格式如下。
<div>
块状分组内容
</div>
<span>行内分组内容</span>
（2）语法解释。
<div>标签可以定义文档中的分区或节。<div>占用的宽度是一行，这意味着<div></div>中的内容自动地开始一个新行。
<span>标签用来对同一行内的文字分类分组。<span>占用的宽度与分组内容的宽度一致。
（3）举例：在网页中添加<div>标签和<span>标签（案例位置：光盘\MR\第2章\示例\2-6）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div>分组一：使用div标签</div>
<div>分组二：使用div标签</div>
<span>分组三：使用span标签</span>
<span>分组四：使用span标签</span>
<br>
</body>
</html>
页面效果如图2-19所示。
图2-19 <div>和<span>标签的示例页面
说明
在HTML5中，可以使用“<!--注释内容-->”的方式对代码进行解释说明，浏览器对这部分注释代码不执行任何操作。
三． 案例实现
【例2-4】 通过外链实现友情链接（案例位置：光盘\MR\第2章\源码\2-4）。
1.页面结构简图
本案例中使用的标签有<img>标签、<div>标签以及<p>标签，各标签的功能如图2-20所示。
图2-20 页面结构简图
2.代码实现
（1）新建index.html文件，在该文件中编写HTML代码，具体代码如下。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>联系我们</title>
</head>
<bodystyle="background-image: url(bg.jpg)">
<imgsrc="logo.png">
<div>
<p>工作时间：周一至周五 08:30-17:00</p>
<p>客服Email:mingrisoft@mingrisoft.com</p>
</div>
<br>
<div>
<p>公司地址：吉林省长春市南关区财富领域</p>
<p>邮政编码：130000</p>
</div>
<img src="map.png" width="400px">
</body>
</html>
（2）代码编写完成后，单击WebStorm代码区右上角的谷歌浏览器图标，即可运行本实例，具体运行效果如图2-18所示。
四． 动手试一试
通过本案例，读者应该理解<div>标签和<span>标签的区别，并且能够灵活应用。学完本案例，读者可以尝试制作如图2-21所示的商品详情页面（案例位置：光盘\MR\第2章\动手试一试\2-4）。
图2-21 商品详情页面
