Html 요소의 기본 요소에 대한 설명

이 글은 IT육성원에서 일정기간 공부하고 리뷰한 후 쓴 글입니다. 비록 기본적인 지식 내용이지만 모든 분들께 도움이 되었으면 좋겠습니다.

먼저 HTML의 정의가 무엇인지 이해해야 합니까?

HTML DOM 노드

HTML DOM(문서 개체 모델)에서는 모든 부분이 노드입니다.

문서 자체는 문서 노드입니다.

모든 HTML 요소는 요소 노드입니다.

모든 HTML 속성은 속성 노드입니다

HTML 요소 내부의 텍스트는 텍스트 노드입니다.

댓글은 주석 노드입니다.

Element 객체

HTML DOM에서 Element 객체는 HTML 요소를 나타냅니다.

Element 개체는 요소 노드, 텍스트 노드 및 주석 노드 유형의 하위 노드를 가질 수 있습니다.

NodeList 개체는 HTML 요소의 하위 노드 컬렉션과 같은 노드 목록을 나타냅니다.

요소에는 속성도 있을 수 있습니다. 속성은 속성 노드입니다.

[html: 하이퍼텍스트 태그 언어, 텍스트: txt 형식의 파일, 태그: 태그 쌍 을 사용하여 텍스트에 의미론 을 추가]

위 내용을 통해 이미 html에 대한 이해가 있으시다면, 세 가지 요소에 대한 작업을 시작하세요.

블록 수준 요소, 인라인 요소 및 인라인 블록 요소

몇 가지 대중적인 과학 배경: HTML 레이아웃: 문서 흐름, 부동, 위치 위치 지정 및 표시: 유연한 탄력성 레이아웃.

처음 등장한 문서 흐름을 기반으로 일부 요소에는 원래 의미가 부여됩니다.

Block: 블록 수준 요소 는 한 줄만 차지하며 너비와 높이를 설정할 수 있습니다. 너비가 지정되지 않으면 블록 수준 요소는 기본적으로 브라우저 너비로 설정됩니다. 100% 너비입니다.

인라인 : 인라인 요소: 여러 레이블이 한 줄에 존재할 수 있지만 너비 및 높이 속성 값은 적용되지 않습니다. 너비와 높이는 전적으로 요소에 따라 달라집니다. 내용!

Inline-block: Inline-block 요소: 인라인과 블록 수준의 핵심 요소를 결합하여 너비와 높이를 설정할 수 있을 뿐만 아니라 여러 레이블을 한 줄에 표시할 수 있습니다.

(div, p, ul, li) 컨테이너: 블록 수준 요소

기본 속성은 앞뒤에
줄 바꿈을 추가하는 것입니다.

(Span, img, input, a) 텍스트: 인라인 요소
태그에는 의미가 없으며, 기능: 속성을 개별적으로 설정할 수 있습니다.

마스터할 몇 가지 주요 요소를 제공합니다. 동시에, 관객들이 이러한 내용을 더 쉽게 이해하고 기억할 수 있다고 믿습니다. 아직 마음 속에 그 모습이 형성되지 않았다면. 기본적으로 텍스트 단락이 왼쪽에서 오른쪽, 위에서 아래로 한 줄씩 정렬되어 있는지 확인하려면 단어 문서를 참조할 수 있습니다. 테이블이 행 1개와 열 2개를 추가하든, 행 1개와 열을 여러 개 추가하든, 기본값은 A4 용지 전체를 덮는 것입니다. 이 시점에서는 모든 사람이 그것을 기억할 수 있어야 합니다.

개념과 표현이 언급되었지만 의미를 이해할 뿐만 아니라 실제적인 방식으로 사용해야 합니다.

먼저 inline에 대해 이야기해 보겠습니다. text와 img는 오른쪽에 위치해야 하며, 이는 단어 편집기의 6개 위치와 정확히 같습니다. 웹 페이지 설정에서는 Text-align: center가 자주 사용됩니다.

하나씩 설명하지는 않겠습니다. 내부 성경은 다음과 같습니다.

Text-align: 부모 상자 태그에 설정되어 상자의 인라인 요소를 지정합니다( 텍스트 또는 img 라벨)이 중앙에 표시됩니다.

Line-height: 텍스트의 줄 상자 높이(줄 높이)를 나타냅니다. (상단, 하단 간격 및 텍스트 높이)로 구성

컨테이너 높이 = 라인 상자 높이라는 수직 원칙을 구현합니다. 기본 텍스트 높이는 16px입니다. 컨테이너 높이=line-height=200px로 설정하면 상단 및 하단 간격이 자동으로 184px로 나누어집니다.

Margin: 0 auto: 상자 라벨 에 중앙에 위치하도록 설정되어 있습니다. 일반적으로 상자 너비도 설정해야 합니다.

vertical-align:middle: 두 개의 인라인 요소 태그에 설정되어 두 개의 인라인 요소와 마지막 인라인 요소 이전의 인라인 요소가 서로 수직으로 정렬됩니다.

Tex-align과 line-height는 텍스트 줄을 수직으로 가운데 정렬하기 위해 함께 사용되는 경우가 많습니다.

Vertical-align:middle은 텍스트와 이미지의 수직 정렬에 자주 사용됩니다.

Vertical-align 이 속성을 주의 깊게 연구하려면 새로운 콘텐츠를 많이 포함해야 합니다. 사실 우리는 그의 베이스라인, 미드라인, 탑라인을 이해할 필요는 없습니다.

말해야 할 것이 한 가지 더 있습니다.

vertical-align은 인라인 블록 종속 요소입니다. 인라인 블록 요소가 아닌 경우 무시됩니다. 일부 요소는 기본적으로 이를 지원합니다: 그림, 버튼, 단일 확인란, 한 줄/여러 줄 텍스트 상자 및 기타 HTML 컨트롤

위 내용은 Html 요소의 기본 요소에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.