html畫圖程式碼_img影象標籤HTML入門基礎（017）

阿新 • • 發佈：2020-12-16

技術標籤：html畫圖程式碼 html讓圖片移動到一定位置 img src 放絕對路徑報錯 img src 檔案流 img src 本地路徑 img src絕對路徑

這一節內容，我們分享一下關於影象標籤的使用方法。在網頁中少不了圖片的存在，一個網頁如果有了圖片會顯得生動很多。在HTML中，影象標籤是，img英文意思就是image，它是一個自閉合標籤，常用的屬性包括src、alt和title三個。

img標籤符常用屬性
屬性	說明
src	影象的檔案地址
alt	圖片未載入時替換顯示的文字
title	滑鼠移動到圖片上提示的文字

src和alt兩個屬性是必選的。語法：

img標籤是一個自閉合標籤，沒有結束標籤。可以寫成

，也可以寫成，src屬性用於設定影象檔案的路徑，可以是相對路徑，也可以是絕對路徑。示例程式碼：

  影象標籤

在這裡我們可以用畫圖工具，隨意的畫點東西，然後將檔案儲存至桌面，在桌面我們可以新建一個資料夾，名稱是website，然後在這個資料夾下面再建立一個資料夾和一個檔案，資料夾名稱是images，檔名稱是1.html，然後將剛才儲存的圖片檔案1.jpg，移動或者剪下到資料夾images裡存放，當你執行以上程式碼時，會發現圖片可以顯示的。以上的路徑是相對路徑。alt屬性用於設定圖片的描述資訊，是為你給搜尋引擎檢視的，這個對於SEO很重要。title屬性用於滑鼠移動至圖片上時的提示文字，是給使用者看的。語法：

示例程式碼：

<html>  <head>    <title>影象標籤title>  head>  <body><imgsrc="images/1.jpg"alt="我是一張圖片"title="我是圖片標題">  body>html>

相對路徑和絕對路徑：關於路徑的問題，初學者一般會比較困惑。我們的計算機為了組織檔案，是需要有碟符的，也就是我們通常說的C盤、D盤等，那麼我們儲存一個檔案，就必須讓計算機明確知道它的儲存位置；比如我在D盤下，建立一個網站目錄，名稱是website，內部含有一個資料夾和一個檔案，分別是images資料夾用於存放圖片，另一個是網頁程式碼檔案1.html；當我們需要儲存它們時，絕對路徑就表示為d:\website\1.html和d:\website\images\1.jpg，這個就是檔案的絕對路徑，它明確表示出該檔案位於哪個碟符，哪個資料夾下；那麼初學者會說，我們就直接使用絕對路徑就好了，為什麼還有相對路徑呢？還是拿上面的路徑為基礎，我們的網站開發在本機編寫程式碼時，儲存的路徑是如此，但是等我們將網站部署至伺服器時，會發現因為環境的因素髮生改變，而造成路徑變化了；比如伺服器在安裝時沒有D盤，只有E盤，我們將網站部署在了伺服器的E盤，資料夾還是同名，會發現路徑變為e:\website\1.html和e:\website\images\1.jpg，由於我們在程式碼中使用的是絕對路徑，會發現全部程式碼都有出錯的可能，程式不能正常運行了。為了解決這種不靈活的路徑問題，就引入了相對路徑的方法，比如我們的網站開發時，根目錄建立一個資料夾，名稱是website，內含一個資料夾images，一個網頁檔案1.html，程式碼中我們全部是從根目錄開始表示檔案的位置，比如images\1.jpg，那麼當我們的網站部署在任何碟符下，系統都會自動將相對路徑轉換為絕對路徑來存取檔案了，是不是很方便，很靈活。絕對路徑：

src="d:\website\images\1.jpg"

相對路徑：

src="website\images\1.jpg"

來看個實際的例子：

路徑問題

通常我們在網頁程式碼中都是使用相對路徑，絕對路徑很少使用，另外插一句，在計算機檔案系統中表示路徑時，通常是斜槓分隔，就是d:\website\1.html，但是在HTML網頁開發中，路徑通常是使用反斜槓分隔的，比如 ./images/1.jpg，這個初學者一定要注意掌握。當網站開發過程中，檔案系統中檔案比較多，我們需要找到同級目錄檔案和上級目錄檔案該如何表示呢？通常都是從自身檔案出發，如果你的網頁程式碼是1.html，images資料夾與你同級目錄，路徑可以表示為 ./images/1.jpg，如果需要找到你的上級目錄，路徑表示為 ../website/xxx。

./	同級目錄
../	上級目錄

下一節我們接著分享關於影象標籤的內容。

html畫圖程式碼_img影象標籤HTML入門基礎（017）

html畫圖程式碼_img影象標籤HTML入門基礎（017）

文字環繞的使用-CSS入門基礎（017）

用prototype擴充套件和繼承物件-JavaScript入門基礎（017）

Erlang 入門 ---- 基礎（一）

WPF入門基礎 ——（佈局）

字間距、詞間距的使用-CSS入門基礎（010）

文字縮排的使用-CSS入門基礎（009）

文字樣式的使用-CSS入門基礎（008）

字型粗細的使用-CSS入門基礎（007）

字型顏色的使用-CSS入門基礎（006）

字型樣式-CSS入門基礎（005）

子選擇器的使用-CSS入門基礎（004）

id選擇器的使用-CSS入門基礎（003）

圖片樣式的使用-CSS入門基礎（016）

hover偽類的使用-CSS入門基礎（015）

超連結樣式的使用-CSS入門基礎（014）

背景樣式的使用-CSS入門基礎（013）

區域性邊框的使用-CSS入門基礎（012）

邊框樣式的使用-CSS入門基礎（011）

opencv入門基礎（九）基於dlib進行人臉、特定物體追蹤

html畫圖程式碼_img影象標籤HTML入門基礎（017）

相關推薦