HTML5 기사와 섹션의 차이점에 대한 자세한 소개

黄舟
풀어 주다: 2018-05-15 15:49:45
원래의
2887명이 탐색했습니다.

컨텐츠 블록은 HTML 페이지를 논리적으로 구분하는 단위를 말합니다. 페이지 웹사이트의 경우 탐색 메뉴, 기사 텍스트, 기사 댓글 등 각 부분을 콘텐츠 블록이라고 부를 수 있습니다.
Article 요소
Article 요소는 외부에서 독립적으로 참조할 수 있는 문서, 페이지 또는 애플리케이션의 독립적이고 완전한 콘텐츠를 나타냅니다. 블로그나 신문 기사, 포럼 게시물, 사용자 댓글, 독립형 플러그인 또는 기타 독립형 컨텐츠일 수 있습니다. 콘텐츠 외에도 기사 요소에는 일반적으로 자체 제목(보통 헤더 요소 내부에 위치)이 있으며 때로는 자체 각주도 있습니다.

<article>      
<header>             
<h1>标题</h1>           
<p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>  
</header>
  <p>article的使用方法</p>        
  <footer>            
  <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>  
  </footer>
  </article>
로그인 후 복사

참고: article 요소는 중첩될 수 있으며 내부 콘텐츠는 원칙적으로 , 외부 콘텐츠와 관련이 있어야 합니다. 예를 들어, 블로그 게시물에서 기사에 대한 댓글은 기사 요소를 사용하여 중첩될 수 있습니다. 댓글을 표시하는 데 사용되는 기사 요소는 전체 콘텐츠를 나타내는 기사 요소에 포함됩니다.
중첩된 코드는 다음과 같습니다.

<article>

  <header>
            <h1>article元素使用方法</h1>
    <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
  </header>

  <p>此标签里显示的是article整个文章的主要内容,,下面的section元素里是对该文章的评论</p>
      
  <section>
            <h2>评论</h2>
    <article>
                  <header>
        <h3>发表者:maizi</h3>
        <p><time pubdate datetime="2016-6-14">1小时前</time></p>
      </header>  
      <p>这篇文章很不错啊,顶一下!</p>
           </article> 
    <article>
                  <header>            
        <h3>发表者:小妮</h3>
                        <p><time pubdate datetime="2016-6-14T:21-26:00">1小时前</time></p>
      </header>
    <p>这篇文章很不错啊,对article解释的很详细</p>  
    </article>
      </section>
</article>
로그인 후 복사

샘플 내용은 여러 부분으로 나누어져 있으며, 기사 제목은 헤더 요소에 배치됩니다. 기사 본문은 header 요소 뒤의 p 요소에 배치되며, section 요소는 텍스트와 댓글을 구분합니다(페이지에서 내용을 구분하는 데 사용되는 차단 요소입니다). section 요소에는 댓글의 내용이 포함됩니다. 댓글의 각 요소 휴먼 댓글은 상대적으로 독립적이고 완전하므로 모두 기사 요소를 사용합니다. 댓글의 기사 요소는 제목 요소와 댓글 내용 부분으로 나누어 각각 헤더 요소와 p 요소에 배치됩니다. .
1. 섹션 요소는 웹사이트나 애플리케이션에서 페이지의 내용을 나누는 데 사용됩니다. 섹션 요소의 기능은 페이지의 내용을 다음과 같이 나누는 것입니다. 기사를 섹션으로 나누는 경우

2. 섹션 요소는 일반적으로 내용과 제목으로 구성됩니다. . 제목이 없는 콘텐츠에는 일반적으로 섹션 요소를 사용하지 않는 것이 좋습니다.

3. 섹션 요소는 콘텐츠에 필요한 일반적인 컨테이너 요소가 아닙니다. 직접 스타일 지정 또는 스크립트를 통해 동작 을 정의할 때 섹션 요소 대신 p를 사용하는 것이 좋습니다. 기사, 탐색, 옆 요소가 모두 충족되는 경우 특정 조건이 충족되면 섹션 요소를 사용하여 정의하지 마세요. 5. 섹션 요소의 내용은 데이터베이스에 별도로 저장하거나 워드 문서로 출력할 수 있습니다.

 <section>
    <h1>section元素的</h1>标题
    <p>section区块的主题部分</p>
  </section>
로그인 후 복사
HTML5에서는 탐색 모음, 메뉴, 저작권 표시 등 모든 페이지의 하위 부분을 결합할 수 있습니다. 장식을 위해 CSS 스타일을 균일하게 사용할 수 있도록 페이지에서 통합됩니다. 마지막으로 섹션 요소 사용에 대한 금기사항을 정리하면 다음과 같습니다.

1) 섹션 요소를 스타일 설정을 위한 페이지 컨테이너로 사용하지 마세요. 이것이 바로 p 요소의 역할입니다. 2) 기사 요소, 옆 요소 또는 탐색 요소가 사용하기에 더 적합한 경우 섹션 요소를 사용하지 마십시오. 3) 제목이 없는 콘텐츠 블록에는 섹션 요소를 사용하지 마세요. 3. 둘의 차이점:

위에서도 설명했지만 둘의 차이점은 무엇인가요? 실제로 HTML5에서 기사 요소는 섹션 요소보다 독립성을 더 강조한 특별한 형태의 섹션 요소라고 볼 수 있다. 즉, 섹션 요소는 분할이나 청킹을 강조하는 반면, 기사는 독립성을 강조합니다. 구체적으로 내용이 상대적으로 독립적이고 완전한 경우에는 Article 요소를 사용하고, 내용을 여러 단락으로 나누고 싶은 경우에는 section 요소를 사용하는 것이 좋습니다. 또한 HTML5에서는 p 요소가 컨테이너가 되며 CSS 스타일을 사용할 경우 이 컨테이너에 전체 CSS 스타일을 적용할 수 있습니다.

위 내용은 HTML5 기사와 섹션의 차이점에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿