Detaillierte Einführung in die Klassifizierung von HTML-Elementen

HTML Elementklassifizierung

1. Klassifizierung nach Blockebenenelementen oder Inline-Elementen

Block-Level-Elemente (Block-Level) und Inline-Elemente (Inline-Level, auch „Inline“-Elemente genannt).

a. Element auf Blockebene (belegt eine Zeile)

Element auf Blockebene: Sein offensichtlichstes Merkmal ist, dass es sein übergeordnetes Element ausfüllt Standardmäßig horizontal Der Inhaltsbereich des Elements, und auf der linken und rechten Seite befinden sich keine anderen Elemente. Das heißt, Elemente auf Blockebene belegen standardmäßig eine Zeile . Typische Elemente auf Blockebene sind:

,

,

~

,

usw.

b. Inline-Elemente (können eine Zeile mit anderen Elementen teilen)

Inline-Elemente: Inline-Elemente bilden keinen neuen Inhaltsblock, Das heißt, innerhalb ihrer Links und rechts können sich andere Elemente befinden, z. B. , , usw., bei denen es sich um typische Elemente auf Inline-Ebene handelt. display Elemente mit dem Attribut gleich „inline“ sind alle Inline-Elemente. Fast alle ersetzbaren Elemente sind Inline-Elemente, wie z. B. , usw.

PS: (Blockebene und Inline können ineinander konvertiert werden): Durch Festlegen des display-Attributs von CSS können Inline-Elemente in Elemente auf Blockebene umgewandelt werden : display: block; Sie können Elemente auf Blockebene auch in Inline-Elemente umwandeln: display: inline.

*Der Unterschied zwischen Elementen auf Blockebene und Inline-Elementen:

1.Elemente auf Blockebene belegen eine exklusive Zeile und ihre Breite füllt automatisch die Breite ihrer übergeordneten Elemente aus; Inline-Elemente belegen keine exklusive Zeile. Wenn eine Zeile nicht passt, ändert sich ihre Breite mit dem Inhalt das Element

2 .Im Allgemeinen können Elemente auf Blockebene mit den Attributen width und height festgelegt werden, während Inline-Elemente mit Breiten- und Höheneinstellungen ungültig sind.

3. Elemente auf Blockebene können mit margin und padding festgelegt werden. Die horizontale Richtung von Inline-Elementen ist padding-. left ,padding-right,margin-left,margin-right erzeugen alle Randeffekte, aber der vertikale padding-top ,padding-bottom,margin-top,margin-bottom erzeugt keinen Randeffekt. (Wirksam in horizontaler Richtung, ungültig in vertikaler Richtung).

2. Klassifizierung nach ersetzbaren und nicht ersetzbaren Elementen

Natürlich kann zusätzlich zu Blockebenen- und Inline-Elementen auch danach klassifiziert werden, ob dies der Fall ist ein austauschbares Element.

a. Element ersetzen (dieses Element kann je nach Änderung eines bestimmten Attributs unterschiedliche Anzeigeeffekte erzeugen)

Element ersetzen: Der Browser wird Die Tags und Attribute des Elements bestimmen den spezifischen Anzeigeinhalt des Elements.

Zum Beispiel: Der Browser liest die Bild-Informationen und zeigt sie basierend auf dem Wert des src-Attributs des zu bestimmen, ob das Eingabefeld oder das Optionsfeld angezeigt werden soll des -Tags Warten.

(X), , , <select>, <<a href="http://www.php.cn/wiki/60.html" target="_blank">object</a>> HTML ist ein Ersatzelement. Diese Elemente haben oft keinen eigentlichen Inhalt, also ein leeres Element </span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px"><span style="font-family: 宋体; font-weight: bold">Nicht ersetzbare Elemente </span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px"><span style="font-family: 宋体">Nicht ersetzbare Elemente: ( X) HTML Die meisten Elemente sind nicht ersetzbare Elemente, d. h. ihr Inhalt wird dem Benutzer direkt präsentiert. </span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px"><span style="font-family: 宋体"><span style="color: #ff0000"><strong>ps</strong></span>: Im Allgemeinen ist es sinnlos, die Breite und Höhe von Inline-Elementen festzulegen. Warum können also einige Inline-Elemente wie die Eingabe? oder img eingestellt werden? Breite, Höhe? </span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px"><span style="font-family: 宋体">Da Eingabe, Bild usw. alle Ersatzelemente sind, haben Ersatzelemente im Allgemeinen intrinsische Abmessungen, sodass Breite und Höhe eingestellt werden können, was etwas ganz Besonderes ist. Wenn wir ihre Breite und Höhe nicht festlegen, gibt der Browser die Standardbreite und -höhe an. Beispiel: <input type="text"> Das Eingabefeldformat für den Eingabetext gibt die Standardbreite und -höhe an. Aber wir können seine Breite und Höhe ändern. </span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px;"><br></p><p>Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Klassifizierung von HTML-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><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="Einführung in die Leerzeichen (nbsp; ensp; empp;) in HTML und eine detaillierte Erläuterung der Methode der chinesischen Ausrichtungsimplementierung" href="http://m.php.cn/de/faq/363454.html">Einführung in die Leerzeichen (nbsp; ensp; empp;) in HTML und eine detaillierte Erläuterung der Methode der chinesischen Ausrichtungsimplementierung</a></span><span>Nächster Artikel：<a class="dBlack" title="Einführung in die Leerzeichen (nbsp; ensp; empp;) in HTML und eine detaillierte Erläuterung der Methode der chinesischen Ausrichtungsimplementierung" href="http://m.php.cn/de/faq/363456.html">Einführung in die Leerzeichen (nbsp; ensp; empp;) in HTML und eine detaillierte Erläuterung der Methode der chinesischen Ausrichtungsimplementierung</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://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="http://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><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>