html 블록 요소와 인라인 요소에 대한 자세한 소개-HTML 튜토리얼-php.cn

원문은 여기

블록레벨 요소의 분류 블록레벨 요소는 구조적 적용 여부와 내용적 적용 여부에 따라 구조화된 블록 요소, 터미널 블록 요소, 멀티 타겟 블록 요소의 세 가지 유형으로 구분됩니다. 1. 구조화된 블록 요소 이러한 유형의 요소는 문서를 구조화하는 데 사용됩니다. 좋은 문서 구조는 검색 엔진 및 기타 기술(예: JavaScript )에 매우 유용합니다. 의미론적인 의미는 없습니다. 문서의 구성만 정의할 뿐 문서의 내용을 반영하지는 않습니다. 기본 구조적 블록 요소 * *

* * 지원 구조적 요소 * &lt ;li> * * * * * 2. 터미널 블록 요소 이 유형의 요소는 구조에서 내용으로 이동하는 데 사용되며 의미적 의미를 가질 수 있습니다. . 터미널 블록 요소는 구조의 끝에 속하며 다른 블록 수준 요소는 포함할 수 없으며 텍스트 또는 라인 수준 요소만 포함할 수 있습니다. 터미널 블록 요소 * ... * * 다목적 블록 요소는 구조화된 방식으로 사용될 때 구조적 의미를 가지며, 터미널 형식으로 사용될 때 의미론적 의미를 갖습니다. 다중 대상 블록 요소에는 블록 요소나 콘텐츠(텍스트와 줄 수준 요소의 조합이 콘텐츠임)가 포함될 수 있지만 동시에 둘 다 포함될 수는 없습니다. 콘텐츠는 블록 요소에 배치되어야 합니다. 블록 요소는 줄 수준 요소와 텍스트의 형제 요소로 사용되어서는 안 됩니다. HTML 유효성 검사기의 한계로 인해 현재 이러한 상황을 감지할 수 있는 방법은 없지만 피해야 합니다. 다중 대상 블록 요소 * * * > * CSS 레이아웃에 관해 이야기할 때 미리 알아야 할 것이 있습니다. 다양한 HTML 태그/요소의 경우 블록 수준에서 분류할 수 있습니다: 블록(블록 요소) 또는 인라인( 인라인 요소 ): 블록 요소의 특성: * 항상 시작 새 줄에서 * 높이, 줄 높이, 위쪽 및 아래쪽 여백을 모두 제어할 수 있습니다. * 너비가 설정되지 않은 경우 너비는 기본적으로 해당 컨테이너의 100%로 설정됩니다. 인라인 요소의 특징: * 다른 요소는 같은 줄에 있습니다. * 높이, 줄 높이, 위쪽 및 아래쪽 여백은 변경할 수 없습니다. * 너비는 텍스트 또는 이미지입니다. 수용 가능 너비는 변경할 수 없습니다. 그 속성과 적용은 아래에 자세히 설명되어 있습니다. ◎블록 요소(블록 요소)는 일반적으로 다른 요소의 컨테이너로 사용되며 인라인 요소 및 기타 블록 요소를 수용할 수 있습니다. 기본적으로 블록 요소는 한 번에 새로운 줄로 아래쪽으로 정렬된다는 것을 알고 있습니다. CSS로 스타일을 제어하면 이 기본 레이아웃 모드를 변경하고 원하는 위치에 블록 요소를 배치할 수 있습니다. 테이블 태그도 테이블 테이블 을 기반으로 하고 CSS+p를 기반으로 하는 레이아웃은 페이지 로딩 속도의 차이 외에 일종의 블록 요소라는 점에 유의해야 합니다. 모든 콘텐츠 요소의 테이블 로드 완료 후 표시됨), 다른 차이점은 없습니다. 그러나 페이지의 소스코드를 보면 그 차이가 매우 크다. 좋은 구조라는 개념을 바탕으로 설계된 CSS 레이아웃 소스 코드는 최소한 웹 개발 경험이 없는 사용자도 연속적인 페이지 콘텐츠를 쉽게 찾을 수 있도록 해줍니다. 이러한 관점에서 CSS 레이아웃 코드는 더 나은 미적 경험을 제공해야 합니다. 모듈형 의 p를 상자로 상상한 다음 원하는 대로 배열하여 완전한 콘텐츠를 구성할 수 있습니다. 웹 레이아웃 디자인도 동일한 패턴을 따릅니다. 블록 요소(block 요소) HTML 태그 카테고리 세부정보 * 주소 - 주소 * blockquote - 블록 quote * center - 센터 정렬 블록 * dir - 디렉토리 목록 * p - 일반적으로 사용되는 블록 수준이 쉬우며 CSS 레이아웃의 기본 태그이기도 합니다. * dl - 정의 목록 * 필드 set - 양식 제어 그룹 * 양식 - 대화형 양식(다른 블록 요소를 수용하는 데에만 사용할 수 있음) * h1 - 큰 제목 * h2 - 자막 * h3 - 레벨 3 제목 * h4 - 레벨 4 제목 * h5 - 레벨 5 제목 * h6 - 레벨 6 제목 * hr - 가로 구분선 * isindex - 입력 프롬프트 * 메뉴 - 메뉴 목록 * noframes - 프레임 선택적 콘텐츠, (프레임을 지원하지 않는 브라우저의 경우 이 블록 콘텐츠 표시) * noscript - 선택적 스크립트 콘텐츠(스크립트를 지원하지 않는 브라우저의 경우 이 콘텐츠 표시) * ol - 정렬 형식 * p - 문단 * 미리 서식이 지정된 텍스트 * table - 표 * ul - 정렬되지 않은 목록 ◎인라인 요소는 일반적으로 기본 요소를 기반으로 합니다. 의미 수준에서는 텍스트 또는 기타 인라인 요소만 수용할 수 있습니다. 블록과 인라인의 차이점을 명확하게 보여주기 위해 각각의 대표 요소 p와 범위의 데모를 사용하여 설명할 수 있습니다. XXXXXXXXX 이것은 a p 레이아웃 XXXXXXXXX p는 새 줄에서 시작하며 그 모양은 내부 텍스트의 영향을 받지 않습니다. XXXXXXXXX이것은 스팬 레이아웃입니다XXXXXXXXX 모든 요소는 한 줄에 있고, 스팬에는 텍스트만 포함됩니다. 인라인 요소( 인라인 요소) HTML 태그 분류 내용 * a - anchor * abbr - 약어 * acronym - 첫 번째 단어 * b - 굵게(권장하지 않음) * bdo - bidi 재정의 * big - 큰 글꼴 * br - 줄 바꿈 * cite - quote * code - 컴퓨터 코드(소스 코드를 인용할 때 필요) * dfn - 정의 필드 입력 - 입력 상자 * kbd - 키보드 텍스트 정의 * 레이블 - 테이블 레이블 * q - 짧은 따옴표 * s - 밑줄(권장하지 않음) * samp - 정의 예 컴퓨터 코드 * 선택 - 항목 선택 * 작게 - 작은 글꼴 텍스트 * 범위 - 일반적으로 사용되는 인라인 컨테이너, 텍스트 내의 블록을 정의 * 취소 - 밑줄 * 강 - 굵은 강조 * sub - subscript * sup - 위 첨자 * textarea - 여러 줄 텍스트 입력 상자 * tt - 텔렉스 텍스트 * u - 밑줄 * var - 변수 정의 ◎가변 요소는 위 두 가지를 기반으로 하며 환경에 따라 변화합니다. 기본 개념 은 컨텍스트에 따라 해당 요소가 블록 요소인지 인라인 요소인지 결정하는 것입니다. 카테고리가 결정되면 블록 또는 인라인 요소에 대한 규칙을 따릅니다. 가변요소 HTML 태그 분류 내용 * applet - java applet * 버튼 - 버튼 * del - 삭제 text * iframe - 인라인 프레임 * ins - 삽입된 텍스트 * map - 이미지 블록(map) * object - object object * script - 클라이언트 스크립트 그러나 CSS를 통해 위 표의 HTML 태그 분류 제한을 없애고 다양한 태그/요소에 필요한 속성을 자유롭게 적용할 수 있습니다. 예를 들어, 블록 요소 [ul] 태그에 display:inline 속성을 추가하여 원래 수직 목록을 수평으로 표시할 수 있습니다. 이는 블로그 탐색 막대를 설정할 때 널리 사용됩니다. 인라인 요소 [cite]에는 display:block과 같은 속성을 추가하여 매번 새 줄에서 시작하는 속성도 갖습니다.

*
> *