如何在 HTML 中包含图片

17 Mar 2025 | 5 分钟阅读

图像是广泛用于以简化的方式描绘任何概念的内部组成部分。它们用于增强网页的设计和显示。HTML 语言提供了许多内置标签，可以轻松地在网页中插入图像。

在本教程中，我们将学习在 HTML 中包含图像的各种标签。

HTML 图像语法

1. <IMG>

从技术上讲，图像从未被插入到任何网页中。相反，它们链接到它们各自的网页。 HTML <img> 标签通常用于在任何网页中插入图像。<img> 标签通过创建图像的占位符来工作。默认情况下，HTML <img> 标签是空的，不包含任何值。它只包含不带关闭标签的属性。

<img> 标签的两个属性如下：

IMG src 属性 - 此属性定义指定图像的路径。
IMG alt 属性 - 此属性为给定图像获取替代文本。

2. IMG src 属性

HTML <img> src 属性定义图像的路径（URL）。

注意：每当您的浏览器加载任何网页时，在同一时刻，您的浏览器有责任从 Web 服务器获取网页的图像并将其包含到网站中。因此，HTML 程序员应始终确保图像相对于网页停留在同一位置。否则，您的用户将看到一个损坏的链接图标，其中显示浏览器找不到图像的文本。

语法

代码

<!DOCTYPE html>
<html>
<body>
<h2>HTML  Image </h2>
<p>The <img> alt attribute is sued to display the specific image content, so the HTML users who cannot load the image in time can atleast get an idea of what the image include:</p>
<img src="javaTpoint_logo.jpg" alt="Welcome to JavaTpoint" width="360" height="145">
</body>
</html>

输出

3. alt 属性

如果网站用户由于加载延迟、互联网连接缓慢或任何其他原因无法查看图像，则 HTML alt 属性用于为给定图像提供替代文本。

alt 属性的内容应简洁，并应描述图像的目的。

语法

代码

<!DOCTYPE html>
<html>
<body>
<h2>Alternative Image text</h2>
<p>The <img> alt attribute is sued to display the specific image content, so the HTML users who cannot load the image in time can atleast get an idea of what the image include:</p>
<img src="javaTpoint_logo.jpg" alt="Welcome to JavaTpoint" width="360" height="145">
</body>
</html>

输出

4. 图像尺寸 - 宽度和高度

插入图像后，指定高度和宽度很重要，这样它才能在网页中正确显示。因此，HTML 提供了 style 属性来定义图像的高度和宽度。

语法

<img src="javatpoint.jpg" alt="Welcome to JavaTpoint" style="width:600px; height:600px;">

代码

<!DOCTYPE html>
<html>
<body>
<h2>Image with Specified Height and Width </h2>
<p>In the following code, we have use the HTML style attribute to define the width and height of our webpage's image:</p>
<img src="C:\Users\REEMA\OneDrive\Desktop" alt="Welcome to JavaTpoint" style="width:400px;height:135px;">
</body>
</html>

输出

5. 将 HTML 图像用作链接

HTML 提供了将图像用作链接的功能。为此，HTML 程序员需要在 HTML <a> 标签中使用 <img> 标签。

语法

<a href="">
<img src="C:\Users\REEMA\OneDrive\Desktop" alt="Welcome to JavaTpoint" style="width:400px;height:135px;">
</a>

代码

<!DOCTYPE html>
<html>
<body>
<h2>Link an Image</h2>
<p>In the following code, we have use the HTML <a> tag to link an image.</p>
<a href="">
<img src="C:\Users\REEMA\OneDrive\Desktop" alt="Welcome to JavaTpoint" style="width:400px;height:135px;">
</a>
</body>
</html>

输出

6. 将图像包含在另一个文件夹中

很多时候，用户需要将图像包含在子文件夹中，在这种情况下，您必须在 src 属性中包含文件夹名称。

语法

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

代码

<!DOCTYPE html>
<html>
<body>
<h2>Images in Another Folder</h2>
<p>We often store the main image in any sub-folder. Therefore the HTML programmer must contain the folder name as well in the HTML src attribute:</p>
<img src="/images/javatpoint.gif" alt="Javatpoint Icon" style="width: 200px;height:200px;">
</body>
</html>

输出

7. HTML 动画图像

HTML 允许其用户在代码中嵌入动态图像或 GIF。

语法

<img src="javatpoint_logo.gif" alt="GIF Format" style="width:48px;height:48px;">

代码

<!DOCTYPE html>
<html>
<body>
<h2>Animated Images or GIF</h2>
<p>The below code enables moving images:</p>
<img src="javatpoint_logo.gif" alt="GIF Format" style="width:48px;height:48px;">
</body>
</html>

输出

常用图像格式

.png

.svg

图像文件格式缩写	全称	文件扩展名
APNG	APNG 代表动画便携式网络图形 (Animated Portable Network Graphics)	. apng
GIF	GIF 代表图形交换格式 (Graphics Interchange Format)	.gif
ICO	ICO 代表 Microsoft 图标 (Microsoft Icon)	.ico .cur
PNG	PNG 缩写代表便携式网络图形 (Portable Network Graphics)
SVG	SVG 的全称是可缩放矢量图形 (Scalable Vector Graphics)
JPEG	JPEG 的全称是联合图像专家组图像 (Joint Photographic Expert Group image)	.pjp .jpg .jpeg .pjpeg .jfif

如何包含背景图像？

HTML 程序员还可以使用“background-image”属性为任何 HTML 代码指定背景图像。

1. HTML 元素的背景图像

HTML 程序员可以使用 HTML 样式属性和 background-image 功能在任何 HTML 元素上实现背景图像。

语法

代码

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<h2>Background Image Example</h2>
<div>
The background images can be specified<br>
<br>
for any visible element.<br>
<br>
<br>
In this code, we have applied the background image<br>
<br>
<br>
for an element named as div.<br>
<br><br><br><br>
</div>
</body>
</html>

输出

2. 页面的背景图像

如果 HTML 程序员想将背景图像融入其整个页面，他们必须在 HTML <body> 元素中使用背景图像。

语法

<style>
body {
  background-image: url(javatpoint_logo.jpg');
}
</style>

代码

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('img_little_girl.jpg');
}
</style>
</head>
<body>
<h2>How to insert Background Image on a Page</h2>
<p>By default, HTML repeats the specified background image if the size of the image is smaller than the element where it is mentioned.</p>
</body>
</html>

输出

3. 背景图像重复

如果指定的背景图像尺寸小于元素，在这种情况下，图像将自动在两个方向（水平和垂直）上重复自身，直到它到达页面末尾。

语法

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

代码

<html>
<head>
<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>

<h2>Example for Background Repeat</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>

输出

4. 背景覆盖

HTML 提供了 background-size 属性，该属性有助于用户使用给定的背景图像设置整个元素。这种方法覆盖了整个元素，而不会拉伸图像，从而保留了图像的原始比例。

语法

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-attachment: fixed;  
  background-repeat: no-repeat;
}
</style>

代码

<html>
<head>
<style>
body {
  background-image: url('example_img_girl.jpg');
  background-attachment: fixed;  
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>
<h2>How  to Cover the background</h2>
<p>To enable the background cover set the background-size property to "cover" and the background image will automatically cover the entire HTML element.</p>
</body>
</html>

输出

下一个主题HTML5 signature pad to image

如何在 HTML 中包含图片

HTML 图像语法

1. <IMG>

2. IMG src 属性

3. alt 属性

4. 图像尺寸 - 宽度和高度

5. 将 HTML 图像用作链接

6. 将图像包含在另一个文件夹中

7. HTML 动画图像

常用图像格式

如何包含背景图像？

1. HTML 元素的背景图像

2. 页面的背景图像

3. 背景图像重复

4. 背景覆盖

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中包含图片

HTML 图像语法

1. <IMG>

2. IMG src 属性

3. alt 属性

4. 图像尺寸 - 宽度和高度

5. 将 HTML 图像用作链接

6. 将图像包含在另一个文件夹中

7. HTML 动画图像

常用图像格式

如何包含背景图像？

1. HTML 元素的背景图像

2. 页面的背景图像

3. 背景图像重复

4. 背景覆盖

相关帖子

HTML Col Width

如何制作 HTML 页脚

CodePen HTML

HTML 中的密码隐藏

HTML 是编程语言吗？

HTML 导航

HTML 注入

public_html 目录是什么

Web 2.0

如何在 HTML 中实现复制到剪贴板

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器