HTML5 と CSS3 をわかりやすく理解する

インターネットの発展は常に新しいテクノロジーの出現を生み出しており、HTML5 と CSS3 は、すべてのインターネット開発者、特にフロントエンド開発者にとって、最近話題になっているホットなトピックです。では、HTML5 と CSS3 の何が私たちを輝かせるのでしょうか? WebRebuild北京交流カンファレンスで「 HTML5とCSS3の秘密を明らかにする」を共有しました。PPT は次のとおりです。
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

HTML 5ドラフトの前身は Web Applications 1.0 と呼ばれ、2004 年に WHATWG によって提案され、2007 年に W3C によって承認され、新しい HTML ワーキング チームが設立されました。 2008 年 1 月 22 日、最初の公式草案がリリースされました。 HTML 5 は、過去 10 年間で Web 開発標準における最大の進歩です。以前のバージョンとは異なり、HTML 5 は Web コンテンツを表すためだけに使用されるのではなく、HTML 5 プラットフォーム上で Web を成熟したアプリケーション プラットフォームに組み込むこと、およびコンピューターベースのインタラクションを標準化することです。 。それでは、HTML5 の技術概要を見てみましょう。

HTML5 の新規要素と削除された要素

HTML5 では、ビデオやオーディオなどの新しいマルチメディア要素やインタラクティブな要素が多数追加されています。HTML4 では、ビデオやオーディオを埋め込む場合、大規模なコードを導入する必要があり、さまざまなブラウザと互換性があります。タグを導入するだけです。img タグと同じくらい便利です。ページ レイアウトとコンテンツの実装に関して、HTML5 では、ブロック レベルおよびセマンティック要素に加えて、多くの新しい構造化タグ要素が追加されています。HTML を使用してファイルのアップロードの進行状況バーを表示する場合、HTML5 では進行状況を使用できます。それを表す要素には、完了したタスクの数を示す value 属性と、必要なタスクの合計数を示す max 属性があり、DOM を通じてこの進行状況バーの位置属性 (読み取り専用) を取得することもできます。インターフェース、タスクの完了率です。 Youtube はすでに HTML5 技術に挑戦しています( ファイアウォールを回避する必要があります) は、ページ全体のソース コードから判断すると、非常に単純です。もちろん、HTML5 では、入力ボックスの入力プロンプトに相当する input および textarea のプレースホルダー属性など、いくつかの新しい属性もいくつかの要素に追加されます。スクリプトには、スクリプトの読み込みと実行に影響を与える async 属性があります。スクリプト。 HTML に共通するすべての属性は、通常、class、id、tabindex、title などの「グローバル属性」と呼ばれます。HTML5 では、contenteditable、contextmenu、hidden 属性、その他の属性など、いくつかの新しいグローバル属性も追加されています。 HTML5 では、item、itempro、subject などの HTML5 の新しい属性などのマイクロデータのサポートも追加されています。

もちろん、HTML5 では、フォント、センター、ストライクなど、ページのプレゼンテーションを表すいくつかの要素も削除されます。これらは CSS によって行われることになっているため、Web サイトのアクセシビリティに影響を与えるいくつかの要素も削除されます。 Frame、frameset、noframe、および頭字語などの一部の一般的ではない要素では、略語を表すために abbr を使用します。 HTML5 では、link の rev 属性や td のscope 属性など、クライアントの互換性に影響を与える一部の HTML の使いやすさも削除されています。また、HTML5 では、一部の要素の align 属性や bgcolor 属性など、ページのプレゼンテーションを示すいくつかの属性も削除されています。

フォームの HTML5 サポート

HTML5 は、URL、電子メール、日付、電話番号などの強力なコントロール タイプ、必須を示すための required などの強力な制約属性、ファイル アップロードの属性受け入れ、および一部のフォーム繰り返し要素モデルのサポートを提供します。送信方法を XML 送信に設定すると、サーバーが受信するデータは XML 形式になります。現在、opera9.5 以降では Web フォームが完全にサポートされています。 2.0。

ここをクリックして Web Forms 2.0 のデモを表示します。Opera9.5 以降が必要です

HTML5 DOM の変更

HTML5 には、DOM レベル 2 HTML の HTMLDocument から継承されたインターフェイスが多数あります。もちろん、HTML5 には、クラス名に基づいて要素を選択できる getElementsByClassName のサポートなど、DOM 内の注目すべき新しいメンバーもあります。セレクターには querySelector と querySelectorAll の 2 つのメソッドがあり、CSS セレクターに基づいてクエリ対象の要素を取得できます。これは、YUI3 の Y.one と Y.all に相当します。

HTML5 JavaScript API

HTML5 では Javascript にどのような新しい API が追加されますか?

• ビデオ/オーディオ: HTML5 はビデオとオーディオ用の API を提供し、開発者がメディア コンテンツの再生や一時停止など、独自のユーザー インターフェイスを制御できるようにします。
• Canvas: Canvas は、スクリプト言語 (通常は JavaScript) を使用してグラフィックを描画するために使用できる新しい HTML 要素です。たとえば、これを使用して、絵を描いたり、画像を合成したり、単純な (それほど単純ではない) アニメーションを実行したりできます。 Canvas は魔法のようです。そのすべてのメソッドは Photoshop に非常に似ており、 Canvas.getContext('2d') を通じてその塗りつぶしの色を設定できます。 fillStyle を使用したり、ストロークスタイルでストロークの色を設定したりすることも、Photoshop のペン操作と一致します。 Canvas は、 Firefox のリアルタイム ダウンロード ステータス統計など、多くの Web サイトで使用されており、Web ゲームの作成にも使用できます。
• ドラッグ&ドロップ: ポインティング デバイスのビジュアル メディアにおいて、「ドラッグ」の操作はマウスの移動 (mousemove) を伴うマウス ダウン (mousedown) のイベントであり、「ドロップ」はマウスを放したときにトリガーされるイベントです。 DataEvent インターフェイスと DataTransfer インターフェイスは、ドラッグ&ドロップで定義されます。同時に、ドラッグ操作が発生すると、dragstart、dragenter、dragleave、drop、dragend などのイベントがトリガーされます。
• Web ワーカー: Javascript をマルチスレッド化し、現在のブラウザーの操作をブロックすることなくバックグラウンドで多くの作業を実行できるようにします。
• 地理位置情報: navigator.geolocation.getCurrentPosition(success, error) メソッドを実行すると、地理的位置を共有するかどうかを尋ねるプロンプトが表示され、共有することを選択すると、success 関数がコールバックされます。 success 関数は、位置オブジェクトです。この位置オブジェクトには、緯度 (次元) や経度 (経度) などの多くの地理的位置情報が含まれています。この関数により、特定の位置を知ることができます。は、iPhone Applied などの一部の携帯電話ですでに広く使用されています。
• アプリケーション キャッシュ: これは HTML5 のオフライン アプリケーションのサポートです。属性マニフェストを HTML 要素に追加すると、ブラウザーはデータをクライアントにキャッシュするかどうかを尋ねるメッセージを表示します。ユーザーが許可することを選択した場合、指定された内容に従います。マニフェスト ファイル リスト。ネットワークが利用できない場合でもアプリを使用できるように、必要なファイルをキャッシュします。オフライン アプリケーション向けに、Google は Google Gears ブラウザ拡張機能も開発しましたが、最終的に Google は HTML5 に切り替え、HTML5 ストレージとオフライン アプリケーションの利点を認識した可能性があります。
• ストレージ: Webkit にはデータベース ストレージが実装されており、バックエンド データベース操作と同じようにデータをクエリしたり、一部の操作を実行したりできます。もう 1 つのタイプのストレージは、setItem や getItem を通じて値を保存および取得できる sessionStorage や localStorage などのキー値ストレージです。Cookie ストレージと比較すると、ストレージ容量がはるかに大きくなります。
• X-Document メッセージング: ブラウザーは、セキュリティとプライバシーの理由から、異なるドメイン間でのドキュメントの通信を禁止しています。これはセキュリティ上の制限ですが、異なるドメインでのドキュメントの通信には有害ではありませんが、HTML5 のこのクロスドキュメントには多くの問題が生じます。通信が確立されるため、ソース ドメインの出所を無視でき、スクリプト攻撃を防ぐことができます。

HTML5 に興味はありますか?それでは、HTML5 はいつ標準になるのでしょうか? 2022 年まで待たなければならないと言われています。HTML5 が実際に登場するまでの日数を示す興味深い Web サイトhttp://ishtml5readyyet.com/があります。