이 글은 더 많은 초보자들이 올바른 방향을 찾을 수 있도록 HTML5를 체계적으로 배울 수 있는 방법에 대한 모든 것입니다.
1. HTML 파일이란 무엇인가요?
TML의 정식 영어 명칭은 Hypertext Marked Language이고, 중국어 명칭은 "Hypertext Markup Language"입니다.
일반 텍스트와의 차이점은 HTML 파일에는 텍스트 내용뿐만 아니라 중국어로 "태그"라고 하는 일부 태그도 포함되어 있다는 것입니다.
HTML 파일의 접미사는 .htm 또는 .html입니다.
텍스트 편집기를 사용하여 HTML 파일을 작성할 수 있습니다.
2. HTML 파일 작성
TML의 정식 영어 명칭은 Hypertext Marked Language이고, 중국어 명칭은 "Hypertext Markup Language"입니다.
일반 텍스트와의 차이점은 HTML 파일에는 텍스트 내용뿐만 아니라 중국어로 "태그"라고 하는 일부 태그도 포함되어 있다는 것입니다.
HTML 파일의 접미사는 .htm 또는 .html입니다.
텍스트 편집기를 사용하여 HTML 파일을 작성할 수 있습니다.
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
This is my first homepage.<b>This text is bold</b>
</body>
</html>
로그인 후 복사
이 first.html 파일을 보려면 해당 파일을 두 번 클릭하세요. 또는 브라우저를 열고 파일 메뉴에서 열기를 선택한 후 파일을 선택하세요.
이 파일의 첫 번째 태그는 입니다. 이 태그는 이것이 HTML 파일의 헤더임을 브라우저에 알려줍니다. 파일의 마지막 태그는 로 HTML 파일이 여기에서 끝남을 나타냅니다.
와 사이의 내용은 헤드 정보입니다. 헤드 정보는 표시되지 않으며, 브라우저에서 볼 수 없습니다. 그러나 이것이 정보가 유용하지 않다는 의미는 아닙니다. 예를 들어 검색 엔진이 웹 페이지를 검색하는 데 도움이 되도록 일부 키워드를 헤드 정보에 추가할 수 있습니다. 과 사이의 내용이 이 파일의 제목입니다. 브라우저 상단의 제목 표시줄에서 이 제목을 볼 수 있습니다. 와 사이의 정보가 본문입니다.
와 사이의 텍스트는 굵게 표시됩니다. 이름에서 알 수 있듯이 대담하다는 뜻입니다.
HTML 파일은 일반 텍스트와 유사해 보이지만 , 등과 같은 일반 텍스트보다 더 많은 태그를 가지고 있습니다. 이러한 태그를 통해 브라우저에 파일 표시 방법을 알려줄 수 있습니다.
HTML 요소
HTML 요소는 텍스트를 표시하고 텍스트 내용을 나타내는 데 사용됩니다. 예를 들어 body, p, title은 HTML 요소입니다.
HTML 요소는 <로 시작하고 >로 끝나는 태그로 표시됩니다.
태그는 일반적으로
와 같이 쌍으로 나타납니다. 시작을 오프닝 태그(Opening Tag), 끝을 클로징 태그(Closing Tag)라고 합니다.
현재 HTML 태그는 대소문자를 구분하지 않습니다. 예를 들어, 과 은 실제로 동일합니다.
HTML 요소의 속성
HTML 요소는 속성을 가질 수 있습니다. 속성은 HTML 요소의 기능을 확장합니다.
예를 들어 bgcolor 속성을 사용하여 다음과 같이 페이지의 배경색을 빨간색으로 만들 수 있습니다.
또 다른 예에서는 border 속성을 사용하여 테이블을 테두리 없는 테이블로 바꿉니다. 다음과 같습니다.
속성은 일반적으로 name="value"와 같이 속성 이름과 값의 쌍으로 나타납니다. 위의 예에서 bgcolor와 border는 이름이고 red와 0은 값입니다. 속성 값은 일반적으로 큰따옴표로 표시됩니다. 속성은 일반적으로 닫는 태그가 아닌 HTML의 시작 태그에 첨부됩니다.
텍스트 제목
이 예에서는 HTML 파일에서 텍스트 제목을 정의하는 방법을 보여줍니다.
HTML은
부터
까지의 태그를 사용하여 텍스트 제목을 큰 것부터 작은 것까지 정의합니다. 각 텍스트 제목은 자체 단락입니다.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
로그인 후 복사
단락 나누기
HTML에서 단락을 나누려면
및
를 사용하세요.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
로그인 후 복사
줄바꿈
태그를 사용하면 새 문단을 만들지 않고도 줄바꿈을 할 수 있습니다. 닫는 태그가 없습니다. 줄 바꿈에
를 사용하는 것은 나쁜 습관입니다. 올바른 것은 을 사용하는 것입니다.
이것은 줄바꿈이 있는 파라 그래프입니다
HTML 주석
HTML 파일에서는 다음과 같이 코드를 설명하는 코드 주석을 작성할 수 있습니다. 다른 사람들은 앞으로 귀하의 코드를 더 잘 이해하게 될 것입니다.
댓글은 사이에 작성할 수 있습니다. 브라우저는 주석을 무시하므로 HTML 본문에 주석이 표시되지 않습니다.
<!--This is a comment -->
로그인 후 복사
몇 가지 팁
HTML 파일은 추가 공간을 자동으로 잘라냅니다. 공백을 몇 개 추가하더라도 모두 하나의 공백으로 계산됩니다. 빈 줄도 공백으로 간주됩니다.
일부 태그는
를 사용하지 않고도 텍스트를 단락으로 분리할 수 있습니다. 예를 들어 과 같은 제목 태그입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
