Avant-propos
En tant qu'ingénieur front-end, nous devrons peut-être écrire du HTML, du CSS et du JavaScript chaque jour. Le code écrit par chacun contient son propre style personnel et ses propres habitudes et directives de codage. Ce qui suit Permettez-moi de partager avec vous mes habitudes et mes règles.
html
Tout d'abord, nous devons standardiser le document, nous devons donc ajouter Il existe des instructions correspondantes sur
L'encodage doit être uniformément utf-8, puis
Lorsque vous citez le style css ou js dans la page, il n'est pas nécessaire d'ajouter une déclaration de type. Par exemple :
<link rel="stylesheet" href="..."> <style>...</style> <script src="..."></script> <script></script>
Omettez la partie protocole (http:, https:) de l'URL des images, styles, scripts et autres fichiers multimédias, sauf si le fichier n'est pas disponible sous les deux protocoles. Ce schéma est appelé URL relative au protocole, URL relative au protocole. L'avantage est que que vous accédiez à la page en HTTPS ou en HTTP, le navigateur demandera les ressources de la page en utilisant le même protocole, tout en économisant quelques octets. Lorsque le navigateur rencontre une URL relative, il ajoutera automatiquement le même protocole devant // selon le protocole actuel de la page Web. Si la page Web actuelle est accessible via http, toutes les références relatives // deviendront http://. Il en va de même pour https. Si vous le visualisez localement, le protocole devient file://. Cette utilisation est prise en charge par presque tous les navigateurs. Il n'y a qu'un petit problème sous IE7/8, c'est-à-dire que les fichiers CSS référencés via des URL relatives (indépendamment de ou @import) seront téléchargés deux fois. Cela a donc un petit impact sur les performances.
<!-- Not recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
background: url("https://www.google.com/images/example");
}
/* Recommended */
.example {
background: url("//www.google.com/images/example");
}Toutes les balises, attributs et noms d'attributs sont en minuscules et les valeurs d'attribut sont entourées de "" (guillemets doubles) Chaque balise double doit avoir une balise de fin correspondante (les balises simples le font). ne suit pas cette norme, et toujours selon la norme HTML d'origine, il n'a pas besoin de se terminer par "/>"). Rappel : De nombreuses déformations de pages sous IE sont liées à des balises non fermées ou à des erreurs imbriquées. Les balises
doivent être imbriquées dans un ordre raisonnable. Par exemple :
<p><b></p></b> 需修改为： <p><b></b></p>
, mais
⾥ n'est pas autorisé à contenir.
| , | ;td> Par exemple, les situations suivantes sont incorrectes : <table>
<input type="hidden">
<tr>
<td></td>
<p></p>
</tr>
</table>
<ul>
<li></li>
<div></div>
</ul>
需改为：
<table>
<tr>
<td><input type="hidden"> </td>
<p></p>
</tr>
</table>
<ul>
<li><div></div></li>
</ul>Copier après la connexion
et Pour plus de commodité, il est recommandé que le |
|---|