HTML5のセクションタグとは何ですか? HTML5でセクションタグを中央に配置するにはどうすればよいですか?-H5 チュートリアル-php.cn

HTML5のセクションタグとは何ですか? HTML5でセクションタグを中央に配置するにはどうすればよいですか?

寻∝梦

リリース： 2018-08-15 13:29:16

オリジナル

12104 人が閲覧しました

HTML5のセクションタグとは何ですか? HTML5でセクションタグを中央に配置するにはどうすればよいですか?この記事では、HTML5 のセクションの定義と機能はすべて例として詳しく説明します。 (後で説明する要素もあります)

HTML5 — 新しいセマンティック要素ヘッダー、ナビゲーション、セクション、記事、サイド、フッターなど

HTML5 では、以前のバージョンのドキュメントと比較して、いくつかの追加タグが追加されました書き込み。ヘッダー、フッター、コンテンツ領域などの要素構造。このうち、主要な構造要素にarticle要素とsection要素が追加されます。それでは、それらの違いは何ですか?いつ記事を使用するか、何をセクションに使用するか

記事とは:HTML5の記事タグとは何ですか? HTML5 では、article 要素はどこで使用されますか?

今日は、新しいセマンティック要素の

要素の定義について話しましょう:

: ドキュメント内のセクション (セクション、セクション) を定義します。ドキュメントの章、ヘッダー、フッター、またはその他の部分など、セクションには通常、一連のコンテンツとそのタイトルが含まれます。

HTML5 におけるセクション要素の役割:

セクション要素は、記事の分割など、ページ上のコンテンツをセグメント化するために使用されます。隣接するセクション要素のコンテンツは、独立した記事とは異なり、関連している必要があります。たとえば、記事:

<article>
      <header><h1>计算机各类语言介绍</h1></header>
      <p>本文列举了部分计算机语言的一些介绍</p>
      <section>
        <h2>JavaScript</h2>
        <p>js是一门……</p>
      </section>
      <section>
        <h2>HTML</h2>
        <p>HTML是一门……</p>
      </section>
      <footer>版权归微也所有</footer>
	  </article>

ログイン後にコピー

HTML5 でセクションタグを中央に配置する方法:

CSS スタイルを使用して、text-align: center、これを中央に配置すると思います。例を見てみましょう:

<!DOCTYPE HTML>
<html>
    <meta charset="UTF-8" />
    <head>
        <title>PHP中文网</title>
    </head>
    <script src="http://lwww.php.cn/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
         }
         .demo {}
    </style>
    <body>
        <div class="demo">
            <section style="text-align: center;">
                <h1>title</h1>
                <p>2017-07-11</p>
            </section>
        </div>
    </body>
 </html>

ログイン後にコピー

技術的には、セクション要素をスタイル化することは可能ですが、複雑なスタイルやスクリプトがある場合は、やはり div 要素を使用することをお勧めします。

要素と同様に、section 要素はコンテンツをリストするために使用されます。

実際の例では、

要素を使用する理由は、ブログのコンテンツを構造化するためです。

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

ログイン後にコピー

これは単なる例であり、

要素を使用することもできます。他の目的に使用すること。

【要素には何か言いたいことがある】

セクション:

皆さんこんにちは、セクションです。私が参加した国際会議では、次のように紹介されました。「セクション要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。この文脈では、セクションは、コンテンツのテーマ別のグループであり、通常は Semantic div に所属しています。」「セクションの例としては、章、タブ付きダイアログボックス内のさまざまなタブ付きページ、論文の番号付きセクションなどがあります。Web サイトのホームページは、紹介、ニュース項目、および連絡先情報のセクションに分割できます。」私が参加するのは通常、記事のある章、タブダイアログボックスのタブ、または論文の番号付きセクションです。 Web サイトのトップページは、紹介文、ニュース、連絡先情報などのセクションに分けることができます。私はただのコンテナタグではありません。タグが単にスタイル設定のためのものである場合、またはスクリプト作成を容易にするためのものである場合は、私の友人の div にアクセスする必要があります。一般的に言えば、要素の内容がドキュメントのアウトラインに明確に表示されている場合、その要素は適切だと言えます。通常は、

という見出しが付きます。これを使用して、Web サイトまたはアプリケーションのページ上のコンテンツをチャンク化します。

【関連おすすめ】

HTML IMGタグの属性とは何ですか? IMGタグの使い方を理解しよう

HTML5におけるWebとは？ Webストレージの要素は何ですか?

以上がHTML5のセクションタグとは何ですか? HTML5でセクションタグを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。