Maison > Article > interface Web > Balises sémantiques H5

Balises sémantiques H5

php中世界最好的语言original: 2018-03-27 14:01:572594parcourir

Cette fois je vous apporte la balise sémantique de H5 Quelles sont les précautions lors de l'utilisation des balises sémantiques H5. Voici des cas pratiques, jetons un coup d'oeil.

Nouvelles fonctionnalités HTML5

DOCTYPE concis :

HTML5 n'a qu'un seul type de document simple ：<!DOCTYPE html>, indiquant que le navigateur analysera selon le mode standard.

Types d'encodage simples et faciles à retenir

Vous pouvez désormais utiliser "charset" dans les balises méta : <meta charset=”utf-8″ />

Les scripts et les liens n'ont pas besoin d'être de type

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

Nouvelles balises plus sémantiques

, par exemple : < article>,

, <à part>, , ,,

, , ,

figcaption>, etc.

Vidéo et audio

<video width="640" height="320" preload="auto" poster="0.jpg" controls>
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Améliorations du formulaire

Nouveaux types de saisie : couleur, email , date, mois, semaine, heure, datetime, datetime-local, numéro, plage, recherche, tel et url

Nouveaux attributs : required, autofocus, motif, liste, saisie semi-automatique et espace réservé

Nouveaux éléments : , , , et

les balises de toile dessinent des graphiques 2D.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100,100);
context.lineTo(300,300);
context.lineTo(100,500);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();

Acquisition de localisation géographique

Sémanticisation HTML

Déterminez la sémantique du contenu via des balises. Par exemple, déterminez que le contenu est un titre basé sur la balise h1, déterminez que le contenu est un paragraphe basé sur

et déterminez le < ;la balise input> est une zone de saisie, etc.

2. Pourquoi la sémantique ?

1). Lorsque le style est supprimé ou perdu, la page peut présenter une structure claire
2). Elle est pratique à analyser pour d'autres appareils (tels que les lecteurs d'écran, les lecteurs aveugles,). appareils mobiles) pour donner du sens au rendu des pages Web
3). Propice au référencement
4). Facile pour le développement et la maintenance de l'équipe, suivant les normes du W3C, ce qui peut réduire la différenciation

3. Comment déterminer vos balises Est-ce sémantiquement valable ?

Supprimez le style et voyez si la structure de la page Web est bien organisée et ordonnée, et si elle est toujours très lisible.

4. Modules de balises sémantiques communes

Formulaire

<form action="" method="">
    <fieldset style="border: none">
        <legend style="display: none">登录表单</legend>
        <p><label for="name">账号：</label><input type="text" id="name"></p>
        <p><label for="pw">密码：</label><input type="password" id="pw"></p>
        <input type="submit" name="登录" class="subBtn">
    </fieldset>
</form>

Les champs du formulaire doivent être entourés de balises de champs et la balise de légende doit être utilisé pour décrire le formulaire Objectif ; le texte de description correspondant à chaque

balise d'entrée doit utiliser la balise label, et en définissant l'attribut id pour l'entrée et en définissant for=someld dans la balise label, le texte de description est associé à l'entrée correspondante.

5. Quelques problèmes auxquels il faut prêter attention dans les balises sémantiques

Utilisez le moins possible les balises non sémantiques p et span

Lorsque la sémantique est importante ; pas évident, Lorsque vous pouvez utiliser p ou p, essayez d'utiliser p, car p a un espacement supérieur et inférieur par défaut, ce qui est bénéfique pour la compatibilité avec les terminaux spéciaux
N'utilisez pas de balises de style pur, telles que : b, font, u, etc., utilisez plutôt les paramètres CSS .
Le texte qui doit être souligné peut être inclus dans la balise strong ou em. Le style par défaut de strong est gras (n'utilisez pas b), em est en italique (n'utilisez pas i)

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

Lecture recommandée :

Comment obtenir l'effet d'animation de la transformation d'images en HTML5

Comment lire automatiquement la musique de fond dans les vidéos H5

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!

php html5 css html for date number canvas input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Zoom des pages mobiles H5Article suivant：Zoom des pages mobiles H5

Articles Liés

Voir plus