Aperçu
Ce document définit le format d'écriture et les règles de style pour HTML/CSS. Il vise à améliorer la collaboration et la qualité du code, et à prendre en charge l'infrastructure sous-jacente. Il s'applique aux fichiers HTML/CSS, y compris les fichiers GSS. Tant que la qualité du code est maintenable, il peut être bien obfusqué, compressé et fusionné par des outils.
Règles de style
Protocol
Omettre l'en-tête de protocole lors de l'écriture de ressources intégrées
- Omettre les déclarations d'en-tête de protocole (http:, https:) dans les URL pour les images, les fichiers multimédias, les feuilles de style et les scripts. Si l'URL n'utilise pas ces deux déclarations, ne les omettez pas.
- Omettre la déclaration de protocole rend les URL relatives, ce qui permet d'éviter les problèmes de confusion de contenu et les téléchargements redondants de petits fichiers.
<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推荐 */
.example {
background: url(http://www.google.com/images/example);
}
/* 推荐 */
.example {
background: url(//www.google.com/images/example);
}
Règles de formatage
Indentation
Indenter de deux espaces à la fois.
Capitalisation
Utilisez uniquement des lettres minuscules.
Espaces blancs en fin de ligne
Supprimer les espaces blancs en fin de ligne.
Métadonnées
Encodage
Utilisez l'encodage UTF-8 sans en-tête BOM.
Faites en sorte que votre éditeur écrive au format d'encodage UTF-8 sans marque d'ordre des octets.
Spécifiez l'encodage dans les modèles et fichiers HTML avec <meta charset="utf-8">. Il n'est pas nécessaire de spécifier l'encodage pour les feuilles de style ; il est défini par défaut sur UTF-8.
(Pour plus d'informations sur l'encodage et comment le spécifier, voirJeux de caractères et encodages en XHTML, HTML et CSS。）
Commentaires
Expliquez le code que vous écrivez autant que possible.
Utilisez des commentaires pour expliquer le code : ce qu'il contient, quel est son objectif, ce qu'il peut faire, pourquoi utiliser cette solution, ou est-ce simplement par préférence ?
(Cette règle est facultative ; il n'est pas nécessaire de décrire chaque morceau de code dans les moindres détails, car cela alourdira le code HTML et CSS. Cela dépend de la complexité du projet.)
Points d'action
Utilisez TODO pour marquer les tâches à faire et les éléments d'action actifs.
Utilisez uniquement TODO pour mettre en évidence les éléments en attente ; n'utilisez pas d'autres formats courants, tels que @@.
Ajoutez un contact (nom d'utilisateur ou liste d'e-mails) entre parenthèses, par exemple, TODO(contact).
Vous pouvez ajouter des descriptions d'éléments d'action après un deux-points, par exemple, TODO: description de l'élément d'action.
{# TODO(cha.jn): 重新置中 #}
<center>Test</center>
<!-- TODO: 删除可选元素 -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
Règles de style HTML
Type de document
Veuillez utiliser la norme HTML5.
Validité du code HTML
Utilisez du code HTML valide chaque fois que possible.
Écrivez du code HTML valide ; sinon, il est difficile d'obtenir des améliorations de performance.
Utilisez des outils comme cevalidateur HTML du W3Cpour tester.
La validité du code HTML est une mesure de qualité importante et garantit que le code HTML peut être utilisé correctement.
<!-- 不推荐 --> <title>Test</title> <article>This is only a test. <!-- 推荐 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
Sémantique
Utilisez les éléments HTML conformément à leur finalité.
Lorsque vous utilisez des éléments (parfois appelés à tort "balises"), sachez pourquoi vous les utilisez et si c'est correct. Par exemple, utilisez les éléments de titre pour les titres, les éléments p pour les paragraphes, les éléments a pour les ancres, etc.
Utiliser les éléments HTML conformément à leur finalité est important ; cela implique des questions telles que l'accessibilité des documents, la réutilisation et l'efficacité du code.
<!-- 不推荐 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推荐 --> <a href="recommendations/index.html">All recommendations</a>
Solution de repli multimédia
Fournir un contenu alternatif pour le multimédia.
Pour le multimédia, comme les images, les vidéos et les éléments animés chargés via canvas, assurez-vous qu'un contenu alternatif est fourni. Utilisez un texte alternatif pertinent (alt) pour les images, ainsi que des transcriptions et des sous-titres valides pour la vidéo et l'audio.
Fournir un contenu alternatif est important, car cela donne aux utilisateurs aveugles un texte descriptif, en utilisant @alt pour leur indiquer ce que représente l'image, et donne des indices aux utilisateurs qui n'ont peut-être pas compris le contenu vidéo ou audio.
(L'attribut alt d'une image peut être redondant ; si une image est utilisée uniquement pour la décoration qui ne peut pas être immédiatement obtenue avec CSS, il n'est pas nécessaire d'avoir un texte alternatif, et vous pouvez écrire alt="" .)
<!-- 不推荐 --> <img src="spreadsheet.png.html"> <!-- 推荐 --> <img src="spreadsheet.png.html" alt="电子表格截图">
Séparation des préoccupations
Séparez la présentation et le comportement.
Maintenez strictement séparées la structure (balisage), la présentation (styles) et le comportement (scripts), et limitez au minimum les interactions entre les trois.
Assurez-vous que les documents et les modèles ne contiennent que la structure HTML ; placez toute la présentation dans les feuilles de style et tout le comportement dans les scripts.
De plus, efforcez-vous de minimiser la surface de contact des scripts et des feuilles de style dans les documents et les modèles, c'est-à-dire de réduire les liens externes.
Il est très important de maintenir séparément la présentation et le comportement, car modifier la structure des documents HTML et les modèles coûte plus cher que de mettre à jour les feuilles de style et les scripts.
<!-- 不推荐 --> <!DOCTYPE html> <title>HTML sucks</title> <link rel="stylesheet" href="base.css.html" media="screen"> <link rel="stylesheet" href="grid.css.html" media="screen"> <link rel="stylesheet" href="print.css.html" media="print"> <h1 style="font-size: 1em;">HTML sucks</h1> <p>I’ve read about this on a few sites but now I’m sure: <u>HTML is stupid!!1</u> <center>I can’t believe there’s no way to control the styling of my website without doing everything all over again!</center> <!-- 推荐 --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css.html"> <h1>My first CSS-only redesign</h1> <p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. <p>It’s awesome!
Références d'entités
N'utilisez pas de références d'entité.
Il n'est pas nécessaire d'utiliser des références d'entité comme —, ” et ☺, en supposant que les fichiers et les éditeurs utilisés par l'équipe utilisent le même encodage (UTF-8).
Les caractères ayant une signification spéciale dans les documents HTML (tels que
<
et
&
) sont des exceptions. Oh, et aussi les caractères « invisibles » (comme l'espace insécable).
<!-- 不推荐 --> 欧元货币符号是 “&eur;”。 <!-- 推荐 --> 欧元货币符号是 “€”。
Balises facultatives
Omettre les balises facultatives (facultatif).
Pour optimiser la taille des fichiers et la validation, vous pouvez envisager d'omettre les balises facultatives. Pour savoir quelles balises sont facultatives, reportez-vous à laspécification HTML5。
(Cette approche peut nécessiter des spécifications plus précises à établir, et de nombreux développeurs ont des avis divergents à ce sujet. Pour des raisons de cohérence et de concision, il est nécessaire d'omettre toutes les balises facultatives.)
<!-- 不推荐 -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!-- 推荐 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
attribut type
Omettre dans les balises pour les feuilles de style et les scripts.
type
attribut
N'écrivez pas dans les balises pour les feuilles de style (sauf si vous n'utilisez pas CSS) et les scripts (sauf si vous n'utilisez pas JavaScript).
type
attribut.
HTML5 définit par défaut
type
est
text/css
et
text/javascript
type, il n'est donc pas nécessaire de le spécifier. Même les navigateurs plus anciens le prennent en charge.
<!-- 不推荐 --> <link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!-- 推荐 --> <link rel="stylesheet" href="//www.google.com/css/maia.css"> <!-- 不推荐 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script> <!-- 推荐 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
Règles de formatage HTML
Chaque élément de bloc, élément de liste ou élément de tableau occupe sa propre ligne, et chaque élément enfant est indenté par rapport à son élément parent.
Le style des éléments indépendants (comme CSS permet aux éléments d'assumer un rôle différent par
display
propriété), mettez les éléments de bloc, les éléments de liste ou les éléments de tableau sur une nouvelle ligne.
De plus, indentez les éléments enfants des éléments de bloc, des éléments de liste ou des éléments de tableau.
(Si des problèmes de nœuds de texte d'espacement autour des éléments de liste se produisent, essayez de mettre tous
li
les éléments sur une seule ligne.)
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
<table>
<thead>
<tr>
<th scope="col">Income
<th scope="col">Taxes
<tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>