<img />標籤的基本使用

瀏覽器支援

所有主流瀏覽器都支援<img>標籤

標籤定義及使用說明

<img>標籤定義html頁面中的影象

<img>標籤有兩個必需的屬性：src 和 alt

強烈推薦在開發中每個影象中都使用 alt 屬性。這樣即使影象無法顯示，使用者還是可以看到關於丟失了什麼東西的一些資訊。而且對於殘疾人來說，alt 屬性通常是他們瞭解影象內容的唯一方式

<img />究竟是什麼元素

<img />是行內元素還是塊級元素？

<img />標籤沒有獨佔一行，所以是行內元素，這沒啥問題

既然是行內元素為什麼能夠設定寬高呢？

這個問題就要引申出下面部分了，<img />標籤屬於替換元素，具有內建的寬高屬性，所以可以設定，具體解釋看下面。

https://www.houdianzi.com/xalogo/ 西安logo設計

元素的定義

從元素本身的特點來講，可以分為不可替換元素和替換元素

元素相關的MDN解釋

不可替換元素

(X)html的大多數元素是不可替換元素，即其內容直接表現給使用者端(例如瀏覽器)

如：<h1>我是標題</h1>

可替換元素

瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容

例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果檢視(X)HTML程式碼，則看不到圖片的實際內容；又例如根據<input>標籤的type屬性來決定是顯示輸入框，還是單選按鈕等

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往沒有實際的內容，即是一個空元素

如：<img src="tigger.jpg"/>、<input type="submit" name="Submit" value="提交"/>

可替換元素的性質同設定了display:inline-block的元素一致

特殊的可替換元素

<img>屬於可替換元素

<img>同時具有行內元素，行內塊，和塊級元素的特性

替換元素一般有內在尺寸，所以具有width和height，可以設定

例如你不指定<img>的width和height時，就按其內在尺寸顯示，也就是圖片被儲存的時候的寬度和高度

對於表單元素，瀏覽器也有預設的樣式，包括寬度和高度

<img>、<input>屬於行內替換元素。height/width/padding/margin均可用。效果等於塊元素