Normes de codage HTML5
Conventions de codage HTML
De nombreux développeurs Web connaissent très peu les conventions de codage HTML.
Entre 2000 et 2010, de nombreux développeurs Web sont passés du HTML au XHTML.
En utilisant XHTML, les développeurs ont progressivement développé de meilleures normes d'écriture HTML.
Pour HTML5, nous devrions élaborer de meilleures normes de code. Ce qui suit fournit plusieurs suggestions standard.
Utilisez le bon type de document
La déclaration du type de document se trouve sur la première ligne du document HTML :
<!DOCTYPE html>
Si vous souhaitez utiliser les minuscules comme les autres balises, vous pouvez utiliser le code suivant :
<!doctype html>
Utiliser les noms d'éléments en minuscules
Les noms d'éléments HTML5 peuvent utiliser des lettres majuscules et minuscules.
Utilisez des lettres minuscules recommandées :
Le style mixte majuscules et minuscules est très mauvais.
Les développeurs utilisent généralement des minuscules (similaires au XHTML).
Le style minuscule semble plus rafraîchissant.
Les lettres minuscules sont faciles à écrire.
Déconseillé :
<SECTION> <p>这是一个段落。</p> </SECTION>
Très mauvais :
<Section> <p>这是一个段落。</p> </SECTION>
Recommandé :
<section> <p>这是一个段落。</p> </section>
Fermez tous les éléments HTML
En HTML5, vous n'êtes pas obligé de fermer tous les éléments (tels que les éléments <p>), mais nous vous recommandons d'ajouter une balise de fermeture à chaque élément.
Déconseillé :
<section> <p>这是一个段落。 <p>这是一个段落。 </section>
Recommandé :
<section> <p>这是一个段落。</p> <p>这是一个段落。</p> </section>
Fermer les éléments HTML vides
En HTML5, les éléments HTML vides n'ont pas besoin d'être fermés :
On peut écrire comme ceci :
<meta charset="utf-8">
On peut aussi écrire comme ceci :
<meta charset="utf-8" />
Dans XHTML La barre oblique (/) est obligatoire en XML.
L'utilisation de ce style est idéale si vous vous attendez à ce qu'un logiciel XML utilise votre page.
Utiliser les noms d'attributs en minuscules
Les noms d'attributs HTML5 permettent l'utilisation de lettres majuscules et minuscules.
Nous vous recommandons d'utiliser des lettres minuscules pour les noms d'attributs :
C'est une très mauvaise habitude d'utiliser des lettres majuscules en même temps.
Les développeurs utilisent généralement des minuscules (similaires au XHTML).
Le style minuscule semble plus rafraîchissant.
Les lettres minuscules sont faciles à écrire.
Déconseillé :
<div CLASS="menu">
Recommandé :
<div class="menu">
Valeur de l'attribut
Les valeurs d'attribut HTML5 n'ont pas besoin de guillemets.
Nous vous recommandons d'utiliser des guillemets pour les valeurs d'attribut :
Si la valeur d'attribut contient des espaces, vous devez utiliser des guillemets.
Le mélange des styles n'est pas recommandé, il est recommandé d'unifier le style.
Utilisez des guillemets pour les valeurs d'attribut afin de les rendre plus faciles à lire.
Les valeurs d'attribut d'instance suivantes contiennent des espaces et n'utilisent pas de guillemets, elles ne fonctionneront donc pas :
<table class=table striped>
Ce qui suit utilise des guillemets doubles, ce qui est correct pour :
<table class="table striped">
Attributs de l'image
Les images utilisent généralement l'attribut alt. Lorsque l'image ne peut pas être affichée, elle peut remplacer l'affichage de l'image.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Définissez la taille de l'image et réservez l'espace spécifié lors du chargement pour réduire le scintillement.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Espaces et signe égal
Vous pouvez utiliser des espaces avant et après le signe égal.
<link rel = "stylesheet" href = "styles.css">
Mais nous vous recommandons d'utiliser moins d'espaces :
<link rel="stylesheet" href="styles.css">
Évitez une ligne de code trop longue
Lorsque vous utilisez l'éditeur HTML, il est peu pratique de faire défiler le code vers la gauche et la droite.
Gardez chaque ligne de code à moins de 80 caractères.
Lignes vierges et indentation
N'ajoutez pas de lignes vides sans raison.
Ajoutez des lignes vides à chaque bloc fonctionnel logique pour faciliter la lecture.
Utilisez deux espaces pour l'indentation, TAB n'est pas recommandé.
N'utilisez pas de lignes vides inutiles ou d'indentations entre des codes plus courts.
Lignes vides et retraits inutiles :
<body> <h1>相思</h1> <h2>HTML</h2> <p> 红豆生南国，春来发几枝。 愿君多采撷，此物最相思。 </p> </body>
Recommandé :
<body> <h1>相思</h1> <h2></h2> <p>红豆生南国，春来发几枝。 愿君多采撷，此物最相思。</p> </body>
Exemple de tableau :
<table> <tr> <th>Name</th> <th>Description</th> </tr> <tr> <td>A</td> <td>Description of A</td> </tr> <tr> <td>B</td> <td>Description of B</td> </tr> </table>
Exemple de liste :
<ol> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ol>
Omettre < ;html> et <body>?
En HTML5 standard, les balises <html>
La documentation HTML5 suivante est correcte :
Exemple :
<!DOCTYPE html> <head> <title>网页标题</title> </head> <h1>标题</h1> <p>段落。</p>
Il n'est pas recommandé d'omettre les balises <html> L'élément
<html> est l'élément racine du document et est utilisé pour décrire la langue de la page :
<!DOCTYPE html>
<html lang= "zh">
La langue déclarée est destinée à la commodité des lecteurs d'écran et des moteurs de recherche.
L'omission de <html> ou <body> entraînera un blocage dans les logiciels DOM et XML.
L'omission de <body> entraînera une erreur dans les anciens navigateurs (IE9).
Omettre <head>?
En HTML5 standard, la balise <head> peut être omise.
Par défaut, le navigateur ajoutera le contenu avant <body> à un élément <head>
Exemple
<!DOCTYPE html> <html> <title>页面标题</title> <body> <h1>标题</h1> <p>段落。</p> </body> </html>
Omettre la balise head n'est pas recommandé maintenant.
Métadonnées
L'élément <title> en HTML5 est obligatoire. Le nom du titre décrit le thème de la page :
<title>php Site Web chinois</title>. ;
Le titre et la langue peuvent permettre aux moteurs de recherche de comprendre rapidement le sujet de votre page :
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>ask.php.cn</title> </head>
Commentaires HTML
Les commentaires peuvent être écrits en <!-- et -- > ; dans :
<!-- Ceci est un commentaire-->
Les commentaires plus longs peuvent être écrits sur des lignes séparées entre <!-- et--> :
<!--
C'est un long commentaire. Il s’agit d’une revue plus longue. Il s’agit d’une revue plus longue.
Ceci est un commentaire plus long Ceci est un commentaire plus long. Il s’agit d’une revue plus longue.
-->
Le premier caractère des commentaires longs est indenté de deux espaces pour faciliter la lecture.
Feuille de style
La feuille de style utilise un format de syntaxe concise (l'attribut type n'est pas obligatoire) :
<link rel="stylesheet" href ="styles.css">
Des règles courtes peuvent être écrites sur une seule ligne :
p.into {font-family: Verdana;
Les règles longues peuvent être écrites sur plusieurs lignes :
body {
background-color : lightgrey;
font-family : "Arial Black", Helvetica, sans-serif;
font -size: 16em;
color: black;
}
Placez l'accolade ouvrante sur la même ligne que le sélecteur.
Ajoutez un espace entre l'accolade gauche et le sélecteur.
Utilisez deux espaces pour l'indentation.
Ajoutez un espace entre les deux points et la valeur de l'attribut.
Utilisez un espace après la virgule et le symbole.
Utilisez un symbole à la fin de chaque attribut et valeur.
Utilisez des guillemets uniquement si la valeur de l'attribut contient des espaces.
L'accolade fermante est placée sur une nouvelle ligne.
Maximum 80 caractères par ligne.
Une règle courante consiste à ajouter des espaces après les virgules et les points-virgules.
Charger JavaScript en HTML
Utilisez une syntaxe concise pour charger des fichiers de script externes (l'attribut type n'est pas requis) :
<script src="myscript .js"> ;
Utiliser JavaScript pour accéder aux éléments HTML
Un mauvais format HTML peut provoquer des erreurs d'exécution de JavaScript.
Les deux instructions JavaScript suivantes produiront des résultats différents :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>Essayez d'utiliser les mêmes règles de dénomination en JavaScript en HTML.
Accédez aux spécifications du code JavaScript.
Utilisez des noms de fichiers en minuscules
La plupart des serveurs Web (Apache, Unix) sont sensibles à la casse : london.jpg n'est pas accessible via London.jpg.
Les autres serveurs Web (Microsoft, IIS) ne sont pas sensibles à la casse : london.jpg est accessible sous London.jpg ou london.jpg.
Vous devez conserver un style cohérent et nous vous recommandons d'utiliser systématiquement les noms de fichiers en minuscules.
Extension de fichier
Le suffixe du fichier HTML peut être .html (ou r .htm).
Le suffixe du fichier CSS est .css.
Le suffixe du fichier JavaScript est .js . La différence entre
.htm et .html
Il n'y a essentiellement aucune différence entre les fichiers d'extension .htm et .html. Les navigateurs et les serveurs Web les traitent comme des fichiers HTML.
La différence est la suivante :
.htm était utilisé dans les premiers systèmes DOS, et le système n'a plus que trois caractères.
Il n'y a pas de restrictions particulières sur le suffixe dans les systèmes Unix, généralement .html est utilisé.
Différence technique
Si une URL ne spécifie pas de nom de fichier (comme http://www.php.cn/css/), le serveur renverra le nom de fichier par défaut. Généralement, les noms de fichiers par défaut sont index.html, index.htm, default.html et default.htm.
Si le serveur est configuré avec uniquement « index.html » comme fichier par défaut, vous devez nommer le fichier « index.html », et non « index.htm ».
Cependant, le serveur peut généralement définir plusieurs fichiers par défaut, pouvez-vous définir le fichier par défaut en fonction de vos besoins.
Quoi qu'il en soit, le suffixe complet du HTML est ".html".
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
