Résumé des éléments en ligne et des éléments de niveau bloc en HTML

1. Tout d'abord, résumons ce que sont les éléments en ligne et les éléments de niveau bloc :

Éléments en ligne :

Les balises peuvent définir des ancres
un formulaire d'abréviation
Définir uniquement l'abréviation

Saut de ligne
Citation à définir
Définir le texte du code informatique
Définir pour mettre l'accent sur le contenu
Effet de texte en italique
Intégrer une image dans une page Web
Zone de saisie
Définir le texte du clavier
<étiquette> L'étiquette est
étiquette de définition d'élément (marqueur)
le texte
crée une sélection unique ou multiple Menu de sélection
présente un effet de petite police
combine des éléments en ligne dans le document
accentue le contenu avec ton plus fort
définir le texte en exposant
Définir le texte en exposant
Contrôle de saisie de texte multiligne<br><tt>Machine à écrire ou effet de texte à largeur fixe<br><var>Définir les variables<br><br>Définir le titre du tableau<br><dd> dans la liste<br><div> Définir une section ou une section dans un document </p><dl> Définir une liste <p><dt> 🎜><form> Créer un formulaire HTML</p><h1>Définir le plus grand titre<p><h2>Définir le sous-titre<br><h3>Définir le titre<br><h4>Définir le titre<br><h5>Définir le titre<br><h6>Définir le titre minimal<br><hr>Créer une ligne horizontale<br><legend>L'élément est <br><fieldset>L'élément définit le titre<br> <li>L'étiquette définit l'élément de liste<br> <noframes>Afficher le texte pour les navigateurs qui ne prennent pas en charge les frames, dans l'élément frameset<br><noscript>Définit un contenu alternatif lorsque le script n'est pas exécuté<ol>Définit un liste ordonnée<br><ul> ;Définir une liste non ordonnée<br/><p>Paragraphe de définition de balise<br><pre class="brush:php;toolbar:false">Définir un texte pré-formaté<br><table>Tableau HTML de définition de balise<br>< tbody>Tag table body (Texte)<br><td>Cellules standard dans les tableaux<br><tfoot>Définir le pied de page du tableau (notes de bas de page ou notes de tableau)<br><th>Définir les cellules d'en-tête<br>< thead> définit l'en-tête du tableau <br><tr> définit les lignes du tableau <br><br> 2. Examinons ensuite la différence entre les éléments en ligne et les éléments de niveau bloc : <br><br>1. La différence intuitive entre les éléments en ligne et les éléments de niveau bloc<br><br>Les éléments en ligne seront disposés en ligne droite, tous sur la même ligne, disposés horizontalement<br><br>Bloc Les éléments de niveau occupent chacun une ligne, disposée verticalement. Les éléments de niveau bloc commencent sur une nouvelle ligne et se terminent par un saut de ligne. <br></p>2. Les éléments de niveau bloc peuvent contenir des éléments en ligne et des éléments de niveau bloc. Les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc. <p></p>3. La différence entre les attributs des éléments en ligne et des éléments au niveau du bloc est principalement due aux attributs du modèle de boîte. <p></p>Le paramètre de largeur des éléments en ligne n'est pas valide, la hauteur est invalide (ligne -la hauteur peut être définie), et les marges supérieure et inférieure ne sont pas valides. Le remplissage n'est pas valide de haut en bas <p></p> 3. Conversion des éléments en ligne et des éléments de niveau bloc : <p></p>Convertir le niveau de bloc. éléments en éléments en ligne : display:inline;<p></p>Convertir les éléments en ligne en éléments de niveau bloc : display:block;<p></p>Éléments de bloc en ligne : display:inline-block;<p></p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Disposition du tableau ---- basée sur la disposition du style bootstrap" href="//m.sbmmt.com/m/fr/faq/370717.html">Disposition du tableau ---- basée sur la disposition du style bootstrap</a></span><span>Article suivant：<a class="dBlack" title="Disposition du tableau ---- basée sur la disposition du style bootstrap" href="//m.sbmmt.com/m/fr/faq/370725.html">Disposition du tableau ---- basée sur la disposition du style bootstrap</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="//m.sbmmt.com/m/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="//m.sbmmt.com/m/fr/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/fr/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/fr/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/fr/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="//m.sbmmt.com/m/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="//m.sbmmt.com/m/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="//m.sbmmt.com/m/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="//m.sbmmt.com/m/fr/login"><b class="icon5"></b><p>Mon</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="//m.sbmmt.com/m/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="//m.sbmmt.com/m/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</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="//m.sbmmt.com/m/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="//m.sbmmt.com/m/fr/" >Maison</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/fr/dic.html" >Dictionnaire</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:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " 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="//m.sbmmt.com/m/static/layui/layui.js"></script><script type="text/javascript" src="//m.sbmmt.com/m/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='//m.sbmmt.com/m/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='//m.sbmmt.com/m/static/js/viewer.min.js?1'></script><script type='text/javascript' src='//m.sbmmt.com/m/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>