ホームページ > 記事 > ウェブフロントエンド > html5の新機能は何ですか？ html5の新機能まとめ

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

不言オリジナル: 2018-08-31 15:42:228007ブラウズ

HTML5 が HTML の 5 番目の大きな変更であることは誰もが知っています。つまり、大きな変更であるため、必ず新しい機能が追加されます。 HTML5 の新機能は何ですか? 次の記事ではhtml5の新機能についてまとめていきます。

まず、html5 が何を意味するのかを知っておく必要があります。html5 についてあまり知らない場合は、次の記事を参照してください。 html5 とは何ですか? html5って何に使うの？さて、html5 の具体的な定義が分かったところで、html5 の新機能を見てみましょう。

html5の新機能は何ですか?

1. HTML5 の新機能: ペイント用の Canvas 要素

Canvas 要素は、Web ページ上にグラフィックを描画するために使用され、キャンバスのすべてのピクセルを制御できます。 Canvas には、パス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>

svg について話しましょう: svg は、2 次元のベクターグラフィックスを記述するために使用されるグラフィックス形式です。

svg には 3 つの用途があります:

Web ページに画像として svg を直接配置します。
svgはアニメーションを実現します。
SVG 画像のインタラクションとフィルター効果。

手順:

(1) Canvas は JavaScript を通じて 2D グラフィックを描画します。

(2) キャンバスはピクセルごとにレンダリングされます。

(3) キャンバスでは、グラフィックが描画されると、ブラウザーの注目を集めなくなります。位置が変更された場合は、グラフィックスで覆われているオブジェクトも含めて、シーン全体を再描画する必要があります。

(4) svg は、XML を使用して 2D グラフィックスを記述する言語です。

(5) svg は XML に基づいています。つまり、SVG DOM 内のすべての要素が利用可能です。 JavaScript イベントハンドラーを要素にアタッチできます。

(6) svg では、描画された各グラフィックはオブジェクトとみなされます。 svg オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。

キャンバスと SVG の詳細については、以下を参照してください: HTML5 キャンバスおよび HTML5 インライン SVG

2. html5 の新機能: よりリッチで強力なフォーム

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

html5 は次のフォーム要素も追加します。

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

aa983b9eb8086376f1f6481364a02e5a: ユーザーを認証するための信頼できる方法を提供します。タグはフォームで使用されるキーペアジェネレーターフィールドを指定します。

dc997afdb5b9c30574263245f4fb3e7e: 計算やスクリプト出力など、さまざまなタイプの出力に使用されます。

HTML5 新しいフォーム属性:

プレースホーダー属性: ユーザーが値を入力する前に、入力フィールドに短いプロンプトが表示されます。つまり、入力ボックスの共通のデフォルトプロンプトは、ユーザーが入力すると消えます。

必須属性: ブール型属性です。入力が必要な入力フィールドは空にすることはできません

pattern 属性: d5fd7aea971a85678ba271703566ebfd 要素の値を検証するために使用される正規表現を記述します。

min 属性と max 属性: 要素の最小値と最大値を設定します。

step 属性: 入力フィールドの有効な数値間隔を指定します。

高さと幅の属性: 画像タイプの d5fd7aea971a85678ba271703566ebfd タグの画像の高さと幅。

autofocus 属性: ブール値の属性です。ページの読み込み時にフィールドが自動的にフォーカスを取得するように指定します。

複数属性: ブール型属性です。 d5fd7aea971a85678ba271703566ebfd 要素内で複数の値を選択できることを指定します。

3. html5 の新機能: メディアのビデオ要素とオーディオ要素

1. html5 は、オーディオファイルを再生するための標準を提供します。つまり、b97864c2e0ef2353a16c4d64c7734e92 例:

<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

手順:

(1) control 属性は、再生、一時停止、および音量コントロールを追加するために使用されます。

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

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

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

2. HTML5 は、video 要素を通じてビデオを含める標準的な方法を提供します。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

説明:

(1) コントロールは、ビデオを制御するための再生、一時停止、および音量コントロールを提供します。 play() メソッドやpause() メソッドなどの DOM 操作を使用して、ビデオの再生と一時停止を制御することもできます。

（2）video元素提供了width和height属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

（3）标签之间插入的内容是提供给不支持video元素的浏览器显示的。

（4）video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）。

四、html5新特性之html5地理定位

HTML5 Geolocation（地理定位）用于定位用户的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}

获取用户定位信息：

navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log(&#39;用户定位数据获取成功&#39;)
      　　　　//console.log(arguments);
      　　　　console.log(&#39;定位时间：&#39;,pos.timestamp)
      　　　　console.log(&#39;经度：&#39;,pos.coords.longitude)
      　　　　console.log(&#39;纬度：&#39;,pos.coords.latitude)
      　　　　console.log(&#39;海拔：&#39;,pos.coords.altitude)
      　　　　console.log(&#39;速度：&#39;,pos.coords.speed)
},    //定位成功的回调
function(err){ 
 　　　　console.log(&#39;用户定位数据获取失败&#39;)
      　　　　//console.log(arguments);
}        //定位失败的回调
)

五、html5新特性之html5拖放

拖放（Drag 和 drop）是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放；拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。

想要了解更多拖放中的内容可以参考：HTML拖放

下面给出一个实例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/xxx.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>

六：html5新特性之html5 Web存储

在客户端存储数据：

html5 提供了两种在客户端存储数据的新方法：

（1）localStorage - 没有时间限制的数据存储：localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

（2）sessionStorage - 针对一个 session 的数据存储：sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

七、html5新特性之html5应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

（1）离线浏览 - 用户可在应用离线时使用它们

（2）速度 - 已缓存资源加载得更快

（3）减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

八、html5新特性之html5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

九、html5新特性之html5服务器发送事件

html5服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

Server-Sent 事件 - 单向消息传递

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

十、html5新特性之html5 WebSocket　

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

关于后面这几个特性的更多内容大家可以去看一看：HTML5 完整版手册

以上就是给大家总结的十个html5的新特性，当然了，如果想更深入的学习html5，这里给大家推荐关于html5视频教程。

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

関連記事