📅 最后修改于: 2023-12-03 15:38:32.774000 🧑 作者: Mango
HTML是一种标记语言，可用于创建Web页面。在Web开发中，经常需要在页面中插入图像来增强页面的视觉体验。本文将介绍如何在HTML中插入图像。
在HTML中插入图像的基本语法如下所示：
<img src="image.jpg" alt="Image Description">
其中，src属性用于指定图像的URL，必须包含文件扩展名。alt属性用于在图像无法加载时提供替代文本，也有助于提高页面的可访问性。
下面是一个简单的HTML示例，演示了如何在页面中插入图像：
<!DOCTYPE html>
<html>
<head>
<title>Insert Image Example</title>
</head>
<body>
<h1>My Web Page</h1>
<p>Welcome to my web page!</p>
<img src="https://picsum.photos/200" alt="Random Image">
</body>
</html>
在这个例子中，我们在页面中添加了一个标题和一段文本，并插入了一个随机图像。图像使用了src和alt属性，src属性的值是https://picsum.photos/200（一个随机图像的URL），而alt属性的值是“随机图像”。
您可以使用width和height属性来指定图像的宽度和高度。这些属性需要一个整数值，以像素为单位。
<img src="image.jpg" alt="Image Description" width="400" height="300">
请注意，指定图像大小可能会导致图像变形。建议使用具有适当比例的图像，或使用CSS来调整图像大小。
通常，图像文件是与HTML文件相同的目录中，因此我们可以使用相对URL来引用图像。例如，如果您的图像文件名为image.jpg，并且位于与HTML文件相同的目录中，可以使用以下代码将其插入到HTML中：
<img src="image.jpg" alt="Image Description">
如果图像位于子目录中，您可以使用相对URL来引用它：
<img src="subfolder/image.jpg" alt="Image Description">
以上就是在HTML中插入图像的方法。通过使用<img>元素和src和alt属性，您可以轻松地将图像添加到您的Web页面中，提供更好的视觉效果和访问性。