Front-End-Codierungsgewohnheiten – HTML-Artikel-HTML-Tutorial-php.cn

Vorwort

Als Front-End-Ingenieur müssen wir möglicherweise jeden Tag HTML, CSS und JavaScript schreiben. Der von jedem geschriebene Code enthält seinen eigenen persönlichen Stil und hat seine eigenen Codierungsgewohnheiten und Richtlinien. Im Folgenden möchte ich Ihnen meine Gewohnheiten und Regeln mitteilen.

html

Zuerst müssen wir das Dokument standardisieren, also müssen wir hinzufügen, um das Dokument zu standardisieren. Es gibt entsprechende Anweisungen zu

Die Kodierung sollte einheitlich utf-8 sein, dann

Beim Zitieren von CSS-Stil oder JS auf der Seite ist kein Hinzufügen erforderlich eine Typdeklaration. Beispiel:

<link rel="stylesheet" href="..."> 
<style>...</style> 
<script src="..."></script>     
<script></script>

Nach dem Login kopieren

Lassen Sie den Protokollteil (http:, https:) der URL von Bildern, Stilen, Skripten und anderen Mediendateien weg, es sei denn, die Datei ist nicht unter beiden Protokollen verfügbar. Dieses Schema wird als protokollrelative URL, relative Protokoll-URL, bezeichnet. Der Vorteil besteht darin, dass der Browser unabhängig davon, ob Sie über HTTPS oder HTTP auf die Seite zugreifen, die Ressourcen auf der Seite mit demselben Protokoll anfordert und dabei einige Bytes spart. Wenn der Browser auf eine relative URL stößt, fügt er entsprechend dem aktuellen Webseitenprotokoll automatisch dasselbe Protokoll vor // hinzu. Wenn über http auf die aktuelle Webseite zugegriffen wird, werden alle relativen Verweise // zu http://. Das Gleiche gilt für https. Wenn Sie es lokal anzeigen, wird das Protokoll zu file://. Diese Verwendung wird von fast allen Browsern unterstützt. Unter IE7/8 gibt es nur ein kleines Problem, nämlich dass CSS-Dateien, auf die über relative URLs verwiesen wird (unabhängig von oder @import), zweimal heruntergeladen werden. Es hat also einen kleinen Einfluss auf die Leistung.

<!-- 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");
}

Nach dem Login kopieren

Alle Tags, Attribute und Attributnamen sind in Kleinbuchstaben geschrieben und die Attributwerte sind in „“ (doppelte Anführungszeichen) eingeschlossen. Jedes Doppel-Tag muss ein entsprechendes End-Tag haben (Einzel-Tags schon). folgt diesem Standard nicht und muss dennoch gemäß dem ursprünglichen HTML-Standard nicht mit „/>“ enden. Zur Erinnerung: Viele Seitenverformungen im IE hängen mit nicht geschlossenen Tags oder verschachtelten Fehlern zusammen.

-Tags sollten in einer angemessenen Reihenfolge verschachtelt sein. Beispiel:

<p><b></p></b>
需修改为：
<p><b></b></p>

Nach dem Login kopieren

⾥ kann

enthalten, aber

⾥ darf nicht enthalten

und andere Unterebenen von

dürfen nur in den Unterebenen von platziert werden. , -, -Tags, die Unterebenen von dürfen nur - und -Tags enthalten ;td>-Tag. Beispielsweise sind die folgenden Situationen falsch:

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

Nach dem Login kopieren

-Tag muss von

-Paket, und andere Tabellen-Tags dürfen nicht alleine erscheinen.

und