Exemple d'analyse de balises sémantiques, nouvelles fonctionnalités en HTML5-Tutoriel H5-php.cn

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

黄舟

Libérer： 2017-11-01 10:44:52

original

1599 Les gens l'ont consulté

HTML5 n'a qu'un seul type de document simple : , 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

, ce qui signifie que le navigateur l'analysera selon le mode standard. ：<!DOCTYPE html>

, <à part>, , ,,

, , ,

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

Copier après la connexion

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 : , , , et

les balises de toile dessinent des graphiques 2D.

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

Copier après la connexion

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

Copier après la connexion

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!