HTML5 의미 체계 마크업 섹션 및 기사 예제에 대한 자세한 설명-H5 튜토리얼-php.cn

HTML5 의미 체계 마크업 섹션 및 기사 예제에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-06-16 11:01:11

원래의

1785명이 탐색했습니다.

HTML5는 일련의 새로운 요소를 제공하며 앞으로 널리 사용될 것입니다. 그러나

및

이라는 두 가지 새로운 요소를 포함하여 사용하기 혼란스러울 수 있는 몇 가지 요소가 있습니다.

가장 자주 묻는 질문은 다음과 같습니다. 어떤 상황에서 이러한 요소를 사용해야 합니까? 그리고 이러한 요소들을 어떻게 올바르게 사용해야 할까요?

Section 요소

가장 모호한 요소입니다.

요소와 어떻게 다른가요? 단락을 나누기 위해

를 사용해왔는데,

외에 언제 이 요소를 사용합니까? 이를 설명하기 위해 공식 문서를 인용합니다. WHATWG 문서에 따르면

요소는 다음과 같이 설명됩니다.

요소는 문서 또는 애플리케이션의 공통 단락을 나타냅니다. WHATWG"

설명에서 < section> 요소의 역할은

와 유사하게 분할하는 것입니다. 하지만 여전히 특별한 경우가 있습니다. 문서에는 다음과 같은 특별한 설명이 추가됩니다.

"요소가 스타일이나 스크립트 편의를 위해서만 사용되는 경우 작성자는

를 사용하는 것이 좋습니다.

요소는 요소의 콘텐츠가 적합할 때 적합합니다. - WHATWG"

이를 바탕으로 다음 두 가지 사항을 요약할 수 있습니다.

첫째, 섹션 요소는 기술적으로 스타일을 지정할 수 있지만 복잡한 스타일이나 스크립트가 있는 경우에는 여전히 사용하는 것이 좋습니다. p 요소.

두 번째로

요소와 유사하게 섹션 요소는 콘텐츠를 나열하는 데 사용됩니다.

실제 예에서

요소를 사용하는 이유는 블로그의 콘텐츠를 구조화하기 위한 것입니다.

<p class="blog">  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
</p>

로그인 후 복사

이것은 단지 예일 뿐이며

다른 목적으로 사용될 수 있습니다.

기사 요소

이름에서 이미 잘 설명되어 있지만 공식 문서에서 어떻게 설명하는지 살펴봐야 합니다.

"문서, 페이지, 애플리케이션 또는 사이트의 독립적인 요소이며 일반적으로 는 게시할 때 개별적으로 재배포하거나 재사용할 수 있습니다. 이는 포럼 게시물, 잡지 또는 뉴스 항목, 블로그 항목, 사용자가 제출한 댓글, 대화형 위젯 또는 위젯 또는 기타 독립 프로젝트의 콘텐츠일 수 있습니다. . "

위 설명에서

요소는 특히 블로그, 페이지 콘텐츠 또는 포럼 게시물과 같이 게시하려는 기사에 사용된다는 결론을 내릴 수 있습니다.

다음 예에서는

을 사용하여 블로그 기사를 작성하는 방법을 보여줍니다.

<article class="post">  
    <header>  
    <h1>This is Blog Post Title</h1>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oatnbon. Gummies   
        halvah gummies danish biscuit applicak   
        cake tootsie roll sesame snaps lollipop gingerbread boe gingerbread jelly-o pastry.  
    </p>  

</article>

로그인 후 복사

또한 필요한 경우

요소를 사용하여 아래 예와 같이 기사를 여러 단락으로 나눌 수도 있습니다.

<article class="post">  
    <header>  
    <h1>This is Blog Post Title</h1>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        <section>  
        <h2>This is the Sub-Heading</h2>  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake   
        tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah   
        gummies danish biscuit applicake gingerbread jelly-o pastry.  
        </section>  

        <section>  
        <h3>This is another Sub-Heading</h3>  
        Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops  
        toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate  
        cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.   
        Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. 
        Powder croissant jelly beans pastry.  
        </section>  
    </p>  

</article>

로그인 후 복사