html5 の機能: 1. Web サイトのコンテンツをより豊かにする新しいグラフィック ライブラリ; 2. より便利なマルチメディア コンテンツ; 3. 位置情報; 4. ドラッグ アンド ドロップ機能; 5. デスクトップ通知; 6. オフラインとストレージ; 7. パフォーマンスと統合; 8. デバイスアクセス; 9. スタイルデザインなど
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
html5 の機能
1. 新しいグラフィック ライブラリ:
HTML5 Canvas とWebGL 関数ライブラリにより、Web サイトのコンテンツをより豊かにすることができます。特に WebGL 関数ライブラリは、この分野のゲーム全体をほぼ変える可能性があり、完全に HTML5 で開発されたこの有名な Quake II ゲーム シーンを見てください。私にとって、これは新しい時代を表し、将来のゲームがどのようにプレイされるかを想像できるものです。
2. より便利なマルチメディア コンテンツ:
大量のオーディオ コンテンツやビデオ コンテンツを含める必要がある Web サイトをデザインしたことがある人なら、そのかっこよさがわかるでしょう。 。望ましい効果を得るには、多くの場合、Flash と
3. 地理位置情報:
デスクトップ コンピューターやラップトップでインターネットを使用する人はますます少なくなってきています。今日、多くの人がスマートフォンやタブレットなどのハンドヘルド モバイル デバイスを使用して Web を閲覧しています。この現在のモバイル ネットワーク アクセス機能と HTML5 の新しい位置情報機能を組み合わせることで、無数の新しい可能性が開かれます。ユーザーが Web サイトにアクセスしたときの正確な位置を知ることで、ユーザーのコンテキストに合わせてパーソナライズされたコンテンツを配信できます。例えば、おでかけ関連のWebサイトにアクセスした場合、市街地にいる場合は旅行の計画に関連した情報を提供できますが、郊外からWebサイトにアクセスした場合はインタラクティブマップ機能が表示されます。デフォルトでは。
4. ドラッグ アンド ドロップ機能:
これは微妙な変更ですが、非常に重要です。ドラッグ アンド ドロップ機能を使用すると、ブラウザからコンピュータにコンテンツを直接ドラッグしたり、コンピュータからブラウザにコンテンツをドラッグしたりできます。本当に画期的な変化ですよね。この表示を見て考えてみましょう。SNS にそのような機能があれば、休暇から戻ったら簡単に休暇の写真を選択してブラウザにドラッグし、オンラインの友達とすぐに共有できます。 。これは、私が Web サイトを操作したい
方法です。
5. デスクトップ通知:
デスクトップ通知は、ブラウザの外側に表示される小さなポップアップ ウィンドウです。ユーザーが Web サイトを閲覧していないときでも、引き続き Web サイトと通信します。この機能は現在 Google Chrome でのみ利用可能で、ここでデモを見ることができます。これらの通知は、電子メール通知、ソーシャル ネットワークの更新、Weibo メッセージ、その他のサービスに最適です。ドラッグ アンド ドロップ機能と組み合わせると、オンライン アプリケーションとローカル アプリケーションの区別が非常に曖昧になります。
6. オフラインとストレージ
オフライン リソース: アプリケーション キャッシュ。 Firefox は、HTML5 オフライン リソース仕様を完全にサポートしています。他のほとんどのサービスは、オフライン リソースに対してある程度のサポートしか提供しません。
オンラインおよびオフラインのイベント。 Firefox 3 は、WHATWG のオンライン イベントとオフライン イベントをサポートします。これにより、アプリケーションと拡張機能は、ネットワーク接続が利用可能かどうかを検出し、接続が確立されたときと切断されたときを感知できます。
WHATWG クライアント セッションと永続ストレージ (別名 DOM ストレージ)。クライアント側のセッションと永続ストレージにより、Web アプリケーションは構造化データをクライアント側に保存できます。
インデックス付きDB。これは、大量の構造化データをブラウザに保存し、このデータのインデックスを使用して高パフォーマンスの検索を行うように設計された Web 標準です。
Web アプリケーションのファイルを使用します。新しい HTML5 ファイル API のサポートが Gecko に追加され、Web アプリケーションがユーザーが選択したローカル ファイルにアクセスできるようになりました。これには、ファイル タイプの 要素の新しい multiple 属性を使用した複数ファイル選択のサポートが含まれます。そしてファイルリーダー。
7、パフォーマンスと統合
Web ワーカー。 JavaScript の計算をバックグラウンド スレッドに委任する機能により、これらのアクティビティが許可されるため、インタラクティブなイベントの速度低下が防止されます。
XMLHttpRequest レベル 2。ページの一部を非同期で読み取ることができるため、時間やユーザーの行動に応じて変化する動的なコンテンツを表示できます。これが Ajax の背後にあるテクノロジーです。
ジャストインタイムでコンパイルされた JavaScript エンジン。新世代の JavaScript エンジンはより強力で、パフォーマンスも向上しています。
履歴 API。ブラウザ履歴の操作を許可します。これは、新しい情報を対話的に読み込むページに特に役立ちます。
conentEditable 属性: Web サイトを Wiki に変換しましょう! HTML5 は contentEditable 属性を標準化しました。この機能について詳しくは、こちらをご覧ください。 ＃＃＃＃＃＃ドラッグアンドドロップ。 HTML5 のドラッグ アンド ドロップ API は、サイト内およびサイト間でのアイテムのドラッグ アンド ドロップをサポートしています。また、拡張機能や Mozilla ベースのアプリケーションで使用するための、よりシンプルな API も提供します。
HTML での管理に重点を置きます。新しい HTML5 activeElement および hasFocus プロパティのサポート。
Web ベースのプロトコル ハンドラー。 navigator.registerProtocolHandler() メソッドを使用して、Web アプリケーションをプロトコル ハンドラーとして登録できるようになりました。
リクエストアニメーションフレーム。アニメーションのレンダリングを制御してパフォーマンスを向上させることができます。
全画面 API。コントロールは、ブラウザー インターフェイスを表示せずに、Web ページまたはアプリケーションの画面全体を使用します。
ポインタ ロック API。ポインタがウィンドウの制限に達したときにゲームや同様のアプリケーションがフォーカスを失わないように、ポインタをコンテンツにロックできるようにします。
オンラインおよびオフラインのイベント。オフライン対応の優れた Web アプリケーションを構築するには、アプリケーションが実際にいつオフラインになるかを知る必要があります。ちなみに、アプリケーションがいつ再びオンラインに戻るかを知る必要もあります。
8. デバイスアクセスカメラ API を使用します。コンピュータのカメラを使用および操作し、カメラから写真にアクセスできるようにします。
タッチイベント。ユーザーがタッチ スクリーンを押したときにイベントに反応するハンドラー。
地理位置情報ターゲティングを使用します。ブラウザーが地理位置情報サービスを使用してユーザーの位置を特定できるようにします。
デバイスの向きを検出します。ブラウザを実行しているデバイスの向きが変わったときに、ユーザーが情報を取得できるようにします。これは、入力デバイスとして使用したり (デバイスの位置に応答するゲームを作成する場合など)、ページのレイアウトを画面の向き (横向きまたは縦向き) に適応させるために使用できます。
ポインタ ロック API。ポインタがウィンドウの制限に達したときにゲームや同様のアプリケーションがフォーカスを失わないように、ポインタをコンテンツにロックできるようにします。
9. スタイル デザイン新しい背景スタイル機能。これで、box-shadow を使用して論理ボックスの影を設定できるようになり、複数の背景を設定することもできます。
さらに絶妙なボーダー。 border-image とそれに関連する Normal プロパティを使用して画像を使用して枠線を書式設定できるだけでなく、border-radius プロパティを通じて丸い枠線もサポートできるようになりました。
スタイルをアニメーション化します。 CSS トランジションを使用してさまざまな状態間でアニメーションを作成したり、CSS アニメーションを使用してトリガー イベントを使用せずにページの一部をアニメーション化したりすることで、ページ上で移動する要素を制御できるようになりました。
植字の改善。作成者はより詳細に制御できるため、より適切な書式設定が可能になります。テキストのオーバーフローやハイフネーションを制御できるだけでなく、テキストに影を設定したり、装飾をより細かく制御したりすることもできます。新しい @font-face ルールのおかげで、カスタム フォントをダウンロードして適用できるようになりました。 .
新しいプレゼンテーション レイアウト。デザインの柔軟性を向上させるために、CSS マルチカラム レイアウトと CSS フレキシブル ボックス レイアウトという 2 つの新しいレイアウトが追加されました。
関連する推奨事項:「
html ビデオ チュートリアル以上がhtml5にはどのような機能があるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
