Leitfaden zum Schreiben von HTML-Code

Gängige Konventions-Tags

Selbstschließende Tags, müssen nicht geschlossen werden (z. B.: img input br hr usw.);
Ein optionales schließendes Tag, das geschlossen werden muss (zum Beispiel: </li> oder </body>);
Minimieren Sie die Anzahl der Tags;

Klasse und ID

Kurse sollten nach ihrer Funktion oder ihrem Inhalt benannt werden, nicht nach ihrer Präsentation.
Die Buchstaben von Klasse und ID sind klein geschrieben. Wenn mehrere Wörter gebildet werden, werden sie durch Bindestriche getrennt.
Verwenden Sie eindeutige IDs als JavaScript-Hooks und vermeiden Sie die Erstellung von Klassen ohne Stilinformationen.

Attributreihenfolge

Um die Lesbarkeit zu gewährleisten, sollten HTML-Attribute in einer bestimmten Reihenfolge erscheinen.

Ausweis
Klasse
Name
Daten-xxx
src, für, Typ, href
Titel, Alt
aria-xxx, Rolle

Anführungszeichen

In Attributdefinitionen werden einheitlich doppelte Anführungszeichen verwendet.

bVerschachtelt

a erlaubt nicht, dass div verschachtelt wird. Diese Einschränkung gehört zu den semantischen Verschachtelungsbeschränkungen. Sie unterscheidet sich von strengen Verschachtelungsbeschränkungen, z. B. erlaubt a nicht, dass a verschachtelt wird.

Strenge Verschachtelungsbeschränkungen sind nicht in allen Browsern zulässig. Semantische Verschachtelungsbeschränkungen werden von Browsern dagegen meist mit Toleranz gehandhabt, und die generierten Dokumentbäume können sich voneinander unterscheiden.

Einschränkungen der semantischen Verschachtelung

<li> wird unter <ul> oder <ol> verwendet;
Unter <dl> werden <dd> und <dt> verwendet;
<thead>, <tbody>, <tfoot>, <tr>, <td> werden unter <table> verwendet;

Strikte Verschachtelungsbeschränkungen

Inline-Level-Elemente können nur Text oder andere Inline-Level-Elemente enthalten;
Interaktive Elemente wie <a>, <button> und <select> können nicht in <a> verschachtelt werden.
Blockelemente wie <div>, <h1>~<h6>, <p>, <ul>/<ol>/<li>, <dl>/<dt>/<dd> und <form> können nicht in <p> verschachtelt werden.

Boolesche Eigenschaften

In der HTML5-Spezifikation müssen Attribute wie „deaktiviert“, „aktiviert“ und „ausgewählt“ nicht mit Werten festgelegt werden.

Semantik
HTML ohne CSS ist eher ein semantisches System als ein UI-System.

Normalerweise hat jedes Etikett eine Semantik. Die sogenannte Semantik bedeutet, dass Ihre Kleidung in Mäntel, Hosen, Röcke, Unterwäsche usw. unterteilt ist, jeweils mit entsprechenden Funktionen und Bedeutungen. Sie können Ihre Unterwäsche also nicht um den Hals legen. -- Eine Spur

Darüber hinaus erleichtert die semantische HTML-Struktur Maschinen (Suchmaschinen) das Verständnis, und bei der Zusammenarbeit mehrerer Personen können diese schnell die Absichten des Entwicklers verstehen.

Allgemeine Tag-Semantik

Stellen Sie sich die von Ihnen erstellte Seite als ein Buch vor, wobei die Semantik der Tags ihren Funktionen und Bedeutungen entspricht.

Buchtitel: <h1>
Kapitelüberschriften des Buches: <h2>
Artikeltitel innerhalb des Abschnitts: <h3>
Untertitel/Untertitel: <h4> <h5> <h6>
Kapitelabsätze: <p>

KOPF
Dokumentart

Durch das Hinzufügen einer Standardmodusdeklaration zur ersten Zeile jeder HTML-Seite wird ein konsistentes Verhalten in jedem Browser sichergestellt.

Zeichenkodierung

Verwenden Sie die UTF-8-Kodierung ohne BOM als Dateiformat.
Das Metaelement, das die Zeichenkodierung angibt, muss das erste direkte untergeordnete Element des Kopfelements sein.

IE-Kompatibilitätsmodus

Verwenden Sie vorrangig die neuesten Versionen des IE- und Chrome-Kernels.

SEO-Optimierung

Ansichtsfenster

Ansichtsfenster: bezieht sich im Allgemeinen auf die Größe des Inhaltsbereichs des Browserfensters, ausgenommen Symbolleisten, Registerkarten usw.
Breite: Browserbreite, die Breite des sichtbaren Bereichs der Seite im Ausgabegerät;
Gerätebreite: Geräteauflösungsbreite, die sichtbare Breite des Bildschirms des Ausgabegeräts;
Anfangsmaßstab: anfängliches Skalierungsverhältnis;
Maximalmaßstab: maximales Zoomverhältnis;
Optimieren Sie für Mobilgeräte, legen Sie die Breite des sichtbaren Bereichs und das anfängliche Zoomverhältnis fest.

iOS-Symbole

Das Apple-Touch-Symbolbild wird automatisch mit abgerundeten Ecken und Hervorhebungen verarbeitet.
apple-touch-icon-precomposed deaktiviert das automatische Hinzufügen von Effekten durch das System und zeigt direkt das Originaldesign an;

Favicon

Wenn kein Favicon angegeben ist, fordern die meisten Browser favicon.ico im Stammverzeichnis des Webservers an. Um sicherzustellen, dass das Favicon zugänglich ist und 404 zu vermeiden, müssen Sie eine der folgenden beiden Methoden befolgen:

Platzieren Sie die Datei favicon.ico im Stammverzeichnis des Webservers.
Verwenden Sie den Link, um das Favicon anzugeben.

HEAD-Vorlage

HTML-Kommentare

Modulkommentare