Quelles sont les nouveautés de html5 ? Résumé des nouvelles fonctionnalités de html5-Tutoriel H5-php.cn

Nous savons tous que HTML5 est la cinquième modification majeure du HTML. Donc, puisqu'il s'agit d'une modification majeure, il y aura certainement de nouvelles fonctionnalités. Alors, Quelles sont les nouvelles fonctionnalités du HTML5 ? Le prochain article vous fera un récapitulatif des nouveautés du html5.

Tout d’abord, nous devrions tous savoir ce que signifie html5. Si vous ne savez pas grand-chose sur html5, alors vous pouvez consulter cet article : Qu’est-ce que html5 ? A quoi sert html5 ? , d'accord, après avoir connu la définition spécifique de html5, jetons un coup d'œil aux nouvelles fonctionnalités de html5.

Quelles sont les nouveautés du html5 ?

1. Nouvelles fonctionnalités du HTML5 : élément canevas pour la peinture

L'élément canevas est utilisé pour dessiner des graphiques sur la page Web. est une zone rectangulaire dont vous pouvez contrôler chaque pixel. Canvas propose de nombreuses façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images.

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

Copier après la connexion

<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>

Copier après la connexion

Parlons de SVG : SVG est un format graphique utilisé pour décrire des graphiques vectoriels bidimensionnels.

Il existe trois façons d'utiliser SVG :

Mettez SVG directement sous forme d'image sur la page Web.
svg réalise de l'animation.
Effets d'interaction et de filtre pour les images SVG.

Instructions :

(1) Canvas dessine des graphiques 2D via JavaScript.

(2) Le canevas est rendu pixel par pixel.

(3) Dans Canvas, une fois le graphique dessiné, il ne recevra plus l'attention du navigateur. Si sa position change, la scène entière doit être redessinée, y compris tous les objets qui auraient pu être recouverts par des graphiques.

(4) SVG est un langage qui utilise XML pour décrire les graphiques 2D.

(5) svg est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher un gestionnaire d'événements JavaScript à un élément.

(6) En svg, chaque graphique dessiné est considéré comme un objet. Si les propriétés de l'objet svg changent, le navigateur peut automatiquement reproduire le graphique.

Pour plus d'informations sur Canvas et SVG, veuillez vous référer à : HTML5 Canvas et HTML5 Inline SVG

2. Les nouvelles fonctionnalités de html5 sont des formulaires plus riches et plus puissants

html5 propose plusieurs nouveaux types de saisie de formulaire. Ces nouvelles fonctionnalités offrent un meilleur contrôle et une meilleure validation des entrées.

html5 ajoute également les éléments de formulaire suivants :

: L'élément spécifie la liste d'options du champ de saisie, en utilisant l'attribut list de l'élément de l'élément

: Fournit un moyen fiable d'authentifier l'utilisateur, la balise spécifie le champ du générateur de paire de clés à utiliser dans le formulaire.

: utilisé pour différents types de sortie, tels que la sortie de calcul ou de script.

Nouveaux attributs du formulaire HTML5 :

Attribut placehoder : une courte invite sera affichée sur le champ de saisie avant que l'utilisateur ne saisisse la valeur. Autrement dit, notre invite par défaut commune de la zone de saisie disparaît après les entrées de l'utilisateur.

attribut obligatoire : C'est un attribut booléen. Le champ de saisie à remplir ne peut pas être vide

attribut pattern : décrit une expression régulière utilisée pour vérifier la valeur de l'élément

Attributs min et max : définissez les valeurs minimales et maximales de l'élément.

attribut step : Spécifie l'intervalle de numéro légal pour le champ de saisie.

Attributs de hauteur et de largeur : hauteur et largeur de l'image pour les balises

Attribut autofocus : C'est un attribut booléen. Spécifie que le champ obtient automatiquement le focus lors du chargement de la page.

attribut multiple : C'est un attribut booléen. Spécifie que plusieurs valeurs peuvent être sélectionnées dans l'élément

3. Nouvelles fonctionnalités de html5 : éléments vidéo et audio pour les médias

1. HTML5 fournit un standard pour la lecture de fichiers audio, c'est-à-dire en utilisant le

Instance :

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

Copier après la connexion

Description :

(1) attribut de contrôle pour ajouter des commandes de lecture, de pause et de volume.

(2) Entre , vous devez insérer le texte d'invite de l'élément

(3) L'élément

(4) L'élément

2. HTML5 fournit un moyen standard d'inclure des vidéos via l'élément vidéo.

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

Copier après la connexion

Instructions :

(1) le contrôle fournit des commandes de lecture, de pause et de volume pour contrôler la vidéo. Vous pouvez également utiliser les opérations DOM pour contrôler la lecture et la pause de la vidéo, telles que les méthodes play() et pause().

（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  清除定位监视
}

Copier après la connexion

获取用户定位信息：

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);
}        //定位失败的回调
)

Copier après la connexion

五、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>

Copier après la connexion

六：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视频教程。