집 > 기사 > 웹 프론트엔드 > HTML은 어떻게 작동하나요?

HTML은 어떻게 작동하나요?

WBOY원래의: 2024-09-04 16:13:21727검색

HTML은 웹페이지 개발에 사용되는 태그 기반 언어입니다. HTML은 Hyper Text Markup Language의 약자입니다. 하이퍼텍스트는 웹 페이지가 서로 연결되는 방식을 나타냅니다. 따라서 웹페이지에서 사용할 수 있는 링크를 하이퍼텍스트라고 합니다. 태그는 페이지가 렌더링되는 방식을 브라우저에 알려주는 마크업 언어입니다. Berners-Lee는 1991년 말에 이를 개발했지만 'HTML2.0'은 1995년에 발표된 최초의 표준 사양이었습니다. 나중에 HTML 4.0과 같은 많은 HTML 버전이 출시되었습니다. 현재 최신 버전은 프론트엔드 웹사이트 개발 분야에서 매우 유명한 HTML5.0입니다.

HTML 페이지 작동 구조

HTML 페이지가 어떻게 작동하는지 구조를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>title tag of html</title>
</head>
<body>
<h1>heading tag of html</h1>
<p>paragraph tag of html<p>
</body>
</html>

이 태그는 문서 유형과 HTML 버전을 정의합니다.

위의 태그는 …로 표시되는 문서 헤더로 구성된 완전한 HTML 프로그래밍 언어 문서를 포함합니다. …로 표시되는 문서 본문입니다. 태그.

head 태그는 , <link>와 같은 다른 HTML 태그를 유지할 수 있는 문서의 헤더를 나타냅니다. 등등</p> <h4><제목></h4> <p>이 태그는 <head> 태그를 사용하여 문서 제목을 작성하세요.</p> <h4><본문></h4> <p><본문> 태그는 <div>, <h1>, <p>와 같은 다른 HTML 태그를 유지하는 문서의 본문을 나타냅니다. 등등</p> <h3>HTML 작품의 다양한 태그와 설명</h3> <p>HTML 작동 방식에 대한 다양한 태그는 아래에 설명되어 있습니다.</p> <h4><h1></h4> <p>제목 태그는 아래 제시된 제목 예의 다양한 생성에 사용됩니다</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Heading Example</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html></pre> <p><strong>출력</strong></p> <p>제목 1<br> 제목 2<br> 제목 3<br> 제목 4<br> 제목 5<br> 제목 6</p> <h4><p></h4> <p>아래 예시를 통해 이해하기 쉬운 단락 태그입니다.</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Paragraph Example</title> </head> <body> <p>This is a first paragraph of text.</p> <p>This is a second paragraph of text.</p> <p>This is a third paragraph of text.</p> </body> </html></pre> <p><strong>출력 </strong></p> <p>본문의 첫 문단입니다.<br> 본문의 두 번째 문단입니다.<br> 본문의 세 번째 문단입니다.</p> <h4><br /></h4> <p>이 태그는 줄바꿈에 사용됩니다. 우리는 무엇이든 다음 줄부터 시작하기를 원할 때마다 이 태그를 사용할 수 있습니다. 닫는 태그가 필요 없는 한줄 태그입니다.</p> <h4></h4> <p>웹페이지 생성 시 이 태그의 주요 용도를 중심으로 전체 콘텐츠를 배치하세요.</p> <h4></h4> <p>선을 만드는 데 사용되며 주로 단선 웹페이지를 그리고 싶을 때 사용됩니다.</p> <h4><사전></h4> <p>이것은 HTML의 매우 중요한 태그입니다. 어떤 시나리오에서는 HTML 페이지에 작성된 것과 동일하게 모든 것을 표시하고 싶습니다. 그러한 경우에는 매우 유용한 태그입니다. 그 예는 아래와 같습니다.</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Preserve Formatting Example</title> </head> <body> <pre class="brush:php;toolbar:false"> Laravel is the PHP framework. It is an open source framework used in web application development. This framework is based on model view controller design pattern due to this project developed with help of this framework are more structured and manageable. This framework reuses the existing </pre> </body> </html></pre> <p><strong>출력</strong></p> <p>Laravel은 PHP 프레임워크입니다. 웹에서 사용되는 오픈소스 프레임워크입니다<br> 애플리케이션 개발. 이 프레임워크는 모델 뷰 컨트롤러를 기반으로 합니다<br> 이 프레임워크의 도움으로 개발된 이 프로젝트로 인한 디자인 패턴은 <br> 더 구조화되고 관리하기 쉽습니다. 이 프레임워크는 기존 </p> <h4> </h4> <p>단일 공백을 인쇄하려면 HTML에서 사용됩니다.</p> <h4>태그 속성</h4> <p>태그 수준에서 속성을 설정할 수 있습니다. 아래 예시</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>Align Attribute</title> </head> <body> <p align = "left">Left aligned</p> <p align = "center">Center aligned</p> <p align = "right">Right aligned</p> </body> </html></pre> <p><strong>출력</strong></p> <p>왼쪽 정렬<br> 가운데 정렬<br> 오른쪽 정렬</p> <h3>HTML의 핵심속성</h3> <p>다음에는 거의 모든 HTML 요소에 사용되는 몇 가지 핵심 속성이 있습니다.</p> <ul> <li>아이디</li> <li>제목</li> <li>수업</li> <li>유형</li> </ul> <h4>1) 아이디</h4> <p>이 속성은 페이지의 HTML 요소를 고유하게 식별하는 데 사용됩니다. 요소와 해당 내용을 식별하고 javascript에서 다른 목적으로 사용될 수 있는 id 속성에 의해 동일한 요소가 HTML 페이지의 여러 위치에서 사용되었을 수 있습니다. 그 예는 아래와 같습니다.</p> <p><code><p id = "html">HTML이 무엇인지, 사용 방법을 설명하는 첫 번째 단락입니다</p><code><p id = "html">This is first paragraph which explains what is HTML how to use it</p><br> <p id = "css">This it second para which explains what is Cascading Style Sheet and how to use it</p> </code> <p id = "css">이것은 계단식 스타일 시트(Cascading Style Sheet)가 무엇이고 어떻게 사용하는지 설명하는 두 번째 단락입니다.</p> </code></p> <p>설명 – 위의 예에서는 ID로만 이 요소를 구별하기 위해 동일한 요소를 두 번 사용했습니다.</p> <h4>2) 제목</h4> <p>이 속성 구문은 id 속성과 유사하며, 이 속성의 목적은 이를 전달하는 요소에 따라 달라집니다. 커서가 요소 위에 올 때 도구 설명으로 표시되는 경우가 많지만 이것이 이 속성의 주요 용도입니다. 그 예는 아래와 같습니다 –</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title> title Attribute Example</title> </head> <body> <h3 title = "Hello Title Example Test">Sleeping from the long time</h3> </body> </html></pre> <p><strong>출력</strong></p> <p>오랜잠</p> <p>If we try to bring our cursor over “Sleeping from a long time”, we will see that whatever title we have used in our code is coming out as a tooltip of the cursor.</p> <h4>3) Class</h4> <p>The class attribute is used to associate an element with a style sheet and specifies the class of element. We will learn more about the use of the class attribute when we will learn Cascading Style Sheet (CSS).Its main use is CSS. Value for this attribute may also be a space-separated list of class names. The example is given below –</p> <p><code>class = "className11 className12 className53"</code></p> <h4>4) Style</h4> <p>It is used to writing the cascading style rule at the element level, which can be better explained by the example given below.</p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>The style Attribute</title> </head> <body> <p style = "font-family:arial; color:#FF0000;">This is style example text , it is red color...</p> </body> </html></pre> <p><strong>Output</strong></p> <p>This is a style example text; it is red color…</p> <h3>Conclusion</h3> <p>As we saw many basics tags, the web page can be created with the help of these tags, which can be displayed to the end-user whenever a user requests the particular web page through his web browser, the work of displaying will be done by the web browser. Today lots of new tags exist into the market to make web pages more attractive.</p><p>위 내용은 HTML은 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">laravel</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">print</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">require</a> <a href="javascript:void(0);">try</a> <a href="javascript:void(0);">break</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">everything</a><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="HTML 경력" href="http://m.php.cn/ko/faq/1796600021.html">HTML 경력</a></span><span>다음 기사：<a class="dBlack" title="HTML 경력" href="http://m.php.cn/ko/faq/1796600024.html">HTML 경력</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</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/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/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/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</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/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</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/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</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:;" class="language course-right-orders chooselan chooselanguage" 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><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>