HTML 제목 단락

HTML 제목

HTML 문서에서는 제목이 중요합니다.

제목은 <h1> - <h6>과 같은 태그를 통해 정의됩니다.

<h1> 가장 큰 제목을 정의합니다. <h6> 가장 작은 제목을 정의하세요.

인스턴스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>

프로그램 실행 결과:

댓글: 브라우저는 제목 앞뒤에 자동으로 빈 줄을 추가합니다.

참고: 기본적으로 HTML은 단락 및 제목 요소와 같은 블록 수준 요소 앞뒤에 빈 줄을 자동으로 추가합니다.

제목이 중요합니다

제목은 반드시 HTML을 사용해 주세요 제목에만 태그를 지정하세요. 단지 굵게 또는 큰 텍스트를 생성하기 위해 제목을 사용하지 마십시오.

검색 엔진은 헤더를 사용하여 웹페이지의 구조와 콘텐츠를 색인화합니다.

사용자가 제목을 통해 페이지를 빠르게 탐색할 수 있으므로 제목을 사용하여 문서의 구조를 나타내는 것이 중요합니다.

H1은 기본 제목(가장 중요)으로 사용되어야 하고 그 다음에는 h2(다음으로 가장 중요한), h3 등이 와야 합니다.

HTML 가로줄

<hr /> HTML 페이지에 수평선을 만듭니다.

hr 요소를 사용하여 콘텐츠를 구분할 수 있습니다.

예제

다음 코드는 제목과 가로줄을 출력합니다.

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>php.cn</title>
 </head>
 <body>
 
 <h1>这是第一个标题</h1>
 <hr/>
 <h2>这是第二个标题</h2>
 <hr/>
 
 </body>
 </html>

프로그램 실행 결과:

위 코드는 <h1> 제목, 두 개의 가로줄도 있습니다

HTML 단락

단락은 <p> 태그를 통해 정의됩니다.

예제 직접 보기

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
</body>
</html>

프로그램 실행 결과:

첫 번째 문단입니다.
두 번째 문단입니다.

댓글 : 브라우저가 자동으로 단락 앞뒤에 빈 줄을 추가합니다. (<p>는 블록 수준 요소입니다)

팁: 빈 단락 태그 <p></p>를 사용하여 빈 줄을 삽입하는 것은 나쁜 습관입니다. <br /> 태그로 교체하세요. (단, 목록을 만들 때 <br /> 태그를 사용하지 마세요. HTML 목록에 대해서는 나중에 배우게 되니 걱정하지 마세요.)

닫는 태그를 잊지 마세요

닫는 태그를 사용하는 것을 잊어버리더라도 대부분의 브라우저는 다음과 같이 HTML을 올바르게 표시합니다. :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>忘记了结束标签
<p>忘记了结束标签
</body>
</html>

프로그램 실행 결과:

종료 태그를 잊어버렸습니다
종료 태그를 잊어버렸습니다

위의 예는 대부분의 브라우저에서 잘 작동하지만 이 접근 방식에 의존하지 마세요. 닫는 태그를 사용하는 것을 잊어버리면 예상치 못한 결과와 오류가 발생할 수 있습니다.

참고: HTML의 향후 버전에서는 닫는 태그를 생략하는 것이 허용되지 않습니다.

팁: 닫는 태그로 HTML을 닫는 것은 미래에도 사용할 수 있는 HTML 작성 방법입니다. 요소의 시작과 끝 위치를 명확하게 표시하면 사용자와 브라우저 모두 코드를 더 쉽게 이해할 수 있습니다.

HTML 줄 바꿈

새 문단을 만들고 싶은 경우 줄 바꿈(새 줄)을 수행하려면 <br /> 태그를 사용하세요.

<br /> 닫는 태그는 의미가 없으므로 닫는 태그가 없습니다.

인스턴스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>
    如果<br />需要<br />换行<br />段落,<br />请使用 br 标签.
</p>
</body>
</html>

프로그램 실행 결과:

If

줄바꿈
단락
이 필요합니다.

HTML 공백을 사용하세요.

일반적으로 HTML은 초과 공백을 자동으로 잘라냅니다. 공백을 몇 개 추가하더라도 모두 하나의 공백으로 계산됩니다. 예를 들어, 두 단어 사이에 10개의 공백을 추가하면 HTML은 9개의 공백을 자르고 하나만 유지합니다. 웹페이지에 공백을 추가하려면 >를 사용하여 공백을 나타낼 수 있습니다.

예

소스 코드에서 공백 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>

<h1>春晓</h1>

 <p>春眠不觉晓，</p>
     <p>处处闻啼鸟。</p>
        <p>夜来风雨声，</p>
            <p>花落知多少。</p>

<p>注意，浏览器忽略了源代码中的排版<br/>（省略了多余的空格和换行）。</p>
</body>
</html>

프로그램 실행 결과:

다음은 를 사용하여 공백을 나타냅니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<h1>春晓</h1>
<p>春眠不觉晓，</p>
<p>&nbsp&nbsp&nbsp&nbsp处处闻啼鸟。</p>
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp夜来风雨声，</p>
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp花落知多少。</p>
<p>使用了&nbsp空格</p>
</body>
</html>

프로그램 실행 결과:

팁: 는 공백을 나타냅니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1>春晓</h1> <p>春眠不觉晓，</p> <p>&nbsp&nbsp&nbsp&nbsp处处闻啼鸟。</p> <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp夜来风雨声，</p> <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp花落知多少。</p> <p>使用了&nbsp空格</p> </body> </html>

제출하다 코드 재설정

자동운전