ホームページ >ウェブフロントエンド >H5 チュートリアル >html5 の新しい構造: HTML のメイン構造と非メイン構造の紹介
html5 の新しい構造: HTML のメイン構造と非メイン構造の紹介
- 不言オリジナル
- 2018-08-17 17:50:102323ブラウズ
この記事の内容は HTML5 の新しい構造、つまり HTML のメイン構造と非メイン構造の紹介です。必要な方は参考にしていただければ幸いです。
1 新しい主構造要素
1.1 Article 要素
は、外部から独立して参照できるドキュメント、ページ、またはアプリケーション内の独立した完全なコンテンツを表します。 (ブログ、新聞や雑誌の記事など)
1.2 セクション要素
は、Web サイトまたはアプリケーションのページ上のコンテンツをセクションに分割するために使用されます。 (記事の分割など)
1.3 nav 要素
は、ページ ナビゲーションとして使用できるリンク グループです。ナビゲーション要素は、他のページまたは現在のページの他の部分にリンクします。
1.4 サイド要素
は、現在のページまたは記事の補助情報部分を表すために使用されます。現在のページまたはメイン コンテンツに関連する参照、サイドバー、広告、ナビゲーション バー、および他の同様の項目を含めることができます。メインコンテンツ。
2 新しい非メイン構造要素
2.1 ヘッダー要素
は、ガイドおよびナビゲーション機能を備えた構造要素であり、通常はページ全体のタイトルまたはページ内のコンテンツブロックを配置するために使用されます。データ テーブル、検索フォーム、関連するロゴ画像などの他のコンテンツを含めることもできます。
2.2 フッター要素
は、その親コンテンツブロックまたはルートブロックのフッターとして使用できます。通常、これには、著者、関連書籍リンク、著作権情報など、サーバーの関連セクションに関する脚注情報が含まれます。
2.3 address 要素
は、文書作成者または文書管理者の名前、文書作成者または文書管理者の Web サイト リンク、電子メール アドレス、実際の住所、電話番号などを含む連絡先情報を文書内に表示するために使用されます。
2.4 main 要素
は、Web ページのメインコンテンツを表します。
(1) メインコンテンツ領域とは、Web ページのタイトルまたはアプリケーション内のページのメイン機能に直接関連するコンテンツ、またはそれを拡張するコンテンツを指します。この領域は、各 Web ページに固有のコンテンツである必要があり、Web サイト全体のナビゲーション バー、著作権情報、Web サイトのロゴ、公開検索フォームなど、Web サイト全体に共通のコンテンツを含めることはできません。
(2) 各 Web ページ内に配置できるメイン要素は 1 つだけです。
(3) main 要素を、article、side、footer、header、nav 要素内に配置することはできません。
3 新しい構造要素にはスタイルを使用する
(1) 多くのブラウザはまだ H5 の新しい構造要素をサポートしていないため、クライアントが使用するブラウザがこれらの要素をサポートしているかどうかを知ることができないため、CSS を使用する必要があります次のステートメントの目的は、以下に示すように、ページで使用される H5 の新しい要素がブロックで表示されることをブラウザーに通知することです:
//追加block声明
article，aside，dialog，figure，footer，header，legend，nav，section，main｛ display：block；｝
//正常使用样式
nav { float : left ; width:20% }
article { float:right ; width:79% }(2) IE8 以前のバージョンは CSS の使用をサポートしていません。これらの未使用の要素を使用するには、サポートされる構造要素に Javascript を使用する必要があります。
//脚本中创建元素
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
document.createElement("main");
</script>
<style>
//正常使用样式
nav { float : left ; width:20% }
article { float:right ; width:79% }
</style>関連する推奨事項:
以上がhtml5 の新しい構造: HTML のメイン構造と非メイン構造の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。