집

웹 프론트엔드

HTML 튜토리얼

HTML의 마크업 및 문서 구조 소개

PHPz

Apr 02, 2017 am 09:48 AM

HTML로 콘텐츠를 표시하는 목적은 웹페이지에 의미를 부여하는 것입니다. 즉, 웹 페이지 콘텐츠에 사용자 에이전트가 이해할 수 있는 의미를 부여해야 합니다.

HTML은 콘텐츠를 다르게 표시하는 태그 세트를 지정합니다. 각 태그는 포함된 내용에 대한 설명입니다. 가장 일반적으로 사용되는 HTML 설명은 제목, 단락, 링크 및 그림입니다. 현재 HTML에는 총 114개의 태그가 있지만 80/20 원칙에 따르면 이 중 25개 정도를 사용하면 마크업 요구 사항의 80%를 충족할 수 있습니다.

HTML의 최신 버전인 HTML5는 웹페이지의 전체 구조를 더욱 표준화하기 위해 관련 콘텐츠의 태그를 그룹화하기 위한 새로운 구조화된 태그 배치를 규정합니다. 이러한 새 태그에는

1. 태그 폐쇄

내용을 포함하는 각 요소(예: 제목, 문단, 그림)에는 포함된 내용이 텍스트인지 여부에 따라 두 가지 방법으로 부여할 수 있습니다. . 하나는 닫는 태그로, 다른 하나는 닫는 태그로 태그가 지정됩니다.

1.1 텍스트에 닫는 태그 사용

예:

Hello, CSS!

1.2 인용된 콘텐츠에 자체 닫는 태그 사용

예: <img src="images/dog.jpg" alt="This is my dog." >

팁:
자체 닫는 태그의 경우 XHTML 요구 사항은 다음과 같이 작성되어야 합니다. :

XML/HTML 코드 내용을 클립보드에 복사

<img src="images/dog.jpg" alt="This is my dog." />

로그인 후 복사

HTML5에서는 마지막 닫는 슬래시를 생략하고 다음과 같이 쓸 수 있습니다.

XML/HTML 코드 내용을 클립보드에 복사

<img src="images/dog.jpg" alt="This is my dog." >

로그인 후 복사

2. 속성

팁: 시각 장애가 있는 사용자가 사용하는 스크린 리더는 alt 속성의 내용을 소리내어 읽습니다. , 태그의
alt 속성을 사용하면 사람들이 한눈에(또는 한눈에) 이해할 수 있는 내용을 추가할 수 있습니다.

3. 제목 및 단락
4. 복합 요소

HTML은 제목, 그림, 단락과 같은 기본 콘텐츠 태그를 지정할 뿐만 아니라 목록을 만드는 데 사용되는 태그도 지정합니다. 🎜>
테이블 및 양식과 같은 복잡한 사용자 인터페이스 구성 요소를 위한 표시입니다. 이는 소위 복합 요소입니다. 즉, 여러 개의 태그로 구성됩니다.

5. 중첩 태그

쉽게 말하면 하나의 태그를 다른 태그 안에 중첩하는 것입니다.

6.HTML5 템플릿

XML/HTML 코드 내용을 클립보드에 복사

<!DOCTYPE html>  
<html>  
 <head>  
 <meta charset="utf-8" />  
 <title>An HTML Template</title>  
 </head>  
 <body>  
 <!-- 这里是网页内容 -->  
 </body>  
</html>

로그인 후 복사

7. 블록 수준 요소 및 인라인 요소

문서 흐름 효과: HTML 요소는 마크업에 나타나는 순서대로 페이지 상단에서 하단으로 흐릅니다.

거의 모든 HTML 요소의 표시 속성은 블록 또는 인라인입니다. 가장 확실한 예외는 자체 사용자 정의 표시 값이 있는 테이블 요소입니다.

블록 수준 요소(예: 제목 및 단락)는 서로의 위에 쌓여 페이지 아래에 정렬되며, 각 요소는 자체 줄을 차지합니다. 인라인 요소(예: 링크 및 이미지)는 서로 병치되며 병치할 공간이 충분하지 않은 경우에만 다음 줄에 표시됩니다.

알고 싶은 HTML 요소가 무엇이든 가장 먼저 물어봐야 할 질문은 블록 수준 요소입니까, 아니면 인라인 요소입니까? 이것을 알고 나면 마크업을 작성할 때 요소가 초기 상태에서 어떻게 배치될지 예측할 수 있으므로 나중에 CSS를 사용하여 위치를 변경하는 방법에 대해 더 깊이 생각할 수 있습니다.

알아야 할 두 가지 사항:

블록 수준 요소 상자는 상위 요소와 동일한 너비로 확장됩니다.

인라인 요소 상자는 내용물을 최대한 단단히 수축 포장합니다.

7. 중첩 요소

마크에는 HTML 태그가 중첩되고, 화면에는 상자가 하나씩 중첩됩니다.

8. 문서
객체모델

문서 객체 모델(DOM)은 브라우저의 관점에서 페이지의 요소와 각 요소를 관찰합니다. 속성을 생성하여 이러한 요소의 가계도를 만듭니다. DOM을 통해 요소 간의 상호 관계를 결정할 수 있습니다. CSS의 DOM

에서 특정 위치를 참조하여 해당 HTML 요소를 선택하고 스타일 속성을 수정할 수 있습니다.

CSS가 DOM을 운영하는 과정은 먼저 요소나 요소 그룹을 선택한 다음 해당 요소의 속성을 수정하는 것입니다. 너비를 변경하거나 마크업에 의사 요소를 삽입하는 등 CSS를 통해 요소가 수정된 후 이러한 변경 사항은 DOM에서 즉시 발생하고 페이지에 반영됩니다.

간단히 말하면 HTML 태그를 통해 DOM을 구축한 다음, 페이지가 처음 로드될 때와 사용자가 페이지와 상호작용할 때 CSS를 사용하여 DOM을 수정하는 것입니다.

위 내용은 HTML의 마크업 및 문서 구조 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명