<img />標籤的基本使用

瀏覽器支援

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

標籤定義及使用說明

標籤定義 HTML 頁面中的影象

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

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

<img />究竟是什麼元素

是行內元素還是塊級元素？

標籤沒有獨佔一行，所以是行內元素，這沒啥問題既然是行內元素為什麼能夠設定寬高呢？

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

元素的定義

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

元素相關的MDN解釋

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element

不可替換元素

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

如：

我是標題

可替換元素

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

例如瀏覽器會根據 標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果檢視（X）HTML程式碼，則看不到圖片的實際內容；又例如根據

標籤的type屬性來決定是顯示輸入框，還是單選按鈕等

（X）HTML中的 、、、<select>、<object>都是替換元素。這些元素往往沒有實際的內容，即是一個空元素</p><p>如：<img alt="前端面試查漏補缺，<img>是什麼元素，屬於塊級元素還是行內元素" data-isLoading="0" src="/static/img/blank.gif" data-src=“tigger。jpg”/>、<input type=“submit” name=“Submit” value=“提交”/></p><p>可替換元素的性質同設定了display：inline-block的元素一致</p><div class="base-box"></div><p><strong>特殊的可替換元素</strong></p><p><img>屬於可替換元素</p><p><img>同時具有行內元素，行內塊，和塊級元素的特性</p><p>替換元素一般有內在尺寸，所以具有 width和 height，可以設定</p><p>例如你不指定 <img> 的 width 和 height時，就按其內在尺寸顯示，也就是圖片被儲存的時候的寬度和高度</p><p>對於表單元素，瀏覽器也有預設的樣式，包括寬度和高度</p><p><img>、<input>屬於行內替換元素。height/width/padding/margin均可用。效果等於塊元素</p><div class="base-box"></div><p>為了幫助大家學習前端，讓學習變得輕鬆，高效！今天給大家分享一套教學資源，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等幫助大家在學習Web前端的道路上披荊斬棘</p><p>這套資源的領取方式：私信回覆web獲取</p><p align="center" class="arc-img-box"><img alt="前端面試查漏補缺，<img>是什麼元素，屬於塊級元素還是行內元素" data-isLoading="0" src="/static/img/blank.gif" data-src="https://img.auzhu.com/upload/website_attach/jT9-uR+TiIjdIGdkyKHx46DwzKaZhn8UexG_h6_f+8v45ofwbEO0iFAQ05_1iEm2xRuZ+LH+_IsuT-fhH0ya4FeEAMOTEIM9iw2nu660_80759=6bOi7stdR1L5R5G+w38jRu66I+83B5396bA0Jq7DQcLldfOMeEneVqbHE_Y+BAo+fbzLo5.jpeg" width="588" height="563" /></p><div class="base-box"></div></div><div class="post-content-base"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8094663645581922" data-ad-slot="5724958332" data-ad-format="fluid" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><div class="tags"><span><i class="icon-tags">TAG:</i><a class="text-secondary mr-2" href="/tag/1948.html" title="元素">元素</a><a class="text-secondary mr-2" href="/tag/19384.html" title="替換">替換</a><a class="text-secondary mr-2" href="/tag/14921.html" title="標籤">標籤</a><a class="text-secondary mr-2" href="/tag/23249.html" title="瀏覽器">瀏覽器</a><a class="text-secondary mr-2" href="/tag/143460.html" title="行內">行內</a></span></div></div><div class="postnavi"><div class="prev"> 上一篇：<a href="/entertainment/3501041.html" title="/entertainment/3501041.html"><i><<</i>卑躬屈膝的出處、釋義、典故、近反義詞及例句用法 - 成語知識</a></div><div class="next"> 下一篇：<a href="/entertainment/3501046.html" title="/entertainment/3501046.html">港影好看的皮囊，與有趣的靈魂，已兩度貼片待映的《風再起時》<i>>></i></a></div></div><section class="related-pic"><h2><i class="icon-file-image"></i>相關文章</h2><ul><li><div class="thumbnail"><a href="/entertainment/4971532.html" title="47歲董卿罕見現身，穿襯衫裙搭配風衣真時髦，穿平底鞋小腿仍纖細"><img src="https://img.auzhu.com/upload/thumbnail/n7N6xn2L6h5d+zq=+rcB7Zsd6X45HvDo6_irTq0N6uXd+b0Kc7Jlv5fMTXg3bkkr6ADrUbzmluR1-2O+z2JcqAYrtjNER.jpeg" alt="47歲董卿罕見現身，穿襯衫裙搭配風衣真時髦，穿平底鞋小腿仍纖細" /></a></div><p><a href="/entertainment/4971532.html" title="47歲董卿罕見現身，穿襯衫裙搭配風衣真時髦，穿平底鞋小腿仍纖細">47歲董卿罕見現身，穿襯衫裙搭配風衣真時髦，穿平底鞋小腿仍纖細</a></p></li><li><p><a href="/entertainment/4885899.html" title="唏噓！27年後，IE瀏覽器正式退役">唏噓！27年後，IE瀏覽器正式退役</a></p></li><li><div class="thumbnail"><a href="/tech/4859827.html" title="為何有些使用者寧願雙開谷歌瀏覽器, 也不願意使用國產瀏覽器? 因為全部都是套殼?"><img src="https://img.auzhu.com/upload/thumbnail/8Fg8qQs4FESj6wa5E1IemGISFvD2FWZ2xajAtWoGVUfzSjPLkYjyE-a0LG=JXNRwVet3k.jpeg" alt="為何有些使用者寧願雙開谷歌瀏覽器, 也不願意使用國產瀏覽器? 因為全部都是套殼?" /></a></div><p><a href="/tech/4859827.html" title="為何有些使用者寧願雙開谷歌瀏覽器, 也不願意使用國產瀏覽器? 因為全部都是套殼?">為何有些使用者寧願雙開谷歌瀏覽器, 也不願意使用國產瀏覽器? 因為全部都是套殼?</a></p></li><li><div class="thumbnail"><a href="/history/1694877.html" title="html 哪些是塊級元素、哪些是行內元素？"><img src="https://img.auzhu.com/upload/thumbnail/QIMoQf+x+2jy+9LwS8uItv4L-h7Ya+uYRFjmhykVQljy5-6bRQkvsVgLTh0zzmHr_zLliE0v58Cl4LFLQC8esMgrtGxq0myk4l0Hv.jpeg" alt="html 哪些是塊級元素、哪些是行內元素？" /></a></div><p><a href="/history/1694877.html" title="html 哪些是塊級元素、哪些是行內元素？">html 哪些是塊級元素、哪些是行內元素？</a></p></li></ul></section><div class="post-like-base"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8094663645581922" data-ad-slot="5724958332" data-ad-format="fluid" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div></article></div></main><aside class="sidebar bar1"><section class="widget wow"><div class="search-form"><form name="formsearch" method="get" target="_blank" action="/operate/search.html"><input type="text" class="s" name="q" placeholder="找不到想看的？搜尋看看！"/><button type="submit">搜索</button></form></div></section><section class="widget theme-widget wow"><div class="section-title"><h2>推薦文章</h2></div><ul><li><p><a href="/entertainment/5035738.html" title="雖然趙滿延比莫凡撩的妹更多，但“質量”上卻遠遠比不過莫凡">雖然趙滿延比莫凡撩的妹更多，但“質量”上卻遠遠比不過莫凡</a></p></li><li><p><a href="/entertainment/5035664.html" title="成都雙眼皮醫生哪個做得好？2022成都雙眼皮攻略更新啦~">成都雙眼皮醫生哪個做得好？2022成都雙眼皮攻略更新啦~</a></p></li><li><div class="thumbnail"><a href="/entertainment/5035260.html" title="冬季單品買對不買貴，準備這“一衣二鞋”就夠了，百搭時尚又減齡"><img src="https://img.auzhu.com/upload/thumbnail/8LbArDoLqCKI7QCTxAaGU6F4ugtC481lqwJynA7NqHOI7I6F-YyE7B7PKNVKjvnckj=yp1tmBHt5Vsd37cq_7EkyvgZiw.jpeg" alt="冬季單品買對不買貴，準備這“一衣二鞋”就夠了，百搭時尚又減齡" /></a></div><p><a href="/entertainment/5035260.html" title="冬季單品買對不買貴，準備這“一衣二鞋”就夠了，百搭時尚又減齡">冬季單品買對不買貴，準備這“一衣二鞋”就夠了，百搭時尚又減齡</a></p></li><li><p><a href="/entertainment/5035230.html" title="獲“兩道槓”後該怎麼做？早孕檢查讓你安心有準備！">獲“兩道槓”後該怎麼做？早孕檢查讓你安心有準備！</a></p></li><li><p><a href="/entertainment/5034957.html" title="神豪“傳奇”哥借40萬不還，YY阮君心寒生氣爆料，一點擔當都沒有">神豪“傳奇”哥借40萬不還，YY阮君心寒生氣爆料，一點擔當都沒有</a></p></li></ul></section><section class="widget wow" id="side-fixed"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8094663645581922" data-ad-slot="5724958332" data-ad-format="fluid" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></section></aside></div><div class="fixed-widget" id="gotoup"><ul><li><i class="icon-up-open">顶部</i></li></ul></div><footer class="footer"><div class="inner"><div class="copyright"> Copyright © 2024趣關注</div></div></footer><script type="text/javascript">function myReady(fn){if(document.addEventListener){document.addEventListener("DOMContentLoaded",fn,false)}else{IEContentLoaded(fn)}function IEContentLoaded(fn){var d=window.document;var done=false;var init=function(){if(!done){done=true;fn()}};(function(){try{d.documentElement.doScroll('left')}catch(e){setTimeout(arguments.callee,50);return}init()})();d.onreadystatechange=function(){if(d.readyState=='complete'){d.onreadystatechange=null;init()}}}};function addEvent(obj,type,fn){if(obj.attachEvent){obj.attachEvent("on"+type,function(){fn.call(obj)})}else{obj.addEventListener(type,fn,false)}};var clickbtn=document.getElementById("site-nav");var navbar=document.getElementById("mobile-menu");var isopen=false;clickbtn.addEventListener("click",function(){isopen=!isopen;if(isopen){navbar.style.display="block"}else{navbar.style.display="none"}});var oBtn=document.getElementById("gotoup");var timer;addEvent(window,'scroll',function(){var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;if(scrollTop>500){oBtn.style.display="block"}else{oBtn.style.display="none"}});oBtn.onclick=function(){clearInterval(timer);var start=document.documentElement.scrollTop||document.body.scrollTop;var dis=0-start;var count=Math.floor(1000/30);var n=0;timer=setInterval(function(){n++;var a=1-n/count;var cur=start+(1-Math.pow(a,3))*dis;document.documentElement.scrollTop=document.body.scrollTop=cur;if(n==count){clearInterval(timer)}},30)};function menuFixed(id){var obj=document.getElementById(id);if(obj){var _getHeight=obj.offsetTop;addEvent(window,'scroll',function(){changePos(id,_getHeight);});}};function changePos(id,height){var obj=document.getElementById(id);var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;if(scrollTop<height){obj.style.position="relative"}else{obj.style.position="fixed"}};if(document.body.offsetWidth>961&&!/Mobile|Android|webOS|iPhone|iPad|iPod|BlackBerry|SymbianOS|Windows Phone|IEMobile|Opera Mini/i.test(navigator.userAgent)){myReady(function(){menuFixed("side-fixed")});};</script><script type="text/javascript">var node_list=[].slice.apply(document.getElementsByClassName('base-box'));var availHeight=window.screen.availHeight;function getGinfo(){let new_div_dom=document.createElement("ins");new_div_dom.setAttribute("class","adsbygoogle");new_div_dom.setAttribute("style","display:block");new_div_dom.setAttribute("data-ad-client","ca-pub-8094663645581922");new_div_dom.setAttribute("data-ad-slot","5724958332");new_div_dom.setAttribute("data-ad-format","fluid");new_div_dom.setAttribute("data-full-width-responsive",true);return new_div_dom}function getGscript(){let new_script=document.createElement('script');new_script.setAttribute("src","https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8094663645581922");new_script.setAttribute("crossorigin","anonymous");return new_script}function touchend_func(event){let scrollTop=document.documentElement.scrollTop;let min_height=scrollTop+availHeight+300;for(let i=0;i<node_list.length;i++){if(!node_list[i]){continue}if(node_list[i].offsetTop<min_height){node_list[i].appendChild(getGscript());node_list[i].appendChild(getGinfo());(adsbygoogle=window.adsbygoogle||[]).push({});delete node_list[i]}else{break}}};myReady(function(){start();let clock;window.onscroll=function(){touchend_func(event);if(clock){clearTimeout(clock)}clock=setTimeout(function(){start()},200)};function start(){let imgs=document.getElementById('post-content').querySelectorAll('[data-isLoading="0"]');for(let i=0;i<imgs.length;i++){if(isShow(imgs[i])){loadImg(imgs[i])}}};function isShow($node){let docBody=document.documentElement||document.body;return $node.offsetTop<=docBody.clientHeight+docBody.scrollTop+200};function loadImg($img){$img.setAttribute('src',$img.getAttribute('data-src'));$img.setAttribute('data-isLoading',1)}});if(/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)){}else{var el_top_hids=document.getElementsByClassName('top_hid');for(var i=0;i<el_top_hids.length;i++){el_top_hids[i].style.display="none";}}</script></body></html>