Maison > Article > interface Web > Balises sémantiques H5
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>,
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 :
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
1.
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
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 spanLorsque 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!