Übersicht
Dieses Dokument definiert das Schreibformat und die Stilregeln für HTML/CSS. Es zielt darauf ab, die Zusammenarbeit und die Codequalität zu verbessern und die zugrunde liegende Infrastruktur zu unterstützen. Es gilt für HTML/CSS-Dateien, einschließlich GSS-Dateien. Solange die Codequalität wartbar ist, kann sie durch Tools gut verschleiert, komprimiert und zusammengeführt werden.
Stilregeln
Protokoll
Protokoll-Header beim Schreiben eingebetteter Ressourcen weglassen
- Lassen Sie die Protokoll-Header-Deklarationen (http:, https:) in URLs für Bilder, Mediendateien, Stylesheets und Skripte weg. Wenn die URL diese beiden Deklarationen nicht verwendet, lassen Sie sie nicht weg.
- Das Weglassen der Protokolldeklaration macht URLs relativ, verhindert Probleme durch Inhaltsverwechslungen und vermeidet redundante Downloads kleiner Dateien.
<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推荐 */
.example {
background: url(http://www.google.com/images/example);
}
/* 推荐 */
.example {
background: url(//www.google.com/images/example);
}
Formatierungsregeln
Einrückung
Jeweils um zwei Leerzeichen einrücken.
Groß-/Kleinschreibung
Nur Kleinbuchstaben verwenden.
Nachgestellte Leerzeichen
Entfernen Sie nachgestellte Leerzeichen.
Metadaten-Regeln
Kodierung
Verwenden Sie UTF-8-Kodierung ohne BOM-Header.
Lassen Sie Ihren Editor im UTF-8-Kodierungsformat ohne Byte-Order-Mark schreiben.
Geben Sie die Kodierung in HTML-Vorlagen und -Dateien mit <meta charset="utf-8"> an. Für Stylesheets muss die Kodierung nicht angegeben werden; sie ist standardmäßig UTF-8.
(Weitere Informationen zur Kodierung und zu ihrer Angabe finden Sie unterZeichensätze & Kodierungen in XHTML, HTML und CSS。）
Kommentare
Erklären Sie den Code, den Sie schreiben, so weit wie möglich.
Verwenden Sie Kommentare, um Code zu erklären: was er enthält, welchen Zweck er hat, was er tun kann, warum diese Lösung verwendet wird oder ob es nur an der Vorliebe liegt?
(Diese Regel ist optional; es ist nicht notwendig, jedes Stück Code in allen Einzelheiten zu beschreiben, da dies den HTML- und CSS-Code aufbläht. Es hängt von der Komplexität des Projekts ab.)
Aktionspunkte
Verwenden Sie TODO, um To-dos und aktive Aktionspunkte zu markieren.
Verwenden Sie nur TODO, um ausstehende Punkte hervorzuheben; verwenden Sie keine anderen gängigen Formate wie @@.
Hängen Sie einen Kontakt (Benutzername oder E-Mail-Liste) in Klammern an, z. B. TODO(contact).
Sie können Beschreibungen von Aktionspunkten nach einem Doppelpunkt anhängen, z. B. TODO: Beschreibung des Aktionspunkts.
{# TODO(cha.jn): 重新置中 #}
<center>Test</center>
<!-- TODO: 删除可选元素 -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
HTML-Stilregeln
Dokumenttyp
Bitte verwenden Sie den HTML5-Standard.
HTML-Code-Gültigkeit
Verwenden Sie nach Möglichkeit gültigen HTML-Code.
Schreiben Sie gültigen HTML-Code; andernfalls sind Leistungsverbesserungen kaum zu erreichen.
Verwenden Sie Tools wie diesenW3C HTML validatorzum Testen.
Die Gültigkeit von HTML-Code ist ein wichtiges Qualitätsmaß und stellt sicher, dass HTML-Code korrekt verwendet werden kann.
<!-- 不推荐 --> <title>Test</title> <article>This is only a test. <!-- 推荐 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
Semantik
Verwenden Sie HTML-Elemente entsprechend ihrem Zweck.
Wenn Sie Elemente verwenden (manchmal fälschlicherweise "Tags" genannt), wissen Sie, warum Sie sie verwenden und ob es korrekt ist. Verwenden Sie beispielsweise Überschriftselemente für Überschriften, p-Elemente für Absätze, a-Elemente für Anker usw.
Die Verwendung von HTML-Elementen entsprechend ihrem Zweck ist wichtig; sie betrifft Aspekte wie Dokumentzugänglichkeit, Wiederverwendung und Codeeffizienz.
<!-- 不推荐 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推荐 --> <a href="recommendations/index.html">All recommendations</a>
Multimedia-Fallback
Alternativen Inhalt für Multimedia bereitstellen.
Bei Multimedia wie Bildern, Videos und animierten Elementen, die über Canvas geladen werden, ist sicherzustellen, dass alternativer Inhalt bereitgestellt wird. Verwenden Sie aussagekräftigen Alternativtext (alt) für Bilder sowie gültige Transkripte und Untertitel für Video und Audio.
Die Bereitstellung alternativer Inhalte ist wichtig, weil sie blinden Nutzern beschreibenden Text liefert, indem @alt verwendet wird, um ihnen mitzuteilen, worum es auf dem Bild geht, und Nutzern Hinweise gibt, die den Video- oder Audioinhalt möglicherweise nicht verstanden haben.
(Das alt-Attribut eines Bildes kann redundant sein; wenn ein Bild nur zur Dekoration verwendet wird, die nicht unmittelbar mit CSS erreicht werden kann, ist kein Alternativtext erforderlich, und Sie können alt="" schreiben.)
<!-- 不推荐 --> <img src="spreadsheet.png.html"> <!-- 推荐 --> <img src="spreadsheet.png.html" alt="电子表格截图">
Trennung von Belangen
Präsentation und Verhalten trennen.
Halten Sie Struktur (Markup), Präsentation (Styles) und Verhalten (Skripte) strikt getrennt und beschränken Sie die Interaktion zwischen den dreien auf ein Minimum.
Stellen Sie sicher, dass Dokumente und Vorlagen nur HTML-Struktur enthalten; verlagern Sie die gesamte Präsentation in Stylesheets und das gesamte Verhalten in Skripte.
Versuchen Sie außerdem, die Kontaktfläche von Skripten und Stylesheets in Dokumenten und Vorlagen zu minimieren, d. h. externe Verlinkungen zu reduzieren.
Es ist sehr wichtig, Präsentation und Verhalten getrennt zu halten, da das Ändern der HTML-Dokumentstruktur und von Vorlagen kostspieliger ist als das Aktualisieren von Stylesheets und Skripten.
<!-- 不推荐 --> <!DOCTYPE html> <title>HTML sucks</title> <link rel="stylesheet" href="base.css.html" media="screen"> <link rel="stylesheet" href="grid.css.html" media="screen"> <link rel="stylesheet" href="print.css.html" media="print"> <h1 style="font-size: 1em;">HTML sucks</h1> <p>I’ve read about this on a few sites but now I’m sure: <u>HTML is stupid!!1</u> <center>I can’t believe there’s no way to control the styling of my website without doing everything all over again!</center> <!-- 推荐 --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css.html"> <h1>My first CSS-only redesign</h1> <p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. <p>It’s awesome!
Entitätsreferenzen
Verwenden Sie keine Entitätsreferenzen.
Es besteht keine Notwendigkeit, Entitätsreferenzen wie —, ” und ☺ zu verwenden, vorausgesetzt, dass die vom Team verwendeten Dateien und Editoren dieselbe Kodierung (UTF-8) verwenden.
Zeichen mit besonderer Bedeutung in HTML-Dokumenten (wie z. B.
<
und
&
) sind Ausnahmen. Oh, und außerdem "unsichtbare" Zeichen (wie geschütztes Leerzeichen).
<!-- 不推荐 --> 欧元货币符号是 “&eur;”。 <!-- 推荐 --> 欧元货币符号是 “€”。
Optionale Tags
Optionale Tags weglassen (optional).
Zur Optimierung von Dateigröße und Validierung können Sie in Betracht ziehen, optionale Tags wegzulassen. Welche Tags optional sind, entnehmen Sie derHTML5 Spezifikation。
(Dieser Ansatz erfordert möglicherweise präzisere Spezifikationen, um etabliert zu werden, und viele Entwickler haben unterschiedliche Meinungen dazu. Aus Gründen der Konsistenz und Kürze ist es notwendig, alle optionalen Tags wegzulassen.)
<!-- 不推荐 -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!-- 推荐 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
type-Attribut
In Tags für Stylesheets und Skripte weglassen.
type
Attribut
Schreiben Sie nichts in Tags für Stylesheets (es sei denn, CSS wird nicht verwendet) und Skripte (es sei denn, JavaScript wird nicht verwendet).
type
Attributs.
HTML5-Standardwerte
type
ist
text/css
und
text/javascript
type, sodass es nicht angegeben werden muss. Selbst ältere Browser unterstützen es.
<!-- 不推荐 --> <link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css"> <!-- 推荐 --> <link rel="stylesheet" href="//www.google.com/css/maia.css"> <!-- 不推荐 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script> <!-- 推荐 --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML-Formatierungsregeln
Jedes Blockelement, Listenelement oder Tabellenelement belegt eine eigene Zeile, und jedes Kindelement wird relativ zu seinem Elternelement eingerückt.
Der Stil unabhängiger Elemente (da CSS es zulässt, dass Elemente eine andere Rolle annehmen, je nach
display
Eigenschaft), setzen Sie Blockelemente, Listenelemente oder Tabellenelemente in eine neue Zeile.
Zusätzlich sind Kindelemente von Blockelementen, Listenelementen oder Tabellenelementen einzurücken.
(Wenn Probleme mit Whitespace-Textknoten um Listenelemente herum auftreten, versuchen Sie, alle
li
Elemente in eine Zeile zu setzen.)
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
<table>
<thead>
<tr>
<th scope="col">Income
<th scope="col">Taxes
<tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>