Maison > interface Web > Tutoriel H5 > le corps du texte

HTML 5.1 - Explication détaillée de 14 nouvelles fonctionnalités et exemples de codes d'utilisation (image)

黄舟
Libérer: 2017-03-09 16:03:25
original
1865 Les gens l'ont consulté

HTML5 appartient au World Wide Web Consortium (W3C), une organisation qui fournit des normes pour l'ensemble de la communauté Internet, et les protocoles qui en résultent peuvent être utilisés dans le monde entier. 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 fonctionnalités aient été améliorés dans 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

,
, et , offrant ainsi aux développeurs davantage de moyens d'exprimer leur créativité et leur espace de contenu.

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.

14. 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 remplacer window.opener.location par certaines pages 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 et

13. Gérez de manière flexible les titres d'images

La balise

représente le titre ou la légende associée à l'élément
, généralement en tant que conteneur d'éléments visuels tels que des images, des graphiques, des illustrations, etc. Dans les versions antérieures de HTML,
ne pouvait être utilisé que comme balise enfant du premier ou du dernier
HTML5.1 a assoupli cette restriction afin que vous puissiez désormais utiliser
n'importe où dans un conteneur

<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>
Copier après la connexion

12. Vérification orthographique

La vérification 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 les erreurs orthographiques et grammaticales vérifiées 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>
Copier après la connexion

11. Option vide

La nouvelle version de HTML vous permet de créer un élément , Cette fonctionnalité peut vous être utile lors de la conception de formulaires conviviaux.

10. Plein écran de Support Frame

La propriété Allowfullscreen, une variable booléenne développée pour Frame, vous permet de contrôler si le contenu peut être affiché en plein écran à l'aide de la méthode requestFullscreen(). Par exemple, utilisons une iframe intégrée dans un lecteur YouTube. Vous devez définir l'attribut Allowfullscreen 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>
Copier après la connexion

 9. Intégrer l'en-tête et le pied de page

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 contiennent eux-mêmes dans le contenu du paragraphe. Cette fonctionnalité devient très utile si vous souhaitez ajouter des balises d'élaboration telles que

et

Dans le code ci-dessous, la balise

contient une balise
, qui possède une balise