如何在 HTML 页面中插入图片?

htmlweb developmentfront end technology更新于 2025/2/18 16:12:17

图片可以帮助读者更好地理解网页内容，从而使内容更有趣。

我们可以在 HTML 页面中插入图片。要将图片插入 HTML 页面，请使用 <img> 标签。它是一个空标签，仅包含属性，因为不需要结束标签。

我们应该在 <body>…</body> 标签内使用 <img> 标签。<img> 标签指定要在 HTML 文档中显示的图片。

src 属性用于添加图片源，即图片的 URL(文件位置)。

alt 属性用于添加替代文本，width 用于添加宽度，height 用于添加图片的高度。

从技术角度来看，图片并非插入网页;图片是链接到网页的。<img> 标签为图片创建了一个存放空间。

<img> 标签有两个属性:-

src - 指定图片的路径(文件位置)
alt - 指定图片的替代文本

语法

以下是在 HTML 页面中插入图片的语法。

<img src="url" alt="alternatetext">

示例

以下是将图片添加到 HTML 页面的示例程序。


<!DOCTYPE html>
<html>
<body>
   <h2>HTML Article on Inserting image to the web page</h2>
   <img src="https://www.cainiaomax.com/javafx/images/javafx-mini-logo.jpg">
</body>
</html>

现在让我们看看，如果用户由于某种原因(例如网速慢或 src 属性出错)无法查看，alt 属性(替代文本)将如何工作。alt 属性的值描述了图像属性。

示例

在下面的示例程序中，我们将为插入 HTML 页面的图像指定一个错误的路径，并查看 alt 属性如何工作。


<!DOCTYPE html>
<html>
<body>
   <h2>HTML Article on Inserting image to the web page</h2>
   <img src="https://www.cainiaomax.com/opencv/images/opencv-mini-logo.jpg" alt="search engine image" >
</body>
</html>

当图片显示出现问题时，文本"搜索引擎图片"会作为图片的替代文本。

示例:更改图片大小

我们还可以使用 style 属性来更改图片的大小，即图片的高度和宽度。以下是更改图片大小的示例程序。


<!DOCTYPE html>
<html>
<body>
   <h2>HTML Article on Inserting image to the web page</h2>
   <img src="https://www.cainiaomax.com/opencv/images/opencv-mini-logo.jpg" height="50px" width="50px">
</body>
</html>