HTML5:HTML5は次の世代のHTMLであり、HTML、XHTML、およびHTML DOMの新しい標準になります。今日は、HTML5の新機能であるFront -Endのインタビューが毎回尋ねられる質問について話しましょう。これは、学習のフロントエンドで習得しなければならない基本的な知識です。
新しい要素HTML5は、いくつかのより良いセマンティックラベル要素を追加します。
構造要素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プログラミングに置き換えることができます。
新しいAPI Canvas API上記のキャンバス要素は、グラフィックを表示するためのページのキャンバスを提供できます。 Canvas APIと組み合わせて、このキャンバスにさまざまなグラフィック、チャート、画像、アニメーションを動的に生成および表示できます。 Canvasは基本的にズームできません。各チャートをオブジェクトストレージとして使用する必要はなく、パフォーマンスのパフォーマンスは非常に優れています。
Canvas APIを使用して最初にCanvas要素のコンテキストを描画し、次にコンテキストにカプセル化されたさまざまな図面関数を使用して描画します。
<キャンバス>代替コンテンツ< /canvas> var canvas.getelementbyid( 'canvas'); /練習は、デフォルトの塗りつぶしが素晴らしい(0、0、100、100)SVG
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つの大きな利点があります。タグ。
<ビデオ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')。ジオロケーションAPI
HTML5 Geolocation API(地理的ポジショニングAPI)は、ユーザーに自分のポジションを共有するように依頼できます。使用方法は非常に簡単です。ユーザーが同意します。 。位置情報は、緯度、経度座標、その他のメタデータで構成されています。
位置情報はどこから来ますかGeolocation APIは、ユーザーを使用してアプリケーションのアプリケーションを見つけるための基礎テクノロジーを指定していません。代わりに、位置情報のAPIを取得するためにのみ使用され、APIを介して取得されたデータにはある程度の精度のみがあり、デバイスリターンの位置が正確であることを保証することはできません。デバイスは次のデータソースを使用できます。
3次元座標
GPS
MACは、RFID、WiFi、BluetoothからWiFiへのアドレスです
// navigator.geolocation.getCurrentposition(handlelocationer); //精度var timestamp = position.coords.timestamp;ロケーション更新navigator.geolocation.clearwatch(watchID);通信APIクロスドキュメントメッセージ送信
セキュリティ上の考慮事項については、同じブラウザのフレーム、タブ、およびWindows間の通信は常に厳密に制限されています。ただし、実際には、さまざまなサイトのコンテンツがブラウザで対話するための合理的な需要があります。この場合、ブラウザが直接通信メカニズムを提供できる場合、これらのアプリケーションをより適切に編成できます。
HTML5、Cross -Document Message Communicationで新しい機能が導入されています。メッセージ後のAPIは、メッセージを送信する標準的な方法です。
window.postmessage( 'hello、world'、 'http://www.example.com/');
メッセージを受信するときは、ページにイベント処理機能を追加するだけです。メッセージが届くと、メッセージのソースがメッセージを処理するかどうかを決定するために決定されます。
window.addeventlistener(メッセージ、true); t認識//メッセージは無視されます}}
メッセージイベントは、データ(データ)とOrigin属性を備えたDOMイベントです。データ属性は、送信者によって渡された実際のメッセージであり、Origin属性は送信ソースです。
XMLHTTPREQUESTレベル2XMLHTTPREQUEST APIにより、AJAXテクノロジーがXMLHTTPREQUESTのバージョンを可能にします。主に2つの側面があります。
過去には、XmlhttpRequestは相同コミュニケーションに限定されており、Xmlhttprequestレベル2はCORSを介した国境を越えたXmlhttprequestを実現しました。 Cross -Source HTTPリクエストには、HTTPリクエストのソース情報をサーバーに提供するOrigin Headが含まれています。
WebSockets APIWebSocketsは、HTML5で最も強力な通信機能です。
WebSocketsの握手WebSockets通信を確立するために、クライアントとサーバーは、HTTPプロトコルを手を振るときにWebSocketプロトコルにアップグレードします。接続が正常に確立されたら、完全なデュアルワーキングモードでクライアントとサーバーの間でWebSocketメッセージを前後に渡すことができます。
WebSocketsインターフェイスWebSocketsプロトコルの定義に加えて、仕様はJavaScriptアプリケーションのWebSocketインターフェイスも定義します。 WebSocketsインターフェイスの使用は非常に簡単です。リモートホストを接続するには、接続を期待するURLのペアを提供するために、新しいWebSocketインスタンスを作成するだけです。
APIを形成します新しいフォーム要素ユーザーに入力値がない場合、入力コントロールは、プレースホルダー機能を介して説明的な説明または迅速な情報をユーザーに表示できます。
<入力名=名前プレースホルダー=姓と姓>オートコンプリート
ブラウザは、AutoCompleteを介して入力値を保存する必要があるかどうかを知ることができます。
オートフォーカスオートフォーカスの特性を通じて、テーブル要素を指定して、各ページが設定されている場合、1つのオートフォーカス機能を取得できます。
スペルチェックテキストコンテンツとTextarea Spatial Control SpecialCheckプロパティを備えた入力制御。設定後、スペル検査の結果からフィードバックを提供する必要があるかどうかをブラウザに尋ねます。スペルチェック属性を割り当てる必要があります。
機能とデータリストの要素をリストしますリストの特性とデータリストの要素と組み合わせることにより、開発者は入力タイプのコントロールの値選択リストを作成できます。
<DataList ID = contactlist> <option value = [email protected]> </option> <option value = bq.com> </option> </datalist> <入力タイプ=電子メールID =連絡先リスト>MinとMax
MINとMAXの機能を設定することにより、範囲入力ボックスの値入力範囲を最小値と最高値の間で制限できます。 1つまたは2つまたは2つだけを設定できます。または、設定できません。
Stepp入力型コントロールの場合、ステップ特性を設定すると、入力値が増加または減少するという粒度が指定できます。
必須入力型制御に必要な機能が設定されたら、このアイテムを入力する必要があります。そうしないと、フォームを提出できません。
APIをドラッグアンドドロップしますドラッグ可能な属性Web要素のドラッグ可能な要素がtrueの場合、この要素をドラッグできます。
<div draggable = true> draggable div </div>ドラッグアンドドロップ
ドラッグプロセスは、主に以下で多くのイベントをトリガーします。
draggablelement.addeventlistener( 'dragstart'、function(e){console.log( 'drag start!');}); DatAtransferオブジェクトドラッグ中、コールバック関数によって受け入れられたイベントパラメーターには、ドラッグに関連するさまざまな情報を含むオブジェクトを指して、DatAtransfer属性があります。
draggablelement.addeventlistener( 'dragstart'、function(event){event.datatransfer.setdata( 'text'、 'hello world!');}); DataTransferオブジェクトの属性は次のとおりです。JavaScriptは単一のスレッドです。したがって、長い期間の計算により、UIスレッドをブロックするために戻ると、テキストがテキストボックスにテキストを入力し、ボタンなどをクリックし、ほとんどのブラウザでは、コントロールが返されない限り、開くことができません新しいタブページこの問題の解決策は、Webワーカーであり、Webアプリケーションがバックグラウンド処理機能を持つことができ、マルチスレッドのサポートは非常に優れています。
ただし、Webワーカーで実行されたスクリプトは、ページ上のウィンドウオブジェクトにアクセスできません。つまり、WebワーカーはWebページとDom APIに直接アクセスすることはできません。 WebワーカーはブラウザUIの応答を停止することはありませんが、CPUサイクルを消費するため、応答速度が遅くなります。
WebストレージAPIWebストレージは、HTML5によって導入された非常に重要な機能です。
sessionstorageSessionStorageはセッションでデータを保存し、ブラウザはデータをシャットダウンして消えます。
LocalStorageLocalStorageは、手動で削除されない限り、常にクライアントにデータを保存しています。
SessionStorageであろうとLocalStorageであろうと、使用できるAPIは同じです。
上記は、この記事のコンテンツがすべての学習や仕事をするのに役立つことを願っています。