Comme nous le savons tous, HTML5 appartient à la Wanwei Network Alliance (W3C). En novembre 2016, W3C a mis à jour la norme HTML 5 d'exercice à long terme, qui a été la première petite mise à jour en 2 ans. De nombreuses caractéristiques fonctionnelles HTML 5.1 initialement proposées ont été supprimées en raison des défauts de conception et du manque de support des fabricants de navigateurs.
Bien qu'il existe certains éléments et améliorations des fonctions, il est introduit dans HTML 5.1, il s'agit toujours d'une petite mise à jour. Certains de ces nouveaux éléments incluent des étiquettes combinées.
Le W3C et le début du développement du projet HTML 5.2 devraient être publiés fin 2017. Ce que nous voulons présenter ici, ce sont les nouvelles caractéristiques fonctionnelles et l'amélioration de la fonction introduite dans la version 5.1. Vous n'avez pas besoin de déplacer JavaScript pour utiliser ces fonctionnalités. Tous les navigateurs ne prennent pas en charge ces fonctionnalités, vous devez donc les vérifier pour vérifier la prise en charge du navigateur avant de les appliquer à l'environnement de production.
14. Empêcher les attaques de pêche en ligneLa plupart des gens qui utilisent Target = '_ Blank' ne connaissent pas un fait intéressant - l'étiquette nouvellement ouverte peut modifier Window.Openner.Location à certaines pages de pêche au réseau. Il vous représentera sur la page ouverte pour effectuer un code JavaScript malveillant. Parce que l'utilisateur estime que la page d'ouverture est sûre, elle ne doutera pas.
Afin d'éliminer complètement ce problème, HTML 5.1 a standardisé l'utilisation de la propriété Rel = NOOPNER qui est normalisée par l'isolement du contexte du navigateur. Rel = noantener peut être utilisé dans les balises <a> et <af>.
<A href = # cible = _blank roth = noopner> le lien veut plus de problèmes </a>13. Titre d'image de manipulation flexible
La balise <Figcaption> représente le titre ou la légende associée à l'élément <Figure>, qui est généralement utilisé comme conteneur pour les éléments visuels tels que les images, les graphiques, les illustrations. Dans la version HTML précoce, <Figcaption> ne peut être utilisé que comme premier ou dernier sous-élaboration <figure>. HTML5.1 a assoupli cette limite, et maintenant vous pouvez utiliser <Figcaption> n'importe où dans le conteneur <Figure>.
<Artlicle> <h1> Le titre des nouvelles / figures d'aujourd'hui> <p> Il s'agit de la hausse des prix de l'essence en deux mois et le troisième en cas de diesel en quinzaine.12
La vérification orthographique est un attribut d'énumération qui peut prendre la valeur de la chaîne vide, vrai et fausse. Si l'état est spécifié pour être vrai, cela signifie que l'élément acceptera l'inspection d'orthographe et de grammaire.
Element.forcespellcheck () obligera les agents utilisateur à signaler les erreurs d'orthographe et de grammaire détectées sur l'élément texte, même si l'utilisateur ne concentre jamais l'entrée sur l'élément.
<P SpellCheck = True> <Babel> Nom: <Input SpellCheck = False ID = TextBox> </ Label> </p>11. Options aériennes
La nouvelle version de HTML vous permet de créer un élément <option> vide. Il peut s'agir d'un sous-élément de <ptgroup>, <Datalist> ou <lect>. Vous constaterez que cette fonctionnalité peut aider lors de la conception d'une table unilatérale conviviale.
10. Soutenez le plein écran du cadreLa propriété Boolean Variable AutelfulScreen développée pour le trame vous permet de contrôler si le contenu peut être affiché via l'écran en utilisant la méthode requirelScreen (). Par exemple, nous utilisons IFRAMES intégrés dans YouTube à titre d'exemple. Vous devez définir la propriété ALLYFullScreen pour permettre au lecteur d'afficher la vidéo complète.
<ArtaTICLE> <A-tête> <p> <img src = / usericons / 16235> <b> Fred Flintstone </b> </p> <p> <a href = / poteaux / 30934 r = Bookmark> 12:44 < / a> - <a href = # a.503439551> Post privé </a> </p> </-header> <p> <p> Consultez ma nouvelle vidéo! >9. En-tête et pied de page intégrés
HTML5.1 vous permet d'intégrer l'en-tête et le pied de page dans un autre en-tête. Vous pouvez ajouter un en-tête ou un pied de page aux éléments de tête, s'ils se contiennent dans le contenu du paragraphe. Si vous souhaitez ajouter une élaboration détaillée telle que <Action> et <Reticle> Tags aux éléments de paragraphe sémantique, cette fonctionnalité deviendra très utile.
Dans le code suivant, l'étiquette <Be Article> contient une balise <en-tête>, qui a une balise <menping> avec une balise <weader>.
<Artader> <A-tête> <h2> Leçon: Comment faire cuire le poulet </h2> <éclosécentrique> <-header> <h2> à propos de l'auteur: Tom Haank </h2> <a href =. / Tomhank /> Contactez-le! </a / p> </-header> <p> Expert en seulement la cuisine. Dans le sac zippé avec le poulet et sceller.8. Image zéro largeur
La nouvelle version de HTML vous permet d'ajouter des images de largeur zéro. Cette fonctionnalité peut être utilisée lorsque l'image n'a pas besoin d'être affichée à l'utilisateur. Si un élément IMG a d'autres utilisations, ce n'est pas seulement une image, par exemple, dans le cadre du service pour calculer le nombre de pages vues, utilisez 0 valeurs dans les propriétés de largeur et de hauteur. Pour des photos de 0 largeur, il est recommandé d'utiliser des attributs vides.
<Img src = theimagefile.jpg width = 0 height = 0 src = "/uploads/allimg/170217/22010q544-0.jpg" />La nouvelle méthode ReportValidity () vous permet de vérifier un formulaire et de réinitialiser les résultats, et de signaler les erreurs aux utilisateurs de la position appropriée du navigateur. Les agents utilisateur peuvent signaler plus d'une règle de restriction, si un seul élément rencontre plusieurs problèmes en même temps. Pour cette situation, l'entrée du mot de passe est un contenu incontournable mais non rempli, et il sera identifié comme une erreur.
<h2> Validation du formulaire </h2> <p> Entrez les détails </p> <form> <label> Type d'entrée obligatoire = Nom du mot de passe = Mot de passe requis /> </ Label> <Button Type = sub it> soumettre </ Button > </ Formulaire> <cript> document.QurySelector («formulaire»).6. Le contexte du navigateurDans HTML 5.1, vous pouvez utiliser la marque <enu> pour définir le menu, qui contient un ou plusieurs éléments <enuuitem>, puis utilise la propriété ContextMenu pour la lier à n'importe quel élément. L'ID de l'élément <ennu> doit être cohérent avec la valeur de l'attribut ContextMenu de l'élément que nous voulons y ajouter le menu contextuel.
Chaque <Menuitem> peut avoir l'une des trois formes suivantes:
- Option de radio-get d'un groupe;
- Checkbox-Sélectionnez ou annulez l'option;
- Commande - Exécuter une action en cliquant.
<H2 ContextMenu = Popup-Menu> Cliquez avec le bouton droit pour obtenir la démo du menu contextuel. Type = Command Label = Command OnClick = Alert ('Warning')> Checkbox 2 </ Menuitem> <MeniUtem Type = Radio Name = Group1> Radio Bouton A </ MenuItem T ype = Radio Name = Group1 Checked = True> Radio Bouton B </ MenuItem> <MeniUtem Type = Checkbox Disabled> Désactiver l'élément de menu </ Menuitem> </nunu>5. Utilisez des nombres aléatoires cryptés sur les scripts et les stylesCryptographic NONCE est un nombre généré de manière aléatoire, qui ne peut être utilisé qu'une seule fois, et pour chaque demande de page, elle doit être générée. Cet attribut nonce peut être utilisé dans des éléments <cript> et <ystyle>.
Il est généralement utilisé dans la stratégie de sécurité du contenu d'un site Web pour déterminer si un style et un script spécifiques doivent être mis en œuvre sur la page. Dans le code fourni ci-dessous, cette valeur est codée dure, mais dans le scénario d'utilisation réel, cette valeur est générée au hasard.
<script nonce = 'd3ne7uwp43bhr0e'> le code javascript </cript>4. Relation de liaison de séquence inverseL'attribut Rev est défini dans HTML4, mais il n'apparaît pas dans HTML5. W3C est décidé de réinclure les attributs REV dans les éléments <a> et <erk>. La relation entre les documents de liaison actuelle et inverse de l'identification de l'attribut Rev. Il a été inclus pour prendre en charge le format de marque de structure de données largement utilisé, RDFA.
Utilisons deux documents pour donner un exemple.
// Document avec URL Chapter1.html <link href = leson2.html rel = Next Rev = Prev> // document avec URL Chapter2.html <link href = leson1.html = prev Rev = Next> <link href = leson3. Roth = Next Rev = PREV>3. Informations sur affichage / masquerLes nouveaux éléments <dedements> et <summary> vous permettent d'ajouter des informations d'extension à un paragraphe. Vous pouvez afficher ou masquer un bloc d'informations supplémentaire via l'élément de clic. Par défaut, les informations supplémentaires sont cachées.
Dans le code, vous devez mettre la marque <summary> dans la marque <dedestre>, comme indiqué ci-dessous. Après l'étiquette <salmary>, vous pouvez ajouter d'autres contenus à cacher.
<Cathre> <h3> Message d'erreur </h3> <Dethets> <summary> Ce fichier n'a pas Benload Download Du Network Error. <dt> Taille du fichier: </dt> <dd> 8 kb </dd> <dt> Code d'erreur: </dt> <dd> 342a </dd> </dl> </fetthets> </ section>2. Plus de types d'éléments d'entréeL'élément d'élément d'entrée HTML a élargi trois types d'entrée-semaine, mois et datetime-local.
Comme son nom le montre, les deux premiers éléments permettent aux utilisateurs de choisir une valeur de semaine et une valeur d'un mois. Selon le soutien du navigateur, ils seront rendus dans un calendrier de dessin affiché, vous permettant de choisir une semaine ou un mois spécifique d'un an.
Datatime-Local représente un domaine d'entrée de date et d'heure, mais il n'y a pas de paramètres de fuseau horaire. Ses données peuvent être sélectionnées dans une méthode similaire à l'élément d'entrée du mois ou de la semaine, et le temps peut être saisi seul.
<section> <h2> semaine, mois et datetime-local </h2> <formulaire action = action_page.php> Choisissez une semaine: <entrée type = semaine Nom = Year_week> <input = soumed> </ form> <for Action = Action_page.php> anniversaire (mois et année): <Type d'entrée = Nom du mois = BdayMonth> <Type de saisie = soumis> </ form> <formulaire Action = Action_Page.ph P> Jointure (date et heure): <Type d'entrée = DateTime-local name = bdaytime> <Type d'entrée = soumettre une valeur = envoyer> </ form> </pction>1. Image de réponseLe W3C introduit certaines caractéristiques fonctionnelles et l'image de réponse peut être réalisée sans utiliser CSS. Ils sont ...
Attribut d'image SRCSET
L'attribut SRCSET vous permet de spécifier plusieurs sources d'image optionnelles, correspondant à une résolution de pixels différente. Il permettra au navigateur d'afficher l'implémentation de qualité appropriée en fonction des différents périphériques utilisateur. Par exemple, il est préférable d'afficher une image basse résolution pour les utilisateurs avec des appareils mobiles lents.
Vous pouvez utiliser la propriété SRCSET et apporter ses propres symboles de modification X pour décrire le rapport pixel de chaque image.
<Img src = clics / low-res.jpg srcset = clics / low-res.jpg 1x, clics / moyen-res.jpg 2x, clics / high-re.jpg 3x>En plus du rapport pixel, vous pouvez également choisir d'utiliser le symbole de modification W pour spécifier des images de différentes tailles. Dans l'exemple suivant, l'image haute résolution est définie comme un affichage lorsque la largeur est de 1600px.
<Img src = clics / low-res.jpg srcset = clics / low-res.jpg 500w, clics / moyen-res.jpg 1000w, clics / high-res.jpg 1600w>Attribut d'image de tailles
La plupart du temps, les créateurs aiment afficher différentes images pour différentes taille d'écran. Cela peut être réalisé avec l'attribut de taille. Il vous permet d'ajuster la largeur pour la taille de l'espace distribué à l'affichage de l'image, puis d'utiliser la propriété SRCSET pour sélectionner l'image appropriée à afficher. Par exemple…
<Img src = clics / low-res.jpg tailles = (max-width: 25EM) 60vw, 100vw srcset = clics / low-re.jpg 500w, clics / moyen-res.jpg 1000W, clics / high-res.jpg 1600W>Ici, l'attribut de tailles définit 100% de la largeur d'image de la fenêtre lorsque la fenêtre est supérieure à 25 EM, ou 60% de la largeur de la vue de la vue lorsqu'elle est inférieure à l'égal à 25EM.
élément d'image
L'élément d'image vous permet de déclarer des images pour différentes taille d'écran. Ceci peut être implémenté en encapsulant <Mg> avec un élément <mage> et en décrivant plusieurs sous-éléments <Source>.
<Piction> Le marquage seul ne montre rien. Vous avez été supposé que la source d'image par défaut sera déclarée comme la valeur de l'attribut SRC, et la source d'image facultative sera placée dans l'attribut SCRSET.
<mage> <Source Media = (Max-Width: 25EM) SRCSET = Clicks / Small / Low-Res.jpg 1x, Clicks / Small / Medium-Res.jpg 2X, CLICES / SMALL / HIGH-RES.JP. > <Source Media = (max-largeth: 60em) srcset = clics / grand / low-res.jpg 1x, clics / grand / moyen-res.jpg 2x, clics / grand / high-res.jpg 3x> <img src = Clicks / Default / Medium- res.jpg> </pction>RésumerCe qui précède est tout le contenu de cet article.