フロントエンドインタビューに必要なHTML5の新機能

HTML5：HTML5は次の世代のHTMLであり、HTML、XHTML、およびHTML DOMの新しい標準になります。今日は、HTML5の新機能であるFront -Endのインタビューが毎回尋ねられる質問について話しましょう。これは、学習のフロントエンドで習得しなければならない基本的な知識です。

HTML5は、いくつかのより良いセマンティックラベル要素を追加します。

1. 記事要素は、ブログの記事など、コンテキストに関連しない独立したコンテンツを表します。
2. 別として、要素は記事のコンテンツ、支援情報以外のコンテンツを表します。
3. ヘッダー要素は、ページ内のページ全体のコンテンツブロックまたはヘッダーを表します。
4. HGroup要素は、ページ内のブロックまたはページ全体のタイトルを組み合わせるために使用されます。
5. フッター要素は、ページ内のコンテンツブロックまたはフルページを示します。
6. 図要素は、メディアコンテンツのグループ化とそのタイトルを表します。
7. セクション要素は、章などのページ内のコンテンツブロックを表します。
8. NAV要素は、ページのナビゲーションリンクを示します。

1. ビデオ要素は、ビデオの定義に使用されます。
2. オーディオ要素は、オーディオを定義するために使用されます。
3. Canvas Elementはグラフィックを表示するために使用されます。グラフィックスは、動作自体がなく、1つのキャンバスのみがあります。
4. 埋め込み要素は、さまざまなマルチメディアを挿入するために使用されます。
5. マーク要素は、ハイライトを表示するために使用されます。
6. プログレス要素は、あらゆるタイプのタスクの進行状況を示すために使用されます。
7. メーター要素は、測定値を示し、事前に定義された範囲内の測定を定義します。
8. 時間要素は、日付または時刻を表示するために使用されます。
9. コマンド要素、コマンドボタンを示します。
10. 詳細要素は、ユーザーが必要とする情報を表示し、取得できる詳細情報を表示するために使用されます。
11. 概要要素は、詳細要素の可視タイトルを定義するために使用されます。
12. Datalist要素は、オプションのデータリストを表示するために使用されます。
13. Datagrid要素は、ツリーリストの形式で表示されるオプションのデータリストを表示するためにも使用されます。
14. keygen要素は、生成するキーを示します。
15. 出力要素は、異なるタイプの出力を示します。
16. ソース要素は、メディア要素のメディアリソースを定義します。
17. メニュー要素はメニューリストを示します。
18. Ruby要素はRubyのコメントを表し、RT要素は文字の解釈または発音を表します。 RP要素は、Rubyノートで使用されて、Ruby要素をサポートしていないブラウザによって表示されるコンテンツを定義します。
19. WBR要素はソフトスイッチングを示します。 BR要素との違いは、BR要素がWBR要素がブラウザウィンドウまたは親レベル要素の幅を意味することを意味することです。ラインを変更しないでください。幅が十分でない場合は、銀行を変更するためのイニシアチブを取得してください。
20. BDI要素は、テキストのテキストの方向を定義し、その周りのテキストの方向から出発します。
21. ダイアログ要素は、ダイアログボックスまたはウィンドウを示します。

HTML5では、純粋に式の要素が廃止されます。

純粋な表現の要素は、CSSに置き換えることができる要素です。 BaseFont、Big、Center、Font、S、Strike、TT、U、それらの機能は、Page DisplayをCSSスタイルに置き換えるために純粋に表示されます。

フレームセット要素、フレーム要素、およびNoframes要素の場合、フレームフレームワークはWebの可用性にマイナスの効果があるため、Frame FrameworkはHTML5ではサポートされなくなり、HTML5もフレームセット、フレーム、Noframesを廃止します。

Applet、Bgsound、Blink、Marquee、およびその他の要素の場合、特にBGSound要素とMarkee要素のみがIEによってのみサポートされているため、HTML5で廃止されているため、BGSound、Blink、Marquee、その他の要素の場合。アプレット要素は、埋め込み要素またはオブジェクト要素に置き換えられ、BGSound要素はオーディオ要素に置き換えられ、マーキーはJavaScriptプログラミングに置き換えることができます。

上記のキャンバス要素は、グラフィックを表示するためのページのキャンバスを提供できます。 Canvas APIと組み合わせて、このキャンバスにさまざまなグラフィック、チャート、画像、アニメーションを動的に生成および表示できます。 Canvasは基本的にズームできません。各チャートをオブジェクトストレージとして使用する必要はなく、パフォーマンスのパフォーマンスは非常に優れています。

Canvas APIを使用して最初にCanvas要素のコンテキストを描画し、次にコンテキストにカプセル化されたさまざまな図面関数を使用して描画します。

 <キャンバス>代替コンテンツ< /canvas> var canvas.getelementbyid（ 'canvas'）; /練習は、デフォルトの塗りつぶしが素晴らしい（0、0、100、100）

SVGは、HTML5のもう1つのグラフィック機能です。これは、独自のAPIを備えたファイル形式です。 HTML5は、SVG要素がHTMLマークに直接表示できるように、内部組合SVGを導入します。

 <svg height = 100 width = 100> <circle cx = 50 cy = 50 r = 50 /svg>

オーディオおよびビデオ要素の出現により、HTML5メディアアプリケーションは、プラグインを使用せずにオーディオとビデオをより多く再生できます。これらの2つの要素について、HTML5仕様は、一般的な、完全な、およびスクリプト制御APIを提供します。

HTML5仕様が発表される前に、ページでビデオを再生する典型的な方法は、HTMLにFlash、Quicktime、またはWindowsメディアプラグインを使用して、HTML5メディアを使用する2つの大きな利点があります。タグ。

1. ブラウザのネイティブサポートの機能として、新しいオーディオおよびビデオ要素をインストールする必要はありません。
2. メディア要素は、Webページに、普遍的で統合され、スクリプト制御されたAPIを提供することを望んでいます。

 <ビデオsrc = video.webm controls> <object data = videoplayer.swf type = application /x-shockwave-flash> <param name = video.swf /> < /object>あなたのブラウザはhtml5ビデオをサポートしていません。 </video>

ブラウザ検出がオーディオ要素またはビデオ要素をサポートするかどうかは、スクリプトで動的に作成し、特定の関数が存在するかどうかを検出する最も簡単な方法です。

 var hasvideo = !!（document.createelement（ 'video'）。

HTML5 Geolocation API（地理的ポジショニングAPI）は、ユーザーに自分のポジションを共有するように依頼できます。使用方法は非常に簡単です。ユーザーが同意します。 。位置情報は、緯度、経度座標、その他のメタデータで構成されています。

Geolocation APIは、ユーザーを使用してアプリケーションのアプリケーションを見つけるための基礎テクノロジーを指定していません。代わりに、位置情報のAPIを取得するためにのみ使用され、APIを介して取得されたデータにはある程度の精度のみがあり、デバイスリターンの位置が正確であることを保証することはできません。デバイスは次のデータソースを使用できます。

1. IPアドレス

   3次元座標

   GPS

   MACは、RFID、WiFi、BluetoothからWiFiへのアドレスです

2. GSMまたはCDMA電話ID
3. ユーザーカスタマイズされたデータ

// navigator.geolocation.getCurrentposition（handlelocationer）; //精度var timestamp = position.coords.timestamp;ロケーション更新navigator.geolocation.clearwatch（watchID）;

セキュリティ上の考慮事項については、同じブラウザのフレーム、タブ、およびWindows間の通信は常に厳密に制限されています。ただし、実際には、さまざまなサイトのコンテンツがブラウザで対話するための合理的な需要があります。この場合、ブラウザが直接通信メカニズムを提供できる場合、これらのアプリケーションをより適切に編成できます。

HTML5、Cross -Document Message Communicationで新しい機能が導入されています。メッセージ後のAPIは、メッセージを送信する標準的な方法です。

 window.postmessage（ 'hello、world'、 'http://www.example.com/'）;

メッセージを受信するときは、ページにイベント処理機能を追加するだけです。メッセージが届くと、メッセージのソースがメッセージを処理するかどうかを決定するために決定されます。

 window.addeventlistener（メッセージ、true）; t認識//メッセージは無視されます}}

メッセージイベントは、データ（データ）とOrigin属性を備えたDOMイベントです。データ属性は、送信者によって渡された実際のメッセージであり、Origin属性は送信ソースです。

XMLHTTPREQUEST APIにより、AJAXテクノロジーがXMLHTTPREQUESTのバージョンを可能にします。主に2つの側面があります。

1. Cross -Source xmlhttprequest
2. 進捗

過去には、XmlhttpRequestは相同コミュニケーションに限定されており、Xmlhttprequestレベル2はCORSを介した国境を越えたXmlhttprequestを実現しました。 Cross -Source HTTPリクエストには、HTTPリクエストのソース情報をサーバーに提供するOrigin Headが含まれています。

WebSocketsは、HTML5で最も強力な通信機能です。

WebSockets通信を確立するために、クライアントとサーバーは、HTTPプロトコルを手を振るときにWebSocketプロトコルにアップグレードします。接続が正常に確立されたら、完全なデュアルワーキングモードでクライアントとサーバーの間でWebSocketメッセージを前後に渡すことができます。

WebSocketsプロトコルの定義に加えて、仕様はJavaScriptアプリケーションのWebSocketインターフェイスも定義します。 WebSocketsインターフェイスの使用は非常に簡単です。リモートホストを接続するには、接続を期待するURLのペアを提供するために、新しいWebSocketインスタンスを作成するだけです。

1. 電話番号を示すTel要素。
2. 電子メール要素は、電子メールアドレスのテキストボックスを示します。
3. URL要素は、WebページのURLを示します。
4. サイトの上部に表示される検索ボックスなどの検索エンジンの検索要素。
5. 範囲要素、特定の範囲の数値セレクター、一般的なディスプレイはスライドバーです。
6. 番号要素には、値フィールドのみが含まれます。

1. カラーパレットまたはカラーパレットまたは選択のための着色ボードに基づくカラー要素、カラーセレクター。
2. DateTime要素は、タイムゾーンを含む完全な日付と時刻を示しています。
3. DateTime-Local、表示日と時刻。
4. タイム要素、タイムセレクター、およびタイムゾーンのインジケーター。
5. 日付要素、日付セレクター。
6. 週の要素、特定の年の毎週の選択者。
7. 月の要素、特定の年の毎月のセレクター。

ユーザーに入力値がない場合、入力コントロールは、プレースホルダー機能を介して説明的な説明または迅速な情報をユーザーに表示できます。

 <入力名=名前プレースホルダー=姓と姓>

ブラウザは、AutoCompleteを介して入力値を保存する必要があるかどうかを知ることができます。

オートフォーカスの特性を通じて、テーブル要素を指定して、各ページが設定されている場合、1つのオートフォーカス機能を取得できます。

テキストコンテンツとTextarea Spatial Control SpecialCheckプロパティを備えた入力制御。設定後、スペル検査の結果からフィードバックを提供する必要があるかどうかをブラウザに尋ねます。スペルチェック属性を割り当てる必要があります。

リストの特性とデータリストの要素と組み合わせることにより、開発者は入力タイプのコントロールの値選択リストを作成できます。

 <Da​​taList ID = contactlist> <option value = [email protected]> </option> <option value = bq.com> </option> </datalist> <入力タイプ=電子メールID =連絡先リスト>

MINとMAXの機能を設定することにより、範囲入力ボックスの値入力範囲を最小値と最高値の間で制限できます。 1つまたは2つまたは2つだけを設定できます。または、設定できません。

入力型コントロールの場合、ステップ特性を設定すると、入力値が増加または減少するという粒度が指定できます。

入力型制御に必要な機能が設定されたら、このアイテムを入力する必要があります。そうしないと、フォームを提出できません。

Web要素のドラッグ可能な要素がtrueの場合、この要素をドラッグできます。

 <div draggable = true> draggable div </div>

ドラッグプロセスは、主に以下で多くのイベントをトリガーします。

1. Dragstart：ドラッグ時にWebページ要素がトリガーされます。
2. ドラッグ：ドラッグ中にドラッグされた要素は引き続きトリガーされます。
3. Dragenter：ターゲット要素を入力するときにドラッグされた要素がトリガーされると、イベントはターゲット要素を聞く必要があります。
4. DragLeave：ドラッグされた要素がトリガーされると、イベントはオブジェクト要素を聞く必要があります。
5. Dragover：ドラッグ要素がターゲット要素にとどまると、連続トリガーが行われ、イベントはターゲット要素に耳を傾ける必要があります。
6. ドラップ：ファイルシステムから選択された要素またはファイルをドラッグし、ドラッグして落下するときにトリガーします。
7. Dragend：Webページ要素は最後にトリガーされます。

 draggablelement.addeventlistener（ 'dragstart'、function（e）{console.log（ 'drag start！'）;}）;

ドラッグ中、コールバック関数によって受け入れられたイベントパラメーターには、ドラッグに関連するさまざまな情報を含むオブジェクトを指して、DatAtransfer属性があります。

 draggablelement.addeventlistener（ 'dragstart'、function（event）{event.datatransfer.setdata（ 'text'、 'hello world！'）;}）;

1. DROPEFFECT：ドラッグアンドドロップ操作タイプは、ブラウザがマウスの形状をどのように表示するかを決定します。
2. empeclowed：許容操作を指定すると、可能な値はコピー、移動、リンク、copylink、copymove、linkmove、すべて、なし、および非初期化です（デフォルト値はすべてに相当します。つまり、すべての操作を許可します）。
3. ファイル：ファイルリストオブジェクトが含まれており、ドラッグアンドドロップに含まれるファイルを示します。これは、主にファイルシステムからブラウザにドラッグされたファイルを処理するために使用されます。
4. タイプ：DatAtransferオブジェクトに保存されているデータのタイプ。

1. setData（フォーマット、データ）：DataTransferオブジェクトにデータを保存します。最初のパラメーター形式は、テキスト、URL、テキスト/HTMLなどのストレージデータ型を指定するために使用されます。
2. getData（フォーマット）：DataTransferオブジェクトからデータを取得します。
3. ClearData（フォーマット）：DataTransferオブジェクトによって保存されているデータをクリアします。フォーマットパラメーターが指定されている場合、フォーマットのデータのみがクリアされます。そうしないと、すべてのデータが削除されます。
4. SetDragImage（Imagelement、x、y）：ドラッグプロセス中に表示された画像を指定します。デフォルトでは、多くのブラウザがドラッグ要素の半透明バージョンを表示します。パラメーターimgelementは、画像のパスではなく画像要素でなければならず、パラメーターxとyはマウスの画像の位置を示します。

JavaScriptは単一のスレッドです。したがって、長い期間の計算により、UIスレッドをブロックするために戻ると、テキストがテキストボックスにテキストを入力し、ボタンなどをクリックし、ほとんどのブラウザでは、コントロールが返されない限り、開くことができません新しいタブページこの問題の解決策は、Webワーカーであり、Webアプリケーションがバックグラウンド処理機能を持つことができ、マルチスレッドのサポートは非​​常に優れています。

ただし、Webワーカーで実行されたスクリプトは、ページ上のウィンドウオブジェクトにアクセスできません。つまり、WebワーカーはWebページとDom APIに直接アクセスすることはできません。 WebワーカーはブラウザUIの応答を停止することはありませんが、CPUサイクルを消費するため、応答速度が遅くなります。

Webストレージは、HTML5によって導入された非常に重要な機能です。

SessionStorageはセッションでデータを保存し、ブラウザはデータをシャットダウンして消えます。

LocalStorageは、手動で削除されない限り、常にクライアントにデータを保存しています。

SessionStorageであろうとLocalStorageであろうと、使用できるAPIは同じです。

1. データの保存：localStorage.setItem（key、value）;
2. データを読む：localstorage.getitem（key）;
3. 単一のデータを削除します：localStorage.RemoveItem（key）;
4. すべてのデータを削除：localStorage.clear（）;
5. 特定のインデックスを取得するためのキー：localStorage.key（index）;

上記は、この記事のコンテンツがすべての学習や仕事をするのに役立つことを願っています。