HTML5 ブロックレベルの要素_html/css_WEB-ITnose-htmlチュートリアル-php.cn

HTML5 ブロックレベルの要素_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:31:13

オリジナル

1540 人が閲覧しました

目次 [1]セクション [2]記事 [3]余談 [4]ナビゲーション [5]ヘッダー [6]フッター [7]hグループ [8]アドレス [9] ケース

前の単語

A数年前、Web ページのレイアウトには div 要素が一般的に使用されていましたが、セマンティクスは良くありませんでした。 HTML5 では、Web ページのセマンティクスの改善に役立つ多数の新しいブロックレベル要素が導入されており、ページに論理構造があり、保守が容易で、データマイニングサービスにとってより使いやすくなっています

定義

ブロックタイプの要素ブロックコンテンツ範囲の要素の重要な特徴は、ブロックレベルのコンテンツがドキュメントアウトラインのレベルを生成することです。実際には、

、

、の 4 つの要素しか含まれていません。、。ただし、ブロックレベル要素の範囲はさらに大きく、タイトル要素など、表示がブロックでブロック特性に似ている要素を指します。ドキュメントの章またはブロック、ブロックレベルの共通要素

[

と

の違い]

タグが CSS と Javascript のフックとしてのみ使用される場合は、
タグを使用します。

独立したドキュメント、ページ、アプリケーション、さらにはサイトを定義するために使用されます。単独で公開できるか、再利用できるかを判断するのが基準です

【注意】

と

にはタイトルを付ける必要があります

直接関係ない内容内容サイドバーの

は、関連付けられているコンテンツとは独立しています。どちらが存在しなくても、それぞれのテキストの意味の理解には影響しません。広告、記事の関連背景や引用内容など

【注意】

の誤用については、サイドバーの内容を全て

に変えることです

< ;nav>

ナビゲーションリンクブロックが含まれます。ページのメインナビゲーションには、関連リンクや反復リンクが含まれる場合がありますが、それらが無関係または冗長で、メインナビゲーションにとって重要ではない場合は、通常、それらを nav 要素に配置する必要はありません

その他のブロックレベル要素

ヘッダーは、ブロックの紹介コンテンツと補助ナビゲーションをグループ化するために使用されるため、ブロックのタイトル要素やその他の紹介コンテンツ (目次、ロゴなど) が含まれる場合があります。 )

テールには、作者、著作権情報、連絡先アドレス、その他の少量の情報など、ブロックまたはページ全体に関連するコンテンツが含まれています

hgroup要素はタイトルのグループを結合することができます要素がまとめられ、HTML5のアウトラインアルゴリズムは最上位のものだけを処理します h1要素はタイトルをカプセル化し、h2要素はサブタイトルをカプセル化しますメールアドレス、電話。著者に連絡するための最も直接的な方法ではないメールアドレスや同様の情報ではなく、番号など）を使用してください

【注意】article要素とbody要素以外のblock要素でのaddress要素の使用は不適切であり、section要素ですaddress 要素を含めることはできません

ケースの説明

新しい HTML5 タグを標準化された方法で使用している Web サイトを見つけるのは簡単ではありません。最終的には、ほとんどの国内 Web サイトが依然として div レイアウトを使用しています。 Apple の公式 Web サイトを使用することにしました

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>苹果首页</title></head><body><nav>  <ul>    <li><a href="#">Apple</a></li>    <li><a href="#">Mac</a></li>    <li><a href="#">iPad</a></li>    <li><a href="#">iPhone</a></li>     <li><a href="#">Watch</a></li>     <li><a href="#">Music</a></li>     <li><a href="#">技术支持</a></li>     <li><a href="#">搜索</a></li>     <li><a href="#">购物袋</a></li>             </ul></nav><article>  <section>展示1</section>  <section>展示2</section>  <section>展示3</section>  <section>展示4</section>  <nav>    <ul>      <li>按钮1</li>      <li>按钮2</li>      <li>按钮3</li>      <li>按钮4</li>    </ul>  </nav></article><aside>  <ul>    <li><a href="#">Watch</a></li>    <li><a href="#">Pencil</a></li>    <li><a href="#">iPad</a></li>    <li><a href="#">MacBook</a></li>  </ul></aside><footer>  <nav>    <div>选购及了解</div>    <div>商店</div>    <div>应用</div>    <div>账户</div>    <div>关于</div>  </nav>  <section>    <div>其他杂项</div>  </section></footer></body></html>

ログイン後にコピー