ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5_html5 チュートリアル スキルの基本機能と構文を簡単に整理します

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

WBOY
WBOYオリジナル
2016-05-16 15:45:491568ブラウズ

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. >

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ charset="UTF-8">

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