HTML5のレイアウト要素とは何ですか?

html5 レイアウト要素には、1. Web ページの先頭コンテンツを定義する header 要素、2. footer 要素、3. nav 要素、4. Article 要素、5. Section 要素、6. Side 要素が含まれます。 ; 7. 時間要素; 8. 進行要素; 9. メーター要素など。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 のいくつかの新しいレイアウト構造要素

1. ヘッダー要素:

は通常、ヘッダーを定義するために Web ページの先頭に使用されます。領域ブロックはコンテンツの一部を定義することもでき、定義されたコンテンツは独立した部分です。

<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. フッター要素:

は基本的にヘッダー要素と同じですが、フッター要素は通常、Web ページの下部コンテンツを定義します

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

3. nav 要素:

は、ナビゲーション バー、ディレクトリ、ハイパーリンクなどの定義に使用できます。すべての接続グループを nav 要素に入れる必要はありません基本的な接続グループは、nav 要素

4 に配置できます。Article 要素:

は、独立したコンテンツ ブロック。記事、ブログ、記事、または独立したプラグインにすることができます。ネストして使用したり、プラグインを表すこともできます。 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」で区切って、UTC 標準時間を表すには「z」を使用します。
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、進行状況およびメーター要素:

#progress 要素: HTML5 の新しい要素で、進行状況バーを作成するために使用されます。通常は、タスクの進行状況を表示するために JavaScript と組み合わせて使用​​されます。

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