Spécifications du code HTML(5)


Conventions de codage HTML

De nombreux développeurs Web connaissent 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 des minuscules comme les autres balises, vous pouvez utiliser le code suivant :

<!doctype html>

Utiliser des éléments minuscules Nom

Les noms d'éléments HTML5 peuvent utiliser des lettres majuscules et minuscules.

Il est recommandé d'utiliser des lettres minuscules :

  • Le style mixte majuscules et minuscules est très mauvais.

  • Les développeurs utilisent généralement des minuscules (similaires à XHTML).

  • Le style minuscule semble plus rafraîchissant.

  • Les lettres minuscules sont faciles à écrire.

Déconseillé :

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

Très mauvais :

<Section>
<p>Ceci est un paragraphe. </p>
</SECTION>

Recommandé :

<section>
<p>Ceci est un paragraphe. </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>Ceci est un paragraphe.
<p>Ceci est un paragraphe.
</section>

Recommandé :

<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 n'ont pas besoin d'être fermés :

On peut écrire comme ceci :

<méta charset="utf-8">

peut aussi s'écrire comme ceci :

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

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

La valeur de l'attribut HTML5 peut être guillemets omis.

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.

  • Les valeurs d'attribut sont faciles à lire à l'aide de guillemets.

Les valeurs d'attribut d'instance suivantes contiennent des espaces et ne sont pas entre guillemets, elles ne fonctionneront donc pas :

<table class=table striped>

Ce qui suit utilise des guillemets doubles, ce qui est correct :

<tableau class="table rayée">

Attributs d'image

Les images sont généralement utilisées 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="largeur:128px;hauteur:128px">

Définissez la taille de l'image et réservez l'espace désigné lors du chargement pour réduire le scintillement.

<img src="html5.gif" alt="HTML5" style= "largeur:128px;hauteur:128px">

Espaces et signes égal

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

<lien rel = "feuille de style" 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

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.

Lignes vides et retraits inutiles :

<corps>

<h1>site Web chinois php</h1>

<h2>HTML</h2> ;

<p> Site Web chinois PHP, apprenez non seulement la technologie, mais c'est un rêve.
php Site chinois, ce que vous apprenez, ce n'est pas seulement la technologie, mais aussi les rêves.
Site Web chinois php, ce que vous apprenez n'est pas seulement de la technologie, mais aussi un rêve,
php site chinois, ce que vous apprenez n'est pas seulement de la technologie, mais aussi des rêves.
🎜>>
Recommandé :
<
corps>
<
h1

>
Site Web chinois php</h1>

<h2></ h2>

<p>php Site chinois, ce que vous apprenez n'est pas seulement la technologie, mais aussi un rêve. 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
></corps

> ;

表格实例 :

<table>
  <tr>
    <th>Nom</th>
    <th>Description< /ème>
        </tr>
  <tr>
    <td>A</td>
    <td>Description de A</td> ;
        </tr>
  <tr>
    <td>B</td>
    <td>Description de B</td> ;
  </tr>
</table >

Liste des instances :

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

Omettre <html> >

En HTML5 standard, les balises <html> et <body>

La documentation HTML5 suivante est correcte :

Instance

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

Exécuter l'instance»Cliquez" "Exécuter l'instance" pour afficher l'instance en ligne

L'omission des balises <html> et <body> n'est pas recommandée. 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>

Par défaut, le navigateur ajoutera le contenu avant <body> à un <head> sur les éléments.

Instance

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO。";
</script>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Métadonnées

L'élément <title> en HTML5 est obligatoire. Le nom du titre décrit le thème de la page :

<<🎜. > titre>site Web chinois php</titre>
Le titre et la langue permettent aux moteurs de recherche de comprendre rapidement le sujet de votre page :

<!DOCTYPE html >
<html lang="zh">
<tête>
<meta charset="UTF-8">
<title>site Web chinois php</title>
</head>
Commentaires HTML

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

<!-- Ceci est un commentaire -->
est relativement long. Les commentaires peuvent être écrits sur des lignes séparées entre <!-- et --> :

<!-- Ceci est un commentaire plus long. C'est Un commentaire plus long. Il s’agit d’une revue plus longue.
C'est Un commentaire plus long Ceci est un commentaire plus long. C'est Un commentaire plus long.
-->
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) :

<lien rel="stylesheet" href="styles.css">
Des règles courtes peuvent être écrites sur une seule ligne :

p.into {font-family : Verdana; taille de police : 16em;}

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

body {
background-color: lightgrey;
font-family : "Arial Noir", Helvetica, sans empattement;
font-size: 16em;
couleur: noir;
}

  • Placez l'accolade gauche sur la même ligne que le sélecteur

  • L'accolade gauche. est sur la même ligne que le sélecteur. Ajoutez des espaces entre

  • Utilisez deux espaces pour mettre en retrait

  • Ajoutez des espaces entre les deux-points et les valeurs d'attribut >.

  • Utilisez un espace après la virgule et le symbole

  • Utilisez le 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.

  • Chargement de 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">

    Accéder aux éléments HTML à l'aide 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

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>

    Exécuter l'instance»

    Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne

    Essayez d'utiliser les mêmes règles de dénomination pour 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 via 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 précise pas de nom de fichier (comme http://www.php.cn/css/), Le serveur renverra le nom de fichier par défaut. Habituellement, le nom de fichier par défaut est 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, généralement le serveur peut 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".


←