Bootstrap HTML-Codierungsstandards

Syntax

  • Verwenden Sie zwei Leerzeichen anstelle von Tabs – dies ist der einzige Weg, um eine konsistente Darstellung in allen Umgebungen zu gewährleisten.
  • Verschachtelte Elemente sollten einmal eingerückt werden (d. h. zwei Leerzeichen).
  • Verwenden Sie für Attributdefinitionen durchgehend doppelte Anführungszeichen, niemals einfache.
  • Fügen Sie am Ende von selbstschließenden Elementen keinen nachgestellten Schrägstrich hinzu --die HTML5-Spezifikationbesagt ausdrücklich, dass dies optional ist.
  • Lassen Sie keine optionalen Schließ-Tags weg (z. B.</li>oder</body>）。

Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png.html" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 Doctype

Fügen Sie als erste Zeile jeder HTML-Seite eine Standard-Moduserklärung hinzu, um eine konsistente Darstellung in allen Browsern zu gewährleisten.

Beispiel:

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Sprachattribut

Gemäß der HTML5-Spezifikation:

Es wird dringend empfohlen, das lang-Attribut für das html-Root-Element anzugeben, um dadurch die korrekte Sprache für das Dokument festzulegen. Dies hilft Sprachsynthesetools, die zu verwendende Aussprache zu bestimmen, hilft Übersetzungstools, die beim Übersetzen zu befolgenden Regeln zu bestimmen, und so weiter.

Hier wird eine Liste bereitgestelltvon Sprachcodetabellen。

<html lang="zh">
  <!-- ... -->
</html>

IE-Kompatibilitätsmodus

IE unterstützt die Verwendung eines bestimmten<meta>Tags, um zu bestimmen, welche IE-Version zum Rendern der aktuellen Seite verwendet werden soll. Sofern es keine zwingenden Sonderanforderungen gibt, setzt man diesen am besten aufEdge-Modus, um IE anzuweisen, den neuesten Modus zu verwenden, den er unterstützt.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Zeichenkodierung

Durch die ausdrückliche Deklaration der Zeichenkodierung stellen Sie sicher, dass Browser schnell und einfach bestimmen können, wie der Seiteninhalt gerendert werden soll. Der Vorteil dabei ist, dass Sie die Verwendung von Zeichenentitäts-Markup in HTML vermeiden und alles konsistent mit der Dokumentkodierung (normalerweise UTF-8) halten können.

<head>
  <meta charset="UTF-8">
</head>

Einbinden von CSS- und JavaScript-Dateien

Gemäß der HTML5-Spezifikation ist es beim Einbinden von CSS- und JavaScript-Dateien im Allgemeinen nicht erforderlich, dastypeAttribut anzugeben, datext/cssundtext/javascriptihre jeweiligen Standardwerte sind.

HTML5-Spezifikationslinks

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css.html">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js.html"></script>

Praktikabilität steht an erster Stelle

Versuchen Sie, HTML-Standards und -Semantik einzuhalten, opfern Sie dafür jedoch nicht die Praktikabilität. Versuchen Sie immer, die wenigsten Tags zu verwenden und die Komplexität so gering wie möglich zu halten.

Attributreihenfolge

HTML-Attribute sollten in der unten angegebenen Reihenfolge angeordnet werden, um die Lesbarkeit des Codes zu gewährleisten.

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class wird verwendet, um hochgradig wiederverwendbare Komponenten zu identifizieren, daher sollte es an erster Stelle stehen. id wird verwendet, um bestimmte Komponenten zu identifizieren, und sollte mit Vorsicht verwendet werden (z. B. Lesezeichen auf Seiten), daher steht es an zweiter Stelle.

<a class="..." id="..." data-modal="toggle" href="../index.html">
  Example link
</a>

<input class="form-control" type="text">

<img src="....html" alt="...">

Boolesche Attribute

Boolesche Attribute können ohne Wert deklariert werden. Die XHTML-Spezifikation verlangt, dass sie einen Wert haben, die HTML5-Spezifikation jedoch nicht.

Weitere Informationen finden Sie unterWhatWG-Abschnitt zu booleschen Attributen：

Ein boolesches Attribut an einem Element ist wahr, wenn es vorhanden ist, und falsch, wenn es fehlt.

Wenn Siewirklicheinen Wert zuweisen müssen, lesen Sie bitte die WhatWG-Spezifikation:

Wenn das Attribut vorhanden ist, muss sein Wert entweder die leere Zeichenfolge oder [...] der kanonische Name des Attributs sein, ohne führende oder nachgestellte Leerzeichen.

Kurz gesagt, es ist nicht erforderlich, einen Wert zuzuweisen.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Anzahl der Tags reduzieren

Vermeiden Sie beim Schreiben von HTML-Code überflüssige Elternelemente so weit wie möglich. In vielen Fällen erfordert dies Iteration und Refactoring. Siehe das folgende Beispiel:

<!-- Not so great -->
<span class="avatar">
  <img src="....html">
</span>

<!-- Better -->
<img class="avatar" src="....html">

Durch JavaScript generierte Tags

Durch JavaScript generierte Tags erschweren das Auffinden und Bearbeiten von Inhalten und verringern die Leistung. Vermeiden Sie diese nach Möglichkeit.

Weitere Erweiterungen