多くの友人が私に個人的にメッセージを送ってきて、html5 の新機能とその使い方について尋ねてきました。html5 の新機能について詳しく説明します。
1) 新しいセマンティック タグ フッター ヘッダーなど 2) 強化されたフォーム 2.0 3) オーディオとビデオ 4) キャンバス描画 5) SVG 描画 6) 地理位置情報 7) ドラッグ アンド ドロップ API 8) 時間のかかるタスクを実行する Web ワーカー 9) Webストレージはブラウザ側に大量のデータを保存します。 10) Web ソケットは永続的な接続です (非 http プロトコル)。
(1) 新しいセマンティック タグについては説明しません。
例: <footer></footer>
(2) 強化されたフォーム form 2.0
1つ、１）新入力タイプh4とh5の比較！
H4 での入力タイプ: text /password /radio /checkbox/sybmit/reset/file/hidden/image/
H5 の入力タイプ: email/url/number/tel/search /range /color/month/week/date
2) 新しいフォーム要素
H4 のフォーム要素: input/textarea/select、option/label
H5 の新しいフォーム要素: datalist/progress/meter/output
2. h5 の新しいフォーム要素 -- データリスト提案リスト<datalist id=lunchList> <option>豚肉の細切り北京ソース添え</option> <option>豚肉の国宝</option> <option>豚肉の細切り 魚風味</option> <option>豚肉の細切り ピーマン添え</オプション> <オプション >ディ・サンシアン</option></datalist>
必要なランチを入力してください：<input type=text name=lunch list=lunchList/>
次の 2 つの形式があります。
ブートストラップには進行状況プラグインスタイルがあります
<form> ネットワーク接続<progress></progress> <br/> <!-- 0-1 の間 --> ダウンロードの進行状況 <progress id=p3 value=0></progress> <input type=number value =1 ></form><script type=text/javascript> /*settimeout と setInterval の違いは、settimeout は 1 回実行され、setInterval は 2 回おきに実行されることです*/ var t=setInterval(function(){ var v = p3.value; v += 0.1; if(v>=1){ アラート(ダウンロード完了) } ; 5. h5-meter の新しいフォーム要素<body> 油分: <meter id=m1 min=0 max=100 low=30 high=70最適=40 value=50></meter> PM 値: <meter id=m2 min=0 max=500 low= 100 高=300 最適=150 値=750></meter></body>
メーター: 度量衡/スケール/、範囲をマークするために使用: 許容できない (赤)/許容できる (黄色)/非常に良い (緑)
<meter min=可取的最小值max=可取的最大值low=合理的下限值high=合理的上限值optimum=最佳值value=当前值></meter>
3) フォーム要素の新しい属性
1. H4 のフォーム要素の属性: <input>
id/クラス/タイトル/タイプ/値/名前/スタイル/読み取り専用/無効/チェック/
H5 のフォーム要素の新しい属性
1) プレースホルダー: プレースホルダー文字はプロンプトとして送信できません
<input value=tom placeholder=请输入用户名/>
2) オートフォーカス：入力フォーカスを自動的に取得します（クリックせずに入力できます。最初の入力設定のみが有効です）
<input autofocus>
3) 複数: 複数の入力値を入力ボックスに表示できます。[email protected]、[email protected] はコンマで区切られます。
<input type=email name=emails multiple>
4) フォーム: 入力フィールドを FORM の外に配置するために使用されます。
<form id=f5></from>
<input form=f5>
=================入力検証に関連する新しいプロパティ=========================== = =======
例については、入力検証関連の属性/yz.html を参照してください。
5)required: 必須、コンテンツを空にすることはできません
6) maxlength: 文字列の最大長を指定します。
7) minlength: 文字列の最小長を指定します。
8) max: 指定した数値の最大値
9) min: 指定した数値の最小値
10) パターン: 入力が一致する必要がある正規表現を指定します。
上記のvalidation属性は、form要素に対応するjsオブジェクトのvalidity属性に影響し、validity属性が検証の属性となります。
(3) ビデオ映像と音声
1.H5に置き換えられたフラッシュはどのような部分に映りますか？フラッシュ描画 (AS/FLEX) => キャンバス/SVG
Flashアニメーション => タイマー+キャンバス
ビデオとオーディオの再生 => ビデオ/オーディオ
フラッシュクライアントストレージ => WebStorage
2.H5 新機能 - ビデオプレーヤー (インラインブロック要素です。幅と高さを指定できます)H5 には、ビデオを再生するための新しいタブが用意されています。
<video src=></video> <video src=> <source src=res/birds.mp4></source> <source src=res/birds.ogg></source> <source src=res/birds.ウェブム></ソース>
お使いのブラウザはビデオ再生をサポートしていません。
</video> これ自体は 300*150 のインライン ブロック要素です。 注: 複数行のソースは、さまざまなブラウザーと互換性があるように作成されています。一部のブラウザはビデオ形式をサポートしていないため、mp4 形式をサポートしていない場合は、次の ogg ビデオをサポートしているかどうかを確認します。サポートされている場合は再生されます。サポートされていない場合は、下に進んでください。その場合、ブラウザがビデオの再生をサポートしていないことを意味します。 。
VIDEO タグ/オブジェクトの一般的に使用されるメンバー:
メンバーのプロパティ:
<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>
autoplay: false、自動的に再生するかどうか、デフォルトは false コントロール: false、再生コントロールを表示するかどうか、デフォルトは false ループ: false、再生をループするかどうか、デフォルトは false muted: false、再生をミュートするかどうか、デフォルトはfalse ポスター: ''、再生中 最初のフレームの前に表示されるポスター。画像にすることもできます。デフォルトは空でプリロードなし: ビデオのプリロード戦略、可能な値: auto: ビデオのメタデータと特定のバッファリング時間をプリロードします。携帯電話では使用できません (サイズ/期間。最初のフレームのコンテンツ、バッファリング時間)。 (事前ロードによりトラフィックが無駄になります) メタデータ: ビデオのメタデータ (サイズ/期間、最初のフレームのコンテンツ) のみを事前ロードします。バッファリング期間なし、携帯電話に適しています。 なし: データを事前ロードしません。
-------------------------------------------------- --------------- ID v2 の属性の使用例は次のとおりです。
v2.playbackRate=3;
currentTime: 現在の再生時間duration: 合計時間paused: true、現在のビデオが一時停止状態であるかどうか、true は一時停止中、false は再生中を意味します。 音量: 1 デフォルト値は 1、現在の音量 playbackRate: 1、再生レートは 1 より大きいは高速再生を意味し、1 未満は低速再生を意味します
ID v2 メソッド:
play(): ビデオを再生しますpause(): 再生メンバーを一時停止しますevent: onplay: ビデオの再生開始時にトリガーされるイベントonpause: ビデオが一時停止されるときにトリガーされるイベント練習: コントロールを使用せずに再生/一時停止ボタンをカスタマイズします。ビデオが付属しています。ボタンを非表示にするには、マウスをビデオ領域の外に移動します。例: ビデオ オーディオ、canvas/video.html 一時停止すると、広告が表示されます。再生すると広告が非表示になります。
3. H5の新機能 - オーディオプレーヤー
<audio src=></audio><audio src=><source src=res/birds.mp3></source><source src=res/birds.ogg></source><source src=res/birds. wav></ソース>
属性メソッドはビデオと同じですが、チェックボックスがオンになっているかどうかを決定するポスター属性***がない点が異なります。
cb.onchange=function(){ this.checked true は選択されていることを意味し、false は選択されていないことを意味します}(4)、キャンバス
各キャンバスには、描画コンテキスト オブジェクトと呼ばれるブラシ オブジェクトが 1 つだけあります。このオブジェクトを使用して描画します。
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象
キャンバス描画---難しい！ ！ ！
1) SVG 描画: 2000 年に登場し、後に H5 標準に組み込まれたベクトル描画技術。2) Canvas 描画: H5 で提案された描画技術。3) WebGL 描画: 3D 描画技術。まだ H5 標準に組み込まれています。
キャンバス描画テクノロジ キャンバス: キャンバス、H5 は 2D 描画テクノロジを実装
<canvas width=500 height=400>您的浏览器不支持canvas</canvas>
Canvas タグは、ブラウザのデフォルトでは 300*150 のインライン ブロックです。キャンバスの幅と高さは、CSS スタイルではなく、HTML/JS 属性を使用してのみ割り当てることができます。 各キャンバスにはブラシ オブジェクトが 1 つだけあります。これは描画コンテキスト オブジェクトと呼ばれます。このオブジェクトを使用して描画します。 var ctx = Canvas.getContext('2d') //現在、2d のみがキャンバス上のキャンバス オブジェクトを取得します
1) キャンバスを使用して長方形を描画します
長方形を描く
ctx.lineWidth = 1 ストロークの幅 ctx.fillStyle='#000' 塗りつぶしのスタイルの色 ctx.drawingStyle='#000' ストロークのスタイルの色 ctx.fillRect(x,y,w,h) // 四角形を塗りつぶします x , y座標 w、h 幅と高さ ctx.ストロークRect(x,y,w,h) //長方形をストロークします ctx.clearRect(x,y,w,h);長方形内のすべての描画を消去します
2) キャンバスを使用してテキストを描画します
テキストのアンカー ポイントはテキスト ベースラインの先頭にあります
ctx.textBaseline = 'alphabetic' //テキストベースラインのデフォルト値は3行目です ctx.font=12px sans-serif //フォントのサイズとスタイル ctx.fillText(str,x,y) // ctx.ストロークテキストを塗りつぶします(str ,x,y) // テキストの一部をストロークします ctx.measureText(str) // 現在のテキスト サイズとフォントに基づいて測定テキストを設定します。返されるオブジェクトは {width: x} です。3) キャンバスを使用してパスを描画します
パス: PS のペン ツールと同様、複数の座標点で構成される任意の形状で、パスは目に見えず、ストローク、塗りつぶし、トリミングに使用できます。
ctx.beginPath() //新しいパスを開始します ctx.closePath() //現在のパスを閉じます ctx.moveTo(x,y) //指定された点に移動します ctx.lineTo(x,y) //現在のパスから指定された点を指します 直線を描画します ctx.arc(cx,cy,r,start,end); //アーチ パスを描画します//cx cy は円 xy の中心座標です r は半径、start は開始角度、終了は終了角度です
角度: 360 = ラジアン: 2PI 180 = 1PI たとえば
ctx.arc(100,200,30,0,2*Math.PI)ctx.blood(); //現在のパスのストローク ctx.fill(); //現在のパスの切り抜きを使用//************接続の角***********ctx.lineJoin='miter' //線ctxの接続部分に鋭い角が現れます。 lineJoin='ラウンド' //線の接続部分に丸い角が表示されます ctx.lineJoin = 'bevel' //線の接続部分に四角い角が表示されます
4) キャンバスを使用して画像を描画する
Canvas はクライアント側のテクノロジであり、画像はサーバー内にあるため、ブラウザはまず描画する画像をダウンロードし、画像が非同期で読み込まれるのを待つ必要があります。
var img = new Images();img.src='x.png';console.log(img.width); //0 画像の非同期リクエスト img.onload=function(){console.log(img.width, img .height); //値画像の読み込みが完了しました //キャンバスへの画像の描画を開始します ctx.drawImage(img,x,y); //元のサイズの描画 ctx.drawImage(img,x,y,w,h) //幅と高さを設定}キャンバス上のマウス移動イベントをリッスンする
ctx.onmousemove = function(e){x=e.offsetX;y=e.offsetY;console.log(x,y);}2. キャンバス描画のグラデーション
線形グラデーション：linearGradient 放射状グラデーション：radialGradient ps単位でグラデーション効果を参照できます。
var g = ctx.createLinearGradient(x1,y1,x2,y2);g.addColorStop(0,'#f00');g.addColorStop(0.5,'#ff0');g.addColorStop(1,'#0f0') );ctx.ストロークスタイル=g;
難易度: 座標系には多くの座標軸と単語が存在します
3. 描画変形
ctx.rotate(radians) //描画コンテキスト オブジェクト (ブラシなど) を回転します。軸点はキャンバスの原点です。 ctx.translate(x,y) //キャンバス全体の原点を指定された点 ctx に移動します。 sava(); / /ブラシの現在の変形ステータス値をすべて保存します（ゲーム内のセーブから） ctx.restore() //ブラシの変形ステータスを最新のセーブに復元します（セーブを読み込みます）ゲーム内) ctx.save() // 元の最初のステータス変数を保存します。 deg = 10*Math.PI/180; //回転する角度を 10 度回転します ctx.rotate(deg) //回転させた ctx.drawImage(img,0,0); //絵を描く、何を描くかブラシが曲がっている場合 それらはすべて曲がっています ctx.restore() // セーブを取り出したときに保存された元の状態
(5) SVG描画
まずビットマップとベクターとは何かを理解しましょう。簡単に理解してください。
ビットマップ: 次々とピクセルが集まって構成されており、各点が独自の色を持ち、その色は繊細です。 ベクター グラフィックス: 一連の線で構成され、各線は色と方向を指定でき、無限に拡大縮小できますが、色の詳細は十分ではありません。
1. SVG 描画では描画にタグが使用され、イベント リスナーを直接バインドできます
<svg width=300 height=200 xmlns=http://www.w3.org/2000/svg> <rect width=100 height=100></rect></svg>
2. jsを使ったsvgタグの作り方！
//var r1 = document.createElement('rect'); この svg 要素には年齢制限と名前空間があるため作成できません (つまり、これが機能しない場合は、次のメソッドを使用して作成してください。 !) var r1= document.createElementNS('http://www.w3.org/2000/svg','rect');r1.setAttribute('width','50');r1.setAttribute('height',300);s1 .appendChild(r1);3. svgで楕円を作成
<svg width=300 height=200 id=c6> <ellipse rx=100 ry=40 cx=100 cy=100 fill=#faa ストローク=#a00></ellipse></svg>
4.SVGで直線を作成する
<svg width=300 height=200 id=c6> <line x1=0 y1=0 x2=100 y2=200 ストローク=#000 ストローク-幅=50 ストローク-linecap=square></line></svg>
注: ストローク-ラインキャップ = スクエアはより多くの正方形を生成し、ストローク-ラインキャップ = ラウンドはより多くの円形領域を生成しますが、ストローク-ラインキャップ = バットはより多くの正方形を生成しません (つまり、作成する直線には最初と最初の直線の間の違いがあります)これらの属性の最後は、実際に試してみるとわかります!)
5. svgを使用してポリラインを作成する
<svg width=300 height=200 id=c6> <polyline Points=50,50 100,300 150,100></polyline> //出てくるのは三角形です <polyline Points=50,50 100,300 150,100 fill=transparent ストローク=#000 >< /polyline> //出てくるのはポリラインです</svg>
6. 地理位置情報 (将来的には、クライアントは必要なくなります。自分自身の位置も特定できるようになります!)
地理位置情報: JS を使用して現在のブラウザーの地理座標 (経度、緯度、高度、速度) データを取得する地理位置情報。Ele.me、Amap Navigation などの LBS アプリケーション (位置情報ベースのサービス) の実装に使用されます。
モバイルブラウザが位置情報を取得する方法:
1) 第一の選択肢は、携帯電話および衛星通信の GPS チップであり、測位精度はメートル以内です。 2) 第二の選択肢は、測位取得用の携帯電話基地局であり、測位精度はキロメートル以内です (違法) PC ブラウザを介した測位情報: 1) IP アドレスを介したリバース 解析と測位の精度は IP アドレス データベースのサイズに依存します
HTML5 は、現在のブラウザの位置情報を取得するための新しいオブジェクトを提供します。
window.navigator.geolocation{ getCurrentPosition:fn, //現在の測位情報を取得 watchPosition:fn, //測位データの変化を監視clearWatch:fn //監視をキャンセル}2. 拡張機能: Web ページに百度地図を埋め込む方法
1) Baidu 開発者アカウントを登録します。map.baidu.com ---> lbsyun.baidu.com 2) Web サイトを作成し、Baidu Map にログインして Web サイトの地図 AccessKey を申請します。 3) Baidu Map が提供する地図を埋め込みます。 Baidu マップに埋め込まれた独自の Web ページ API
これを埋め込む方法については、ここではあまり説明しません。 (Baidu Maps を使用するにはアカウントを登録する必要があることに注意してください。その後は他の人のライブラリを引用するだけです。)
7. ドラッグアンドドロップAPI
ドラッグ アンド ドロップについては前に説明しました。友人の皆さん、先に進んで自分で以前のブログを見つけてください。
8つのストレージ
ストレージは主に Cookie とセッションで構成されます (違いと注意点は、以前に多くの記述方法を探したときに説明します): セッションはブラウザを閉じると消えますが、Cookie はブラウザを閉じても消えないことに注意してください。注: Cookie を保存するときは時間を追加する必要があります。時間を追加しないと、ブラウザを閉じると消えてしまいます。このブラウザ ストレージは、パスワードやその他の機能の記憶など、多くの機能上の問題を解決するために使用できます。 ！
9 つの Web ソケット
このことについて話すべきでしょうか？ 。 。 。 。簡単に話しましょう、すべては理解次第です~~
Web ソケットは、サーバーとクライアント間で確立できる非 http 双方向接続です。
この接続はリアルタイムかつ永続的です。
サーバーはメッセージをアクティブにプッシュできます。
サーバーはリクエストのためにクライアントをポーリングする必要がなくなり、サーバーとクライアント間の通信で接続を再確立する必要がなくなりました。
つまり、持続可能な往復コミュニケーションです。
作成方法は? 1つのコードが完成しました
var webSocket = new WebSocket (ws://localhost:8005/socket); //URL は ws または wss テキストで始まる必要があります。これは http ではないため、WebSocket であり、独自の識別情報であり、暗号化された送信です。覚えておいてください。 。 webSocket.send() //テキストデータを送信します。テキストのみ送信可能です。 (jsonオブジェクトを利用してjsオブジェクトをテキストデータに変換して送信します) webSocket.close();//通信コネクションをクローズし切断します。 webSocket.onmessage= function(event){ var data=event.data;} // サーバーからメッセージを受信 webSocket.onopen =function(event){ // 通信開始時の処理} webSocket.onclose =function(event) { / /通信終了時の処理}要約する上記は、編集者によって紹介された HTML5 の新機能と使用法の包括的なリストです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！