HTML 影像標籤
- WBOY原創
- 2024-09-04 16:20:161310瀏覽
HTML 是一種純文字文檔，允許多種格式的程式語言來實現基於 Web 的應用程序，這些應用程式使用標籤來描述網頁的功能。其中一個重要標籤是圖像標籤，它允許開發人員將圖像檔案合併到程式碼中，以便在網頁上顯示相應的圖像。此語法為 ，其中「image」是標籤名稱，「src=」應指派所需圖像的 URL。在本主題中，我們將學習 HTML 圖像標籤。
為網頁新增圖片
您可以使用 將 IMG 新增至 HTML 頁面。 HTML 文件中的標籤；這是語法：
<img src= enter the IMG URL here >
這裡，IMG 告訴瀏覽器該標籤是關於將 IMG 新增到文件中，「src=」指定從哪裡下載圖像。
有影像的頁面範例
代碼：
<!DOCTYPE html> <html> <head> <title> Example HTML IMG Tag </title> </head> <body> <img src = " https://cdn.educba.com/academy/wp-content/uploads/2019/02/Software-Dev.jpg" alt = " Software development icon " height = " 150 " width = "140" /> </body> </html>
輸出：
關於這些 HTML 頁面的一個有趣的事實是，當您使用 IMG 標籤時，圖像不會插入到所述網頁中；相反，它會創建一個保存空間，下載後將圖像放置在其中。
瀏覽器支援與屬性相容性
正如您所料，所有現代瀏覽器都支援圖像和 IMG 標籤的使用。有時，如果影像未設定為響應式，行動瀏覽器會調整影像大小以適合螢幕。
關於屬性與 HTML 4.01 和更新的 HTML5 的兼容性，大多數標籤都可以工作，但對齊、邊框、hspace 和 space 除外，後者根本不支援這些標記。
圖片作為連結：
有時，您會希望將圖像用作另一個頁面的連結。您可以透過在 內新增 IMG 標籤來完成此操作。標籤。
設定圖片作為網頁背景
使用頁面 Body 元素中的 background-image CSS 屬性，您可以指定圖片作為網頁的背景圖片。
<body style="background-image:url(‘car.jpg');"> <h1>Background Image </h1> </body>
將影像設定為在瀏覽器中浮動
我們可以使用 CSS 屬性「float」將圖片設定為浮動在瀏覽器視窗中的任何位置。讓我們來看一個例子來幫助您理解。
<p> <img src="car.png" alt="Ferrari Car " style="float: right; width:40px; height: 40px;">
在這裡，汽車的圖像將浮動到文字的右側。
<p><img src=" car.png " alt=" Ferrari Car " style="float: left; width: 40px; height: 40px;">
這裡，汽車的圖像將浮動到文字的左側。
影像標籤的屬性
以下是圖像標籤的屬性。
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中文網其他相關文章！