Introduction détaillée à la classification des éléments HTML

HTML classification des éléments

Classer en fonction des éléments de niveau bloc ou des éléments en ligne

Éléments de niveau bloc (niveau bloc) et éléments en ligne (niveau inline, également appelés éléments "inline").

a. Élément de niveau bloc (occupe une ligne)

Élément de niveau bloc : sa caractéristique la plus évidente est qu'il remplit son parent. horizontalement par défaut La zone de contenu de l'élément, et il n'y a aucun autre élément sur les côtés gauche et droit de celui-ci, c'est-à-dire que les éléments au niveau du bloc occupent une ligne par défaut. Les éléments typiques au niveau du bloc sont :

,

,

~

,

, etc.

b. Éléments en ligne (peuvent partager une ligne avec d'autres éléments)

Éléments en ligne : les éléments en ligne ne forment pas un nouveau bloc de contenu, c'est-à-dire qu'à l'intérieur de leur Il peut y avoir d'autres éléments à gauche et à droite, tels que , , , etc., qui sont des éléments typiques de niveau en ligne. affichage Les éléments avec l'attribut égal à "inline" sont tous des éléments en ligne. Presque tous les éléments remplaçables sont des éléments en ligne, tels que , , etc.

PS : (Le niveau de bloc et le niveau en ligne peuvent être convertis les uns dans les autres) : En définissant l'attribut display de CSS, les éléments en ligne peuvent être transformés en éléments de niveau bloc : display: block; Vous pouvez également transformer des éléments de niveau bloc en éléments en ligne : display:inline.

*La différence entre les éléments de niveau bloc et les éléments en ligne :

1.

Les éléments de niveau bloc occuperont une ligne exclusive et leur largeur remplira automatiquement la largeur de leurs éléments parents ; Les éléments en ligne n'occuperont pas une ligne exclusive. Les éléments en ligne adjacents seront disposés sur la même ligne. Lorsqu'une ligne ne peut pas tenir, sa largeur change avec le contenu de. l'élément

2. Généralement, les éléments au niveau du bloc peuvent être définis avec des attributs largeur et hauteur, tandis que les éléments en ligne avec des paramètres de largeur et de hauteur ne sont pas valides.

3. Les éléments au niveau du bloc peuvent être définis avec margin et padding La direction horizontale des éléments en ligne est padding-. left ,padding-right,margin-left,margin-right produisent tous des effets de marge, mais le vertical padding-top ,padding-bottom,margin-top,margin-bottom ne produira pas d'effet de marge. (Effectif dans le sens horizontal, invalide dans le sens vertical).

2. Classification par éléments remplaçables et non remplaçables

Bien sûr, en plus des éléments de niveau bloc et en ligne, il peut également être classé selon qu'il s'agit d'éléments un élément remplaçable.

a. Remplacer l'élément (cet élément peut produire différents effets d'affichage en fonction du changement d'un certain attribut)

Remplacer l'élément : Le navigateur Les balises et les attributs de l'élément détermineront le contenu d'affichage spécifique de l'élément.

Par exemple : le navigateur lira les informations image et les affichera en fonction de la valeur de l'attribut src du en fonction de l'attribut type ; de la balise Attendez.

(X), , , <select>, <<a href="http://www.php.cn/wiki/60.html" target="_blank">objet</a>> HTML est un élément de remplacement. Ces éléments n'ont souvent pas de contenu réel, c'est-à-dire un élément vide </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">b. Éléments non remplaçables </span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px"><span style="font-family: 宋体"> Éléments non remplaçables : ( X) HTML La plupart des éléments sont des éléments non remplaçables, c'est-à-dire que leur contenu est présenté directement à l'utilisateur. </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> : Généralement, il est inutile de définir la largeur et la hauteur des éléments en ligne, alors pourquoi certains éléments en ligne tels que l'entrée ou img être défini en largeur, en hauteur ? </span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px"><span style="font-family: 宋体">Parce que input, img, etc. sont tous des éléments de remplacement, les éléments de remplacement ont généralement des dimensions intrinsèques, ils ont donc une largeur et une hauteur qui peuvent être définies, ce qui est assez spécial. Lorsque nous ne définissons pas leur largeur et leur hauteur, le navigateur donnera la largeur et la hauteur par défaut. Par exemple : <input type="text"> Le formulaire de saisie de texte donnera la largeur et la hauteur par défaut. Mais on peut changer sa largeur et sa hauteur. </span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px;"><br></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="Introduction aux symboles spatiaux (nbsp; ensp; emsp;) en html et une explication détaillée de la méthode de mise en œuvre de l'alignement chinois" href="http://m.php.cn/fr/faq/363454.html">Introduction aux symboles spatiaux (nbsp; ensp; emsp;) en html et une explication détaillée de la méthode de mise en œuvre de l'alignement chinois</a></span><span>Article suivant：<a class="dBlack" title="Introduction aux symboles spatiaux (nbsp; ensp; emsp;) en html et une explication détaillée de la méthode de mise en œuvre de l'alignement chinois" href="http://m.php.cn/fr/faq/363456.html">Introduction aux symboles spatiaux (nbsp; ensp; emsp;) en html et une explication détaillée de la méthode de mise en œuvre de l'alignement chinois</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</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/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</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/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/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="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/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="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/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="/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>