De nouvelles fonctionnalités de HTML5 nécessaire pour l'entretien avant-end

Qu'est-ce que HTML5: HTML5 est la prochaine génération de HTML, qui deviendra de nouvelles normes pour HTML, XHTML et HTML DOM. Aujourd'hui, parlons d'une question à laquelle je serai posé chaque fois que l'entretien de la fin de la fin est, qui est la nouvelle fonctionnalité de HTML5. Il s'agit des connaissances de base qui doivent être maîtrisées à l'avant de l'apprentissage.

HTML5 ajoute de meilleurs éléments d'étiquette sémantique.

1. L'élément d'article représente un contenu indépendant qui n'est pas lié au contexte, comme un article dans un blog.
2. Moins l'élément représente un contenu autre que le contenu de l'article, les informations assistées.
3. L'élément d'en-tête représente un bloc de contenu ou l'en-tête de toute la page dans la page.
4. L'élément HGroup est utilisé pour combiner le titre d'un bloc ou de la page entière de la page.
5. L'élément de pied de page indique un bloc de contenu ou une page complète dans la page.
6. L'élément de figure représente le regroupement du contenu multimédia et leur titre.
7. L'élément de section représente un bloc de contenu dans la page, tels que les chapitres.
8. Les éléments de navigation indiquent le lien de navigation dans la page.

1. L'élément vidéo est utilisé pour définir la vidéo.
2. L'élément audio est utilisé pour définir l'audio.
3. L'élément de canevas est utilisé pour afficher les graphiques, qui n'a lui-même aucun comportement et un seul morceau de toile.
4. Les éléments intégrés sont utilisés pour insérer divers multimédias.
5. L'élément Mark est utilisé pour montrer les reflets.
6. L'élément de progression est utilisé pour montrer la progression de tout type de tâche.
7. Les éléments du compteur indiquent des mesures et définissent la mesure dans la plage pré-définie.
8. L'élément de temps est utilisé pour afficher la date ou l'heure.
9. Élément de commande, indiquant le bouton de commande.
10. Détails Les éléments sont utilisés pour afficher les informations des détails dont l'utilisateur a besoin et peut être obtenue.
11. L'élément de résumé est utilisé pour définir les titres visibles pour plus de détails sur les éléments.
12. L'élément de données est utilisé pour afficher les listes de données facultatives.
13. L'élément DataGrid est également utilisé pour afficher la liste de données en option, qui s'affiche sous la forme d'une liste d'arbres.
14. L'élément Keygen indique une clé à générer.
15. Les éléments de sortie indiquent différents types de sortie.
16. Les éléments de la source définissent les ressources médiatiques pour les éléments médiatiques.
17. L'élément de menu indique la liste des menues.
18. L'élément Ruby représente les commentaires Ruby, les éléments RT représentent l'interprétation ou la prononciation des caractères. L'élément RP est utilisé dans Ruby Notes pour définir le contenu affiché par le navigateur qui ne prend pas en charge les éléments Ruby.
19. Les éléments WBR indiquent une commutation douce. La différence par rapport à l'élément BR est que l'élément BR signifie que l'élément WBR signifie la largeur de la fenêtre du navigateur ou de l'élément de niveau parent. Ne changez pas la ligne et lorsque la largeur ne suffit pas, prenez l'initiative de changer la banque.
20. Les éléments BDI définissent la direction du texte du texte, afin qu'il soit décédé de la direction du texte qui l'entoure.
21. L'élément de dialogue indique la boîte de dialogue ou la fenêtre.

Certains éléments d'expression purement sont abolis dans HTML5.

Les éléments de l'expression pure sont les éléments qui peuvent être remplacés par CSS. Basefont, Big, Centre, Font, S, Strike, TT, U, leurs fonctions sont purement affichées pour l'affichage de la page.

Pour les éléments de FrameSet, les éléments de trame et les éléments NOFRAMES, car le cadre de trame a un effet négatif sur la disponibilité Web, le cadre de trame n'est plus pris en charge dans HTML5 et prend en charge uniquement le cadre IFRAME.

Pour Applet, Bgsound, Blink, Marquee et d'autres éléments, car seuls certains supports de navigateur, en particulier les éléments BGSOUND et les éléments de chapiteau ne sont soutenus que par IE, ils sont abolis en HTML5. Les éléments de l'applet peuvent être remplacés par des éléments intégrés ou des éléments d'objet, les éléments BGSOUND peuvent être remplacés par un élément audio et le chapiteau peut être remplacé par la programmation JavaScript.

L'élément de toile mentionné ci-dessus peut fournir une toile pour que la page affiche le graphique. Combiné avec l'API Canvas, vous pouvez générer et afficher dynamiquement divers graphiques, graphiques, images et animations sur cette toile. Canvas est essentiellement graphique. Il n'est pas nécessaire d'utiliser chaque graphique comme stockage d'objets, et les performances des performances sont très bonnes.

Utilisez d'abord l'API Canvas pour dessiner le contexte de l'élément Canvas, puis utilisez les différentes fonctions de dessin encapsulées dans le contexte pour dessiner.

 <canvas id = canvas> contenu alternatif </ canvas> <cript> var canvas = document.getElementyid (canvas '); / La pratique montre que le contexte de FillStyle par défaut est un contexte noir (0, 0, 100);

SVG est une autre fonction graphique de HTML5. HTML5 présente le SVG de l'Union intérieur afin que les éléments SVG puissent apparaître directement dans la marque HTML.

 <svg height = 100 largeur = 100> <cercle cx = 50 cy = 50 r = 50 / svg>

L'émergence d'éléments audio et vidéo a fait des applications médiatiques HTML5 plus de nouveaux choix. Pour ces deux éléments, la spécification HTML5 fournit une API générale, complète et contrôlée.

Avant que la spécification HTML5 ne sorte, la façon typique de lire des vidéos sur la page est d'utiliser Flash, Quicktime ou Windows Media Plug-in pour intégrer l'audio et la vidéo dans HTML. Tags.

1. En tant que fonction de la prise en charge native du navigateur, les nouveaux éléments audio et vidéo n'ont pas besoin d'être installés.
2. Les éléments multimédias souhaitent que la page Web fournisse des API universelles, intégrées et contrôlées par le script.

 <video src = video.webm Controls> <objet data = videoPlayer.swf type = application / x-shockwave-flash> <param name = film value = video.swf /> </ objet> Votre navigateur ne prend pas en charge la vidéo html5. </ vidéo>

Que la détection du navigateur prenne en charge les éléments audio ou les éléments vidéo est le moyen le plus simple de le créer dynamiquement avec des scripts, puis de détecter s'il existe des fonctions spécifiques.

 var hasvideo = !!

L'API de géolocalisation HTML5 (API de positionnement géographique) peut demander aux utilisateurs de partager leur position. La méthode d'utilisation est très simple. . Les informations de localisation sont constituées de latitude, de coordonnées de longitude et de quelques autres métadonnées.

L'API Geolocation ne spécifie pas la technologie sous-jacente pour utiliser l'utilisateur pour localiser l'application de l'application. Au lieu de cela, il est uniquement utilisé pour récupérer l'API des informations de localisation, et les données récupérées via l'API n'ont qu'un certain degré de précision, et il ne peut garantir que l'emplacement du retour de l'appareil est exact. L'appareil peut utiliser la source de données suivante:

1. Adresse IP

   Coordonnées à trois dimensions

   GPS

   Adresses MAC de RFID, WiFi et Bluetooth à WiFi

2. ID de téléphone GSM ou CDMA
3. Données personnalisées de l'utilisateur

 // Mettez à jour Navigator.Geolocation.getCurrentPosition (UpdateLocation, HandlelocationEror); // Précision var timestamp = position.coords.timestamp; Emplacement Mise à jour Navigator.Geolocation.ClearWatch (WatchID);

Pour les considérations de sécurité, la communication entre le cadre, les onglets et les fenêtres du même navigateur a été strictement restreinte. Cependant, en réalité, il existe une demande raisonnable pour le contenu des différents sites pour interagir dans le navigateur. Dans ce cas, si le navigateur peut fournir un mécanisme de communication direct, ces applications peuvent être mieux organisées.

Une nouvelle fonctionnalité est introduite dans HTML5, la communication de messages transversaux, qui peut garantir que les pages IFRAME, TAB et les fenêtres sont effectuées en toute sécurité. L'API PostMessage est la méthode standard d'envoi de messages.

 Window.postMessage ('Hello, World', 'http://www.example.com/');

Lorsque vous recevez le message, vous n'avez qu'ajouter une fonction de traitement d'événement à la page. Lorsqu'un message arrive, la source du message est déterminée à décider de traiter le message.

 Window.AddeventListener (message, Message Handleur, true); t reconnaître // le message est ignoré}}

L'événement de message est un événement DOM avec des données (données) et des attributs d'origine. L'attribut de données est le message réel passé par l'expéditeur, et l'attribut d'origine est la source de l'envoi.

L'API XMLHTTPREQUEST rend la technologie AJAX possible. Il y a deux aspects principaux:

1. Croix xmlhttprequest
2. Progrès

Dans le passé, XMLHttpRequest était limité à la communication homologue, et XMLHttpRequest Level2 a réalisé le transnational xmlhttprequest via CORS. La demande HTTP Cross -Source contient un chef d'origine, qui fournit au serveur les informations source des demandes HTTP.

WebSockets est la fonction de communication la plus puissante de HTML5.

Afin d'établir une communication WebSockets, le client et le serveur améliorent le protocole HTTP au protocole WebSocket lors de la serre la main. Une fois la connexion établie avec succès, nous pouvons passer le message WebSocket dans les deux sens entre le client et le serveur sous le mode de travail double complet.

En plus de la définition du protocole WebSockets, la spécification définit également l'interface WebSocket pour l'application JavaScript. L'utilisation de l'interface WebSockets est très simple. Pour connecter l'hôte distant, il vous suffit de créer une nouvelle instance WebSocket pour fournir une paire d'URL qui espèrent se connecter.

1. Élément tel, indiquant le numéro de téléphone.
2. L'élément e-mail indique la zone de texte de l'adresse e-mail.
3. L'élément URL indique l'URL de la page Web.
4. Élément de recherche, pour les moteurs de recherche, tels que la zone de recherche affichée en haut du site.
5. Élément de plage, sélecteur numérique Dans une plage spécifique, l'affichage typique est les barres coulissantes.
6. L'élément de nombre ne contient que des champs de valeurs.

1. Élément de couleur, sélecteur de couleurs, basé sur une palette de couleurs ou une planche de coloriage pour la sélection.
2. L'élément DateTime affiche la date et l'heure complètes, y compris le fuseau horaire.
3. DateTime-local, Date et heure d'affichage.
4. Élément de temps, sélecteur de temps et indicateur du fuseau horaire.
5. Élément de date, sélecteur de date.
6. Élément semaine, sélectionneur hebdomadaire dans une certaine année.
7. Élément de mois, un sélecteur mensuel dans une certaine année.

Lorsque l'utilisateur n'a pas la valeur d'entrée, le contrôle d'entrée peut afficher la description descriptive ou inviter des informations à l'utilisateur via la fonctionnalité.

 <entrée name = name placeholder = premier et nom de famille>

Le navigateur peut savoir si la valeur d'entrée doit être préservée via la saisie semi-automatique.

Grâce aux caractéristiques de l'autofocus, vous pouvez spécifier un élément de table pour obtenir la mise au point d'entrée.

Le contrôle d'entrée avec le contenu du texte et la propriété SpecialCheck de contrôle spatial TextArea. Après le réglage, vous demanderez au navigateur si vous devez donner des commentaires des résultats de l'inspection d'orthographe. L'attribut orthographique doit être attribué.

En combinant avec les caractéristiques de la liste et les éléments de données, les développeurs peuvent construire une liste de sélection de valeur pour un contrôle de type d'entrée.

 <Datalist id = ContactList> <Option [email protected]> </ Option> <Option [email protected]> </ Option> </DATAList> <Type d'entrée = Email ID = Contact = Contact List>

En définissant les fonctionnalités MIN et MAX, la plage d'entrée de valeur de la boîte d'entrée de plage peut être limitée entre le minimum et la valeur la plus élevée. Vous ne pouvez définir qu'un ou deux ou deux, ou vous ne pouvez pas le définir.

Pour les contrôles de type entrée, la définition de ses caractéristiques de pas peut spécifier la granularité de la valeur d'entrée croissante ou diminuée.

Une fois qu'une fonctionnalité requise est définie pour un contrôle de type d'entrée, cet élément doit être rempli, sinon le formulaire ne peut pas être soumis.

Si l'élément draggable de l'élément web est vrai, cet élément peut être traîné.

 <Div draggable = true> draggable div </div>

Le processus de traînée déclenchera de nombreux événements, principalement dans ce qui suit:

1. DragStart: l'élément de page Web est déclenché lors du glisser.
2. Drag: l'élément traîné continue d'être déclenché pendant la traînée.
3. DRAGENTER: Lorsque l'élément glisser est déclenché lors de la saisie de l'élément cible, l'événement doit être écouté l'élément cible.
4. DragLeave: Lorsque l'élément glisser est déclenché, l'événement doit être écouté l'élément de l'objet.
5. Dragover: déclencheurs en continu lorsque l'élément de dragage reste dans l'élément cible, et l'événement doit être écouté l'élément cible.
6. DRAP: élément glisser ou fichier sélectionné dans le système de fichiers, déclenche lors de la traînée et de la chute.
7. Dragend: l'élément de page Web est déclenché à la fin.

 DraggableElement.addeventListener ('dragstart', fonction (e) {console.log ('drag start!');});

Pendant la traînée, les paramètres de l'événement acceptés par la fonction de rappel ont un attribut DataTransfer, pointant vers un objet, y compris diverses informations liées à la traînée.

 DraggableElement.addeventListener ('dragstart', fonction (événement) {event.datatransfer.setData ('text', 'hello world!');});

1. Dropeffect: le type d'opération de glisser-déposer détermine comment le navigateur affiche la forme de la souris.
2. Effectif: Spécification des opérations autorisées, les valeurs possibles sont la copie, le déplacement, le lien, le copyle, le copymove, le linkmove, tout, non, et non initialisé (la valeur par défaut est équivalente à tous, c'est-à-dire permettre toutes les opérations).
3. Fichiers: contient un objet FileList, indiquant le fichier impliqué dans le glisser-déposer, qui est principalement utilisé pour traiter les fichiers glissés dans le navigateur à partir du système de fichiers.
4. Types: Le type de données stockées dans l'objet Datatransfer.

1. SetData (format, données): stocker des données sur l'objet Datatransfer. Le premier format de paramètre est utilisé pour spécifier le type de données de stockage, tel que le texte, l'URL, le texte / HTML, etc.
2. GetData (format): prenez les données de l'objet Datatransfer.
3. ClearData (format): effacer les données stockées par l'objet Datatransfer. Si le paramètre de format est spécifié, seules les données du format sont effacées, sinon toutes les données sont supprimées.
4. SetDragImage (imagement, x, y): spécifiez l'image affichée pendant le processus de glisser. Par défaut, de nombreux navigateurs affichent une version semi-transparente de l'élément de glisser. L'image de paramètre doit être un élément d'image, pas le chemin de l'image, et le paramètre X et Y indiquent la position de l'image pour la souris.

JavaScript est un seul thread. Par conséquent, le calcul d'une longue durée, à l'arrière pour bloquer le thread d'interface utilisateur, qui fait que le texte remplit le texte dans la zone de texte, cliquez sur le bouton, etc., et dans la plupart des navigateurs, à moins que le contrôle ne soit renvoyé, il ne peut pas ouvrir une nouvelle page d'onglet. La solution de ce problème est le travailleur Web, qui permet aux applications Web d'avoir des capacités de traitement d'arrière-plan, et sa prise en charge de multi-thread est très bonne.

Cependant, le script exécuté dans les travailleurs Web ne peut pas accéder à l'objet Window sur la page, c'est-à-dire que les travailleurs Web ne peuvent pas accéder directement à la page Web et à l'API DOM. Bien que les travailleurs du Web ne permettent pas à l'interface utilisateur du navigateur d'arrêter de répondre, il consommera toujours le cycle du processeur, ce qui entraîne une vitesse de réponse plus lente.

Le stockage Web est une fonctionnalité très importante introduite par HTML5.

SessionStorage enregistre les données de la session et le navigateur arrête les données pour disparaître.

LocalStorage a toujours enregistré des données sur le client, sauf si supprimées manuellement, elle sera conservée.

Qu'il s'agisse de SessionStorage ou de LocalStorage, l'API qui peut être utilisée est la même.

1. Enregistrer les données: localStorage.SetItem (clé, valeur);
2. Lire les données: localStorage.GetItem (KEY);
3. Supprimer une seule données: localStorage.RemoveItem (clé);
4. Supprimer toutes les données: localStorage.Clear ();
5. Clé pour obtenir un certain index: localStorage.Key (index);

Ce qui précède est tout le contenu de cet article.