モバイル デバイス向けの HTML5 ページ レイアウトの簡単な分析 _html5 チュートリアル スキル

モバイル デバイス (携帯電話とタブレット) の特性を組み合わせて、HTML5 の新しいセマンティック タグ要素と、モバイル Web ブラウザーでの Web ページ レイアウトの知識と例を紹介します。
HTML5 標準によって追加された新しい要素のうち、一般的なページ構造に使用される要素には、ヘッダー、フッター、フッター、ナビゲーション、記事セクション、hgroup などがあります。
以下はこの要素の簡単な説明です:
1.header
header> 要素は、ドキュメントのページの組み合わせ (通常はガイダンスとナビゲーション情報)、およびタグを定義します。 h1~h6 や hgroup などのセクションヘッダー情報が含まれます。

コードをコピーします

コードは次のとおりです。

> h1>HTML5 レイアウト学習

しっかり勉強

は次のコードと一致しています:

コードをコピーします コードは次のとおりです:

HTML5 レイアウト学習

しっかり勉強

2.footer

要素は文書または章の終わりを定義し、著者情報、関連リンク、著作権情報など、章に関するいくつかの基本情報が含まれます。 ページ上で複数のヘッダーとフッターを使用でき、div ul などの他の要素を挿入することもできます。 プライバシー情報

3.nav

要素は、構築されたナビゲーションを定義し、ナビゲーション リンクを表示するために使用され、現在のページのいくつかのメイン ナビゲーション リンクを配置するために使用されます。

;

プライバシー情報

; 🎜> 4.aside

5.article

要素はドキュメントまたはページを表し、Web サイトのニュースやブログ記事などの独立した記事コンテンツを表示するために使用されます。 。

コードをコピーします

コードは次のとおりです。

記事タグ 1

6.section

要素の最初の要素にあるセクション (章、ヘッダー、フッターなど)。





コードをコピー


コードは次のとおりです。

7.hgroup

は、Web ページまたはセクションのタイトル要素の組み合わせとして定義され、通常はグループ化に複数レベルの h1 ～ h6 タグ ノードを使用します。

コードをコピーします

コードは次のとおりです。 hgroup>

🎜> 🎜 >

実際、HTML5 標準では、ここで紹介したセマンティクス タグに加えて、さまざまなセマンティクスを持つさらに多くのタグが定義されています。 * audio: 音声コンテンツを定義します。 * Canvas: キャンバス関数を定義します。 * コマンド: コマンド ボタンを定義します。

* datalist: ドロップダウン リストを定義します。

* 詳細: 要素の詳細な内容を定義します。

* ダイアログ: ダイアログ ボックスを定義します。
* keygen: フォームで要求されたキー値を定義します。
* マーク: マークされたテキストを定義します。
* 出力: いくつかの出力タイプを定義します。
* progress: タスクのプロセスを定義します。
* 出典: メディア リソースを定義します。
* ビデオ: ビデオ コンテンツを定義します。
HTML5 標準には多くの新しい要素が追加されていますが、それらをモバイル Web アプリケーションで実際に使用する機会はあまりありません。

オーディオやビデオなどのタグはモバイル Web アプリケーションで使用できますが、パフォーマンス、互換性、ページ レンダリングのため、スマートフォンやタブレットの Web ブラウザーには適切に適用できません。