Quelles fonctions a html5 ?-Questions et réponses frontales-php.cn

Caractéristiques de HTML5 : 1. Nouvelle bibliothèque graphique, qui peut enrichir le contenu du site Web ; 2. Contenu multimédia plus pratique ; 3. Fonction glisser-déposer ; 5. Notifications sur le bureau ; Performances et intégration ; 8. Accès aux appareils ; 9. Conception de style, etc.

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

Caractéristiques de HTML5

1. Nouvelle bibliothèque graphique :

HTML5 introduit les bibliothèques de fonctions Canvas et WebGL, qui peuvent enrichir le contenu du site Web. La bibliothèque de fonctions WebGL, en particulier, peut presque changer tout le jeu dans ce domaine. Il suffit de regarder cette célèbre scène de jeu Quake II, entièrement développée en HTML5. Pour moi, cela représente une nouvelle ère et permet d’imaginer comment les jeux seront joués dans le futur.

2. Un contenu multimédia plus pratique :

Si vous avez déjà conçu un site Web qui doit contenir beaucoup de contenu audio et vidéo, vous connaîtrez le sentiment de maladresse. Il est souvent nécessaire d'utiliser un ensemble de balises Flash plus et Mais vous n'avez plus à vous soucier de cela. HTML5 introduit les balises et faciles à utiliser, ce qui rend l'ajout de contenu multimédia à votre site Web plus facile que jamais. C’est précisément grâce à cette fonction que de nombreux sites Web de vidéos en ligne ont commencé à migrer vers HTML5.

3. Géolocalisation :

Les gens utilisent de moins en moins Internet via des ordinateurs de bureau ou même des ordinateurs portables. Aujourd’hui, de nombreuses personnes naviguent sur le Web via des appareils mobiles portables, tels que des smartphones et des tablettes. Cette fonctionnalité actuelle d'accès au réseau mobile, associée aux nouvelles capacités de géolocalisation du HTML5, se combine pour ouvrir d'innombrables nouvelles possibilités. Connaître la localisation précise d'un utilisateur lorsqu'il visite votre site Web vous permet de proposer un contenu personnalisé adapté au contexte de l'utilisateur. Par exemple, lorsque vous visitez un site Web lié aux sorties, s'il s'avère que vous vous trouvez dans un centre-ville, il peut fournir des informations relatives à la planification du voyage, mais si vous visitez le site Web depuis un emplacement en banlieue, la fonction de carte interactive s'affichera ; par défaut.

4. Fonction glisser-déposer :

C'est un changement subtil, mais il est très important. La fonction glisser-déposer vous permet de faire glisser le contenu du navigateur directement vers votre ordinateur, ou de faire glisser le contenu de votre ordinateur vers le navigateur. C’est vraiment un changement qui fait époque, n’est-ce pas ? Jetons un coup d'œil à cet affichage et réfléchissons-y, si les sites de réseaux sociaux ont une telle fonction, lorsque vous revenez de vacances, vous pouvez facilement sélectionner vos photos de vacances, puis les faire glisser vers le navigateur, puis les partager avec vos amis en ligne immédiatement. C’est ainsi que je souhaite interagir avec le site Web !

5. Notifications sur le bureau :

Les notifications sur le bureau sont de petites fenêtres contextuelles qui apparaissent en dehors du navigateur. Les utilisateurs peuvent interagir avec le site Web même lorsqu'ils ne naviguent pas sur le site. Cette fonctionnalité n'est actuellement disponible que dans Google Chrome et vous pouvez voir une démonstration ici. Ces notifications sont idéales pour les notifications par e-mail, les mises à jour des réseaux sociaux, les messages Weibo et d'autres services. Couplée à la fonctionnalité glisser-déposer, la distinction entre les applications en ligne et locales est vraiment floue.

6. Hors ligne et stockage

Ressources hors ligne : cache d'application. Firefox prend entièrement en charge la spécification des ressources hors ligne HTML5. La plupart des autres ne fournissent qu'un certain degré de prise en charge des ressources hors ligne.

Événements en ligne et hors ligne. Firefox 3 prend en charge les événements en ligne et hors ligne WHATWG, qui permettent aux applications et extensions de détecter si une connexion réseau est disponible et de détecter quand une connexion est établie et interrompue.

Session client WHATWG et stockage de persistance (alias stockage DOM). Les sessions côté client et le stockage persistant permettent aux applications Web de stocker des données structurées côté client.

IndexedDB. Il s'agit d'un standard Web conçu pour stocker de grandes quantités de données structurées dans le navigateur et utiliser des index sur ces données pour une récupération haute performance.

Utilisez des fichiers provenant d'applications Web. La prise en charge de la nouvelle API de fichiers HTML5 a été ajoutée à Gecko, permettant aux applications Web d'accéder aux fichiers locaux sélectionnés par l'utilisateur. Cela inclut la prise en charge de la sélection de plusieurs fichiers à l'aide du nouvel attribut multiple de l'élément Et FileReader.

7. Performance et intégration

Web Workers. La possibilité de déléguer les calculs JavaScript aux threads d'arrière-plan empêche le ralentissement des événements interactifs en autorisant ces activités.

XMLHttpRequest Niveau 2. Permet de lire des parties de la page de manière asynchrone, lui permettant d'afficher un contenu dynamique qui varie en fonction du temps et du comportement de l'utilisateur. C'est la technologie derrière Ajax.

Moteur JavaScript compilé juste à temps. La nouvelle génération de moteur JavaScript est plus puissante et plus performante.

API Historique. Permet la manipulation de l'historique du navigateur. Ceci est particulièrement utile pour les pages qui chargent de nouvelles informations de manière interactive.

Attribut conentEditable : Transformez votre site Web en wiki ! HTML5 a standardisé l'attribut contentEditable. En savoir plus sur cette fonctionnalité.

Glissez-déposez. L'API glisser-déposer de HTML5 prend en charge le glisser-déposer d'éléments au sein et entre les sites. Il fournit également une API plus simple à utiliser par les extensions et les applications basées sur Mozilla.

Gestion des focus en HTML. Prise en charge des nouvelles propriétés HTML5 activeElement et hasFocus.

Gestionnaire de protocole basé sur le Web. Vous pouvez désormais enregistrer une application Web en tant que gestionnaire de protocole à l'aide de la méthode navigator.registerProtocolHandler().

demandeAnimationFrame. Permet de contrôler le rendu de l'animation pour de meilleures performances.

API plein écran. Les contrôles utilisent la totalité de l'écran pour une page Web ou une application sans afficher l'interface du navigateur.

API de verrouillage de pointeur. Permet au pointeur d'être verrouillé sur le contenu afin que les jeux ou applications similaires ne perdent pas le focus lorsque le pointeur atteint les limites de la fenêtre.

Événements en ligne et hors ligne. Afin de créer une bonne application Web compatible hors ligne, vous devez savoir quand votre application est réellement hors ligne. D’ailleurs, vous devez également savoir quand votre candidature sera à nouveau en ligne.

8. Accès à l'appareil

Utilisez l'API de la caméra. Vous permet d'utiliser et de faire fonctionner l'appareil photo de votre ordinateur et d'accéder aux photos de celui-ci.

Événements tactiles. Gestionnaire qui réagit aux événements lorsque l'utilisateur appuie sur l'écran tactile.

Utilisez la géolocalisation. Laissez le navigateur utiliser les services de géolocalisation pour localiser l'emplacement de l'utilisateur.

Détecter l'orientation de l'appareil. Permet aux utilisateurs d'obtenir des informations lorsque l'appareil exécutant le navigateur change d'orientation. Celui-ci peut être utilisé comme périphérique de saisie (par exemple, créer un jeu qui répond à la position de l'appareil) ou pour adapter la mise en page de la page à l'orientation de l'écran (paysage ou portrait).

API de verrouillage de pointeur. Permet au pointeur d'être verrouillé sur le contenu afin que les jeux ou applications similaires ne perdent pas le focus lorsque le pointeur atteint les limites de la fenêtre.

9. Conception de style

Nouvelle fonctionnalité de style d'arrière-plan. Vous pouvez désormais utiliser box-shadow pour définir une ombre pour la boîte logique, et vous pouvez également définir plusieurs arrière-plans.

Plus de belles bordures. Non seulement les bordures peuvent être formatées à l'aide d'images, à l'aide de border-image et de ses propriétés normales associées, mais les bordures arrondies peuvent désormais être prises en charge via la propriété border-radius.

Animez vos styles. En utilisant des transitions CSS pour animer entre différents états, ou en utilisant des animations CSS pour animer des parties de la page sans événement déclencheur, vous pouvez désormais contrôler le déplacement des éléments sur la page.

Améliorations de la typographie. Les auteurs ont un plus grand contrôle, ce qui se traduit par un meilleur formatage. Non seulement ils peuvent contrôler le débordement de texte et la césure, mais ils peuvent également y placer une ombre ou contrôler plus finement ses décorations. Grâce à la nouvelle règle @font-face, nous pouvons désormais télécharger et appliquer des polices personnalisées. .

Nouvelle mise en page de présentation. Pour améliorer la flexibilité de conception, deux nouvelles mises en page ont été ajoutées : la mise en page CSS multi-colonnes et la mise en page CSS flexible en boîte.

Recommandations associées : " Tutoriel vidéo HTML "