HTML의 div와 범위 비교-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML의 div와 범위 비교

墨辰丷

Jun 04, 2018 pm 03:10 PM

html span 차이

이 글에서는 HTML에서 div와span의 비교를 주로 소개하고, p와span의 사용법과 비교에 대해 각각 소개합니다.

1. ;span>

Tag

태그는 파티션 또는 섹션(pision/section)을 정의할 수 있습니다. 문서에서 문서를 독립적이고 다른 부분으로 나눕니다.

태그는 엄격한 구성 도구로 사용될 수 있으며 HTML 마크업과 프리젠테이션 스타일을 분리하는 아이디어가 포함된 관련 서식을 사용하지 않습니다. 실제 작업에서는 일반적으로 태그를 더 효과적으로 만들기 위해

태그에 id 또는 class 속성을 지정합니다.

는 블록 수준 요소입니다. 즉, 내용이 자동으로 새 줄에서 시작됩니다. 그리고 실제로 줄바꿈은

에 고유한 유일한 형식 지정 동작입니다.

다음 HTML은 뉴스 웹사이트의 구조를 시뮬레이션합니다. 각

태그 쌍은 각 뉴스 항목의 제목과 요약을 결합합니다. 즉,

동시에 이러한

는 동일한 유형의 요소에 속하므로 class="news" 속성을 사용하여 이러한

태그를 식별할 수 있습니다.

만 제공하고

형식을 지정하기 위한 추가 스타일 사용을 용이하게 합니다.

     <p class="news">
         <h2>
             News headline 1</h2>
         <p>
             some text. some text. some text...</p>
         ...
     </p>
     <p class="news">
        <h2>
             News headline 2</h2>
         <p>
             some text. some text. some text...</p>
        ...
     </p>

로그인 후 복사

2. 태그

태그는 문서의 인라인 요소를 그룹화하는 데 사용됩니다.

  <span style="color: Red">注意：</span>

로그인 후 복사

2. 블록 수준 요소와 인라인 요소

블록 수준 요소(블록 요소)와 인라인 요소/인라인 요소(인라인 요소)는

과 같은 요소는 종종 블록 수준 요소라고 합니다. 이는 이러한 요소가 콘텐츠 블록, 즉 "블록 상자"로 나타나기 때문입니다. 반면에 및 과 같은 요소는 해당 콘텐츠가 "인라인 상자"라는 한 줄에 나타나기 때문에 "인라인 요소"라고 합니다.

블록 수준 요소와 인라인 요소의 개념은 고정된 것이 아니라 상대적입니다. 요소의 표시 속성을 사용하여 생성된 상자 유형을 변경할 수 있습니다. 즉, 표시 속성을 block으로 설정하여 인라인 요소(예: 요소)가 블록 수준 요소처럼 작동하도록 할 수 있으며, 표시를 인라인 또는 짝수로 설정하여 생성된 요소를 인라인 요소로 만들 수도 있습니다. 요소에 상자가 전혀 없도록 표시 속성을 없음으로 설정할 수 있습니다. 이 경우 상자와 모든 내용이 더 이상 표시되지 않으며 문서에서 공간을 차지하지 않습니다.

     <p id="dv1" style="display: block">
         我是一个块级元素。
     </p>
     <p id="dv2" style="display: inline">
         我是一个行内元素。
     </p>
     <p id="p3" style="display: none">
         我是不可见的
     </p>

로그인 후 복사

1. 유사점:

span> 태그는 간격을 나누는 데 사용되지만 실제 의미는 없습니다. 둘 다 주로 스타일 시트를 적용하는 데 사용됩니다.

2. 차이점:

태그는 블록 수준 요소이며, 브라우저는 자동으로 태그를 추가합니다. 인라인 요소이며 그 앞과 뒤에 개행 태그가 자동으로 추가되지 않습니다.

웹 페이지 레이아웃에서 두 개의 콘텐츠를 같은 줄에 표시하려는 경우 가장 간단한 방법은 해당 콘텐츠를 태그로 묶는 것입니다. 예를 들어, 페이지에는 두 개의 인접한 요소가 있는데, 하나는

이고 다른 하나는 입니다. 같은 줄에 표시하려면

를 으로 변경하세요. 물론 이는 CSS를 통해

와 같은 태그의 표시 속성을 인라인으로 설정함으로써 달성될 수도 있습니다.

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.