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

在 HTML 页面中插入图片，是一项非常常见且简单的任务，它可以增强任何网页的外观。它使网页看起来更具吸引力。

在本文中，我们的任务是在 HTML 页面中插入图片。我们使用了三种不同的方法，使用 HTML 标签 和 CSS 属性在 HTML 页面中插入图片。

在 HTML 页面中插入图片的方法

以下是本文将讨论的在 HTML 页面中插入图片的方法列表，我们将逐步解释并提供完整的示例代码。

使用 img 标签插入图片

为了插入图片，我们使用了 HTML img 标签。HTML img 标签是一个内联空元素，用于在 HTML 文档中嵌入图片。

  • 我们使用了 **img** 标签通过图片链接插入图片。alt 属性描述了当图片加载失败时显示的内容。
  • 然后，我们使用 img 元素选择器，使用 CSS margin-top 和 width 属性设置图片的上边距和宽度。

示例

以下是一个完整的示例代码，实现了上述步骤，使用 HTML **img** 标签在 HTML 页面中插入图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inserting Image Using img Tag</title>
    <style>
        img {
            width:100%; 
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <h2>
        To Insert an Image in HTML Page
    </h2>
    <p>
        In this example we have used Html <strong>img 
        </strong> tag to insert an image in HTML page.
    </p>
    <img src="/css/images/css.jpg" alt="CSS Tutorial">
</body>
</html>

使用 background 属性插入图片

在这种在 HTML 页面中插入图片的方法中，我们使用了 CSS background 属性和 url() 函数。

  • 我们使用了一个带有 img 类的 div 容器。我们将设置此 div 容器的背景图片。
  • 我们使用 **img** 类，使用 **url()** 函数设置 div 的背景。
  • 然后，我们使用 background-repeat 属性停止图片重复，并使用 CSS height 和 width 属性设置图片的尺寸。

示例

以下是一个完整的示例代码，实现了上述步骤，使用 CSS **background** 属性和 **url()** 函数在 HTML 页面中插入图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inserting Image Using img Tag</title>
    <style>
        .img {
            background: url('/css/images/css.jpg');
            width:100%; 
            height: 200px;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h2>
        To Insert an Image in HTML Page
    </h2>
    <p>
        In this example we have used CSS <strong>background 
        </strong> property with <strong>url()</strong> 
        function to insert an image in HTML page.
    </p>
    <div class="img"></div>
</body>
</html>

使用 embed 标签插入图片

在这种方法中，我们使用了 HTML embed 标签在 HTML 页面中插入图片，该标签用作外部应用程序、多媒体和浏览器无法理解的交互式内容的容器。

  • 我们使用 **embed** 标签插入图片，并使用 type 属性指定媒体类型。
  • 然后，我们使用 **embed** 作为元素选择器设置图片的宽度和上边距。

示例

以下是一个完整的示例代码，实现了上述步骤，使用 HTML **embed** 标签在 HTML 页面中插入图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inserting Image Using img Tag</title>
    <style>
        embed {
            width:100%; 
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <h2>
        To Insert an Image in HTML Page
    </h2>
    <p>
        In this example we have used Html <strong>embed 
        </strong> tag to insert an image in HTML page.
    </p>
     <embed src="/css/images/css.jpg" type="image/jpg">
</body>
</html>

结论

在本文中，为了在 HTML 页面中插入图片，我们了解了三种不同的方法：使用 HTML **img** 标签、CSS **background** 属性和 HTML **embed** 标签。在我们讨论的所有三种方法中，HTML img 标签是最常用于插入图片的方法。

更新于: 2024年10月21日

93K+ 浏览量

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告