HTML5 HTML 要素拡張 (パート 1) - 新しく追加された要素と使用法_html5 チュートリアルのスキルの概要

ページの開発プロセスを考えてみましょう :
1. ページの構造を設計します - HTML: このプロセスでは、さまざまな HTML 要素を使用して Web ページの構造を構築します。
2. ページの外観をデザインする - CSS: このプロセスでは、CSS を使用して Web ページの外観を改善します。
3. ページの動作を設計する - JavaScript: このプロセスでは、Web ページの要素に特定の動作を割り当てます。
CSS に加えて、HTML5 は他の 2 つの側面でもさまざまな程度に拡張されています。このシリーズは最初の側面に焦点を当てています。これまでに、複雑な Canvas 要素と svg 要素について学習しました。次の章では、HTML5 によって追加された他の要素について概要を説明します。

構造要素
HTML5 では、ヘッダー、フッター、ナビゲーション ナビゲーション、コンテンツ記事、セクションなどの新しい構造要素が追加されます。意味は以下の通りです:

HTML5 では、このページ全体の構造要素に加えて、補助要素、画像要素の図、詳細説明要素の詳細などのブロックレベルの意味要素も追加されています。ページのレイアウトの意味をより適切に表示することに加えて、これらの要素は通常の div と変わりません。これらの要素を表示するには CSS に依存する必要があります。簡単な例を次に示します。

コードをコピーします

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

dxy1982 ブログ

記事 1

< ;p>はじめに

はじめに

ブログ

情報

• ポリシー


• リスト

記事

• 1 月


• 2 月

Copyright 2012 dxy1982

これらの要素は比較的簡単に使用できますが、 : 1. div の代わりにセクションを使用しないでください。
セクションはスタイル コンテナではありません。セクション要素は、ドキュメントの概要を作成するのに役立つコンテンツの意味部分を表します。ヘッダーが含まれている必要があります。通常、記事の一部として存在します (もちろん、記事がその一部になることもあります)。ページ コンテナとして使用する要素を探している場合、または追加のスタイル コンテナが必要な場合は、div を使用してください。
2. header と hgroup は必要な場合にのみ使用します
書かなくてもよいタグを書いても意味がありません。 header と hgroup の使用シナリオは通常次のとおりです。
• header 要素は一連の導入またはナビゲーション補助テキストを表し、セクションの先頭としてよく使用されます。
• ヘッダーがサブヘッダー、サブタイトル、各種ロゴなど複数の階層構造を持つ場合、hgroup を使用して h1 ～ h6 要素をセクションのヘッダーとして結合します。
ここの header または hgroup にいくつかの header 要素しかない場合は、次の 2 つの役に立たないタグを削除してみてはいかがでしょうか。

Copy codeコードは次のとおりです:

gt;私のベストブログ投稿

-->

次のように直接変更します:

コードをコピー

コードは次のとおりです

私のベストブログ投稿

同じこと:

コードをコピーします

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

私の最高のブログ投稿

p>by Rich Clark

次のように直接変更します:

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

私の最高のブログ投稿

by Rich Clark p>

3. 他のページまたはこのページの他の部分にリンクするページ内のブロックを表すために nav
nav 要素を乱用しないでください。ナビゲーション リンク ブロック。
ただし、ページ上のすべてのリンクを nav 要素に配置する必要はありません。この要素は、メインのナビゲーション ブロックとして使用することを目的としています。具体的な例を挙げると、利用規約、ホームページ、著作権声明ページなど、フッターには多くのリンクが含まれることがよくあります。このような状況にはフッター要素自体で十分に対応できますが、ここでは nav 要素も使用できますが、通常は不要であると考えられます。
4. 図を乱用しないでください
図は、「ドキュメント フロー内で独立した単位として参照されることもありますが、流れるようなコンテンツ」である必要があります。最適なシナリオ - ドキュメント フローに影響を与えることなく、メイン コンテンツ ページからサイドバーに移動できます。図は文書内でのみ参照するか、セクション要素で囲んでください。
Figure が純粋にプレゼンテーション用 (ロゴなど) であり、ドキュメント内の他の場所で参照されておらず、位置を移動する必要がない場合は、Figure を絶対に使用しないでください。
5. 不要な type 属性を使用しない
HTML5 では、script 要素と style 要素に type 属性が必要なくなりました。もちろん、これを記述することに問題はありませんが、ベスト プラクティスの観点からは、記述する必要はありません。


Audio 要素
audio 要素は、音楽やその他のオーディオ ストリームなどのサウンド コンテンツを識別するために使用されます。この要素でサポートされる形式を次の表に示します:

audio タグには、コンテンツ、オーディオをいつ、どのように再生するかを制御するために使用される属性があります。これらの属性は、src (ファイル名)、preload (ページのロード時にロードされる)、controls (表示制御)、loop です。 （ループ）とオートプレイ（自動再生）。以下の例では、ページが読み込まれるとすぐに音声が再生され、再生が継続されます。また、提供されるコントロールを使用して、ユーザーは音声を停止または再開できます:

コードをコピーします

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

ブラウザが要素をサポートしていない場合は、要素のテキスト情報が表示されます。
autoplay 要素が設定されている場合、preload 属性は自動的に無視されます。 preload="auto" が設定されている場合、ページが読み込まれた後に音声が読み込まれます。
audio 要素を使用すると、ブラウザの問題と互換性のある複数のソース要素を指定できます。ソース要素は、異なるオーディオ ファイルをリンクできます。ブラウザは最初に認識された形式を使用します:

コードをコピーします

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

お使いのブラウザは audio 要素をサポートしていません。

Video 要素 video 要素を使用すると、ビデオ クリップを再生したり、ビジュアル メディアをストリーミングしたりできます。この要素でサポートされる形式を次の表に示します:

オーディオ要素のすべての属性に加えて、ミュート (ミュート)、ポスター (写真待ち)、幅、高さがあります。最後の 2 つの意味は言うまでもありません。ポスター属性 (絶対 URL または相対 URL を指定) を使用すると、ビデオが読み込まれているとき、またはビデオがまったく読み込まれていないときに使用する画像を見つけることができます。

ビデオでは、ソース要素を使用して互換性の問題を解決することもサポートしています。小さな例を見てみましょう:

コードをコピーします

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

お使いのブラウザは video 要素をサポートしていません。

ビデオの音声を再生したくない場合は、muted=「ミュート」に設定してください。
さらに、video 要素は、DOM 操作中の再生プロセスの制御をサポートするいくつかのメソッド、プロパティ、およびイベントも提供します。たとえば、要素の play、pause、load などのメソッドを呼び出します。音量や再生時間など、直接読み取りまたは設定できる属性もあります。その他、再生開始、一時停止、終了などのイベントも利用可能です。以下の例を見てください:

コードをコピーします

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

再生/一時停止
大
小
通常

新しい記述方法に注意してください。上記の例では、次のように audio 要素を記述します。

コードをコピーします

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

実際、HTML5 ではコントロール、自動再生、ループなどの多くのブール属性が導入されていますが、これらの属性は上記のように記述できます。メソッドは次のとおりです:

コードをコピーします


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

< ;audio src="MyFirstMusic.ogg" は自動再生ループを制御します> お使いのブラウザは audio 要素をサポートしていません。

ブラウザがこれらの属性を検出すると、これらの属性がオンになるため、これらの属性を強制的に false に設定すると、効果は依然として同じであるため、通常は属性名のみを記述することをお勧めします。

この記述の問題はフォームにも存在し、フォームと入力の多くの新しい属性はブール属性であるため、推奨される記述方法を使用する必要があります。


測定値を示す要素

すべてのブラウザが以下の要素をサポートしているわけではありませんが、基本的に Chrome で効果が確認できます。

進行状況バー要素この要素は、value と max の 2 つの属性のみを持ちます。 Chrome と FireFox の両方がサポートしています。


コードをコピーします

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

ダウンロードの進行状況:
33%

Measure 要素
この要素を使用して、標準範囲クラスの特定の値の指示アイコンを表示します。異なる範囲の値は異なる色で表示されます。一部の Web サイトでは、このツールを使用してユーザーの現在の経験値を表示しています。ブラウザがこの要素をサポートしていない場合は、要素の中央のテキストが直接表示されます。現在、Chrome はすでにサポートしています。

コードをコピーします

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

は:
B

これを実行すると、黄色のスクロール バーのようなものが表示され、インジケーター バーの色が赤にプログラムされていることがわかります。

新しく追加された要素の紹介は以上です。要素の詳細については、W3C の完全なタグ リストを参照してください。

実践的なリファレンス:
W3C チュートリアル: http://www.w3schools.com/html5/default.asp
HTML5 公式ガイダンス: http://dev.w3.org/html5/html-author/
非常に優れたガイダンス Web サイト: http://html5doctor.com/
HTML5 中国語チュートリアル: http://www.html5china.com/
優れたフロントエンド ブログ: http://www.pjhome.net/default.asp?cateID= 1