Ist img in HTML5 ein Element auf Blockebene?

Das Bild von

html5 ist kein Element auf Blockebene. img ist ein Inline-Element und auch ein Ersatzelement. Es verfügt über integrierte Breiten- und Höhenattribute, sodass das img-Tag die Breite und Höhe festlegen kann. img ist ein Inline-Ersatzelement. Höhe, Breite, Abstand und Rand sind alle verfügbar und die Wirkung ist die gleiche wie bei Blockelementen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

<img /> Grundlegende Verwendung von Tags

<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>、、<select>、<object></code> 都是替换元素。这些元素往往没有实际的内容，即是一个空元素</li> <li>如：<code><img src="tigger.jpg"/></code>、<code><input type="submit" name="Submit" value="提交"/></code> </li> <li><strong>可替换元素的性质同设置了display:inline-block的元素一致</strong></li> </ul> <h2>特殊的可替换元素</h2> <ul> <li> <code><img></code>属于可替换元素</li> <li> <code><img></code>同时具有行内元素，行内块，和块级元素的特性</li> <li>替换元素一般有内在尺寸，所以具有 <code>width</code> 和 <code>height</code>，可以设定<ul><li>例如你不指定 <code><img></code> 的 <code>width</code> 和 <code>height</code> 时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度</li></ul> </li> <li>对于表单元素，浏览器也有默认的样式，包括宽度和高度</li> <li> <code><img>、<input></code>属于行内替换元素。<code>height/width/padding/margin</code><strong><span style="font-size: 16px;">Browser-Unterstützung</span> strong ></strong> </li> <ul><li>Alle gängigen Browser unterstützen das <code><img></code>-Tag </li></ul> <p><a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程"><strong><span style="font-size: 16px;"> Tag-Definition und Verwendungsbeschreibung</span></strong></a></p> <ul> <li> <code><img></code>-Tag definiert ein Bild in einer HTML-Seite</li> <li> <code><img></code>-Tag Dort sind zwei erforderliche Attribute: src und alt🎜</li> <li>Es wird dringend empfohlen, das alt-Attribut für jedes Bild in der Entwicklung zu verwenden. Selbst wenn das Bild nicht angezeigt werden kann, kann der Benutzer auf diese Weise dennoch einige Informationen darüber sehen, was fehlt. Und für Menschen mit Behinderungen ist das Alt-Attribut oft die einzige Möglichkeit, zu erfahren, worum es in dem Bild geht🎜🎜🎜<code><img /></code>Was genau ist es<h3> <code>< Ist img /></code> ein Inline-Element oder ein Block-Level-Element? </h3> <ul><li> <code><img /></code> Das Tag belegt keine separate Zeile, es handelt sich also um ein Inline-Element. Das ist kein Problem🎜🎜🎜<strong>Da es sich um ein Inline-Element handelt, warum können Breite und Höhe festgelegt werden? </strong>🎜<ul><li>Diese Frage führt zum folgenden Teil. Das <code><img /></code>-Tag ist ein Ersatzelement und verfügt über integrierte Breite und Höhenattribute können festgelegt werden. Eine ausführliche Erläuterung finden Sie weiter unten. 🎜🎜🎜Definition von Elementen🎜🎜Anhand der Eigenschaften der Elemente selbst können sie in nicht ersetzbare Elemente und ersetzbare Elemente unterteilt werden🎜🎜🎜🎜MDN-Erklärung zu Elementen🎜🎜🎜<strong><span style="font -size: 16px;">Nicht ersetzbare Elemente</span></strong>🎜<ul> <li>Die meisten Elemente von <code>(X)HTML</code> sind nicht ersetzbare Elemente Das heißt, ihr Inhalt wird direkt an den Client (z. B. einen Browser) ausgedrückt🎜</li> <li>Zum Beispiel: <code><h1>Ich bin der Titel</h1></code>🎜🎜🎜<strong><span style="font-size: 16px; ">Ersetzbare Elemente</span></strong>🎜<ul> <li>Der Browser bestimmt den spezifischen Anzeigeinhalt des Elements basierend auf dem Tag und den Attributen des Elements🎜</li> <li>Zum Beispiel bestimmt der Browser den spezifischen Anzeigeinhalt des Elements basierend auf <code>< Der Wert des src-Attributs des img></code>-Tags wird jedoch verwendet, um die Bildinformationen zu lesen und anzuzeigen. Wenn Sie den (X)HTML-Code anzeigen, können Sie beispielsweise gemäß <code><input>-Tags bestimmt, ob ein Eingabefeld angezeigt wird. ein Optionsfeld usw. 🎜<li> <code><img>, <input>, <textarea>, <select> in (X) HTML ;, <object></code> sind alles Ersatzelemente . Diese Elemente haben oft keinen eigentlichen Inhalt, also ein leeres Element🎜</li> <li>Zum Beispiel: <code><img src="tigger.jpg"/></code>, <code><input type= "submit " name="Submit" value="Submit"/></code>🎜</li> <li> <strong>Die Art ersetzbarer Elemente ist die gleiche wie die von Elementen mit display:inline-block set</strong> 🎜🎜🎜Spezielle austauschbare Elemente<ul> <li> <code><img></code> sind austauschbare Elemente 🎜</li> <li> <code><img></code> haben sowohl Inline-Elemente als auch Inline-Blöcke und die Eigenschaften von Elementen auf Blockebene🎜</li> <li>Ersatzelemente haben im Allgemeinen intrinsische Abmessungen, also haben sie <code>width</code> und <code>height</code>, die <ul> eingestellt werden können <li>Wenn Sie beispielsweise <code>width</code> und <code>height</code> von <code><img></code> nicht angeben, wird es entsprechend angezeigt Eigengröße, also die Breite und Höhe des Bildes beim Speichern 🎜🎜🎜</li> <li>Für Formularelemente verfügen Browser auch über Standardstile, einschließlich Breite und Höhe🎜</li> <li> <code><img>, <input></code> sind Inline-Ersetzungselemente. <code>height/width/padding/margin</code> sind alle verfügbar. Der Effekt entspricht dem Blockelement🎜🎜🎜Empfohlenes Tutorial: „🎜HTML-Video-Tutorial🎜“🎜</li> </ul> </li> </ul> </li></code> </li> </ul> </li> </ul> </li></ul> </li></ul> </li> </ul> </ul><p>Das obige ist der detaillierte Inhalt vonIst img in HTML5 ein Element auf Blockebene?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css3</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Object</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">margin</a> <a href="javascript:void(0);">padding</a> <a href="javascript:void(0);">input</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Was sind die dreidimensionalen Transformationsfunktionen von CSS3?" href="https://m.php.cn/de/faq/486046.html">Was sind die dreidimensionalen Transformationsfunktionen von CSS3?</a></span><span>Nächster Artikel：<a class="dBlack" title="Was sind die dreidimensionalen Transformationsfunktionen von CSS3?" href="https://m.php.cn/de/faq/486052.html">Was sind die dreidimensionalen Transformationsfunktionen von CSS3?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/485784.html" title="Zu welcher Spezifikation gehört HTML5?" class="aBlack">Zu welcher Spezifikation gehört HTML5?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/485811.html" title="Welche Elemente werden von HTML5 nicht unterstützt?" class="aBlack">Welche Elemente werden von HTML5 nicht unterstützt?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/485979.html" title="Was sind die Kategorien von HTML5-Tags?" class="aBlack">Was sind die Kategorien von HTML5-Tags?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/485980.html" title="Welche Symbole werden auf beiden Seiten von HTML5-Attributwerten verwendet?" class="aBlack">Welche Symbole werden auf beiden Seiten von HTML5-Attributwerten verwendet?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/485982.html" title="Welche Tags werden zum Implementieren von Dropdown-Listen in HTML5 verwendet?" class="aBlack">Welche Tags werden zum Implementieren von Dropdown-Listen in HTML5 verwendet?</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>