您好,登錄后才能下訂單哦!
這篇文章主要講解了“html5的img是不是塊級元素”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“html5的img是不是塊級元素”吧!
html5的img不是塊級元素。img是行內(nèi)元素,同時(shí)也屬于替換元素,具有內(nèi)置的寬高屬性,所以img標(biāo)簽可以設(shè)置寬和高。img屬于行內(nèi)替換元素,height、width、padding、margin均可用,效果等于塊元素。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
<img />
標(biāo)簽的基本使用瀏覽器支持
所有主流瀏覽器都支持 <img>
標(biāo)簽
標(biāo)簽定義及使用說明
<img>
標(biāo)簽定義 HTML 頁面中的圖像
<img>
標(biāo)簽有兩個(gè)必需的屬性:src 和 alt
強(qiáng)烈推薦在開發(fā)中每個(gè)圖像中都使用 alt 屬性。這樣即使圖像無法顯示,用戶還是可以看到關(guān)于丟失了什么東西的一些信息。而且對于殘疾人來說,alt 屬性通常是他們了解圖像內(nèi)容的唯一方式
<img />
究竟是什么元素<img />
是行內(nèi)元素還是塊級元素?<img />
標(biāo)簽沒有獨(dú)占一行,所以是行內(nèi)元素,這沒啥問題
既然是行內(nèi)元素為什么能夠設(shè)置寬高呢?
這個(gè)問題就要引申出下面部分了,<img />
標(biāo)簽屬于替換元素,具有內(nèi)置的寬高屬性,所以可以設(shè)置,具體解釋看下面。
從元素本身的特點(diǎn)來講,可以分為不可替換元素和替換元素
元素相關(guān)的MDN解釋
不可替換元素
(X)HTML
的大多數(shù)元素是不可替換元素,即其內(nèi)容直接表現(xiàn)給用戶端(例如瀏覽器)
如:<h2>我是標(biāo)題</h2>
可替換元素
瀏覽器根據(jù)元素的標(biāo)簽和屬性,來決定元素的具體顯示內(nèi)容
例如瀏覽器會(huì)根據(jù) <img>
標(biāo)簽的src屬性的值來讀取圖片信息并顯示出來,而如果查看(X)HTML代碼,則看不到圖片的實(shí)際內(nèi)容;又例如根據(jù) <input>
標(biāo)簽的type屬性來決定是顯示輸入框,還是單選按鈕等
(X)HTML中的 <img>、<input>、<textarea>、<select>、<object>
都是替換元素。這些元素往往沒有實(shí)際的內(nèi)容,即是一個(gè)空元素
如:<img src="tigger.jpg"/>
、<input type="submit" name="Submit" value="提交"/>
可替換元素的性質(zhì)同設(shè)置了display:inline-block的元素一致
<img>
屬于可替換元素
<img>
同時(shí)具有行內(nèi)元素,行內(nèi)塊,和塊級元素的特性
替換元素一般有內(nèi)在尺寸,所以具有 width
和 height
,可以設(shè)定
例如你不指定 <img>
的 width
和 height
時(shí),就按其內(nèi)在尺寸顯示,也就是圖片被保存的時(shí)候的寬度和高度
對于表單元素,瀏覽器也有默認(rèn)的樣式,包括寬度和高度
<img>、<input>
屬于行內(nèi)替換元素。height/width/padding/margin
均可用。效果等于塊元素
感謝各位的閱讀,以上就是“html5的img是不是塊級元素”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對html5的img是不是塊級元素這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。