HTML5 の新しい構造要素は何ですか? HTML5 での新しい構造要素の使用 (推奨)-H5 チュートリアル-php.cn

HTML5 の新しい構造要素は何ですか? HTML5 での新しい構造要素の使用 (推奨)

寻∝梦

リリース： 2018-08-14 16:22:59

オリジナル

5958 人が閲覧しました

HTML5 の新しい構造とは何ですか? そしてそれらはどのように使用できるのでしょうか? この記事では詳しく説明します。

HTML5 の新しい主要構造要素:

article 要素
section 要素
nav
aside 要素
time 要素
pudate属性

詳しい説明

要素の数:

article 要素

は埋め込み可能で、プラグインを表すことができます

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

ログイン後にコピー

section 要素

タイトルコンテンツなしでセクション要素を使用することは一般的に推奨されません

article と混同しないでください要素

概要: スタイルを設定するためのページコンテナとしてセクション要素を使用しないでください

article、aside、nav 要素の使用の方が適している場合は、seciton 要素を使用しないでください

タイトルコンテンツがない場合、セクション要素

nav

をページとして使用しないでください。ナビゲーション要素が他のページまたは現在のページの他の部分に接続されているナビゲーションの接続されたグループ。メインおよび基本的な接続グループを nav 要素に入れるだけです

アプリケーションシナリオ:

従来のナビゲーションバー
サイドバーナビゲーション
ページ内ナビゲーション
ページめくり操作

するHTML5 では nav 要素の代わりに menu 要素を使用しないでください

<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>

ログイン後にコピー

time要素

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 中国語 Web サイトの他の関連記事を参照してください。