<div> </div> 문서의 디비전/섹션은 문서를 독립적이고 다른 부분으로 나누기 위해 정의 될 수 있습니다. <div> </div> 태그는 엄격한 조직 도구로 사용될 수 있으며 HTML 레이블과 표현 스타일을 분리한다는 아이디어가 포함 된 형식과 관련된 형식을 사용하지 않습니다. 실제 작업에서는 일반적으로 태그를보다 효과적으로 만들기 위해 <div> </div> 태그에 대한 ID 또는 클래스 속성을 지정합니다. <div> </div>는 블록 레벨 요소이며, 이는 콘텐츠가 자동으로 새 행을 시작 함을 의미합니다. 그리고 실제로 변화하는 것은 <div> 본질적으로 고유 한 형식입니다.
다음 HTML은 뉴스 웹 사이트의 구조를 시뮬레이션합니다. <div> </div> 태그의 각 쌍은 각 뉴스의 제목과 초록을 결합합니다. 즉, <div> </div> 문서에 추가 구조가 추가됩니다. 동시에이 <div> </div>는 동일한 유형의 요소에 속하기 때문에 클래스 = 뉴스 속성을 사용하여 이러한 <div> </div> 태그를 식별 할 수 있습니다 <div> </div> 형식.
<div class> <h2> 뉴스 헤드 라인 1 </h2> <p> 일부 텍스트. <H2> <H2> <H2> 뉴스 헤드 라인 2 </h2> <p> 일부 텍스트2. <Span> </span> 레이블
<Span> 태그는 문서의 선 요소를 결합하는 데 사용됩니다.
<span style = color : 빨간색> 참고 : </span>둘째, 블록 레벨 요소 및 라인 요소
블록 요소 및 -라인 요소/내부 관련 요소는 <div> </div> 및 </h1>과 같은 요소의 개념입니다. 이러한 요소는 콘텐츠, 즉 블록으로 표시되기 때문입니다. 반대로, <span> </span> 및 <strong> </strong>와 같은 요소는 컨텐츠가 한 줄, 즉 선 프레임으로 표시되기 때문입니다.
블록 레벨 요소와 리넨 요소의 개념은 고정되어 있지 않지만 상대적입니다. 요소의 디스플레이 속성 유형을 사용하여 생성 된 유형을 변경할 수 있습니다. 이는 디스플레이 속성을 차단하도록 설정하면 인라인 요소 (예 : <a> 요소)가 블록 레벨 요소처럼 보일 수 있음을 의미합니다. 인라인으로, 그리고 우리는 디스플레이 속성조차도 아무것도 설정하지 않으므로이 경우 프레임이 전혀없고 모든 내용이 표시되지 않으며 공간이 없습니다. 문서.
<div id = dv1 style = display : block> 나는 블록 레벨 요소입니다. </div> <div id = dv2 style = display : inline> 나는 줄입니다. </div> <div id = div3 style = display : none> 나는 보이지 않습니다 </div>셋째, <div> </div> 및 <span> </span> 비교
1. 마찬가지로 : <div> </div> 라벨과 <span> </span> 태그는 태그를 분류하는 데 사용되지만 실용적인 의미는 주로 애플리케이션 스타일 테이블에 사용됩니다.
2. 다른 점 : <div> </div> 레이블은 블록 레벨 요소이며 브라우저는 뱅크 레이블을 자동으로 추가합니다.
웹 레이아웃에서 같은 줄에 두 내용을 표시하려면 가장 쉬운 방법은 <span> </span> 태그로 포장하는 것입니다. 예를 들어, 한 페이지에는 두 개의 인접 요소가 있습니다. 하나는 <div> </div>이고 다른 페이지는 <span> </span>입니다. 같은 행에 표시하려면이 <div> </div>를 <span> </span>로 변경할 수 있습니다. 물론 CSS를 통해 다른 레이블의 디스플레이 속성을 인라인으로 설정하여 구현할 수도 있습니다.