検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >html5の新機能とは何ですか？

html5の新機能とは何ですか？

青灯夜游
青灯夜游オリジナル
2023-01-28 18:15:3010764ブラウズ

html5 の新機能は次のとおりです: 1. ページのコンテンツを構造化して表示できるようにするセマンティック タグ (hrader、フッターなど); 2. 複数の新しいフォーム入力タイプを備えた強化されたフォームより優れた入力制御と検証を提供します; 3. ビデオおよびオーディオ ファイルを再生するための標準的な方法を提供するビデオおよびオーディオ要素; 4. キャンバス描画; 5. SVG 描画; 6. 位置情報; 7. ドラッグ アンド ドロップ API; 8. Webワーカー; 9. Web ストレージなど

html5の新機能とは何ですか？

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

HTML5 のトップ 10 の新機能

今日のインターネット アプリケーションをより適切に処理するために、HTML5 にはグラフィック描画、マルチメディア コンテンツなどの多くの新しい要素と機能が追加されました。 、より優れたページ構造、より優れたフォーム処理、要素のドラッグ アンド ドロップ、位置決めのためのいくつかの API (Web アプリケーションのキャッシュ、ストレージ、Web ワーカーなどを含む)。

( 1) セマンティック タグ

#セマンティック タグにより、ページのコンテンツが構造化され、よく知られるようになります

## タグ 説明## 23bfccf8e44978cba95106989e8290e9ab946e7546ab66a280dd9c9f9310ecd5 ヘッド領域を定義しますドキュメントの # c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010 ドキュメントの末尾領域を定義しますc787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0fドキュメント ナビゲーションの定義 2f8332c8dcfd5c7dec030a070bf652c34d7ab0de9a42de71c682b0860bad1410 セクションの定義ドキュメント内の (セクション、セクション) 23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1 ページの独立したコンテンツ領域を定義します15221ee8cba27fc1d7a26c47a001eb9bb68cffaf0006380b7e39ea0c3d532826ページのサイドバー コンテンツを定義しますタグには詳細要素 Title が含まれていますa38fd2622755924ad24c0fc5f0b4d412e949bf554aab987df819ed6441bc3609プロンプト ボックスなどのダイアログ ボックスを定義します

(2) フォームの強化

HTML5 には複数の新しいフォーム入力の入力タイプがあります。これらの新機能により、入力制御と検証が向上します。

##beb511a96a5aab3e931614dde36c9a04950fb71e2ed91ab060273c26e6f1e5c0039f3e95db2a684c7b74365531eb6044
説明主に色の選択に使用します日付ピッカーから日付を選択します日付 (UTC 時間) を選択してください日付と時刻を選択してください (タイムゾーンなし)電子メール アドレスを含む入力フィールド月を選択##number範囲#searchteltime##url#week
#入力タイプ
色
#date
datetime
datetime-local
電子メール
#month

入力数値入力欄

一定範囲内の数値入力欄

検索ドメインに使用されます

電話番号入力フィールドを定義します

時間を選択してください

URL アドレス入力フィールド
週と年を選択

 ## HTML5 も次のフォーム要素を追加します。

Form element

Description
fc86e7b705049fc9d4fccc89a2e80ee3
この要素は入力フィールドのオプション リストを指定します

d5fd7aea971a85678ba271703566ebfd 要素の list 属性を使用して、fc86e7b705049fc9d4fccc89a2e80ee3 要素の ID をバインドします

aa983b9eb8086376f1f6481364a02e5a
ユーザーを認証する信頼性の高い方法を提供します

タグは次のことを指定しますフォームデバイスフィールドのキーペアの生成。

dc997afdb5b9c30574263245f4fb3e7e
計算やスクリプトなどのさまざまなタイプの出力用

出力＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

HTML5 の新しいフォーム属性

    • プレースホダー属性では、ユーザーが値を入力する前に入力フィールドに短いプロンプトが表示されます。つまり、入力ボックスの共通のデフォルト プロンプトは、ユーザーが入力すると消えます。
    • 必須属性はブール属性です。入力が必要な入力フィールドを空にすることはできません。
    • pattern 属性は、d5fd7aea971a85678ba271703566ebfd 要素の値を検証するために使用される正規表現を記述します。
    • min 属性と max 属性では、要素の最小値と最大値を設定します。
    • step 属性は、入力フィールドの有効な数値間隔を指定します。
    • 高さと幅の属性は、イメージ タイプの d5fd7aea971a85678ba271703566ebfd タグのイメージの高さと幅に使用されます。
    • autofocus 属性はブール属性です。ページの読み込み時にフィールドが自動的にフォーカスを取得するように指定します。
    • multiple 属性はブール属性です。 d5fd7aea971a85678ba271703566ebfd 要素内で複数の値を選択できることを指定します。

#(3) ビデオとオーディオ

    HTML5 はオーディオ ファイルを再生するための標準を提供します。つまり、b97864c2e0ef2353a16c4d64c7734e92 要素 
  • <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
の control 属性を使用して、再生、一時停止、および音量のコントロールを追加します。

b97864c2e0ef2353a16c4d64c7734e92 と 81d2bc32cafa2076a27f10cdd878d0ab の間に、ブラウザがサポートしていない b97864c2e0ef2353a16c4d64c7734e92 要素のプロンプト テキストを挿入する必要があります。

b97864c2e0ef2353a16c4d64c7734e92 要素では、複数の e02da388656c3265154666b7c71a8ddc 要素を使用できます。e02da388656c3265154666b7c71a8ddc 要素は異なるオーディオ ファイルをリンクでき、ブラウザは最初にサポートされているオーディオ ファイルを使用します

現在、b97864c2e0ef2353a16c4d64c7734e92 要素は、MP3、Wav、Ogg の 3 つのオーディオ形式ファイルをサポートしています。

    HTML5 は、video 要素を通じてビデオを含める標準的な方法を指定します。 
  • <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
    control は、ビデオを制御するための再生、一時停止、および音量コントロールを提供します。 play() メソッドやpause() メソッドなどの DOM 操作を使用して、ビデオの再生と一時停止を制御することもできます。

    同時に、video 要素はビデオのサイズを制御する幅と高さの属性も提供します。高さと幅が設定されている場合、ページが読み込まれるときに必要なビデオ領域が予約されます。これらのプロパティが設定されておらず、ブラウザーがビデオのサイズを認識していない場合、ブラウザーは読み込み時に特定のスペースを予約できず、ページは元のビデオのサイズに基づいて変更されます。

    とタグの間に挿入されたコンテンツは、video 要素をサポートしていないブラウザでの表示用に提供されます。

    video 要素は複数のソース要素をサポートしており、要素は異なるビデオ ファイルをリンクできます。ブラウザは最初に認識された形式 (MP4、WebM、および Ogg) を使用します。

#(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 - Path

Canvas に線を描くには、次の 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('用户定位数据获取成功')
     　　　　//console.log(arguments);
     　　　　console.log('定位时间：',pos.timestamp)
     　　　　console.log('经度：',pos.coords.longitude)
     　　　　console.log('纬度：',pos.coords.latitude)
     　　　　console.log('海拔：',pos.coords.altitude)
     　　　　console.log('速度：',pos.coords.speed)

},    //定位成功的回调function(err){

　　　　console.log('用户定位数据获取失败')
     　　　　//console.log(arguments);

}        //定位失败的回调)

(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网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

    • localStorage - 没有时间限制的数据存储
    • sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

　　在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage

if(typeof(Storage)!=="undefined")
   {   // 是的! 支持 localStorage  sessionStorage 对象!
   // 一些代码.....   } else
   {   // 抱歉! 不支持 web 存储。
   }

　　不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

    • 保存数据：localStorage.setItem(key,value);
    • 读取数据：localStorage.getItem(key);
    • 删除单个数据：localStorage.removeItem(key);
    • 删除所有数据：localStorage.clear();
    • 得到某个索引的key：localStorage.key(index);

(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 サイトの他の関連記事を参照してください。

JavaScript html5 css 正则表达式 html Boolean date timestamp Session mail xml Event var JS console number 对象 事件 dom 选择器 canvas input websocket
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jqueryを使用してdivにタグを追加できますか?次の記事：jqueryを使用してdivにタグを追加できますか?

関連記事

続きを見る