HTML5の新機能(セクション)
セマンティック特性
HTML5のWebページには、より良い意味や構造を与えます。プログラムを構築するためのRDFaをの側面、ミクロデータとマイクロフォーマットなど、をサポートし、より豊かなラベル、ユーザーは、データ駆動型のWebのためのより多くの価値があります。
人気の用語は、そのようなH1〜H6タグ、pタグと段落とのタイトルとして表示内容に合理的な、正しいラベルの使用です。
利点:
- 読みやすいユーザー・スタイルは、ページのレンダリング明確な構造を作るための時間を失いました。
- SEO、右文脈とラベルに従って各キーワード重みを決定するために、検索エンジンに資します。
- セマンティックWebページのレンダリングにかかるブラインドのためのリーダーのようなその他の便利な分析装置、
- CSS3とセマンティックコードが読みやすく、より保守し、より調和のとれた関係の発展と維持に資します。
- 新しいラベル -
- レンダリング -
2.ローカルストレージ
H5はのsessionStorage、のlocalStorageとのIndexedDBは、ローカルストレージを強化しています。
注意:ストレージタイプは、文字列のみを保存することができます。非データ文字列は保存前に文字列に変換され、
2.1ローカルストレージ方法
1.Cookie:ブラウザを介してデータを追加したり削除したりするコンピュータ制御に格納されたデータ
の特徴:
- ストレージの制限:100ドメインクッキー、各4キロバイトの大きさの値
- クライアント、サーバは、サーバが要求する(ヘッダ情報)
- クッキーは、ページ間で共有されます
2.localStorageとのsessionStorage
;のlocalStorageが開いているか、ローカルキャッシュが再び記録している現在のページを残して、永久記憶である
のsessionStorageはブラウザセッションのデータを保存し、ときに、セッションが終了する(通常のウィンドウが閉じている)、データがクリアされています。
利点:
- クッキー4Kの限界を広げるのlocalStorage
- localStorageは初めて要求されたデータがローカルに直接保存され、これは、帯域幅を節約することができクッキーに比べて、ページのデータベースフロントエンドへのブラウザのだけ高いバージョンのための5Mのサイズと同等であるが、これはあるだろうサポート。
制限事項: - ブラウザの大きさが均一ではなく、それはIE8 IEのバージョンよりも中のlocalStorageにこのプロパティをサポートしています。
- 現在のすべてのブラウザはのlocalStorage値の型が文字列型として定義されて入れます、この変換は日常より一般的なJSONオブジェクト型の私たちのいくつかを取ります。
- ブラウザーのプライバシーモード以下でのlocalStorageは読めないです。
- それはのlocalStorage本質に文字列を読み込み、保存されたコンテンツや複数の単語は、メモリ容量を消費する場合はページがカードを変更します。
- localStorage爬虫類をクロールすることはできません。
- sessionStorageはブラウザの大量のデータを保存することができます。
- 同じウィンドウの下のsessionStorage、独立したメモリ;非干渉
使用法:
-
保存数据:
localStorage.setItem(「キー」、「値」);
sessionStorage.setItem(「キー」、「値」);
注:保存された記憶場所の間で異なるブラウザで同じではない、普遍的にすることはできません。
------(SetItem関数を除く)と操作属性の形でのgetItem()メソッドは、さらに、データを操作するために使用することができます------
-
データ収集:
localStorage.getItem( "キー");
sessionStorage.getItem( "キー")。
-
削除データ(名前はデータを対応するキーをクリア):
localStorage.removeItem(「キー」);
sessionStorage.removeItem(「キー」);
注:クリアキー名文句はありません、ただ黙って失敗が存在しません------ removeItem()メソッドを使用することに加えて、あなたはまた、明確なデータにdelete演算子を使用することができます------
注:IE7-ブラウザは明確なデータストレージへのdelete演算子をサポートしていません。 -
(すべて保存されたデータをクリアする)をクリアローカルキャッシュ:
localStorage.clear();
sessionStorage.clear();
3.オフラインWebアプリケーション
何のネットワーク状態でアプリケーションを実行することはできませんオフラインWebアプリケーション手段
利点:
- オフラインブラウジング - ユーザーがアプリケーションをオフラインでそれらを使用することができます
- スピード - キャッシュされたリソースは、より速くロード
- サーバーの負荷を軽減する - ブラウザだけでサーバーから更新または変更されたリソースをダウンロードします。
使用法:
アプリケーションキャッシュを有効にするには、ラベルは文書の中でマニフェスト属性を含める必要があります
(demo.cacheファイルからなる)は、組成物マニフェストファイル
4. geopositioning
HTML5ジオロケーションAPIは、ユーザの位置を取得します。
(ユーザが他のユーザの位置情報が利用できない、同意しない限り、この機能を考慮して、ユーザのプライバシーを侵害してもよいです。)
5.新しいビデオタグ
異なるブラウザ、異なるデフォルトのスタイル、サポートされるビデオ形式でも異なってい
クローム:3つのフォーマットがサポートされている
Firefoxの:3つのフォーマットがサポートされている
のみサポートMP4:サファリ
ヨーロッパの友人を:3つのフォーマットがサポートされて
IE8を上下:サポートされていませんビデオラベル
IE9 +:サポートビデオタグのみサポートMP4
財産の一部:
自動再生自動再生
ループサイクル
ポスタービデオカバーは、ビデオのみ最初の負荷がときに発生する
ビデオのミュートミュート
注:クロームデフォルトの自動再生が自動的に再生されませんが、あなたがミュートに設定した場合、あなたは遊び自動的にすることができます
6.フォームの新機能
入力値の型:
オリジナルのテキスト、パスワード、ラジオ、チェックボックス 、ファイル、提出、リセット、ボタン、画像、隠れて
、コメントを追加しました:
----フォームが送信し、プロンプトされたときに検証することができます ----
新しいフォーム要素の属性:
オリジナル:ID、クラス、タイトル、スタイル 、タイプ、名前、値、チェックし、選択、無効、読み取り専用
追加:
注:使用最小値と最大値型のステップを指定する必要が
- -フォームが送信し、プロンプトされたときに検証さ ----
7.ドラッグプロパティ
マウスクリックは、ソースオブジェクトを参照した後、対象のオブジェクトに移動ドラッグしてみましょうか、手放す途中(リリース)プロセス
ドラッグ:ドラッグ
ソースオブジェクト:指定された事のマウスクリック、例えば:要素、などの映像として
の目標は、オブジェクト:我々はエリア入ることが予想され、ドラッグソースオブジェクトかどうかを指定する
機能を:ソースとターゲットオブジェクト間でデータを渡します
方法は、トリガすることができますソースオブジェクトをドラッグ:
- ondragstart:ソースオブジェクトがドラッグされるようになりました
- ondrag:ドラッグして、
- ondragend:ソースオブジェクトは、エンドをドラッグします
イベントソースオブジェクトをトリガすることができ、対象物に入ります。
- ondragenter:ソースオブジェクトがターゲット・オブジェクト・トリガーを入力します
- OnDblClick:ソースオブジェクトは、ターゲットオブジェクトのトリガを超えるホバリング
- ondragleave:ソースオブジェクトは、ターゲットオブジェクトのトリガーから離れてドラッグすると
- ondrop:手放す際に、対象物上のトリガソースのオブジェクト
のレンダリングの
コンソール結果
8.デバイスの互換性
H5は、データおよびアプリケーションインターフェイスに前例のないオープンなアクセスを提供します。外部および内部データのアプリケーションを直接ブラウザに直接接続することができるが、例えば、ビデオおよびオーディオを直接マイクやカメラを関連付けることができます。
参考サイト:
https://www.jianshu.com/p/b3762ca713b1
https://www.jianshu.com/p/9e6d7c31573f
https://blog.csdn.net/qinshensx/article/details/104174347