看看今天在線的任何網頁，你會注意到它們共享某些共同的東西。 這些共同特徵之一是圖像。 正確的圖像增加了很多網站的介紹。 其中一些圖像（如公司的徽標）有助於為網站打上品牌並將該數字實體連接到您的實體公司。
要將圖像，圖標或圖形添加到網頁中，您需要在頁面的HTML代碼中使用該標記。 您可以將IMG標記放置在您的HTML中您想要顯示圖形的位置。 一旦頁面被查看，呈現該頁面代碼的網絡瀏覽器將用適當的圖形替換該標籤。 回到我們的公司徽標示例，以下是如何將該圖像添加到您的網站：
圖像屬性
查看上面的HTML代碼，您將看到該元素包含兩個屬性。 它們中的每一個都是圖像所必需的。
第一個屬性是“src”。 這實際上就是您想要在頁面上顯示的圖像文件。 在我們的例子中，我們使用了一個名為“logo.png”的文件。 這是Web瀏覽器在呈現網站時顯示的圖形。
您還會注意到，在此文件名之前，我們添加了一些附加信息“/ images /”。 這是文件路徑。 最初的正斜杠告訴服務器查看目錄的根目錄。 然後它會查找一個名為“images”的文件夾，最後是名為“logo.png”的文件。 使用名為“images”的文件夾來存儲所有站點的圖形是一種非常普遍的做法，但是文件路徑將被更改為與您的站點相關的任何內容。
第二個必需屬性是“alt”文本。 這是如果圖像由於某種原因無法加載而顯示的“替代文本”。 如果圖片加載失敗，則會在我們的示例中顯示“公司徽標”的文字。 為什麼會發生？ 各種原因：
- 不正確的文件路徑
- 錯誤的文件名或拼寫錯誤
- 傳輸錯誤
- 文件已從服務器中刪除
這些只是為什麼我們指定的圖像可能會丟失的幾種可能性。 在這些情況下，我們的替代文字會顯示。
屏幕閱讀器軟件也使用替代文字將圖像“讀取”給視力受損的訪問者。 由於他們無法像我們一樣看到圖像，因此這些文字讓他們知道圖像本身是什麼。 這就是為什麼ALT文本是必需的，為什麼它應該清楚地說明圖像是什麼！
對alt文本的一個常見誤解是它是為了搜索引擎的目的。 這不是真的。 雖然谷歌和其他搜索引擎確實閱讀這些文字以確定圖片是什麼（請記住，他們無法“看到”您的圖片），但您不應該編寫替代文字來吸引搜索引擎。 作者明確了針對人類的文字。 如果您還可以在標籤中添加一些吸引搜索引擎的關鍵字，這很好，但請始終確保替代文本的主要用途是通過說明無法看到圖形文件的人的圖像。
其他屬性
IMG標籤還有另外兩個屬性，當您在網頁上放置圖形時，您可能會看到其中的一些屬性 - 寬度和高度。 例如，如果您使用Dreamweaver之類的所見即所得編輯器，它會自動為您添加此信息。 這是一個例子：
WIDTH和HEIGHT屬性告訴瀏覽器圖像的大小。 瀏覽器然後知道佈局中要分配多少空間，並且可以在圖像下載時移動到頁面上的下一個元素。 在HTML中使用此信息的問題是，您可能並不總是希望以完全相同的尺寸顯示圖像。 例如，如果您有一個響應式網站，其大小根據訪問者屏幕和設備大小而變化，那麼您也會希望圖像具有靈活性。 如果您在HTML中聲明固定大小，您會發現很難用響應式CSS媒體查詢進行覆蓋。 出於這個原因，為了保持樣式（CSS）和結構（HTML）的分離，建議您不要將寬度和高度屬性添加到HTML代碼中。
一個注意事項：如果您確實關閉了這些尺寸指示，並且未在CSS中指定尺寸，則瀏覽器無論如何都將以默認的原始尺寸顯示圖像。
由Jeremy Girard編輯