HTML 影像標籤

HTML 是一種純文字文檔，允許多種格式的程式語言來實現基於 Web 的應用程序，這些應用程式使用標籤來描述網頁的功能。其中一個重要標籤是圖像標籤，它允許開發人員將圖像檔案合併到程式碼中，以便在網頁上顯示相應的圖像。此語法為 ，其中「image」是標籤名稱，「src=」應指派所需圖像的 URL。在本主題中，我們將學習 HTML 圖像標籤。

為網頁新增圖片

您可以使用 將 IMG 新增至 HTML 頁面。 HTML 文件中的標籤；這是語法：

<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543801989409.png?x-oss-process=image/resize,p_40" class="lazy" the img url here alt="HTML 影像標籤" >

這裡，IMG 告訴瀏覽器該標籤是關於將 IMG 新增到文件中，「src=」指定從哪裡下載圖像。

有影像的頁面範例

代碼：

<title> Example HTML IMG Tag </title>


<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543801989409.png?x-oss-process=image/resize,p_40" class="lazy" alt=" Software development icon " height=" 150 "    style="max-width:90%">

輸出：

關於這些 HTML 頁面的一個有趣的事實是，當您使用 IMG 標籤時，圖像不會插入到所述網頁中；相反，它會創建一個保存空間，下載後將圖像放置在其中。

瀏覽器支援與屬性相容性

正如您所料，所有現代瀏覽器都支援圖像和 IMG 標籤的使用。有時，如果影像未設定為響應式，行動瀏覽器會調整影像大小以適合螢幕。

關於屬性與 HTML 4.01 和更新的 HTML5 的兼容性，大多數標籤都可以工作，但對齊、邊框、hspace 和 space 除外，後者根本不支援這些標記。

圖片作為連結：

有時，您會希望將圖像用作另一個頁面的連結。您可以透過在 內新增 IMG 標籤來完成此操作。標籤。

•  

設定圖片作為網頁背景

使用頁面 Body 元素中的 background-image CSS 屬性，您可以指定圖片作為網頁的背景圖片。

<h1>Background Image </h1>

將影像設定為在瀏覽器中浮動

我們可以使用 CSS 屬性「float」將圖片設定為浮動在瀏覽器視窗中的任何位置。讓我們來看一個例子來幫助您理解。

<p> <img src="/static/imghwm/default1.png" data-src="car.png" class="lazy" alt="Ferrari Car "   style="max-width:90%"></p>

在這裡，汽車的圖像將浮動到文字的右側。

<p><img src="car.png%20" alt=" Ferrari Car "   style="max-width:90%"></p>

這裡，汽車的圖像將浮動到文字的左側。

影像標籤的屬性

以下是圖像標籤的屬性。

1) 對齊

可能的值： 上、下、中、左或右。

alight屬性用來指定圖片在網頁上的對齊方式。

2) Alt

值類型： 文字

Alt用於指定網頁圖片的替代文字。如果無法顯示 IMG，瀏覽器會向使用者顯示此文字。 Google 和 Bing 等搜尋引擎使用此替代文字在圖像搜尋中顯示結果。

3) 邊框

值型態： 像素

它用於在圖片周圍建立使用者定義厚度的邊框。它在 HTML5 中不起作用。

4) 跨源

值類型： 匿名使用-憑證

當我們想要指定如何處理跨來源照片時，可以使用此屬性。這主要用於使用 JavaScript Web 應用程式的畫布元素的情況。

5) 身高

值類型：百分比或像素

這個用來表示HTML網頁中圖片的高度。

6) hspace

值型態： 像素

hspace 屬性在 HTML5 中不受支持，用於以像素為單位指定要在插入圖像的左側和右側添加多少空白。

7) ismap

值類型： 頁面的 URL

ismap 我們用來將所述影像定義為伺服器端影像映射。當使用者在圖像內按一下（或點擊）時，瀏覽器會將點擊（或點擊）座標作為 URL 傳送到 Web 伺服器。

8) 長描述

值類型： URL

Longdesc 使用 URL 給出圖像的詳細描述。屬性中的 URL 用作圖像的描述。

9) src

值類型： URL

src 代表來源。用於指定瀏覽器檢索影像的位址；此 URL 可套用於同一伺服器上目錄內的影像。它還可以將圖像儲存在具有不同網域的第三方伺服器中。

10) 使用地圖

值類型： #mapname

usemap 屬性定義客戶端影像映射的影像。使用地圖始終與地圖和區域 HTML 標籤一起使用。

11) 空間

值型態： 像素

Vspace 屬性在 HTML5 中不受支持，用於設定網頁圖片頂部和底部用作空白的像素數。

12) 寬度

值型態： 像素

顧名思義，width 屬性用於指定 HTML 網頁內圖片的寬度。

結論 – HTML 圖片標籤

現在我們已經了解如何將圖片新增至 HTML 頁面以及如何設定其屬性，我們可以在 Web 專案中建立美觀的網頁。

除了為網頁添加視覺效果之外，圖像也很有價值，因為它們有助於搜尋引擎優化。在圖像中添加適當的 alt 標籤和描述可以幫助搜尋引擎更好地理解網頁內容，並在許多情況下提高網頁的排名。

以上是HTML 影像標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！