HTML5 - 1の基本を確認

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.ドラッグプロパティ

マウスクリックは、ソースオブジェクトを参照した後、対象のオブジェクトに移動ドラッグしてみましょうか、手放す途中(リリース)プロセス
ドラッグ:ドラッグ
ソースオブジェクト:指定された事のマウスクリック、例えば:要素、などの映像として
の目標は、オブジェクト:我々はエリア入ることが予想され、ドラッグソースオブジェクトかどうかを指定する
機能を:ソースとターゲットオブジェクト間でデータを渡します

方法は、トリガすることができますソースオブジェクトをドラッグ:

  1. ondragstart:ソースオブジェクトがドラッグされるようになりました
  2. ondrag:ドラッグして、
  3. ondragend:ソースオブジェクトは、エンドをドラッグします

イベントソースオブジェクトをトリガすることができ、対象物に入ります。

  1. ondragenter:ソースオブジェクトがターゲット・オブジェクト・トリガーを入力します
  2. OnDblClick:ソースオブジェクトは、ターゲットオブジェクトのトリガを超えるホバリング
  3. ondragleave:ソースオブジェクトは、ターゲットオブジェクトのトリガーから離れてドラッグすると
  4. ondrop:手放す際に、対象物上のトリガソースのオブジェクト
    ここに画像を挿入説明
    ここに画像を挿入説明
    のレンダリングの
    ここに画像を挿入説明
    コンソール結果
    ここに画像を挿入説明
8.デバイスの互換性

H5は、データおよびアプリケーションインターフェイスに前例のないオープンなアクセスを提供します。外部および内部データのアプリケーションを直接ブラウザに直接接続することができるが、例えば、ビデオおよびオーディオを直接マイクやカメラを関連付けることができます。

参考サイト:
https://www.jianshu.com/p/b3762ca713b1
https://www.jianshu.com/p/9e6d7c31573f
https://blog.csdn.net/qinshensx/article/details/104174347

出版元の記事 ウォンの賞賛2 ビュー88

おすすめ

転載: blog.csdn.net/sxy799/article/details/104748534