TML圖像標記

常用的圖像格式—GIF，PNG，JPG
圖像標記<img />
HTML網頁中任何元素的實現都要依靠HTML標記，要想在網頁中顯示圖像就需要使用圖像標記，接下來將詳細介紹圖像標記以及和他相關的屬性。其基本語法格式如下：

<img src="圖像URL" />

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標記的必需屬性。

相對路徑和絕對路徑

相對路徑
相對路徑不帶有盤符，通常是以HTML網頁文件為起點，通過層級關系描述目標圖像的位置。
例如：

<img src="img/logo.gif" alt="傳智播客-專業的java培訓,.net培訓,php培訓,網頁培訓,平面培訓,iOS培訓機構" />

相對路徑設置分為以下三種：

圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。

圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。

圖像文件位于html文件的上一級文件夾：在文件名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推，如<img src="../logo.gif" />。

絕對路徑

絕對路徑一般是指帶有盤符的路徑。

例如：

“D:\HTML+CSS網頁制作\chapter02\img\logo.gif”，或完整的網絡地址，例如“http://www.itcast.cn/images/logo.gif”。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

原文鏈接：https://blog.csdn.net/dubaiqaq/article/details/103500345

日常開發中，我們有時候需要獲取某個元素的背景圖片URL。在本文中，我將向大家介紹如何使用JavaScript來實現這一需求。

獲取元素背景圖片URL的JavaScript方法

要獲取元素的背景圖片URL，我們可以使用getComputedStyle方法來獲取background-image的CSS屬性值。

舉個例子，如果我們有如下HTML代碼：

<div style="background-image:url('http://www.example.com/img.png');">...</div>

我們可以通過以下JavaScript代碼來獲取背景圖片的URL：

const div = document.querySelector('div');
const style = window.getComputedStyle(div, false);
const bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
console.log(bi);

下面我們來逐步解析這段代碼的實現原理：

1. 選擇元素：我們使用document.querySelector方法來選擇目標div元素。
2. 獲取計算后的樣式：通過調用window.getComputedStyle方法并傳入選中的元素，我們可以獲取該元素的所有計算后的CSS樣式值，這些值存儲在一個對象中。
3. 提取背景圖片URL：使用style.backgroundImage屬性可以獲取到background-image的完整值，例如url("http://www.example.com/img.png")。我們使用slice(4, -1)方法來截取字符串中的URL部分，然后通過replace(/"/g, "")方法去除字符串中的引號。

最終，我們得到的bi變量值就是背景圖片的URL：

'https://www.example.com/img.png'

結束

通過使用JavaScript中的getComputedStyle方法，我們可以輕松獲取到元素的背景圖片URL。這對于動態處理樣式或者進行其他基于背景圖片的操作非常有幫助。

如果你覺得本文對你有幫助，別忘了點贊并分享給更多需要的朋友！有任何問題或建議，歡迎在評論區留言，我們一起討論學習！

像

HTML文檔中使用的圖像的目的有：第一，使頁面具有視覺效果；第二個：顯示有用信息。此外，圖像也可以用作鏈接。

雖然使用圖像有很多好處，但是包含太多圖像的頁面通常看起來過于雜亂，并且可能需要花費太長的時間來加載。

圖像 - <img src=“url”>

要顯示圖像，需要使用src屬性來指定圖像的路徑，如下所示有幾個方法來實現：

• src="picture.jpg" - 當圖片與html文件在同一個目錄下時，直接指定圖片名
• src="images/picture.jpg" - 當圖片位于其它目錄時，使用相對路徑來指定
• src="http://www.htmlbasic.com/images/photo.jpg" - 當指定網絡圖片時

替代文字 - <img alt="?">

img標記的alt屬性定義當圖像無法加載時顯示的文本來代替該圖像。對一個考慮周到的html來說這是一個必需屬性，簡要地描述圖像是什么。

圖像大小 - <img width="?" height="?">

圖像通常顯示為它實際的大小，但通過使用width和height屬性，可以更改它顯示的大小。以像素或百分比形式指定圖像的大小。技巧提示：使用圖像的實際大小（以像素為單位）來指定其顯示大小，以強制瀏覽器在圖像加載之前為其分配空間，以確保無論圖像是否顯示，頁面布局都保持不變。

圖像邊框 - <img border="?">

img標記的border屬性通過指定以像素為單位的厚度來添加邊框。您還可以設置border=“0”以刪除將圖像用作鏈接時添加的邊框。

圖像對齊 - <img align="?">

默認情況下，圖像顯示在html代碼中指定的位置（與任何其他標記一樣）。但是，可以通過設置align=“left | right | top | bottom | middle”中的任意一個值來將圖像與周圍的文本或段落對齊。

圖像空白 - <img ... vspace="?" hspace="?">

調整圖像周圍的空白，以像素為單位。使用vspace調整上下垂直間距，或左右兩側使用hspace。

例子

下面是以上標記的示例：

瀏覽器顯示內容如下所示：