Maison > Article > interface Web > Résumé de la façon d'utiliser les nouvelles balises et attributs dans H5
Résumé de la façon d'utiliser les nouvelles balises et attributs dans H5
- php中世界最好的语言original
- 2018-05-07 17:38:312510parcourir
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.
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('a')"></script> <script async src=".....js" onload="alert('b')"></script>
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">
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:允许使外面的页面进行跳转"-->
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 :
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
- , définissant la valeur de départ du numéro de série attribut de portée : attribut du style CSS intégré, la définition de ce style est limitée à ceux qui disposent de ces éléments de style intégrés, adaptés au développement d'une seule page HTML5
Attributs globaux : peut être utilisé pour n'importe quelle balise, les 6
data-yourvalue, Hidden, Spenllecheck, tabindex, contenteditable, desginMode Attributs globaux : 1. dans la balise : nom de l'attribut personnalisé ; caché (mettez-le directement pour le masquer) ; vérification orthographique ="true" (correction grammaticale) tabindex="1" (séquence de saut de tabulation = true) ; cliquez sur le contenu à modifier) ; 2. DansJavaScript window.document.designMode = 'on' inséré dans (une propriété globale de JavaScript, le texte de la page entière peut être édité ) ;
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez faire attention aux autres articles connexes sur le site Web chinois de php ! Lecture recommandée :Explication détaillée de l'utilisation de l'outil de débogage de nœud
Explication détaillée des étapes de packaging du webpack et compression de js et css
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!