img標籤究竟是行內元素仍是塊級元素

面試官問你<img>是什麼元素時你怎麼回答

寫這篇文章源自我以前的一次面試，題目即是問img標籤屬於塊級元素仍是行內元素，當時想都沒想就說了是行內(inline)元素，面試官追問爲何可以設置 <img /> 標籤的寬和高，當時腦子忽然一懵，發現這是本身技術上的一個空白，因此有了這篇文章。

閱讀本文您將收穫

• <img />標籤的基本使用
• MDN關於元素的定義
• 特殊的可替換元素

<img /> 標籤的基本使用

瀏覽器支持

• 全部主流瀏覽器都支持 <img> 標籤

標籤訂義及使用說明

• <img> 標籤訂義 HTML 頁面中的圖像
• <img> 標籤有兩個必需的屬性：src 和 alt
• 強烈推薦在開發中每一個圖像中都使用 alt 屬性。這樣即便圖像沒法顯示，用戶仍是能夠看到關於丟失了什麼東西的一些信息。並且對於殘疾人來講，alt 屬性一般是他們瞭解圖像內容的惟一方式

<img />到底是什麼元素

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

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

既然是行內元素爲何可以設置寬高呢？

• 這個問題就要引伸出下面部分了，<img /> 標籤屬於替換元素，具備內置的寬高屬性，因此能夠設置，具體解釋看下面。

元素的定義

從元素自己的特色來說，能夠分爲不可替換元素和替換元素

元素相關的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都可用。效果等於塊元素

寫在最後

• 若是你以爲這篇文章對你有益，煩請點贊以及分享給更多須要的人！

• 歡迎關注微信公衆號【全棧道路】，獲取更多科技相關知識及免費書籍。
  

更多好文

Vue3.0 響應式數據原理：ES6 Proxy

幾行代碼教你解決微信生成海報及二維碼

冷門的HTML - tabindex 的做用

[萬字長文]百度和好將來面試經含答案

[前端面試]前端緩存問題看這篇，讓面試官愛上你

記一次慘痛的Vue-cli + VueX + SSR經歷

[三分鐘小文]前端性能優化-HTML、CSS、JS部分

[三分鐘小文]前端性能優化-頁面加載速度優化

[三分鐘小文]前端性能優化-網絡傳輸層優化