html5 の新しい構造: HTML のメイン構造と非メイン構造の紹介-H5 チュートリアル-php.cn

html5 の新しい構造: HTML のメイン構造と非メイン構造の紹介

不言

リリース： 2018-08-17 17:50:10

オリジナル

2323 人が閲覧しました

この記事の内容は 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>

ログイン後にコピー