Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML 요소를 사용하는 방법

HTML <head> 사용 방법 알아보기 웹사이트의 요소입니다.

HTML <head> 요소는 페이지 제목, 스타일 및 스크립트와 같은 웹 페이지에 대한 메타데이터(정보)의 컨테이너입니다.

<head> 내부의 콘텐츠 요소는 주로입니다. 사이트 방문자가 아닌 컴퓨터(예:브라우저)에서 읽고 처리합니다.

<head> 요소는 <header>와 혼동되어서는 안 됩니다. 다른 용도로 사용되는 요소입니다.

<head> 요소는 여는 <html> 바로 아래에 배치됩니다. 태그 및 여는 <body> 바로 앞 태그:

<!DOCTYPE html>
<html>
  <head>
    <!-- Contains Metadata primarily for machine processing -->
  </head>
  <body></body>
</html>

다음 HTML 요소는 <head> 안에 넣을 수 있습니다. 요소:

  • <제목>
  • <링크>
  • <스타일>
  • <meta>
  • <스크립트>
  • <base>

예시

<head> 사용 방법에 대한 몇 가지 예를 살펴보겠습니다. 내부에 일반적으로 사용되는 일부 메타데이터 요소가 있는 요소입니다.

요소</h3> <p> <code><title></code> 요소는 브라우저 페이지 탭에 표시되는 HTML 문서의 제목을 정의합니다.</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> </head> <body></body> </html></code></pre> <p> 웹사이트의 페이지 탭 위로 마우스를 이동하고 몇 초 동안 가만히 있으면 전체 페이지 제목을 표시하는 작은 팝업이 나타납니다.</P> <h3 id="the-style-element" style="position:relative;"><style> 요소</h3> <p> <code><style></code> 요소에는 CSS로 작성된 HTML 문서의 스타일 정보(서체, 간격, 색상, 애니메이션 등)가 포함되어 있습니다.</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <style type="text/css"> body { background-color: red; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body></body> </html></code></pre> <h3 id="the-link-element" style="position:relative;"><link> 요소</h3> <p> HTML 문서에 스타일을 적용하는 보다 현대적인 방법은 <code><link></code>를 사용하여 외부 CSS 스타일 시트를 가져오는 것입니다. 요소:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html></code></pre> <p> 알아두면 좋은 정보:<code><style></code>를 둘 다 사용하는 경우 및 <code><link></code> 같은 문서에 요소가 있으면 문서에 포함하는 순서대로 스타일이 적용됩니다. CSS 캐스케이드이므로 동일한 HTML 요소를 처리하는 경우 마지막 스타일(위에서 아래로)이 이전 스타일보다 우선 적용됩니다.</P> <h3 id="the-script-element" style="position:relative;"><script> 요소</h3> <p> <code><script></code> 요소는 두 가지 다른 방법으로 JavaScript를 실행하는 데 사용됩니다.</P> <ol> <li>문서 내부에 직접 JavaScript 코드를 삽입하여(<code><style></code> 요소).</li> <li><code>src</code>를 통해 외부 JavaScript 스크립트 파일 가져오기 속성.</li> </ol> <p> 문서 내부에 직접 JavaScript 코드 삽입:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <script> // Make background color red document.body.style.backgroundColor = "red" </script> </head> <body></body> </html></code></pre> <p> 외부 자바스크립트 파일 가져오기:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <script src="/scripts/main.js"></script> </head> <body></body> </html></code></pre> <br> </article> <div class="ad5"> <script language='javascript' src='https://kr.wsxdn.com/css/ad/kr2.js'></script> </div> <div id="turn-page" class="text-over"> <a class='LinkPrevArticle' href='https://kr.wsxdn.com/bz024t/hf251z/1002054549.html' >HTML 문자를 이스케이프하는 방법 </a> <a class='LinkNextArticle' href='https://kr.wsxdn.com/bz024t/hf251z/1002054551.html' >HTML <script> 요소를 사용하는 방법 </a> </div> </section> <aside class="box-r box4-r"> <h3>HTML</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054537.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <figcaption> 요소를 사용하는 방법 ">HTML <figcaption> 요소를 사용하는 방법 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054539.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML 지연 속성을 사용하는 방법 ">HTML 지연 속성을 사용하는 방법 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054540.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML 대상 속성을 사용하는 방법 ">HTML 대상 속성을 사용하는 방법 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054542.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <meta> 요소를 사용하는 방법 ">HTML <meta> 요소를 사용하는 방법 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054545.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML 목록 사용 방법(<ul>, <ol>, <dl>) ">HTML 목록 사용 방법(<ul>, <ol>, <dl>) </p> </a> </li> </ul> <h3 class="h3-2">컴퓨터</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054546.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML 요소를 사용하는 방법 ">HTML 요소를 사용하는 방법 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054551.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <script> 요소를 사용하는 방법 ">HTML <script> 요소를 사용하는 방법 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054552.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <style> 요소를 사용하는 방법 ">HTML <style> 요소를 사용하는 방법 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054554.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <link> 요소를 사용하는 방법 ">HTML <link> 요소를 사용하는 방법 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002054555.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML <span> 요소를 사용하는 방법 ">HTML <span> 요소를 사용하는 방법 </p> </a> </li> </ul> </aside> </section> </div> <ul class="types box4-1 container f-center"> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ol244g/' target="_self">C 프로그래밍</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd245y/' target="_self">C++</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/xv246p/' target="_self">Redis</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig247a/' target="_self">BASH 프로그래밍</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ge248y/' target="_self">Python</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/jh249b/' target="_self">Java</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw250q/' target="_self">데이터 베이스</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/hf251z/' target="_self">HTML</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig252a/' target="_self">JavaScript</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/qo253i/' target="_self">프로그램 작성</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/vs254n/' target="_self">CSS</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd255x/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ay256s/' target="_self">SQL</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw257q/' target="_self">IOS</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/wu258o/' target="_self">Android</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/nl259f/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/mk260e/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ax261s/' target="_self">C#</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/bz265t/' target="_self">PHP</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/zx271r/' target="_self">SQL Server</a></li> </ul> <footer> <section class="container"> <div class="footer-msg"> <span class="container f-center"> <p class=krf>저작권 © <a href="https://kr.wsxdn.com">https://kr.wsxdn.com</a> 모든 권리 보유</p> </span> </div> </section> </footer> </body> </html>