ホームページ > 記事 > ウェブフロントエンド > html5の新機能とは何ですか?
html5 の新機能は次のとおりです: 1. ページのコンテンツを構造化して表示できるようにするセマンティック タグ (hrader、フッターなど); 2. 複数の新しいフォーム入力タイプを備えた強化されたフォームより優れた入力制御と検証を提供します; 3. ビデオおよびオーディオ ファイルを再生するための標準的な方法を提供するビデオおよびオーディオ要素; 4. キャンバス描画; 5. SVG 描画; 6. 位置情報; 7. ドラッグ アンド ドロップ API; 8. Webワーカー; 9. Web ストレージなど
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
今日のインターネット アプリケーションをより適切に処理するために、HTML5 にはグラフィック描画、マルチメディア コンテンツなどの多くの新しい要素と機能が追加されました。 、より優れたページ構造、より優れたフォーム処理、要素のドラッグ アンド ドロップ、位置決めのためのいくつかの API (Web アプリケーションのキャッシュ、ストレージ、Web ワーカーなどを含む)。
( 1) セマンティック タグ
#セマンティック タグにより、ページのコンテンツが構造化され、よく知られるようになります
説明 | ## 23bfccf8e44978cba95106989e8290e9ab946e7546ab66a280dd9c9f9310ecd5 | ||||||||||||||||||||||||||||||||||
# c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010 | |||||||||||||||||||||||||||||||||||
c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f | |||||||||||||||||||||||||||||||||||
2f8332c8dcfd5c7dec030a070bf652c34d7ab0de9a42de71c682b0860bad1410 | |||||||||||||||||||||||||||||||||||
23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1 | |||||||||||||||||||||||||||||||||||
15221ee8cba27fc1d7a26c47a001eb9bb68cffaf0006380b7e39ea0c3d532826 | |||||||||||||||||||||||||||||||||||
##beb511a96a5aab3e931614dde36c9a04950fb71e2ed91ab060273c26e6f1e5c0039f3e95db2a684c7b74365531eb6044 | タグには詳細要素 Title が含まれています | ||||||||||||||||||||||||||||||||||
a38fd2622755924ad24c0fc5f0b4d412e949bf554aab987df819ed6441bc3609 | プロンプト ボックスなどのダイアログ ボックスを定義します | ||||||||||||||||||||||||||||||||||
#入力タイプ | 説明|
色 | 主に色の選択に使用します|
#date | 日付ピッカーから日付を選択します|
datetime | 日付 (UTC 時間) を選択してください|
datetime-local | 日付と時刻を選択してください (タイムゾーンなし)|
電子メール | 電子メール アドレスを含む入力フィールド|
#month | 月を選択|
入力数値入力欄 | |
一定範囲内の数値入力欄 | |
検索ドメインに使用されます | |
電話番号入力フィールドを定義します | |
時間を選択してください | |
URL アドレス入力フィールド |
#week |
週と年を選択 | ## HTML5 も次のフォーム要素を追加します。 |
Form element
fc86e7b705049fc9d4fccc89a2e80ee3 | |
この要素は入力フィールドのオプション リストを指定しますd5fd7aea971a85678ba271703566ebfd 要素の list 属性を使用して、fc86e7b705049fc9d4fccc89a2e80ee3 要素の ID をバインドします | aa983b9eb8086376f1f6481364a02e5a |
ユーザーを認証する信頼性の高い方法を提供しますタグは次のことを指定しますフォームデバイスフィールドのキーペアの生成。 | dc997afdb5b9c30574263245f4fb3e7e |
計算やスクリプトなどのさまざまなタイプの出力用出力############### HTML5 の新しいフォーム属性
#(3) ビデオとオーディオ
#(4)キャンバス描画 ラベルは単なるグラフィック コンテナであり、グラフィックを描画するにはスクリプトを使用する必要があります。 キャンバス - グラフィック1. キャンバスの作成. キャンバスは Web ページ内の長方形のボックスで、5ba626b379994d53f7acf72a64f9b697 要素によって描画されます。デフォルトでは、要素には境界線もコンテンツもありません。 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> タグでは通常、id 属性 (スクリプトでよく参照される) を指定する必要があり、幅と高さの属性でキャンバスのサイズを定義し、境界線を追加するために style 属性を使用します。 HTML ページでは複数の 5ba626b379994d53f7acf72a64f9b697 要素を使用できます
2。JavaScript を使用して画像を描画します。canvas 要素自体には描画機能がありません。すべての描画作業は JavaScript 内で行う必要があります。 <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> getContext("2d") オブジェクトは、さまざまな描画パス、四角形、円、文字などを備えた組み込みの HTML5 オブジェクトです。追加画像メソッド。
fillStyle プロパティには、CSS カラー、グラデーション、またはパターンを設定できます。デフォルトの fillStyle 設定は #000000 (黒) です。 fillRect(x,y,width,height) メソッドは、四角形の現在の塗りつぶし方法を定義します。意味: キャンバス上に左上隅 (0,0) から開始して 150x75 の長方形を描画します。 Canvas - PathCanvas に線を描くには、次の 2 つのメソッドを使用します。 moveTo( x,y) 線の開始座標を定義します。lineTo( x,y) 線の終了座標を定義します。線を描くには、「」を使用する必要があります。 ink" メソッドは、ストローク () と同様です。 うわー 定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条 Canvas - 文本 使用 canvas 绘制文本,重要的属性和方法如下: font - 定义字体 fillText(text,x,y) - 在 canvas 上绘制实心的文本 strokeText(text,x,y) - 在 canvas 上绘制空心的文本 使用 fillText(): var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); 使用 "Arial" 字体在画布上绘制一个高 30px 的文字(实心) Canvas - 渐变 渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。 以下有两种不同的方式来设置Canvas渐变: createLinearGradient(x,y,x1,y1) - 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变 当我们使用渐变对象,必须使用两种或两种以上的停止颜色。 addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1. 使用渐变,设置fillStyle或strokeStyle的值为渐变,然后绘制形状,如矩形,文本,或一条线。 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); 创建了一个线性渐变,使用渐变填充矩形 Canvas - 图像 把一幅图像放置到画布上, 使用 drawImage(image,x,y) 方法 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10); 把一幅图像放置到了画布上 (5)SVG绘图 SVG是指可伸缩的矢量图形 SVG 与 Canvas两者间的区别 SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。 SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。 Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。 (6)地理定位 HTML5 Geolocation(地理定位)用于定位用户的位置。 window.navigator.geolocation { getCurrentPosition: fn 用于获取当前的位置数据 watchPosition: fn 监视用户位置的改变 clearWatch: fn 清除定位监视 } 获取用户定位信息: navigator.geolocation.getCurrentPosition( function(pos){ console.log('用户定位数据获取成功') }, //定位成功的回调function(err){ console.log('用户定位数据获取失败') } //定位失败的回调) (7)拖放API 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素,而目标对象则是指拖动之后要放置的目标位置。 拖放的源对象(可能发生移动的)可以触发的事件——3个: dragstart:拖动开始 drag:拖动中 dragend:拖动结束 整个拖动过程的组成: dragstart*1 + drag*n + dragend*1 拖放的目标对象(不会发生移动)可以触发的事件——4个: dragenter:拖动着进入 dragover:拖动着悬停 dragleave:拖动着离开 drop:释放 整个拖动过程的组成1: dragenter*1 + dragover*n + dragleave*1 整个拖动过程的组成2: dragenter*1 + dragover*n + drop*1 dataTransfer:用于数据传递的“拖拉机”对象; 在拖动源对象事件中使用e.dataTransfer属性保存数据: e.dataTransfer.setData( k, v ) 在拖动目标对象事件中使用e.dataTransfer属性读取数据: var value = e.dataTransfer.getData( k ) (8)Web Worker 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。 web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。 首先检测浏览器是否支持 Web Worker if(typeof(Worker)!=="undefined"){ // 是的! Web worker 支持! // 一些代码..... }else{ // //抱歉! Web Worker 不支持 } 下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码 if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } 然后我们就可以从 web worker 发送和接收消息了。向 web worker 添加一个 "onmessage" 事件监听器: w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; }; 当 web worker 传递消息时,会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。 如需终止 web worker,并释放浏览器/计算机资源,使用 terminate() 方法。 完整的 Web Worker 实例代码 76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846beeCount numbers: a690e9150a287ffdbce9ceb2b8ffefb3d76c8de0b204cd1b17c9571b0bbcceb694b3e26ee717c64999d7867364b1b4a3 eeb60dbc97d8958e61d27803b4164a06Start Worker65281c5ac262bf6d81768915a4a77ac0 8d78367afa4aff1d5673893f3a5a2d28Stop Worker65281c5ac262bf6d81768915a4a77ac0 0c6dc11e160d3b678d68754cc175188a0c6dc11e160d3b678d68754cc175188a 3f1c4e4b6b16bbbd69b2ee476dc4f83avar w;function startWorker() {if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; }else{ document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } }function stopWorker() { w.terminate(); }2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e 创建的计数脚本,该脚本存储于 "demo_workers.js" 文件中 var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); (9)Web Storage 使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。 客户端存储数据的两个对象为:
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 } 不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
(10)WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。 9a78f9382cfffc6c56b2ff1d7da5de14 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e 4d0d87937f6c83b675e896c64d3eb7c9 b2386ffb911b14667cb8f0f91ea547a7W3Cschool教程(w3cschool.cn)6e916e0f7d1e588d4f442bf645aedb2f 8019067d09615e43c7904885b5246f0a function WebSocketTest() { if ("WebSocket" in window) { alert("您的浏览器支持 WebSocket!"); // 打开一个 web socket var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { // Web Socket 已连接上,使用 send() 方法发送数据 ws.send("发送数据"); alert("数据发送中..."); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("数据已接收..."); }; ws.onclose = function() { // 关闭 websocket alert("连接已关闭..."); }; } else { // 浏览器不支持 WebSocket alert("您的浏览器不支持 WebSocket!"); } } 2cacc6d41bbb37262a98f745aa00fbf0 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d ab0c4c0c37f599fe2770566fb1fb6763 a08ca9f9b1b691a70109b5505e05469a运行 WebSocket5db79b134e9f6b82c0b36e0489ee08ed 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e 更多编程相关知识,请访问:编程学习!! |
以上がhtml5の新機能とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。