Quelles sont les fonctionnalités de HTML5

Les fonctionnalités de

html5 incluent : 1. Balises sémantiques ; 2. Type de saisie de formulaire amélioré ; 3. Prise en charge de la lecture vidéo et audio ; 4. Dessin sur toile ; 6. Géolocalisation ; Travailleur ; 9. Stockage Web ; 10. WebSocket.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

Les dix principales nouveautés de HTML5

Afin de mieux gérer les applications Internet actuelles, HTML5 ajoute de nombreux nouveaux éléments et fonctions, tels que : le dessin graphique, le contenu multimédia, une meilleure structure de page, un meilleur traitement des formulaires et plusieurs API. pour le glisser-déposer d'éléments, le positionnement, y compris la mise en cache des applications Web, le stockage, les travailleurs de réseau, etc.

(1) Balises sémantiques

Les balises sémantiques rendent le contenu de la page structuré et visible

Balise	Description
	Définit la zone d'en-tête du document
	définit le document La zone de queue
	définit la navigation du document
	définit les sections (sections, sections) dans le document
	Définir une zone de contenu indépendante de la page
	Définir le contenu de la barre latérale de la page
< /detailes>	Utilisée pour décrire les détails d'un document ou d'une section d'un document
	La balise contient le titre de l'élément de détails
	Définir des boîtes de dialogue, telles que des boîtes de dialogue

(2) Types de saisie de formulaire améliorés

　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.

DateTime-Local Adresse e-mail Sélectionnez un mois Champ de saisie pour les valeurs numériquesChamp de saisie pour les valeurs numériques dans une certaine plagepour la recherche de domaine Définir le champ de saisie du numéro de téléphone Sélectionner une heure Champ de saisie pour l'adresse URL Sélectionnez la semaine et l'année

Type d'entrée	Description
couleur	Principalement utilisé pour sélectionner une couleur
date	Sélectionner une date parmi une sélection de date euh
datetime Sélectionnez une date (heure UTC)
Sélectionnez une date et une heure (Timetable)
	mois
	numéro
	plage
	recherche
	tél
	heure
	url
	semaine
	html5 ajoute également les éléments de forme suivants

élément de forme

Description

	& lt; datalist & gt;
USE & lt L'attribut de liste de l'entrée & gt;
Fournit un moyen fiable d'authentifier l'utilisateur La balise spécifie la paire de clés utilisée pour le champ du générateur de formulaire.
est utilisé pour différents types de sortie telles que la sortie de calcul ou de script	Nouvel attribut de 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. l'attribut obligatoire est un attribut booléen. Le champ de saisie à remplir ne peut pas être vide. L'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 la valeur minimale et maximale de l'élément. L'attribut step spécifie l'intervalle de nombre légal pour le champ de saisie. attributs de hauteur et de largeur, utilisés pour la hauteur et la largeur de l'image des balises L'attribut autofocus est un attribut booléen. Spécifie que le champ obtient automatiquement le focus lors du chargement de la page. l'attribut multiple est un attribut booléen. Spécifie que plusieurs valeurs peuvent être sélectionnées dans l'élément ​​ (3) Vidéo et audio HTML5 fournit une norme pour la lecture de fichiers audio, c'est-à-dire en utilisant l'élément 　Entre , vous devez insérer le texte d'invite de l'élément 　L'élément HTML5 spécifie une manière standard d'inclure la vidéo 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> control 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(). Dans le même temps, l'élément vidéo fournit également des attributs de largeur et de hauteur pour contrôler la taille de la vidéo. Si la hauteur et la largeur sont définies, l'espace vidéo requis sera réservé lors du chargement de la page. Si ces propriétés ne sont pas définies et que le navigateur ne connaît pas la taille de la vidéo, le navigateur ne pourra pas réserver un espace spécifique lors du chargement et la page changera en fonction de la taille de la vidéo originale. Le contenu inséré entre les balises et est prévu pour être affiché par les navigateurs qui ne prennent pas en charge l'élément vidéo. L'élément vidéo prend en charge plusieurs éléments sources. Les éléments peuvent lier différents fichiers vidéo. Le navigateur utilisera le premier format reconnu (MP4, WebM et Ogg) (4) Dessin sur toile Les étiquettes ne sont que des conteneurs graphiques et des scripts doivent être utilisés pour dessiner des graphiques. Canvas - Graphiques 1. Créez un canevas. Un canevas est une boîte rectangulaire dans une page Web, dessinée via l'élément Par défaut, les éléments n'ont ni bordures ni contenu. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> 　 Les balises doivent généralement spécifier un attribut id (souvent référencé dans les scripts), des attributs de largeur et de hauteur pour définir la taille du canevas et utiliser l'attribut de style pour ajouter une bordure. Vous pouvez utiliser plusieurs éléments dans une page HTML 2. Utilisez Javascript pour dessiner des images. L'élément canvas lui-même n'a aucune capacité de dessin. Tous les travaux de dessin doivent être effectués dans JavaScript <script> 　　var c=document.getElementById("myCanvas"); 　　var ctx=c.getContext("2d"); 　　ctx.fillStyle="#FF0000"; 　　ctx.fillRect(0,0,150,75); </script> 　L'objet getContext("2d") est un objet HTML5 intégré avec plusieurs méthodes pour dessiner des chemins, des rectangles, des cercles, des caractères et ajouter des images. 　 La définition de la propriété fillStyle peut être une couleur CSS, un dégradé ou un motif. Le paramètre fillStyle par défaut est #000000 (noir). La méthode fillRect(x,y,width,height) définit la méthode de remplissage actuelle du rectangle. Signification : Dessinez un rectangle de 150x75 sur la toile, en partant du coin supérieur gauche (0,0). Canvas - Path Pour tracer une ligne sur Canvas, nous utiliserons les deux méthodes suivantes : moveTo(x,y) pour définir les coordonnées de départ de la ligne lineTo(x, y) pour définir la fin de la ligne Coordonnées Pour tracer des lignes il faut utiliser la méthode "ink", tout comme Stroke(). <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script> Définissez la coordonnée de début (0,0) et la coordonnée de fin (200,100). Utilisez ensuite la méthode Stroke() pour tracer la ligne Canvas - Text Utilisez Canvas pour dessiner le texte. et les méthodes sont les suivantes : font - définir la police fillText(text,x,y) - dessiner du texte plein sur la toile StrokeText(text,x,y) - dessiner du texte creux sur toile Utilisez fillText(): var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); Utilisez la police "Arial" pour dessiner un texte de 30 pixels de haut (solide) sur la toile Canvas - Dégradé Le dégradé peut remplir des rectangles, des cercles, des lignes, du texte, etc., diverses formes peuvent être personnalisées avec différentes couleurs. Il existe deux manières différentes de définir le dégradé du canevas : createLinearGradient(x,y,x1,y1) - Créer un dégradé de lignes createRadialGradient(x,y,r,x1,y1,r1) - Créez un dégradé radial/circulaire 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。 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(&#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); } //定位失败的回调 ) (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 实例代码 <!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br><br> <script>var 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(); }</script> </body> </html> 　　创建的计数脚本，该脚本存储于 "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 事件来接收服务器返回的数据。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <script type="text/javascript"> 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!"); } } </script> </head> <body> <div id="sse"> <a href="javascript:WebSocketTest()">运行 WebSocket</a> </div> </body> </html> 推荐教程：《html视频教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!