如何在 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+ 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告