Habitudes de codage front-end – article HTML

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 8b05045a5be5764f313ed5b9168a17e6 Il existe des instructions correspondantes sur 8b05045a5be5764f313ed5b9168a17e6

L'encodage doit être uniformément utf-8, 09477266eebbc8a01f42387ae29e71dd 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 2cdf5bf648cf2f33323966d7f58a7f3f 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>

dc6dce4a544fdca2df29d5ac0ea9906b⾥ peut contenir e388a4556c0f65e1904146cc1a846bee, mais e388a4556c0f65e1904146cc1a846bee⾥ n'est pas autorisé à contenir. dc6dce4a544fdca2df29d5ac0ea9906b et d'autres éléments de niveau bloc ; les sous-niveaux de ff6d136ddc5fdfeffaf53ff6ee95f185 et c34106e0b4e09414b63b2ea253ff83d6 ne sont pas autorisés à imbriquer des balises autres que 25edfb22a4f469ecb59f1190150159c6 autorisé à avoir des balises autres que 73de882deff7a050a357292d0a1fca94 et 67bc4f89d416b0b8236eaa5f43dee742 Les balises comme div ne peuvent être placées qu'à l'intérieur des sous-niveaux f5d188ed2c074f8b944552db028f98a1 , 06669983c3badb677f993a8c29d18845, 92cee25da80fac49f6fb6eec5fd2c22a et a34de1251f0d9fe1e645927f19a896e8, les sous-niveaux de a34de1251f0d9fe1e645927f19a896e8 ne sont autorisés qu'à imbriquer les balises b6c5a531a458a2e790c1fd6421739d1c, b4d429308760b6c2d20d6300079ed38e ;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>

25edfb22a4f469ecb59f1190150159c6 doit être enveloppé par ff6d136ddc5fdfeffaf53ff6ee95f185 ou c34106e0b4e09414b63b2ea253ff83d6, 73de882deff7a050a357292d0a1fca94 5c69336ffbc20d23018e48b396cdd57a, de même, ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a et les autres balises de tableau ne sont pas autorisées à apparaître seules.

d5fd7aea971a85678ba271703566ebfd et bb9345e55eb71822850ff156dfde57c8 doivent spécifier le type par défaut, et ff9c23ada1bcecdd1a0fb5d5a0f18437 doit avoir une méthode par défaut, afin d'éviter les différences de comportement dans les différents navigateurs.

Pour plus de commodité, il est recommandé que le ff9c23ada1bcecdd1a0fb5d5a0f18437 doive ajouter l'attribut action, d5fd7aea971a85678ba271703566ebfd label, 5a07473c87748fb1bf73f23d45547ab8 doit ajouter la valeur Attribut, la balise a doit ajouter l'attribut href.

Pour améliorer la sémantique, utilisez bb9345e55eb71822850ff156dfde57c8 au lieu de d5fd7aea971a85678ba271703566ebfd.

N'utilisez pas de tableau pour la mise en page et n'utilisez pas ff6d136ddc5fdfeffaf53ff6ee95f185 ou d'autres balises là où un tableau devrait être. Le but du tableau est d'afficher des données tabulaires. (a) Éléments généraux en ligne, y compris, mais sans s'y limiter,

<a>, <abbr>, <b>, <cite>, <code>, <del>, <dfn>, <em>, <i>,<img>,<input>,<ins>,<kbd>,<label>,<mark>,<q>,　 <samp>,<span>,<strong>, <sub>, <sup> 前后⽆需换⾏; 在块元素或⼀些内联块元素，包括但不限于 <address>, <area>,<article>,<aside>,<audio>,<bdo>,<blockquote>,<body>,<button>,<canvas>, <caption>,<col>,<colgroup>,<command>,<datalist>,<dd>,<details>,<div>,<dl>, <dt>, <embed>, <filedset>, <figcaption>, <figure>, <footer>, <form>, <frame>, <frameset>,<h1>-<h6>,<head>,<header>,<hgroup>,<hr>,<html>,<iframe>,<legend>, <li>,<link>,<meta>,<meter>,<nav>,<object>,<ol>,<optgroup>,<options>,<output>, <p>, <param>, <pre class="brush:php;toolbar:false">, <progress>, <ruby>, <script>, <section>, <select>, <source>, <style>, <summary>, <table>, <tbody>, <tfoot>, <thead>, <ul>, <video>, <tr>, <th>, <td>, <textarea>, <time> 前后需换⾏，中间可以不换⾏; 在 <br>, <wbr> 前⾯不换⾏， 后⾯换⾏。

(b) Le code HTML doit être indenté de 4 espaces au lieu de tabulations pour maintenir l'affichage cohérent dans les différents éditeurs. (c) Pour plusieurs espaces consécutifs, veuillez utiliser pour supprimer les espaces à la fin de la ligne de code.

Utilisez les nouvelles lignes, les retraits et les espaces de manière appropriée pour rendre le code propre.

html Écrivez des commentaires entre les blocs fonctionnels pour faciliter la description de la fonction ou des invites imbriquées de ce bloc fonctionnel. Les commentaires doivent être précis mais pas trop nombreux.

<!-- START header --> 
<div id="header"> ... </div> 
<!-- END header -->

Ajoutez un titre au lien, le cas échéant, et ajoutez alt et titre à l'image.

把css调⽤写在head头部，不需预先执⾏的JS尽量写在页⾯尾部，不要在 html 代码中间插入script代码块，script代码块应与html之间留⼀个空⾏，script代码块开头⽆需缩进，如：

<div class="mod"> 
    <ul class="list"> 
        <li>
            <a href="">list 1</a> 
            <a href="">list 2</a> 
            <a href="">list 3</a> 
        </li> 
    </ul> 
</div>

<script> 
// all javascript code 
function abc() { // function&#39;s code } 
</script>

不在html中混合JS及event事件。

明确指定图⽚的width和 height。不仅对seo有⽤，对因各种原因⽆法显⽰图⽚的情况下，也能保持布局样式基本不变。

通过给元素设置⾃定义属性来存放与JS交互的数据，属性名格式为 data-xx(-xx)，中间⽤中 划线连接，例如：data-lazyload-url。

禁⽌单独⽤ dc6dce4a544fdca2df29d5ac0ea9906b 标签做容器，使⽤ dc6dce4a544fdca2df29d5ac0ea9906b 时必须⾄少带有⼀个类名。更不要它代替e388a4556c0f65e1904146cc1a846bee标签，因为 dc6dce4a544fdca2df29d5ac0ea9906b 标签没有明确的含义，应该根据各标签的语义，做到该⽤什么标签就⽤什么标签。

更多前端编码习惯 —— html篇相关文章请关注PHP中文网！