Résumé de la façon d'utiliser les nouvelles balises et attributs dans H5-tutoriel HTML-php.cn

Cette fois, je vais vous apporter un résumé de la façon d'utiliser les nouvelles balises et attributs dans H5. Quelles sont les précautions pour utiliser de nouvelles balises et attributs dans H5. Ce qui suit est un cas pratique, prenons. un regard.

Syntaxe HTML5

La plupart des différences de syntaxe du HTML continuent : le début

<html lang="zh-CN">
<meta charset="utf-8"></p>
<p style="text-align: left;"> l'encodage des caractères devient concis, </p>
<p style="text-align: left;"> n'est pas sensible à la casse, </p>
<p style="text-align: left;"> ajoute une valeur booléenne, similaire aux guillemets cochés, sélectionnés</p>
<p style="text-align: left;"> sont OK Omission, mais selon les normes de codage, il n'est pas recommandé que </p>
<p style="text-align: left;"> ait des balises qui peuvent omettre le caractère de fin et des balises qui peuvent être complètement omises. </p>
<p style="text-align: left;"><span style="color: #ff0000"><strong>Ajouter des balises : </strong></span></p>
<p style="text-align: left;"><strong>1. Balises de structure </strong></p>
<p style="text-align: left;"> (1) section : contenu indépendant Les blocs peuvent utiliser h1~h6 pour former un plan pour représenter la structure du document. Ils peuvent également avoir des chapitres, des en-têtes, des pieds de page ou d'autres parties de l'article d'en-tête (2) : un bloc indépendant spécial, qui représente le cœur de cet en-tête. Contenu ; (3) apart : informations auxiliaires liées au contenu de la balise autre que le contenu de la balise ; (4) en-tête : informations d'en-tête/titre d'un certain bloc ; (5) hgroup : contenu supplémentaire des informations d'en-tête/titre ( 6 ; ) pied de page : informations du bas ; (7) nav : informations partielles de la barre de navigation (8) figure : une unité indépendante, telle qu'un bloc d'actualités avec des images et du contenu. </p>
<p style="text-align: left;"><strong>2. Balises de formulaire </strong></p>
<p style="text-align: left;"> (1) email : un email doit être saisi (2) url : une adresse url doit être saisie (3) numéro : une valeur numérique doit être saisie ; (4) Plage : les valeurs situées dans une certaine plage doivent être saisies ; (5) Sélecteurs de date : <a href="http://www.php.cn/code/7268.html" target="_blank">Sélecteur de date</a> </p>
<p style="text-align: left;">a.date : Sélectionnez le jour. , mois, année b.month : sélectionnez le mois, l'année c.week : sélectionnez la semaine et l'année d.time : sélectionnez l'heure (heures et minutes) e.datetime : sélectionnez l'heure, le jour, le mois, l'année (heure UTC) f.datetime -local : sélectionnez l'heure, le jour, le mois, l'année (heure locale) </p>
<p style="text-align: left;"> (6) recherche : recherchez des champs de texte normaux </p>
<p style="text-align: left;"> (7) couleur : couleur </p>
<p style="text-align: left;"><strong>3. Balises médias </strong></p>
<p style="text-align: left;"> (1) vidéo : vidéo (2) audio : audio (3) embed : contenu embarqué (y compris divers médias), Midi, Wav, AU, MP3, Flash, AIFF, etc. </p>
<p style="text-align: left;"><strong>4. Autres balises de fonction </strong></p>
<p style="text-align: left;"> (1) marque : marquer (comme un surligneur pour prendre des notes) (2) progression : <a href="http://www.php.cn/code/6151.html" target="_blank">Barre de progression</a> <progress max="valeur de la barre de progression maximale" value="valeur de la barre de progression actuelle"> (3) time : étiquette de données, utilisée par les moteurs de recherche date<time datetime="2014-12- ; 25T09 : 00">9：00</time>Update date<time datetime="2015- 01-23T04:00" pubdate>4:00</time> (4) ruby et rt : commentaire sur un certain word; <ruby><rt>Contenu du commentaire</rt><rp>Comment afficher lorsque le navigateur ne le prend pas en charge</rp></ruby> la largeur de la page atteint le point où les sauts de ligne sont requis Retour à la ligne ; canevas : utiliser le code JS pour créer du contenu pour le dessin de l'image ; invite déroulante ; (10) keygen : chiffrement ; </p>
<p style="text-align: left;"><span style="color: #ff0000"><strong>Nouveaux attributs : </strong></span></p>
<p style="text-align: left;">Attributs ajoutés pour js. </p>
<pre class="brush:php;toolbar:false"><script defer src=".....js" onload="alert(&#39;a&#39;)"></script>
<script async src=".....js" onload="alert(&#39;b&#39;)"></script>

Copier après la connexion

S'il n'y a pas plus de deux attributs, l'ordre d'exécution consiste à charger (télécharger) d'abord le premier src, puis à exécuter son onload, puis à exécuter l'attribut defer de manière synchrone vers le bas dans l'ordre avant h5 Oui. , entrez le chargement différé (exécution différée), il chargera (télécharger) d'abord le contenu du fichier dans src, puis attendra que la page soit complètement chargée, puis chargera l'attribut js.async dans onload, qui est un chargement asynchrone après le chargement. src, Onload est exécuté immédiatement et la page continuera à être chargée dans la séquence d'exécution ci-dessus. L'affichage de l'alerte affichera d'abord b puis a

Le code de style pour ajouter de petites icônes aux balises du Web. page

<link rel="icon" href="url..." type="图片名称" sizes="16*16">

Copier après la connexion

a une liste de séquence ol : ajout d'un début (valeur de départ de la liste), d'un attribut de type de menu inversé (si inversé) (3 types de menu) style CSS intégré : définissez un bloc de style (portée) à l'intérieur de la balise , uniquement pour les styles Le cadre en ligne n'est valide qu'à l'intérieur de la balise : l'élément iframe, sans bordure transparente est ajouté, srcdoc définit le contenu du cadre en ligne

<iframe>新增属性：
<!--seamless定义框架无边框 无边距-->
<!--srcdoc的显示级别比sandbox高-->
<!--sandbox用来规定一个内嵌框架的安全级别-->
<!--sandbox="allow-forms:允许提交表单"-->
<!--sandbox="allow-origin:允许是相同的源"-->
<!--sandbox="allow-scripts：允许执行脚本"-->
<!--sandbox="allow-top-navigation:允许使外面的页面进行跳转"-->

Copier après la connexion

attribut manifeste :

Définissez les fichiers d'application hors ligne que la page doit utiliser, généralement placés dans la balise

attribut charset :

L'un des attributs méta, définit le jeu de caractères de la page

attribut size :

Nouvel attribut, lorsque le rel="icon" du lien est utilisé pour définir la taille de l'icône

attribut de base :

signifie que lorsqu'une page est ouverte dans une nouvelle fenêtre, le contenu du href sera ajouté comme préfixe à l'adresse

attribut defer :

attribut de balise de script, indiquant qu'une fois le script chargé, il ne sera exécuté que lorsque la page sera également chargée (exécution différée)

attribut async :

attribut de balise de script, chargement du script Exécuter immédiatement après la fin (le navigateur analysera le contenu suivant pendant le fonctionnement), même si la page n'a pas encore été chargée (exécution asynchrone)

attribut média :

attribut d'élément : signifie pour quel appareil optimiser

attribut hreflang :

, indiquant la langue utilisée par l'URL pointée. par l'attribut hyperlien

ref :

définit si l'hyperlien est un lien externe

attribut inversé : l'attribut de

définit si le numéro de série est un flashback

attribut de démarrage :

attribut