HTML5의 새로운 구조 요소는 무엇입니까? HTML5의 새로운 구조 요소 사용(권장)-H5 튜토리얼-php.cn

HTML5의 새로운 구조 요소는 무엇입니까? HTML5의 새로운 구조 요소 사용(권장)

寻∝梦

풀어 주다： 2018-08-14 16:22:59

원래의

5957명이 탐색했습니다.

HTML5의 새로운 구조는 무엇이며 어떻게 사용할 수 있나요? 이 글에서 자세히 설명하겠습니다.

HTML5 새로운 주요 구조 요소:

article 요소
section 요소
nav
aside 요소
time 요소
pudate 속성

자세한 설명

요소 중:

article 요소

삽입 가능하고 플러그인을 나타낼 수 있음

<article>
            <h1>这是一个内嵌页面</h1>
            <object>
                <embed src="#" width = "600"  height = "400"</embed>
            </object>
        </article>

로그인 후 복사

section 요소

제목 없이 섹션 요소를 사용하는 것은 일반적으로 권장되지 않습니다.

article과 혼동하지 마세요. 요소

요약: 섹션 요소를 스타일 설정을 위한 페이지 컨테이너로 사용하지 마세요

기사, 옆, 탐색 요소가 사용하기에 더 적합하다면 섹션 요소를 사용하지 마세요

제목 내용이 없는 경우 , 페이지에 섹션 요소

nav

를 사용하지 마세요. 탐색 요소가 다른 페이지나 현재 페이지의 다른 부분에 연결되어 있는 연결된 탐색 그룹입니다. 기본 및 기본 연결 그룹을 nav 요소에 넣기만 하면 됩니다.

응용 시나리오:

기존 탐색 모음
사이드바 탐색
페이지 내 탐색
페이지 넘기기 작업

마 HTML5에서 nav 요소 대신 메뉴 요소를 사용하지 마세요

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href = "#">主页</a></li>
                <li><a href = "#">开发文档</a></li>
            </ul>
        </nav>
        <article>
            <header>
                <h1>html5和css3的历史</h1>
                <nav>
                    <ul>
                        <li><a href = "#">HTML5历史</a></li>
                        <li><a href = "#">CSS3历史</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <h1>HTML5历史</h1>
                <p>....</p>
            </section>
            <section>
                <h1>css3历史</h1>
                <p>....</p>
            </section>
            <footer>
                <a href = "#">删除</a>
                <a href = "#">修改</a>
            </footer>
        </article>
        <footer>
            <p><small>版权声明：</small></p>
        </footer>
    </body>
</html>

로그인 후 복사

aside 요소

현재 페이지 또는 텍스트의 보조 정보 부분을 나타냅니다.

이전 참조, 사이드바, 탐색, 탐색 모음 등을 포함합니다.

<html>
    <head>
        <meta charset="UTF-8">
        <title>aside元素</title>
    </head>
    <body>
        <header>
            <h1>js入门</h1>
        </header>
        <article>
            <h1>语法</h1>
            <p>文章的正文。。。。。。</p>
            <aside>
                <h1>名词解释</h1>
                <p>这是一个对语言来说很重要的内容体</p>
            </aside>
        </article>
        <aside>
            <nav>
                <h2>评论</h2>
                <ul>
                    <li><a href = "#">2015-3-10</a></li>
                    <li><a href = "#" >大牛：真希望可以好好的学习一下</a></li>
                </ul>
            </nav>
        </aside>
    </body>
</html>

로그인 후 복사

시간 요소

24시간

<html>
    <head>
        <meta charset="UTF-8">
        <title>Time元素</title>
    </head>
    <body>
        <time datatime = "2017-10-09">2017-10-09</time>
        <time datatime = "2017-10-09T20:00">2017-10-09</time>
        <time datatime = "2017-10-09T20:00Z">2017-10-09</time>
        <time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time>
    </body>
</html>

로그인 후 복사

pudate 속성

<html>
    <head>
        <meta charset="UTF-8">
        <title>update属性</title>
    </head>
    <body>
        <article>
            <header>
                <h1>苹果</h1>
                <p>发布日期
                <time datetime="2017-10-09" pubudate>2015-10-09</time></p>
                <p>舞会时间
                <time datetime ="2015-10-09">2015-10-09</time></p>
            </header>
        </article>
    </body>
</html>

로그인 후 복사

【관련 권장사항】

html 기본 요소, HTML을 처음부터 배울 수 있음

HTML이란 무엇인가 파일? HTML 파일에 대한 사전 이해

위 내용은 HTML5의 새로운 구조 요소는 무엇입니까? HTML5의 새로운 구조 요소 사용(권장)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!