Normes de codage HTML5

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 comme les autres balises Pour utiliser les minuscules, vous pouvez utiliser le code suivant :

<!doctype html>

Utiliser les noms d'éléments en minuscules

Les noms d'éléments HTML5 peuvent être utilisés en majuscules et en 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.

<section>
<p>Ceci est un paragraphe. </p>
</section>

Fermer tous les éléments HTML

En HTML5, vous n'êtes pas forcément obligé de tout fermer éléments (tels que l'élément <p>), mais nous vous recommandons d'ajouter une balise de fermeture à chaque élément.

<section>
<p>Ceci est un paragraphe. </p>
<p>Ceci est un paragraphe. </p>
</section>

Fermer les éléments HTML vides

En HTML5, les éléments HTML vides ne sont pas nécessairement à fermer :

on peut écrire :

on peut aussi écrire :

< ;meta charset= "utf-8" />

La barre oblique (/) est obligatoire en XHTML et 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 :

Utiliser des lettres majuscules et minuscules en même temps est une très mauvaise habitude.

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.

Valeur de l'attribut

La valeur de l'attribut HTML5 peut être utilisée sans 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.

Attributs d'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.

Définissez la taille de l'image et vous pourrez charger il réserve un espace désigné pour réduire le scintillement.

espace Vous pouvez utiliser des espaces avant et après le signe égal

Mais nous vous recommandons d'utiliser moins d'espaces :

Évitez une ligne de code trop longue

Lors de l'utilisation de l'éditeur HTML, il n'est pas 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.

<body>

<h1>php Site chinois</h1>
<h2></h2>
<p>php Site chinois, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves.
php Site chinois, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves.
php Site chinois, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves.
php Site chinois, ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves. </p>
</body>

Exemple de formulaire :

<th>Description</th>
</tr>
<tr>
;B</td>
< td>Description de B</td>
</tr>
</table>

Instance de liste :

<ol>
<li> ;Londres</li>
<li>Paris</li>
<li>Tokyo</li>

</ol>

Omettre <html> et <body>?

Dans le HTML5 standard, les balises <html> .

La documentation HTML5 suivante est correcte :

<!DOCTYPE html>

<head>

<title>Titre de la page</title>
</head>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe . </p>

L'omission des balises <html> et <body>

Omettre<head>?

En HTML5 standard, le < ;head> peut être omise.

Par défaut, le navigateur ajoutera le contenu avant <body> à un élément <head>

Omettre la balise head n'est pas recommandé.

Métadonnées

L'élément <title> Oui, le nom du titre décrit le thème de la page :

<title>php中文网</title>

Le titre et la langue peuvent permettre aux moteurs de recherche de comprendre rapidement le thème de votre page. page :

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
< ;title>php Site chinois</title>
</head>

Commentaires HTML

les commentaires sont OK Écrit en  :

Les commentaires plus longs peuvent être écrits en <! -- et --> La branche du milieu écrit :

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 concis (l'attribut type n'est pas obligatoire) :

Des règles courtes peuvent être écrites sur une seule ligne :

p.into {font-family: Verdana; font-size : 16em;

Les règles longues peuvent être écrites sur plusieurs lignes :

body {

background-color : gris clair;
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

Utiliser une syntaxe concise pour charger un fichier de script externe (tapez l'attribut n'est pas obligatoire) :

Accès aux éléments HTML à l'aide de JavaScript

Un HTML mal formaté peut provoquer des erreurs d'exécution de JavaScript.

Les deux instructions JavaScript suivantes produiront des résultats différents :

Instance

var obj = getElementById("Demo")

var obj = getElementById(" démo")

Essayez-le»

Essayez d'utiliser les mêmes règles de dénomination pour JavaScript en HTML.

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 de 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".

Formation continue

nouveau fichier

<!DOCTYPE html>  <html lang="zh-CN">  <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Page title</title>  <link rel="stylesheet" href="code-guide.css">  <style> /* ... */ </style>  <script src="code-guide.js"></script> </head> <body>  <a class="..." id="..." data-modal="toggle" href="#"> Example link </a> <br><br> <input class="form-control" type="text"> <br><br> <img src="..." alt="..."> <br><br>  <select> <option value="1" selected>1</option> </select> <br><br>  <script src="code-guide.js"></script> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Normes de codage HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]