html5 共通の新機能: 1. キャンバス描画; 2. フォーム要素; 3. セマンティック タグ; 4. メディア要素; 5. 地理位置情報; 6. ドラッグ アンド ドロップ API; 7. WebWorker; 8. WebStorage; 6. 9. WebSocket; 10. SVG 描画。 HTML5 は最新の HTML 標準であり、追加のプラグインを必要とせずにリッチな Web コンテンツを伝送できるように特別に設計されており、Web アプリケーションの構築を簡素化する新しい要素と新しい API を提供します。
このチュートリアルのオペレーティング システム: Windows 10 システム、HTML5 バージョン、DELL G3 コンピューター。
HTML5 とは:
1. HTML5 は最新の HTML 標準です。
2. HTML5 は、追加のプラグインを必要とせずにリッチな Web コンテンツをホストできるように特別に設計されています。
3. HTML5 には、新しいセマンティクス、グラフィックス、マルチメディア要素が含まれています。
4. HTML5 によって提供される新しい要素と新しい API により、Web アプリケーションの構築が簡素化されます。
5. HTML5 はクロスプラットフォームであり、さまざまな種類のハードウェア (PC、タブレット、携帯電話、テレビなど) で実行できるように設計されています。
#HTML5 の一般的な新機能:
#1. Canvas 要素
2. フォーム要素
: 入力フィールドのオプション リストを指定する要素です。 use 要素の ID にバインドされます;
: ユーザーを検証するための信頼できる方法を提供します。タグはキー ペアを指定しますフォームに使用されるジェネレーター。フィールド;
: 計算やスクリプト出力など、さまざまなタイプの出力に使用されます。
(2) 新しいフォーム属性
プレースホダー属性: ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます (デフォルトのボックス プロンプトです)。 #required 属性: 入力フィールドが空でないように入力する必要があるブール属性です;
pattern 属性:
max/min 属性: 最大値と最小値;
step 属性: 入力フィールドの有効な数値間隔を指定;
height/width 属性: 画像の高さに使用されます画像タイプ幅の
autofocus 属性: ページのロード時に自動的にフォーカスを取得するブール型属性;
multiple 属性:ブール属性。
3. セマンティック タグ
セマンティック タグは、タグに独自の意味を持たせるだけでなく、セマンティック タグの利点もあります: (1) コード構造を作成するインターフェイスが明確で、コードの読み取りや共同チーム開発に便利、(2) 他のデバイス (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) が意味論的な方法で Web ページをレンダリングするために解析するのに便利、(3) 検索が容易エンジン最適化 (SEO)。
4. メディア要素
オーディオ ファイルを再生するための要素————<オーディオ コントロール>
(2) ブラウザがサポートしていない 要素のプロンプト テキストを と
(3) 複数の 要素を使用して、異なるオーディオ ファイルをリンクできるようにします。ブラウザは、最初にサポートされているオーディオ ファイルを使用します。
(4) 3 つのオーディオ フォーマット ファイルをサポートします: mp3、wax、ああ。
ビデオ ファイルを再生するための要素
(1) control 属性は、再生の一時停止と音量のコントロールを提供します。また、dom 操作 (play() およびポーズ();#) も使用できます。
## (2) video 要素は、ビデオのサイズを制御するために幅と高さを提供します。設定されている場合、ページの読み込み時に保持されます。設定されていない場合、保持されません。ページは元のビデオに基づいて変更されます。
5. 地理位置情報
HTML5 は getCurrentPosition() メソッドを使用してユーザーの位置を取得し、これに基づいて位置距離を計算できます。
ドラッグ アンド ドロップは一般的な機能で、オブジェクトを取得して別の場所にドラッグします。 HTML5 では、ドラッグ アンド ドロップが標準の一部であり、任意の要素をドラッグ アンド ドロップできます。ドラッグ アンド ドロップのプロセスは、ソース オブジェクトとターゲット オブジェクトに分かれています。ソース オブジェクトはドラッグしようとしている要素を指し、ターゲット オブジェクトはドラッグ後に配置するターゲットの場所を指します。
ドラッグ アンド ドロップのソース オブジェクト (移動される可能性がある) によってトリガーできるイベント - 3:
dragstart: ドラッグの開始ドラッグ: ドラッグのドラッグend: ドラッグの終了
ドラッグ プロセス全体は次の内容で構成されます: ドラッグ開始*1 ドラッグ*n ドラッグ終了*1。
ドラッグ アンド ドロップのターゲット オブジェクト (移動しない) によってトリガーできるイベント - 4:
dragenter: ドラッグしてドラッグオーバー: ドラッグしてホバリングragleave: ドラッグして放置ドロップ: release
ドラッグ処理全体の構成 1:dragenter*1 ドラッグオーバー*n ドラッグリーブ*1;
ドラッグ処理全体の構成 2:dragenter*1 ドラッグオーバー*n ドロップ* 1 。
7. Web ワーカー
HTML ページでスクリプトを実行すると、スクリプトが完了するまでページは応答しません。 Web ワーカーは、他のスクリプトから独立してバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。 Web ワーカーがバックグラウンドで実行されている間、クリックしたり、コンテンツを選択したりするなど、必要な操作を続行できます。
8. Web ストレージ
Web ストレージは、Cookie ストレージのローカル キャッシュを解決するために H5 によって導入された重要な機能です。以前は、ローカル ストレージでは Cookie が使用されていました。しかし、Web ストレージはより安全で高速である必要があり、Web ストレージの容量は 5M ですが、Cookie はわずか 4K です。
9. Web ソケット
WebSocket プロトコルは、Web アプリケーション クライアントとサーバー間の全二重通信メカニズムを提供します。 WebSocket API では、ブラウザとサーバーはハンドシェイク アクションを実行するだけで、ブラウザとサーバーの間に高速チャネルが形成され、両者の間でデータを直接送信できます。ブラウザは JavaScript を介して WebSocket 接続を確立するリクエストをサーバーに送信し、接続が確立されると、クライアントとサーバーは TCP 接続を介して直接データを交換できます。 Web Socket 接続を取得したら、send() メソッドを通じてサーバーにデータを送信し、onmessage イベントを通じてサーバーから返されたデータを受信できます。
10. SVG 描画
SVG は、XML を使用して 2D グラフィックスを記述する言語であるスケーラブル ベクター グラフィックスを指します。 SVG では、描画されたすべての形状がオブジェクトとして扱われます。 SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。
詳細情報
一般的な html5 イベントとは:
一般的な html5 イベントは次のとおりです: 1. 一般イベント、2. ページ関連イベント、2. ページ関連イベント。 3. フォーム関連イベント、4. ローリング字幕イベント、5. 編集イベント、6. トリガーされたイベント、7. 外部イベント。
1. 一般イベント
onClick: マウス クリック イベント、主にオブジェクトによって制御される範囲内のマウス クリックに使用されます; onDblClick: マウス ダブルクリック イベント; onMouseDown : マウス ボタンが押されたとき、onMouseUp: マウスが押されて放されたときにトリガーされるイベント、onMouseOver: マウスがオブジェクトの範囲の上に移動したときにトリガーされるイベント、onMouseMove: マウスが移動するときにトリガーされるイベント、onMouseOut: いつマウスがオブジェクトのスコープから外れたときにトリガーされるイベント、onKeyPress: キーボードのキーが押されて離されたときにトリガーされるイベント、onKeyDown: キーボードのキーが押されたときにトリガーされるイベント、onKeyUp: キーボードのキーが押されたときにトリガーされるイベントキーボードのキーが押された キーが押されて放されたときにトリガーされるイベント。
2. ページ関連イベント
onAbort: ダウンロード中にユーザーによって画像が中断されました; onBeforeUnload: 現在のページのコンテンツがダウンロードされようとしているときにトリガーされるイベント変更される; onError: スクリプト エラーや外部データ参照エラーなど、現在のページで何らかの理由で発生するエラーをキャッチする; onLoad: ページが空でブラウザに転送されるときにトリガーされるイベント (導入の完了を含む)外部ファイルの; onMove: ブラウザ ウィンドウが移動される 移動時にトリガーされるイベント; onResize: ブラウザ ウィンドウのサイズが変更されるときにトリガーされるイベント; onScroll: ブラウザーのスクロール バーの位置が変更されるときにトリガーされるイベント; onStop: ブラウザーの停止ボタンがオンになったときにトリガーされるイベント押されたか、ダウンロード中のファイルが中断されました; onUnload: 現在のページが変更されるときにトリガーされるイベント。
3. フォーム関連イベント
onBlur: 現在の要素がフォーカスを失ったときにトリガーされるイベント [マウスとキーボードの両方でトリガーできます]; onChange: 現在の要素フォーカスを失い、要素の内容が変更されたときにトリガーされるイベント [マウスまたはキーボードでトリガー可能]、onFocus: 要素がフォーカスを取得したときにトリガーされるイベント、onReset: フォームの RESET 属性がアクティブ化されたときにトリガーされるイベント、onSubmit : イベント フォームが送信されたときにトリガーされるイベント。
4. ローリング字幕イベント
onBounce: マーキー内のコンテンツがマーキーの表示範囲外に移動したときにトリガーされるイベント、onFinish: マーキー要素が完了し、表示する必要があります コンテンツの後にトリガーされるイベント; onStart: Marquee 要素がコンテンツの表示を開始するときにトリガーされるイベント。
5. 編集イベント
onBeforeCopy HTML: 現在選択されているページのコンテンツがビューアのシステムのクリップボードにコピーされる前にトリガーされるイベント、onBeforeCut:ページが次の場合 コンテンツの一部またはすべてが現在のページ [クリップ] から移動され、ビューアのシステム クリップボードに移動されるときにトリガーされるイベント。
6. トリガーされたイベント
onBeforeEditFocus: 現在の要素が編集状態に入ろうとしています; onBeforePaste: コンテンツがビューアのシステム クリップボードからページに転送 [貼り付け] されようとしているときにイベントがトリガーされます; onBeforeUpdate: ビューアが編集状態になったときにターゲットに通知しますコンテンツをシステム クリップボード オブジェクトに貼り付けます; onContextMenu: ブラウザがマウスの右ボタンを押してメニューを表示したときにトリガーされるイベント、またはキーボード キーを使用してページ メニューをトリガーしたときにトリガーされます [使用を無効にするには、ページに onContentMenu="return false" を追加してみてくださいマウスの右ボタンの]; onCopy: ページ上で現在選択されているコンテンツがコピーされるときにトリガーされるイベント; onCut: ページ上で現在選択されているコンテンツが切り取られるときにトリガーされるイベント; onDrag: オブジェクトがドラッグされるときにトリガーされるイベント [アクティビティ イベント] ;onDragDrop: 外部オブジェクトがマウスによって現在のウィンドウまたはフレームにドラッグされる; onDragEnd HTML: マウスのドラッグが終了する、つまりマウス ボタンが放されるとトリガーされるイベント; onDragEnter: オブジェクトがマウスによってドラッグされると、マウスがそのコンテナ範囲に入る onDragLeave: マウスによってドラッグされたオブジェクトがそのコンテナのスコープから出るときにトリガーされるイベント; onDragOver: ドラッグされたオブジェクトが別のオブジェクトのコンテナーのスコープ内にドラッグされるときにトリガーされるイベント [アクティブ イベント ]; onDragStart:オブジェクトがドラッグされようとしているときにトリガーされるイベント; onDrop: ドラッグ プロセス中にマウス ボタンが放されたときにトリガーされるイベント; onLoseCapture: 要素がマウスの移動によって形成された選択フォーカスを失ったときにトリガーされるイベント; onPaste: コンテンツが作成されたときにトリガーされるイベント貼り付けられます; onSelect: テキスト コンテンツが選択されたときにトリガーされるイベント; onSelectStart HTML: テキスト コンテンツの選択が開始されるときにトリガーされるイベント。
7. 外部イベント
onAfterPrint: ドキュメントが印刷されるときにトリガーされるイベント、onBeforePrint: ドキュメントが印刷されようとしているときにトリガーされるイベント、onFilterChange: いつオブジェクト 初期化プロパティの値が変更されたときにトリガーされるイベントのフィルター効果によってトリガーされるイベント。
以上がhtml5 の共通の新機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
