Latest web development tutorials

Bootstrap HTML-Codierung Konventionen

Grammatik

  • Mit zwei Räumen statt Tabs (Reiter) - Dies ist der einzige Weg, um einen einheitlichen Ansatz zu gewährleisten, alle Umgebungen zu zeigen.
  • Verschachtelte Elemente sollten einmal (dh zwei Leerzeichen) eingerückt werden.
  • Für die Definition von Eigentum, stellen Sie sicher, dass alle doppelte Anführungszeichen verwenden, verwenden Sie niemals einfache Anführungszeichen.
  • Nicht selbstschließenden (selbstschließend) Element Schwanz einen Schrägstrich hinzufügen - die HTML5 - Spezifikation eindeutig erklärt , dass diese optional.
  • Schließen Sie optionale End - Tag (Endtag) auslassen (zum Beispiel </li> oder </body> ).

Beispiel: 

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

HTML5 doctype

Für jeden der ersten Zeile von HTML-Seiten ein Standard-Modus (Standardeinstellung) Erklärung hinzufügen, so kann sichergestellt werden, dass Sie in jedem Browser eine konsistente Anzeige haben.

Beispiel: 

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

language-Eigenschaft

Nach Angaben der HTML5-Spezifikation:

Es wird dringend die lang HTML Root-Element angeben Attribut empfohlen, um die richtige Sprache für das Dokument zu setzen. Dies wird dazu beitragen sollte, um die Sprachsynthese-Tools verwendet werden, um ihre Aussprache zu bestimmen, werden Übersetzungstools seine Übersetzung zu ermitteln sollten die Vorschriften erfüllen, und so weiter.

Mehr zu lang Attribut Wissen aus dieser Beschreibung zu verstehen.

Hier sind die Sprachcode - Tabelle . 

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

IE-Kompatibilitätsmodus

IE - Unterstützung durch spezifische <meta> Tag , um die aktuelle Version von IE - Rendering - Seiten zu bestimmen , verwendet werden. Es sei denn , es eine starke besonderen Bedürfnissen ist, sonst ist es am besten , den Rand - Modus einzustellen, wodurch die IE benachrichtigen die neuesten Modelle mit unterstützt wird . 

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

Zeichenkodierung

Durch die explizite die Zeichenkodierung deklarieren, kann der Browser schnell gesichert werden und leicht Seiteninhalt Rendering bestimmen. Der Vorteil hierbei ist die Verwendung von Zeichenentitäten Zeichen (Zeichen-Entity) in HTML zu vermeiden, die mit dem gesamten Dokument Codierung konsistent ist (in der Regel UTF-8-Kodierung). 

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

Die Einführung von CSS und JavaScript-Dateien

Gemäß der HTML5 - Spezifikation, die zum Zeitpunkt der Einführung von CSS und JavaScript - Dateien müssen in der Regel nicht über die angeben type Attribut als text/css und text/javascript ihre Standardwerte sind.

HTML5-Spezifikation Links 

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

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

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

Praktisch ist König

Versuchen Sie, HTML-Standards und Semantik folgen, aber nicht auf Kosten der Praktikabilität für den Preis. Jederzeit möglich, mit minimalem Etikett und ein Minimum an Komplexität beizubehalten.

Attribut bestellen

HTML-Attribut sollte unten, angegeben in der Reihenfolge, in der Reihenfolge ihrer Priorität sein, um die Lesbarkeit des Codes zu gewährleisten.

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

Klasse wird verwendet, hoch wiederverwendbare Komponenten zu identifizieren und damit an der Spitze sein sollte. ID verwendet wird, bestimmte Komponenten zu identifizieren, sollte mit Vorsicht erfolgen (wie Lesezeichen innerhalb der Seite) verwendet werden, kam es auf dem zweiten Platz. 

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

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

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

Boolean (boolean) type-Attribut

Boolean-Attribut kann nicht zum Zeitpunkt der Erklärung zugeordnet werden. XHTML-Spezifikationen für seine Aufgabe, aber die HTML5-Spezifikation ist nicht erforderlich.

Weitere Informationen finden Sie in der WHATWG section ON Boolesche Attribute :

Boolean Element-Attribut, wenn der Wert wahr ist, wenn kein Wert falsch ist.

Wenn Sie einen Wert zuweisen müssen, wenden Sie sich bitte WHATWG Spezifikation:

Wenn das Attribut vorhanden ist, muss sein Wert ein leerer String oder [...] kanonische Name-Attribut, und fügen Sie keine Leerzeichen am Anfang und Ende.

Einfach gesagt, ist es nicht zugeordnet. 

<input type="text" disabled>

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

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

Reduzieren Sie die Anzahl der Etiketten

Wenn HTML-Code zu schreiben unnötig übergeordnete Element zu vermeiden. In vielen Fällen erfordert dies eine iterative und Rekonstruktion zu erreichen. Betrachten Sie den folgenden Fall: 

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

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

JavaScript erzeugte Etikett

Stichworte durch JavaScript erzeugt, so dass der Inhalt wird schwierig zu finden, bearbeiten und Leistung reduzieren. Versuchen Sie zu vermeiden zu vermeiden.