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>    处处闻啼鸟。</p> <p>      夜来风雨声，</p> <p>        花落知多少。</p> <p>使用了 空格</p> </body> </html>
프로그램 실행 결과:
팁: 는 공백을 나타냅니다.
![프론트엔드 Vue3 실전 전투 [손글씨 vue 프로젝트]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST 튜토리얼 [네트워크 통신 관련 기술 개념의 대중화]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
