Quelles sont les nouvelles fonctionnalités communes de HTML5

Nouvelles fonctionnalités communes de HTML5 : 1. Dessin sur toile ; 2. Éléments de formulaire ; 3. Balises sémantiques ; 5. Géolocalisation ; 7. WebWorker ; ; 10. Dessin SVG. HTML5 est le dernier standard HTML, spécialement conçu pour contenir du contenu Web riche sans avoir besoin de plug-ins supplémentaires. Il fournit de nouveaux éléments et de nouvelles API qui simplifient la construction d'applications Web.

Le système d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur DELL G3.

Qu'est-ce que HTML5 :

1. HTML5 est la dernière norme HTML.

2. HTML5 est spécialement conçu pour héberger du contenu Web riche sans avoir besoin de plug-ins supplémentaires.

3. HTML5 possède de nouveaux éléments sémantiques, graphiques et multimédias.

4. Les nouveaux éléments et nouvelles API fournis par HTML5 simplifient la construction des applications Web.

5. HTML5 est multiplateforme et est conçu pour fonctionner sur différents types de matériel (PC, tablette, téléphone mobile, TV, etc.).

Nouvelles fonctionnalités courantes du HTML5 :

1. Élément Canvas

L'élément Canvas est utilisé pour dessiner des graphiques sur des pages Web. Il dispose de plusieurs méthodes pour dessiner des chemins, des rectangles, des cercles, des caractères et ajouter. images. Canvas dessine des graphiques 2D via js et les restitue pixel par pixel. Si l'image est modifiée une fois terminée, la scène entière sera redessinée.

2. Éléments de formulaire

(1) Nouvel élément de formulaire

 : fournit un moyen fiable de vérifier l'utilisateur, l'étiquette spécifie le champ du générateur de paire de clés pour le formulaire 

 : pour différents types de sortie, tels que sortie de calculs ou de scripts.

(2) Nouvel attribut de formulaire

attribut placehoder : une courte invite sera affichée dans le champ de saisie avant que l'utilisateur ne saisisse la valeur, qui est l'invite de boîte par défaut

attribut obligatoire : est un attribut booléen, qui nécessite le ; champ de saisie à remplir Non vide ;

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

attribut max/min : valeurs maximales et minimales ;

attribut step : spécifie les valeurs légales ; intervalles numériques pour le champ de saisie ;

attribut hauteur/largeur : utilisé pour la hauteur et la largeur de l'image de la balise du type d'image

attribut autofocus : est un attribut booléen, qui prend automatiquement le focus lorsque la page est affichée ; chargé ;

attribut multiple : est un attribut booléen qui spécifie la sélection de plusieurs valeurs dans l'élément

3. Balises sémantiques

Les balises sémantiques donnent non seulement aux balises leur propre signification, mais présentent également les avantages des balises sémantiques : (1) Rendre la structure du code de l'interface claire, ce qui facilite la lecture du code. et coopérer avec l'équipe pour développer ; (2) ) Pratique à analyser pour d'autres appareils (tels que les lecteurs d'écran, les lecteurs aveugles, les appareils mobiles) pour afficher les pages Web de manière sémantique (3) Propice à l'optimisation des moteurs de recherche (SEO) ; .

4. Éléments multimédias

Éléments de lecture de fichiers audio

(1) L'attribut de contrôle fournit une pause de lecture et un contrôle du volume

(2) que le navigateur ne prend pas en charge entre ; Le premier fichier audio pris en charge

(4) prend en charge trois fichiers au format audio : mp3, wax, ogg.

Éléments pour la lecture de fichiers vidéo

(1) L'attribut control fournit des commandes de pause et de volume de lecture, et vous pouvez également utiliser les opérations dom : play() et pause(); fournit la largeur et la hauteur contrôle la taille de la vidéo. S’il est défini, il sera conservé lors du chargement de la page. S’il n’est pas défini, il ne sera pas conservé en fonction de la vidéo originale.

5. Géolocalisation

HTML5 utilise la méthode getCurrentPosition() pour obtenir l'emplacement de l'utilisateur, et la distance de localisation peut être calculée sur cette base.

6. API Glisser-Déposer

Le glisser-déposer est une fonctionnalité courante, c'est-à-dire saisir un objet et le faire glisser vers un autre emplacement. En HTML5, le glisser-déposer fait partie de la norme et n'importe quel élément peut être glissé-déposé. Le processus de glisser-déposer est divisé en objets source et objets cible. L'objet source fait référence à l'élément que vous êtes sur le point de faire glisser et l'objet cible fait référence à l'emplacement cible où vous souhaitez le placer après le glisser. Les événements pouvant être déclenchés par le glisser-déposer de l'objet source (pouvant être déplacé) - 3 événements :

dragstart : Drag start drag : Glissement en cours dragend : Drag end

Composition de l'ensemble du processus de glisser : dragstart * 1 + glisser*n + dragend*1.

Les événements pouvant être déclenchés par le glisser-déposer de l'objet cible (qui ne bougera pas) - 4 :

dragenter : glisser dans dragover : glisser et survoler dragleave : glisser déposer : relâcher

tout le glisser Composition 1 du processus de glisser : dragenter*1 + dragover*n + dragleave*1

Composition 2 de l'ensemble du processus de glisser : dragenter*1 + dragover*n + drop*1 ;

7. Travailleur Web

Lors de l'exécution d'un script dans une page HTML, l'état de la page ne répond pas jusqu'à ce que le script soit terminé. Web Worker est du JavaScript qui s'exécute en arrière-plan, indépendamment des autres scripts et n'affecte pas les performances de la page. Vous pouvez continuer à faire ce que vous voulez : cliquer, sélectionner du contenu, etc., pendant que Web Worker s'exécute en arrière-plan.

8. Stockage Web

Le stockage Web est une fonctionnalité importante introduite par H5 pour aider à résoudre le cache local du stockage des cookies. Auparavant, le stockage local utilisait des cookies. Mais le stockage Web doit être plus sécurisé et plus rapide, et le stockage Web a une capacité de 5 Mo et les cookies ne sont que de 4 Ko.

9. Web Socket

Le protocole WebSocket fournit un mécanisme de communication en duplex intégral entre le client de l'application Web et le serveur. Dans l'API WebSocket, le navigateur et le serveur n'ont besoin que d'effectuer une action de prise de contact, puis un canal rapide est formé entre le navigateur et le serveur, et les données peuvent être transmises directement entre les deux. Le navigateur envoie une demande au serveur pour établir une connexion WebSocket via JavaScript. Une fois la connexion établie, le client et le serveur peuvent échanger directement des données via la connexion TCP. Après avoir obtenu la connexion Web Socket, vous pouvez envoyer des données au serveur via la méthode send() et recevoir les données renvoyées par le serveur via l'événement onmessage.

10. SVG Drawing

SVG fait référence à des graphiques vectoriels évolutifs, qui sont un langage qui utilise XML pour décrire les graphiques 2D. En SVG, chaque forme dessinée est traitée comme un objet. Si les propriétés d'un objet SVG changent, le navigateur peut automatiquement reproduire le graphique.

Lecture approfondie

Quels sont les événements html5 courants :

Les événements html5 courants sont : 1. Les événements généraux ; 2. Les événements liés au formulaire ; 4. Les événements de sous-titres en cours ; événements ; 6. Événements déclenchés ; 7. Événements externes.

1. Événements généraux

onClick : événement de clic de souris, principalement utilisé pour les clics de souris dans la plage de contrôle d'un objet ; onDblClick : événement de double-clic de souris ; onMouseDown : le bouton de la souris est enfoncé ; appui sur le bouton Événements déclenchés lorsque la souris est enfoncée et relâchée ; onMouseOver : événements déclenchés lorsque la souris se déplace au-dessus de la portée d'un objet ; onMouseMove : événements déclenchés lorsque la souris se déplace ; onMouseOut : événements déclenchés lorsque la souris quitte la portée d'un objet ; onKeyPress : un événement déclenché lorsqu'une touche du clavier est enfoncée et relâchée ; onKeyDown : un événement déclenché lorsqu'une touche du clavier est enfoncée ; onKeyUp : un événement déclenché lorsqu'une touche du clavier est enfoncée et relâchée.

2. Événements liés à la page

onAbort : L'image est interrompue par l'utilisateur lors du téléchargement ; onBeforeUnload : Un événement déclenché lorsque le contenu de la page actuelle est sur le point d'être modifié ; onError : Capture les erreurs qui se produisent sur la page actuelle ; page pour une raison quelconque. Comme des erreurs de script et des erreurs de référence de données externes ; onLoad : un événement déclenché lorsque la page est vide et transférée au navigateur, y compris la fin de l'introduction du fichier externe ; onMove : un événement déclenché lorsque la fenêtre du navigateur est déplacée. ; onResize : lorsque l'événement du navigateur est déclenché lorsque la taille de la fenêtre est modifiée ; onScroll : l'événement est déclenché lorsque la position de la barre de défilement du navigateur change ; onStop : l'événement est déclenché lorsque le bouton d'arrêt du navigateur est enfoncé ou que le fichier en cours de téléchargement est interrompu ; onUnload : l'événement de la page actuelle qui sera déclenché une fois modifié.

3. Événements liés au formulaire

onBlur : un événement déclenché lorsque l'élément actuel perd le focus [peut être déclenché à la fois par la souris et le clavier] ; l'élément change [la souris et Il peut être déclenché par le clavier] ; onFocus : un événement déclenché lorsqu'un élément obtient le focus ; onReset : un événement déclenché lorsque l'attribut RESET du formulaire est activé ; onSubmit : un événement déclenché lorsqu'un formulaire est soumis ; .

4. Événement de sous-titre roulant

onBounce : un événement déclenché lorsque le contenu du Marquee sort de la plage d'affichage du Marquee ; onFinish : un événement déclenché lorsque l'élément Marquee termine le contenu qui doit être affiché onStart ; l'élément Marquee complète le contenu à afficher. Événement déclenché au début de l'affichage du contenu.

5. Modifier l'événement

onBeforeCopy HTML : un événement déclenché avant que le contenu actuellement sélectionné de la page ne soit copié dans le presse-papiers du spectateur ; onBeforeCut : lorsqu'une partie ou la totalité du contenu de la page est déplacée ; la page actuelle [Clip] Événement déclenché lorsqu'un élément est déplacé vers le presse-papiers du système du visualiseur.

6. Événements déclenchés

onBeforeEditFocus : l'élément actuel est sur le point d'entrer dans l'état d'édition ; onBeforePaste : l'événement est déclenché lorsque le contenu est sur le point d'être transféré [collé] du presse-papiers du système du spectateur vers la page ; onBeforeUpdate : avertit l'objet cible lorsque le spectateur colle le contenu du presse-papiers du système ; onContextMenu : un événement déclenché lorsque le navigateur appuie sur le bouton droit de la souris pour afficher le menu ou lorsque le menu de la page est déclenché par les touches du clavier [essayez d'ajouter onContentMenu="return false" à la page pour désactiver l'utilisation du bouton droit de la souris] ; onCopy : un événement déclenché lorsque le contenu actuellement sélectionné sur la page est copié ; onCut : un événement déclenché lorsque le contenu actuellement sélectionné sur la page est coupé ; onDrag : un événement déclenché lorsqu'un objet est glissé ; événement actif]; onDragDrop : Un objet externe est glissé dans la fenêtre ou le cadre actuel par la souris ; onDragEnd HTML : Événement déclenché lorsque le glisser de la souris se termine, c'est-à-dire que le bouton de la souris est relâché ; la souris entre dans la portée de son événement conteneur ; onDragLeave : un événement déclenché lorsqu'un objet glissé par la souris quitte la portée de son conteneur ; onDragOver : un événement déclenché lorsqu'un objet glissé est glissé dans la portée du conteneur d'un autre objet [événement d'activité] ; onDragStart : un événement déclenché lorsqu'un objet est sur le point d'être glissé ; onDrop : un événement déclenché lorsque le bouton de la souris est relâché lors d'un processus de glissement ; onLoseCapture : un événement déclenché lorsqu'un élément perd le focus de sélection formé par le mouvement de la souris ; Événement déclenché lorsque le contenu est collé ; onSelect : événement déclenché lorsque le contenu du texte est sélectionné ; onSelectStart HTML : événement déclenché lorsque la sélection du contenu du texte commence à se produire.

7. Événements externes

onAfterPrint : un événement déclenché lorsque le document est imprimé ; onBeforePrint : un événement déclenché lorsque le document est sur le point d'être imprimé ; onFilterChange : un événement déclenché lorsque l'effet de filtre d'un objet change ; : un événement déclenché lorsque le spectateur appuie sur F1 ou sur la sélection d'aide du navigateur ; onPropertyChange : un événement déclenché lorsque l'une des propriétés de l'objet change ; onReadyStateChange : un événement déclenché lorsque la valeur de la propriété d'initialisation de l'objet change.

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!