Exemple d'analyse de balises sémantiques, nouvelles fonctionnalités en HTML5

HTML5 n'a qu'un seul type de document simple : 8b05045a5be5764f313ed5b9168a17e6, ce qui signifie que le navigateur l'analysera selon le mode standard. Aujourd'hui, l'éditeur vous propose la balise Sémantique , une nouvelle fonctionnalité du HTML5. Les amis intéressés devraient y jeter un œil

Nouvelles fonctionnalités du HTML5<.>

DOCTYPE concis :

HTML5 n'a qu'un simple type de document

, ce qui signifie que le navigateur l'analysera selon le mode standard. ：8b05045a5be5764f313ed5b9168a17e6

Types d'encodage simples et faciles à retenir

Vous pouvez désormais utiliser "charset" dans les balises méta :

b6c06a3eac5ba315bbbfde6d7627c15a

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

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

Nouvelles balises plus sémantiques

Par exemple : 23c3de37f2f9ebcb477c4a90aac6fffd , 2f8332c8dcfd5c7dec030a070bf652c3, b382b004083b33e70cfb5103d2b97270, d8eccd9ed644b68a6460a2bb84548c82, 18934da4c48bbe4a2dac25627ee46445,59e2d89518278f8e93bacb2cc1e4f2bd, c787b9a589a3ece771e842a6176cf8e9, 46dd80ba616c57a652514755c74c4211, f920514e6447cf1d171079d1371f007f, 24203f2f45e6606542ba09fd2181843a , 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, dateheure, dateheure-locale, numéro, plage, recherche, tel et url

Nouveaux attributs :

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

Nouveaux éléments : aa983b9eb8086376f1f6481364a02e5a, fc86e7b705049fc9d4fccc89a2e80ee3, be6d67dae90cc1ad6469079e163d0939, 49c6123c49c6be380cb91db06cd3bfa9 et 6ecb87e5318a36c03c59e25d55f43372

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 e388a4556c0f65e1904146cc1a846bee et déterminez le 1456a5dc50278341c641cc5de5110764 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 avoir du sens pour rendre les 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

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

<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>

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) et em est en italique (n'utilisez pas i)

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!