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>同時具有行內元素,行內塊,和塊級元素的特性
  • 替換元素一般有內在尺寸,所以具有 widthheight,可以設定
    • 例如你不指定 <img>widthheight 時,就按其內在尺寸顯示,也就是圖片被保存的時候的寬度和高度
  • 對於表單元素,瀏覽器也有默認的樣式,包括寬度和高度
  • <img>、<input>屬於行內替換元素。height/width/padding/margin均可用。效果等於塊元素

寫在最後

  • 如果你覺得這篇文章對你有益,煩請點贊以及分享給更多需要的人!

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

更多好文

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

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

冷門的HTML – tabindex 的作用

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

[前端面試]前端快取問題看這篇,讓面試官愛上你

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

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

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

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

Tags: