ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5 ブロックレベルの要素_html/css_WEB-ITnose
HTML5 ブロックレベルの要素_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:131550ブラウズ
目次 [1]セクション [2]記事 [3]余談 [4]ナビゲーション [5]ヘッダー [6]フッター [7]hグループ [8]アドレス [9] ケース
前の単語
A数年前、Web ページのレイアウトには div 要素が一般的に使用されていましたが、セマンティクスは良くありませんでした。 HTML5 では、Web ページのセマンティクスの改善に役立つ多数の新しいブロック レベル要素が導入されており、ページに論理構造があり、保守が容易で、データ マイニング サービスにとってより使いやすくなっています
定義
ブロック タイプの要素ブロック コンテンツ範囲の要素の重要な特徴は、ブロック レベルのコンテンツがドキュメント アウトラインのレベルを生成することです。実際には、23c3de37f2f9ebcb477c4a90aac6fffd、15221ee8cba27fc1d7a26c47a001eb9b、の 4 つの要素しか含まれていません。 、。ただし、ブロック レベル要素の範囲はさらに大きく、タイトル要素など、表示がブロックでブロック特性に似ている要素を指します。ドキュメントの章またはブロック、ブロックレベルの共通要素
[2f8332c8dcfd5c7dec030a070bf652c3 と dc6dce4a544fdca2df29d5ac0ea9906b の違い]
タグが CSS と Javascript のフックとしてのみ使用される場合は、dc6dce4a544fdca2df29d5ac0ea9906b タグを使用します。
23c3de37f2f9ebcb477c4a90aac6fffd
独立したドキュメント、ページ、アプリケーション、さらにはサイトを定義するために使用されます。単独で公開できるか、再利用できるかを判断するのが基準です
【注意】23c3de37f2f9ebcb477c4a90aac6fffdと2f8332c8dcfd5c7dec030a070bf652c3にはタイトルを付ける必要があります
15221ee8cba27fc1d7a26c47a001eb9b
直接関係ない内容 内容サイドバーの 15221ee8cba27fc1d7a26c47a001eb9b は、関連付けられているコンテンツとは独立しています。どちらが存在しなくても、それぞれのテキストの意味の理解には影響しません。広告、記事の関連背景や引用内容など
【注意】15221ee8cba27fc1d7a26c47a001eb9bの誤用については、サイドバーの内容を全て15221ee8cba27fc1d7a26c47a001eb9bに変えることです
4aab0a1dead0d4eeedd69e2aa9d99da1
ヘッダーは、ブロックの紹介コンテンツと補助ナビゲーションをグループ化するために使用されるため、ブロックのタイトル要素やその他の紹介コンテンツ (目次、ロゴなど) が含まれる場合があります。 )
c37f8231a37e88427e62669260f0074d
テールには、作者、著作権情報、連絡先アドレス、その他の少量の情報など、ブロックまたはページ全体に関連するコンテンツが含まれています
d8eccd9ed644b68a6460a2bb84548c82
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>