HTML5_html5 チュートリアル スキルの基本機能と構文を簡単に整理します

HTML5 の概要
HTML5 は、HTML 標準の次のメジャー バージョンで、HTML 4.01、XHTML 1.0、および XHTML 1.1 に代わるものです。 HTML5 は、World Wide Web 上でコンテンツを構造化して表示するための標準でもあります。

HTML5 は、World Wide Web Consortium (W3C) と Web Hypertext Technology Working Group (WHATWG) の協力の成果です。

この新しい標準では、これまで Adob​​e Flash、Microsoft Silverlight、Google Gears などのサードパーティのブラウザ プラグインに依存していたビデオ再生やドラッグ アンド ドロップなどの機能が追加されます。

ブラウザのサポート
最新バージョンの Apple Safari、Mozilla FireFox、Opera はほとんどの HTML5 機能をサポートし、IE9 も一部の HTML5 機能をサポートします。

iPhone、iPad、Android 携帯電話にプリインストールされているモバイル ブラウザはすべて、HTML5 を適切にサポートしています。

新機能
HTML5 には、最新の Web サイトの構築に役立つ多くの新しい要素と属性が導入されています。 HTML5 で導入された主な機能は次のとおりです:

新しいセマンティック要素:

、

、

など。

Forms 2.0: HTML Web フォームが改善され、 タグにいくつかの新しい属性が導入されました。

永続的なローカル ストレージ: サードパーティのプラグインを通じて実装されないようにします。

WebSocket: Web アプリケーション用の次世代の双方向通信テクノロジ。

サーバー プッシュ イベント: HTML5 では、サーバー プッシュ イベント (SSE) とも呼ばれる、Web サーバーから Web ブラウザーへのイベントが導入されています。

キャンバス: JavaScript を使用したプログラムによる 2D 描画をサポートします。

オーディオとビデオ: サードパーティのプラグインに頼らずに、Web ページにオーディオまたはビデオを埋め込みます。

地理位置情報: ユーザーは、自分の地理的位置を Web ページと共有することを選択できます。

Microdata: HTML5 の外部でカスタム語彙を作成し、カスタム セマンティクスで Web ページを拡張できるようにします。

ドラッグ アンド ドロップ: 同じ Web ページ上のアイテムをある場所から別の場所にドラッグ アンド ドロップします。

後方互換性
HTML5 は、既存のブラウザーと可能な限り後方互換性があるように設計されています。新しい機能は既存の機能に基づいて構築されており、古いブラウザーにフォールバック コンテンツを提供できるようになります。

個々の HTML5 機能のサポートを検出するには、少量の JavaScript コードを使用することをお勧めします。

HTML5 構文

HTML5 には、Web 上ですでに公開されている HTML 4 および XHTML1 ドキュメントと互換性のある「独自の」HTML 構文がありますが、HTML 4 のより複雑な SGML 機能とは互換性がありません。

HTML5 には、小文字のタグ名、引用属性、属性に値が必要、すべての空の要素が閉じられている必要があるという XHTML の構文ルールがありません。

しかし、HTML5 はより柔軟で、次の形式をサポートしています:

タグ名は大文字にします。
属性の二重引用符はオプションです。
属性値はオプションです。
空の要素を閉じることはオプションです。
DOCTYPE
古いバージョンの HTML では、HTML 言語が SGML に基づいており、DTD を参照する必要があるため、DOCTYPE は非常に長くなっています。

HTML5 作成者は、簡単な構文を使用して次の形式の DOCTYPE を指定できます。

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>

上記の構文では大文字と小文字が区別されません。

文字エンコーディング
HTML5 作成者は、次のような単純な構文を使用して文字エンコーディングを指定できます:

XML/HTML コードコンテンツをクリップボードにコピー

1. メタ charset="UTF-8">

上記の構文では大文字と小文字が区別されません。

<script> タグ <br /></script>一般的なアプローチは、以下に示すように、値「text/javascript」を持つ type 属性を script 要素に追加することです。

XML/HTML コードコンテンツをクリップボードにコピー

1. script type="text/javascript" src="scriptfile.js"> スクリプト>

HTML5 では必要な余分な情報が削除されているため、次のような単純な構文を使用できます。

XML/HTML コードコンテンツをクリップボードにコピー

1. script src="scriptfile.js">スクリプト>

タグ
これまで、 を次のように記述しました。

XML/HTML コードコンテンツをクリップボードにコピー

1. リンク rel="スタイルシート" type="text/css" href="stylefile.css">

HTML5 では必要な余分な情報が削除されているため、次のような単純な構文を使用できます。

XML/HTML コードコンテンツをクリップボードにコピー

1. リンク rel="スタイルシート" href="stylefile.css">

HTML5 要素
HTML5 要素は開始タグと終了タグでマークされます。タグは、山かっこ内のタグ名を使用して修飾されます。

開始タグと終了タグの違いは、後者のタグ名の前にスラッシュが含まれていることです。

HTML5 要素の例を次に示します:

XML/HTML コードコンテンツをクリップボードにコピー

1. p>... p>

HTML5 タグ名は大文字と小文字が区別されず、すべて大文字または大文字を組み合わせて使用​​できますが、最も一般的な規則は常に小文字を使用することです。

ほとんどの要素には何らかのコンテンツが含まれます。たとえば、

...

には段落が含まれます。ただし、一部の要素にはコンテンツを含めることができず、空白要素と呼ばれます。たとえば、br、hr、リンク、メタなどです。

HTML5 ドキュメント
より良い構造を得るために、次のタグが導入されています:

セクション: このタグは、一般的なドキュメントまたはアプリケーションのセクションを表します。 h1 ～ h6 と一緒に使用して文書構造を表すことができます。

article: このタグは、ブログ エントリや新聞記事など、ドキュメント コンテンツの個別の部分を表します。

余談: このタグは、ページの残りの部分とわずかに関連するコンテンツのブロックを表します。

header: このタグはセクションのヘッダーを表します。

フッター: このタグはセクションの脚注を表し、著者、著作権、その他の情報を含めることができます。

nav: このタグは、ドキュメント内を移動するために使用されるセクションを表します。

ダイアログ: このタグは会話をマークするために使用できます。

図: このタグは、タイトルをグラフやビデオなどの特定の埋め込みコンテンツに関連付けるために使用できます。
HTML5 ドキュメントのマークアップは次のようになります:

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="utf- 8">
5. タイトル>... タイトル>
6. 頭>
7. ボディ>
8. ヘッダー>... ヘッダー>
9. ナビ>... ナビ>
10. 記事>
11. セクション>
12. …
13. セクション>
14. 記事>
15. 脇>... 脇>
16. フッター>... フッター>
17. ボディ>