html5 레이아웃 요소란 무엇입니까?

html5 레이아웃 요소에는 다음이 포함됩니다. 1. 웹 페이지의 헤드 콘텐츠를 정의합니다. 2. 탐색 요소 4. 기사 요소 6. 시간; 요소 8, 진행 요소 9. 미터 요소 등

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5에 추가된 몇 가지 새로운 레이아웃 구조 요소

1. 헤더 요소:

일반적으로 웹 페이지의 헤더에 사용되어 헤더의 영역 블록을 정의할 수도 있습니다. 콘텐츠는 독립적인 부분입니다.

<header>
    <h1>中国最大的搜索引擎</h1>
    <a href="http://www.baidu.com">百度</a>
    <nav>
        <ul>
            <li><a href="#">谷歌</a></li>
            <li><a href="#">火狐</a></li>
            <li><a href="#">360</a></li>
        </ul>
    </nav>
</header>

2. Footer 요소:

는 기본적으로 header 요소와 동일하지만 일반적으로 footer 요소는 웹 페이지의 하단 콘텐츠를 정의합니다.

<footer>
    <ul>
        <li>关于我们</li>
        <li>联系客服</li>
        <li>合作招商</li>
        <li>隐私政策</li>
    </ul>
</footer>

3 nav 요소는

를 사용할 수 있습니다. 탐색 모음, 디렉토리, 슈퍼 링크 등을 정의하려면 모든 연결 그룹을 탐색 요소에 넣을 필요는 없으며 기본 및 기본 연결 그룹만 탐색 요소에 넣으면 됩니다.

4.

는 독립 콘텐츠 블록을 정의하는 데 사용됩니다. 블로그, 기사 또는 독립 플러그인일 수 있으며 중첩될 수도 있고 플러그인을 나타낼 수도 있습니다. div 요소

<article>
    <header>
        <h1>Article元素</h1>
        <p>欢迎学习Article元素</p>
    </header>
    <footer>
        <p>这是底部</p>
    </footer>
</article>
<article>
    <h1>这是一个内嵌页面</h1>
    <object data="#" type="" width="600px" height="600px"></object>
</article>

5와 유사합니다. 섹션 요소:

는 청크를 강조할 페이지의 콘텐츠를 정의하는 데 사용됩니다. 일반적으로 명백히 독립적인 콘텐츠가 있는 페이지에 사용됩니다.

<article>
    <section>
        <h1>第一章：桃园三结义</h1>
        <p>桃园三结义最初是小说《三国演义》里记载的故事，述说当年刘备、关羽和张飞三位仁人志士，为了共同干一番大事业的目标，意气相投，
            言行相依，选在一个桃花盛开的季节、选在一个桃花绚烂的园林，举酒结义，对天盟誓，有苦同受，有难同当，有福同享，共同实现自己人生的美好理想。</p>
    </section>
    <section>
        <h1>第二章：</h1>
        <p>草船借箭是我国古典名著《三国演义》中赤壁之战的一个故事。借箭由周瑜故意提出(限十天造十万支箭)，机智的诸葛亮一眼识破是一条害人之计，
            却淡定表示“只需要三天”。后来，有大雾天帮忙，诸葛亮再利用曹操多疑的性格，调了几条草船诱敌，终于借足十万支箭，立下奇功。</p>
    </section>
</article>

6. side 요소:

• 는 일반적으로 사이드바를 설정하는 데 사용됩니다.

  
  

• 참고 자료, 용어 설명 등과 같은 주요 콘텐츠에 대한 보조 정보로 기사 요소 내부에 중첩하여 사용할 수도 있습니다.

• 다음과 같은 경우 기사 요소 외부에 콘텐츠를 정의할 수도 있습니다. 내용은 Article 요소와 일치합니다. 내용은

<article class="film_review">
    <header>
        <h2>侏罗纪公园</h2>
    </header>
    <section class="main_review">
        <p>Dinos were great!</p>
    </section>
    <section class="user_reviews">
        <article class="user_review">
            <p>Way too scary for me.</p>
            <footer>
                <p>
                    Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
                </p>
            </footer>
        </article>
        <article class="user_review">
            <p>I agree, dinos are my favorite.</p>
            <footer>
                <p>
                    Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
                </p>
            </footer>
        </article>
    </section>
    <footer>
        <p>
            Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
        </p>
    </footer>
</article>

과 연결됩니다. 7. 시간 요소:

• 은 24시간 내의 특정 시간 또는 날짜를 나타내며 시간에 시차가 있을 수 있음을 나타냅니다.

• datetime 속성의 날짜는 시간과 동일합니다. 시간은 "T" 텍스트로 구분해야 하며 "z"는 UTC 표준 시간을 나타냅니다.

• pubbdate 속성은 검색 엔진이 날짜를 쉽게 식별할 수 있도록 하는 선택적 태그입니다. 기사 및 뉴스 발행일

<section>
    <time datetime="2019-4-27">2019-4-27</time>
    <time datetime="2019-4-27T20:00">2019-4-27</time>
    <time datetime="2019-4-27T20:00Z">2019-4-27</time>
    <time datetime="2019-4-27+09:00">2019-4-27</time>
</section>

8. 진행률 및 미터 요소:

• 진행률 요소: 일반적으로 JavaScript와 함께 사용되는 진행률 표시줄을 만드는 데 사용되는 HTML5의 새로운 요소입니다. 작업 진행 상황 표시

• meter 요소: 예 HTML5의 새로운 요소로, 일반적으로 JavaScript

<form action="">
    <!--max:规定当前进度条的最大值 ； value属性：设定进度条当前显示的默认值  form：规定进度条所属的一个或多个表单-->
    <p>当前下载进度：</p>
    <progress value="30" max="100">

    </progress>

    <meter value="40" max="100" min="10">

    </meter>
</form>

와 함께 사용되는 가중치 및 측정 값의 평가를 나타내는 측정 막대를 만드는 데 사용됩니다. "

html 비디오 튜토리얼"

위 내용은 html5 레이아웃 요소란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!