Zusammenfassung der Inline-Elemente und Elemente auf Blockebene in HTML

1. Lassen Sie uns zunächst zusammenfassen, was Inline-Elemente und Block-Level-Elemente sind:

Inline-Elemente:

-Tags können Anker definieren.
eine Abkürzungsform
Definieren Sie nur die Abkürzung

Zeilenumbruch
Zu definierendes Zitat
Definieren Sie Computercodetext
Für Hervorhebungsinhalt definieren
Kursiver Texteffekt
Ein Bild in eine Webseite einbetten
Eingabefeld
Tastaturtext definieren
definiert die Kurzreferenz
Text
erstellt eine Einzel- oder Mehrfachauswahl. Wählen Sie ein Menü aus.
zeigt einen kleinen Schrifteffekt.
kombiniert Inline-Elemente im Dokument.
betont den Inhalt mit Stärkerer Ton
Hochgestellten Text definieren
Hochgestellten Text definieren
Mehrzeilige Texteingabesteuerung<br><tt>Schreibmaschinen- oder Texteffekt mit fester Breite<br><var>Variablen definieren<br><br>Elemente auf Blockebene: <br><br><address> Adresse definieren</p><caption> Tabellentitel definieren<p><dd> in list</p><div> Definieren Sie einen Abschnitt oder Abschnitt in einem Dokument <p><dl> Definieren Sie eine Liste <br><dt> Definieren Sie ein Frameset <br><form> Erstellen Sie ein HTML-Formular<br><h1>Definieren Sie den größten Titel<br><h2>Definieren Sie Untertitel<br><h3>Definieren Sie Titel<br><h4>Definieren Sie Titel<br><h5>Titel definieren<br>< ;h6>Mindesttitel definieren<br><hr>Horizontale Linie erstellen<br><legend>Element ist <br><fieldset>Element definiert Titel<br> <li>Label definiert Listenelement<br> <noframes>Anzeigetext für Browser, die keine Frames unterstützen, innerhalb des Frameset-Elements<br><noscript>Definiert alternativen Inhalt, wenn das Skript nicht ausgeführt wird<ol>Definiert einen geordnete Liste<br><ul> ;Ungeordnete Liste definieren<br/><p>Tag-Definitionsabsatz<br><pre class="brush:php;toolbar:false">Vorformatierten Text definieren<br><table>Tag-Definitions-HTML-Tabelle<br>< tbody>Tag-Tabellenkörper (Text)<br><td>Standardzellen in Tabellen<br><tfoot>Definieren Sie die Fußzeile der Tabelle (Fußnoten oder Tabellennotizen)<br><th>Definieren Sie Kopfzeilenzellen<br>< thead> Tag definiert den Header der Tabelle <br><tr> definiert die Zeilen in der Tabelle <br><br> 2. Schauen wir uns dann den Unterschied zwischen Inline-Elementen und Block-Level-Elementen an: <br><br>1. Der intuitive Unterschied zwischen Inline-Elementen und Elementen auf Blockebene<br></p>Inline-Elemente werden in einer geraden Linie angeordnet, alle auf derselben Linie, horizontal angeordnet<p></p>Block -Level-Elemente belegen jeweils eine Zeile und sind vertikal angeordnet. Elemente auf Blockebene beginnen in einer neuen Zeile und enden mit einem Zeilenumbruch. <p></p>2. Elemente auf Blockebene können Inline-Elemente und Elemente auf Blockebene enthalten. Inline-Elemente können keine Elemente auf Blockebene enthalten. <p></p>3. Der Unterschied zwischen den Attributen von Inline-Elementen und Elementen auf Blockebene ist hauptsächlich auf die Attribute des Boxmodells zurückzuführen. <p></p>Die Breiteneinstellung von Inline-Elementen ist ungültig, die Höhe ist ungültig (Zeile). -Höhe kann eingestellt werden) und der obere und untere Rand sind ungültig. <p></p> 3. Konvertierung von Inline-Elementen und Blockebenenelementen: <p></p>Blockebene konvertieren Elemente in Inline-Elemente: display:inline;<p></p>Inline-Elemente in Elemente auf Blockebene konvertieren: display:block;<p></p>Inline-Blockelemente: display:inline-block;<p></p><p>Das obige ist der detaillierte Inhalt vonZusammenfassung der Inline-Elemente und Elemente auf Blockebene in HTML. 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="Tabellenlayout ----basierend auf dem Layout im Bootstrap-Stil" href="http://m.php.cn/de/faq/370717.html">Tabellenlayout ----basierend auf dem Layout im Bootstrap-Stil</a></span><span>Nächster Artikel：<a class="dBlack" title="Tabellenlayout ----basierend auf dem Layout im Bootstrap-Stil" href="http://m.php.cn/de/faq/370725.html">Tabellenlayout ----basierend auf dem Layout im Bootstrap-Stil</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><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><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><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><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>