HTML 프로그래밍의 마크업과 문서 구조

高洛峰

풀어 주다： 2017-02-27 10:48:24

원래의

1203명이 탐색했습니다.

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

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

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

1. 태그 폐쇄

내용을 포함하는 각 요소(제목, 문단, 그림 등)에는 포함된 내용이 텍스트인지 여부에 따라 레이블을 지정하는 두 가지 방법, 하나는 닫는 태그를 사용하는 것이고 다른 하나는 닫는 태그를 사용하는 것입니다.

1.1 텍스트에 닫는 태그 사용

예:

Hello, CSS!

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

예: This is my dog.

팁:
자체 닫는 태그의 경우 XHTML에서는 다음과 같이 작성해야 합니다.

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

로그인 후 복사

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

XML/HTML 코드클립보드에 콘텐츠 복사

< img src="images/dog.jpg" alt="이것은 내 강아지입니다." >

2. 속성

팁: 시각 장애가 있는 사용자가 사용하는 스크린 리더는 소리내어 읽어보세요 alt 속성의 내용이므로
태그의 alt 속성에 사람들이 한눈에(혹은 한눈에) 이해할 수 있는 내용을 꼭 추가해주세요.

3. 제목과 문단
4. 복합 요소

HTML은 제목, 그림, 문단 등 기본적인 콘텐츠 태그를 지정하는 것뿐만 아니라 생성 요소도 지정합니다. 목록,
테이블, 양식과 같은 복잡한 사용자 인터페이스 구성 요소를 위한 태그입니다. 이는 소위 복합 요소입니다. 즉, 여러
태그로 구성됩니다.

5. 중첩 태그

간단히 말하면 하나의 태그를 다른 태그 안에 중첩하는 것입니다.
6.HTML5 템플릿

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

로그인 후 복사

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

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

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

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

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

알아야 할 두 가지 사항:

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

인라인 요소 상자는 내용물을 최대한 단단히 수축 포장합니다.
HTML 프로그래밍의 마크업과 문서 구조

7. 중첩된 요소

마크업에 중첩된 요소는 HTML 태그이고 화면에 중첩된 요소는 상자입니다.
8. 문서 개체 모델

문서 객체 모델(DOM)은 브라우저의 관점에서 페이지의 요소와 각 요소의 속성을 관찰하여 해당 요소의 가계도를 얻습니다. DOM을 통해 요소 간의 상호 관계를 결정할 수 있습니다. CSS의 DOM
에서 특정 위치를 참조하여 해당 HTML 요소를 선택하고 스타일 속성을 수정할 수 있습니다.

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

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

HTML 프로그래밍 마크업 및 문서 구조와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!