English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Tutoriel de base

HTML5 API

HTML5 Média

HTML5 Graphique

HTML(5) Normes de codage

Voici une liste des normes HTML courantes et souvent utilisées, de bonnes habitudes d'écriture favorisent la maintenance et la mise à niveau du code ultérieur, augmentent l'efficacité du travail, j'espère que cela vous sera utile

Normes de codage HTML

Beaucoup de développeurs Web ne connaissent pas bien les normes de codage HTML.

Dans2000 à2010En 2000, de nombreux développeurs Web ont passé de HTML à XHTML.

Les développeurs XHTML ont progressivement adopté de bonnes normes de codage HTML.

En ce qui concerne HTML5 Nous devrions former des normes de code bien meilleures, voici quelques suggestions de normes.

Utilisez le type de document correct

La déclaration de type de document est située en première ligne du document HTML :

!DOCTYPE html>

Si vous souhaitez utiliser des minuscules comme pour d'autres balises, vous pouvez utiliser le code suivant :

<!doctype　html>

Utilisez des noms d'éléments en minuscules

HTML5 Les noms des éléments peuvent être en majuscules et en minuscules.

Il est recommandé d'utiliser des minuscules :

  • Mélanger les majuscules et les minuscules est très mauvais.

  • Les développeurs utilisent généralement les lettres minuscules (comme XHTML).

  • Le style minuscule paraît plus frais.

  • Les lettres minuscules sont faciles à écrire.

Déconseillé :

<SECTION>　
　　<p>C'est un paragraphe.</p>
</SECTION>

Très mauvais :

<Section>　
　　<p>C'est un paragraphe.</p>
</SECTION>

Recommandation:

<section>　
　　<p>C'est un paragraphe.</p>
</section>

Fermez tous les éléments HTML

Dans HTML5 Les éléments HTML n'ont pas nécessairement besoin d'être fermés (par exemple, les éléments <p>), mais nous recommandons d'ajouter une balise de fermeture à chaque élément.

Déconseillé :

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

Recommandation:

<section>
　　<p>C'est un paragraphe.</p>
　　<p>C'est un paragraphe.</p>
</section>

Fermez les éléments HTML vides

Dans HTML5 Les éléments HTML vides n'ont pas nécessairement besoin d'être fermés :

Nous pouvons écrire ainsi :

<meta　charset="utf-8">

Peut être ainsi aussi :

<meta　charset="utf-8"　/>

Dans XHTML et XML, la barre oblique (/)/) est obligatoire.

Si vous attendez que votre page soit utilisée par un logiciel XML, ce style est très bon.

Utilisation des noms d'attributs en minuscules

HTML5 Les noms des attributs peuvent être en majuscules ou en minuscules.

Nous recommandons d'utiliser des noms d'attributs en minuscules :

  • L'utilisation simultanée de majuscules et de minuscules est une mauvaise habitude.

  • Les développeurs utilisent généralement les lettres minuscules (comme XHTML).

  • Le style minuscule paraît plus frais.

  • Les lettres minuscules sont faciles à écrire.

Déconseillé :

<div　CLASS="Style">

Recommandation :

<div　class="style">

Valeurs des attributs

HTML5 Les valeurs des attributs peuvent ne pas nécessiter de guillemets.

Nous recommandons d'utiliser des guillemets pour les valeurs des attributs :

  • Si les valeurs des attributs contiennent des espaces, utilisez des guillemets.

  • Le style mélangé n'est pas recommandé, recommandez un style uniforme.

  • L'utilisation des guillemets pour les valeurs des attributs facilite la lecture.

Les valeurs des attributs d'exemple contiennent des espaces et ne sont pas encadrées par des guillemets, donc elles ne fonctionnent pas :

<table　class=table　striped>

Les doubles guillemets sont utilisés ici, ce qui est correct :

<table　class="table　striped">

Propriétés des images

Les images utilisent généralement l'attribut alt. Il peut remplacer l'image lorsqu'elle ne peut pas être affichée.

!DOCTYPE html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Bases Tutoriel网(oldtoolbag.com)>/title>　
</head>
<body>
<img　src="logo.png"　alt="HTML5Bases Tutoriel">
</body>
</html>

Définissez la taille de l'image, prévoyez de l'espace lors du chargement pour réduire les clignotements.

<img　src="logo.png"　alt="HTML5Bases Tutoriel"　style="largeur:128px;hauteur:40px">

Espaces et égalité

Les espaces peuvent être utilisés autour de l'égalité.

<link　　rel　=　"stylesheet"　href　=　"styles.css">

Mais nous recommandons d'utiliser le moins d'espaces possible:

<link rel="stylesheet" href="styles.css">

Éviter que les lignes de code ne soient trop longues

L'utilisation d'un éditeur HTML est déconseillée car il est不便左右滚动代码。

Chaque ligne de code devrait être aussi courte que possible 80 caractères.

Lignes vides et indentations

Ne pas ajouter de lignes vides sans raison.

Ajoutez une ligne vide pour chaque bloc fonctionnel pour une lecture plus facile.

L'indentation utilise deux espaces, l'utilisation de TAB n'est pas recommandée.

Ne pas utiliser de lignes vides et d'indentations inutiles entre des codes courts.

Lignes vides et indentations inutiles:

　　　　　　　　<body>
　　<h1>Bases Tutoriel(oldtoolbag.com)>/h1>
　　<h2>HTML</h2>
　　<p>
　　　　Bases Tutoriel, apprendre les bases pour aller plus loin.
　　　　Bases Tutoriel, apprendre les bases pour aller plus loin.
　　　Bases Tutoriel, apprendre les bases pour aller plus loin,
　　Bases Tutoriel, apprendre les bases pour aller plus loin.
　　</p>
</body>

　 　Recommandation:

<body>
<h1>Bases Tutoriel(oldtoolbag.com)>/h1>
<h2>HTML</h2>
<p>Bases Tutoriel, apprendre les bases pour aller plus loin.
Bases Tutoriel, apprendre les bases pour aller plus loin.
Bases Tutoriel, apprendre les bases pour aller plus loin.
Bases Tutoriel, apprendre les bases pour aller plus loin.</p>
</body>

　 　Exemple de tableau:

<table>
　　<td>A<
　　　　<th>Name</th>
　　　　Description
　　　　</<td>Description of B<
　　<td>A<
　　　　<th>Description</<td>B<
　　　　th>/<td>B<
　　　　</<td>Description of B<
　　<td>A<
　　　　<td>Description of A</<td>B<
　　　　<tr>/<td>B<
　　</<td>Description of B<
</td>

　 　tr>

table>
　　Exemple de liste:/<li>JAVA<
　　<ol>/<li>JAVA<
　　<li>PHP<++</<li>JAVA<
</<li>C

li>

Omettre <head>?5 ol>

Omettre <html> et <body>?5 Dans le HTML suivant, les balises <html> et <body> peuvent être omises.

Le document est correct:
Exemple:
<head>
　 <title>Titre de la page</title>
</head>
<h1>C'est un titre</h1>
<p>C'est un paragraphe.</p>

!DOCTYPE html>

Il n'est pas recommandé d'omitter les balises <html> et <body>.

!DOCTYPE html>
<html lang="zh-<html> est l'élément racine du document, utilisé pour décrire la langue de la page:

CN">

Déclarer la langue est destiné à faciliter les lecteurs d'écran et les moteurs de recherche.

) dans les logiciels DOM et XML peut entraîner un plantage.9Omettre <body> dans les navigateurs anciens (IE

) cela会产生错误。

Omettre <head>?5 Dans le HTML standard, l'étiquette <head> peut être omise.

Par défaut, le navigateur ajoute le contenu avant <body> à un <head> par défaut, l'étiquette <head> peut être omise. élément.

Exemple
!DOCTYPE html>
<html>
<title>Titre de la page</title>
<body>
　　<h1>C'est un titre</h1>
　　<p>C'est un paragraphe.</p>
</body>
</html>
　 Il n'est pas recommandé de ne pas utiliser l'étiquette head maintenant.

Métadonnées

HTML5 Dans <title> l'élément est obligatoire, le nom du titre décrit le sujet de la page:

<title>Site de tutoriels de base</title>

Le titre et la langue permettent aux moteurs de recherche de comprendre rapidement le sujet de votre page:

!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Site de tutoriels de base</title>
</head>

Commentaires HTML

Les commentaires peuvent être écrits dans <!-- et --> :

<!--　C'est un commentaire.　-->

Les commentaires plus longs peuvent être écrits dans <!-- et --> Écrire en ligne:

<!--　
　　C'est un commentaire long. C'est
　　Un commentaire long. C'est un commentaire long.
　　C'est
　　Un commentaire long  C'est un commentaire long. C'est
　　Un commentaire long.
-->

L'indentation du premier caractère des commentaires longs est de deux espaces, ce qui est plus facile à lire.

Feuille de style

La feuille de style utilise une syntaxe concise (l'attribut type n'est pas obligatoire):

<link rel="stylesheet" href="styles.css">

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

p.into {police-family: Verdana; police-taille:　14px;}

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

body {
　　fond-color: jaune;
　　police-family: "Arial Black", Helvetica, sans-serif;
　　police-taille:　14px;
　　color: rouge;
}

  • Placez le crochet ouvrant et le sélecteur sur la même ligne.

  • Ajoutez un espace entre le crochet ouvrant et le sélecteur.

  • Utilisez deux espaces pour recharger.

  • Ajoutez un espace entre le deux points et la valeur de l'attribut.

  • Ajoutez un espace après les virgules et les deux points.

  • Utilisez un point-virgule à la fin de chaque attribut et de sa valeur.

  • Utilisez des guillemets uniquement si la valeur de l'attribut contient des espaces.

  • Le crochet fermant est placé sur une nouvelle ligne.

  • Chaque ligne peut contenir au plus 80 caractères.

Ajouter un espace après les virgules et les deux points est une règle courante.

Charger JavaScript dans HTML

Utilisez une syntaxe concise pour charger des fichiers de scripts externes (l'attribut type n'est pas obligatoire) :

<script src="myscript.js">

Accédez aux éléments HTML en utilisant JavaScript

Un mauvais format HTML peut entraîner des erreurs d'exécution de JavaScript.

Les deux lignes de JavaScript suivantes produisent des résultats différents :

Exemple
var obj = getElementById("w3codebox")
var obj = getElementById("w3codebox")

Dans HTML, utilisez les mêmes règles de nommage pour JavaScript.

Utilisez des noms de fichiers en minuscules

La plupart des serveurs Web (Centos, *Unix) est sensible à la casse : loading.jpg ne peut pas être accédé via Loading.jpg.

D'autres serveurs Web (Window, IIS) ne sont pas sensibles à la casse : loading.jpg peut être accédé via Loading.jpg ou loading.jpg.

Vous devez maintenir un style uniforme, nous recommandons d'utiliser des noms de fichiers en minuscules.

Extension de fichier

L'extension de fichier des fichiers HTML peut être .html (ou .htm).

L'extension de fichier des fichiers CSS est .css.

L'extension de fichier des fichiers JavaScript est .js.

La différence entre .htm et .html

Les fichiers avec les extensions .htm et .html ne diffèrent pas en nature. Les navigateurs et les serveurs Web les traitent tous comme des fichiers HTML.

La différence réside en cela :

.htm est appliqué aux systèmes DOS anciens, et le système actuel ne peut qu'utiliser trois caractères.

Dans les systèmes Unix, les suffixes ne sont pas particulièrement limités, généralement avec .html.

Différences techniques

Si une URL ne spécifie pas de nom de fichier (comme https://fr.oldtoolbag.com/html/, Le serveur renverra le nom de fichier par défaut. Le nom de fichier par défaut est généralement index.html, index.htm, default.html, et default.htm.

Si le serveur ne configure que "index.html" comme fichier par défaut, vous devez nommer le fichier "index.html", et non "index.htm".

Cependant, les serveurs peuvent généralement configurer plusieurs fichiers par défaut, et vous pouvez définir le nom du fichier par défaut selon vos besoins.

En tout cas, l'extension complète de HTML est ".html".

HTML5 API d'historiqueHTML5 WebSocket