Comment utiliser les nouvelles fonctionnalités de HTML 5

Cette fois je vais vous montrer comment utiliser les nouvelles fonctionnalités de HTML 5. Quelles sont les précautions lors de l'utilisation des nouvelles fonctionnalités de HTML 5. Voici des cas pratiques, jetons un oeil.

Avant-propos

Comme nous le savons tous, HTML5 appartient au World Wide Web Consortium (W3C). Cette organisation fournit des normes pour l'ensemble de la communauté Internet, et les protocoles ainsi formés peuvent être utilisés. à travers le monde. En novembre 2016, le W3C a mis à jour la norme HTML 5, sa première mise à jour mineure en 2 ans. De nombreuses fonctionnalités initialement proposées pour HTML 5.1 ont été supprimées en raison de défauts de conception et du manque de prise en charge de la part des fournisseurs de navigateurs.

Bien que certains éléments et améliorations de fonctionnalités aient été apportés à HTML 5.1, il s'agit encore d'une petite mise à jour. Certains des nouveaux éléments incluent des balises combinées, qui incluent désormais a38fd2622755924ad24c0fc5f0b4d412, a5e9d42b316b6d06c62de0deffc36939, 631fb227578dfffda61e1fa4d04b7d25 et 9b66618b56ad8833e792d2ba7c315ba9, offrant aux développeurs davantage de moyens d'exprimer leur créativité et leur espace.

Le W3C a commencé à développer la version HTML 5.2, qui devrait être publiée d'ici la fin de 2017. Ce que nous sommes ici pour vous présenter, ce sont les nouvelles fonctionnalités et améliorations introduites dans la version 5.1. Vous n'avez pas besoin d'utiliser javascript pour profiter de ces fonctionnalités. Tous les navigateurs ne prennent pas en charge ces fonctionnalités, c'est donc une bonne idée de vérifier la prise en charge des navigateurs avant de les utiliser en production.

Prévenir les attaques de phishing

La plupart des personnes qui utilisent target ='_blank' ne connaissent pas un fait intéressant : les onglets nouvellement ouverts peuvent changer window.opener.location en une page de phishing. Il exécutera du code JavaScript malveillant en votre nom sur la page ouverte. Parce que les utilisateurs sont convaincus que la page qu’ils ouvrent est sûre, ils n’ont aucun doute.

Pour éliminer complètement ce problème, HTML 5.1 a standardisé l'utilisation de l'attribut rel="noopener" en isolant le contexte du navigateur. rel="noopener" peut être utilisé dans les balises 3499910bf9dac5ae3c52d5ede7383485 et 03fc64e1e502d5ba947b3a9af06d2d2a

<a href="#" target="_blank" rel="noopener">
  The link won&#39;t make trouble anymore
</a>

Traitement flexible des titres d'images

La balise 614eb9dc63b3fb809437a716aa228d24 représente le titre ou la légende associée à l'élément 24203f2f45e6606542ba09fd2181843a tableaux, illustrations, etc. Dans les versions antérieures de HTML, 614eb9dc63b3fb809437a716aa228d24 ne pouvait être utilisé que comme balise enfant du premier ou du dernier 24203f2f45e6606542ba09fd2181843a. HTML5.1 a assoupli cette restriction afin que vous puissiez désormais utiliser 614eb9dc63b3fb809437a716aa228d24 n'importe où dans un conteneur 24203f2f45e6606542ba09fd2181843a

<article>
  <h1>The Headline of todays news </h1>
  <figure>
    <img src="petrolimage.jpeg" alt="Petrol price drops">
    <figcaption>A man fueling up his car at petrol station</figcaption>
  </figure>
  <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>

le correcteur orthographique est une propriété d'énumération dont la valeur peut être une chaîne vide, vraie ou fausse. Spécifier son statut comme vrai signifie que l'orthographe et la grammaire de l'élément seront vérifiées.

element.forceSpellCheck() forcera les agents utilisateurs à signaler l'orthographe vérifiée et les erreurs de grammaire sur les éléments de texte, même si l'utilisateur n'a jamais concentré sa saisie sur cet élément.

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

La nouvelle version de HTML vous permet de créer un élément 5a07473c87748fb1bf73f23d45547ab8 Il peut s'agir d'un élément enfant d'un élément 5b7a15bed8615d1b843806256bebea72, fc86e7b705049fc9d4fccc89a2e80ee3 Cette fonctionnalité peut vous être utile lors de la conception de formulaires conviviaux.

L'attribut Allowfullscreen, une variable booléenne développée pour Frame, vous permet de contrôler si le contenu peut être affiché en plein écran en utilisant la méthode requestFullscreen(). Par exemple, utilisons une iframe intégrée dans un lecteur YouTube. L'attribut Allowfullscreen doit être défini pour permettre au lecteur d'afficher la vidéo en plein écran.

<article>
  <header>
  <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
  </header>
  <main>
  <p>Check out my new video!</p>
  <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
  </main>
</article>

HTML5.1 vous permet d'intégrer un en-tête et un pied de page dans un autre en-tête. Vous pouvez ajouter un en-tête ou un pied de page à l'élément d'en-tête s'ils se trouvent dans le contenu du paragraphe. Cette fonctionnalité devient utile si vous souhaitez ajouter des balises d'élaboration telles que 2f8332c8dcfd5c7dec030a070bf652c3 et 23c3de37f2f9ebcb477c4a90aac6fffd

Dans le code suivant, la balise 23c3de37f2f9ebcb477c4a90aac6fffd contient une balise 1aa9e5d373740b65a0cc8f0a02150c53, qui a une balise 15221ee8cba27fc1d7a26c47a001eb9b

<article>
  <header>
    <h2>Lesson: How to cook chicken</h2>
    <aside>
      <header>
        <h2>About the author: Tom Hank</h2>
        <p><a href="./tomhank/">Contact him!</a></p>
      </header>
      <p>Expert in nothing but Cooking. The cookbook sideshow.</p>
    </aside>
  </header>
  <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
          Remove as much air as possible from the bag and seal it. </ins></p>
</article>

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser la balise img des images HTML

Quels sont le nom, l'identifiant et la classe en HTML ? Quelle est la différence

Comment obtenir l'effet d'en-tête slash dans le tableau

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!