Detailed introduction to HTML element classification

HTMLElement classification

1. Classify according to block-level elements or inline elements

Block-level elements (block-level) and inline elements (inline-level, also called "inline" elements).

a. Block-level element (occupies one line)

Block-level element: Its most obvious feature is that it fills its parent horizontally by default The content area of ​​the element, and there are no other elements on the left and right sides of it, that is, block-level elements occupy one line by default. Typical block-level elements are:

,

,

~

,

, etc.

b. Inline elements (can share a line with other elements)

Inline elements: Inline elements do not form a new content block, that is, within their There can be other elements on the left and right, such as , , , etc., which are typical inline-level elements. displayAttributeElements equal to "inline" are all inline elements. Almost all replaceable elements are inline elements, such as , , etc.

PS: (Block level and inline can be converted to each other): By setting the display attribute of CSS, inline elements can be turned into block level elements: display: block; You can also turn block-level elements into inline elements: display:inline.

##*The difference between block-level elements and inline elements:

1.

Block-level elements will occupy an exclusive line, and its width will automatically fill the width of its parent element;Inline elements It will not occupy a single line. Adjacent in-line elements will be arranged in the same line. It will not wrap until it cannot fit in one line. Its width changes with the content of the element.

2 .Generally, block-level elements can be set with width, and height attributes, while inline elements with width and height set have no effect.

3. Block-level elements can be set with margin and padding. The horizontal padding-left of inline elements ,padding-right,margin-left,margin-right all produce margin effects, but padding-top in the vertical direction ,padding-bottom,margin-top,margin-bottom will not produce margin effect. (Effective in horizontal direction, invalid in vertical direction).

2. Classification according to replaceable and non-replaceable elements

Of course, in addition to block-level and inline elements, it can also be classified according to whether it is a replaceable element.

a. Replace element (this element can produce different display effects according to the change of a certain attribute)

Replace element: The browser will The tags and attributes of the element determine the specific display content of the element.

For example: the browser will read the image information and display it based on the value of the src attribute of the tag. , and if you view the (X)HTML code, you cannot see the actual content of the image; another example is to determine whether to display the input box or the radio button based on the type attribute of the tag wait.

##(X), , , <select>, <<span style="font-family: 宋体">object<a href="http://www.php.cn/wiki/60.html" target="_blank">> in HTML is a replacement element. These elements often have no actual content, that is, an empty element</p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px">b. Non-replaceable elements<span style="font-family: 宋体; font-weight: bold"></span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px">Non-replaceable elements: (X)HTML Most of the elements are non-replaceable elements, i.e. their contents are presented directly to the user. <span style="font-family: 宋体"></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">ps<strong></strong>: Generally, it is useless to set the width and height of inline elements, so why can some inline elements such as input or img be set? width, height? </span></span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px">Because input, img, etc. are all replacement elements, replacement elements generally have intrinsic dimensions, so they have width and height that can be set, which is quite special. When we do not set their width and height, the browser will give the default width and height. For example: <input type="text"> The text input box form of input will give the default width and height. But we can change his width and height. <span style="font-family: 宋体"></span></p> <p style="white-space: pre-wrap; text-align: left; line-height: 1.75; font-size: 14px;"><br></p><p>The above is the detailed content of Detailed introduction to HTML element classification. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Introduction to the space symbols (nbsp; ensp; emsp;) in html and a detailed explanation of the method of Chinese alignment implementation" href="http://m.php.cn/faq/363454.html">Introduction to the space symbols (nbsp; ensp; emsp;) in html and a detailed explanation of the method of Chinese alignment implementation</a></span><span>Next article：<a class="dBlack" title="Introduction to the space symbols (nbsp; ensp; emsp;) in html and a detailed explanation of the method of Chinese alignment implementation" href="http://m.php.cn/faq/363456.html">Introduction to the space symbols (nbsp; ensp; emsp;) in html and a detailed explanation of the method of Chinese alignment implementation</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</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/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</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/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</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/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</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/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</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:;" class="language course-right-orders chooselan chooselanguage" 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: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>