在网页设计中，图片和文字的结合是一种常见的表达方式，可以有效地传达信息和吸引用户的注意力，HTML（HyperText Markup Language）是构建网页的基础，通过使用HTML标签，我们可以轻松地在图片旁边添加文字，本文将详细介绍如何在HTML中实现这一功能。
我们需要了解HTML中的一些基本标签，图片通常使用<img>标签来插入，而文字可以通过各种标签（如<p>、<h1>至<h6>、<span>等）来表示，为了在图片旁边添加文字，我们可以使用<figure>和<figcaption>这两个HTML5引入的语义标签。<figure>标签用于包裹图片，而<figcaption>标签则用于添加与图片相关的描述性文字。
以下是一个简单的示例，展示了如何在图片旁边添加文字：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片与文字的结合</title>
<style>
.figure-container {
display: flex;
align-items: center;
}
.image {
width: 200px;
height: auto;
}
</style>
</head>
<body>
<div class="figure-container">
<figure>
<img class="image" src="example.jpg" alt="示例图片">
<figcaption>这是一张示例图片。</figcaption>
</figure>
</div>
</body>
</html>
在这个示例中，我们首先定义了一个figure-container类，用于设置图片和文字的布局，接着，我们使用<figure>标签包裹图片，并在其中插入<img>标签，指定图片的来源（src属性）和替代文本（alt属性），我们在<figure>标签内添加<figcaption>标签，用于描述图片内容。
为了使图片和文字并排显示，我们使用了CSS的display: flex;属性，这样，无论屏幕大小如何变化，图片和文字都会保持在同一行，我们还设置了图片的宽度和高度，以确保它们在页面上呈现出合适的尺寸。
除了使用<figure>和<figcaption>标签外，还有其他方法可以实现在图片旁边添加文字的功能，我们可以利用<div>标签和CSS的float属性来实现，以下是一个使用float属性的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片与文字的结合</title>
<style>
.image-container {
float: left;
width: 200px;
margin-right: 20px;
}
.image {
width: 100%;
height: auto;
}
.text {
overflow: hidden;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image" src="example.jpg" alt="示例图片">
</div>
<div class="text">
这是一张示例图片，在这里，我们可以为图片添加描述性文字，以便用户更好地理解图片内容。
</div>
</body>
</html>
在这个示例中，我们首先创建了一个image-container类，用于包裹图片，并设置其浮动属性（float: left;），接着，我们为图片添加了一个image类，用于设置图片的宽度和高度，我们创建了一个text类，用于包裹描述性文字，并设置其overflow属性为hidden，以避免文字超出容器边界。
通过使用HTML标签和CSS样式，我们可以轻松地在图片旁边添加文字，这不仅可以提高网页的美观度，还有助于更好地传达信息，在实际应用中，可以根据具体需求选择合适的方法来实现这一功能。