So schreiben Sie schönen HTML-Code

So schreiben Sie schönen HTML-Code

So sieht schöner HTML-Code aus. So schreiben Sie schönen HTML-Code.
Ein von einem Ausländer verfasster Artikel: So sieht schöner HTML-Code aus. Wie man schönen HTML-Code schreibt scheint sehr gut geschrieben zu sein, deshalb habe ich ihn erneut gepostet und mit Ihnen geteilt:
ps: Ursprüngliche Adresse: http://css-tricks.com/what-beautiful-html-code-looks-like/
1. DOCTYPE richtig deklariert
Vergessen Sie nicht die Header-Deklaration, die dem Browser mitteilt, wie Ihr HTML gerendert werden soll.
2. Aufgeräumter Kopfbereich
Legen Sie Titel und Zeichensatz fest. Verknüpfen Sie CSS und JS mit externen Links (auch einem CSS zum Drucken).
3.Körper identifiziert
Geben Sie der Leiche eine ID. Der vom Autor hier genannte Grund besteht darin, die Auswahl von Containern auf mehreren Seiten zu erleichtern. Wenn Sie beispielsweise für BODY auf Seite1 und Seite2 unterschiedliche IDs festlegen, können Sie über #Seite1 h2 und #Seite2 h2 zwei unterschiedliche Effekte festlegen. Ich denke, dass dies von der Situation und der spezifischen Architektur abhängt.
4. Semantisch sauberes Menü
Schreiben Sie semantischen Menücode.
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
ps:我個人覺得這樣寫代碼應該更簡單一點吧:
<ulid="menu">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

5.Haupt-DIV für alle Seiteninhalte
Es sollte ein Haupt-DIV geben, das den gesamten Inhalt enthält. Es ist praktisch, die Breite, Ränder usw. des Motivs festzulegen.
6. Wichtige Inhalte zuerst
Schreiben Sie zuerst den Hauptinhalt und dann den sekundären Inhalt. Wenn Ihre Navigation oder Seitenleiste nicht so wichtig ist, schreiben Sie sie am besten zuletzt.
7. Gemeinsame Inhalte enthalten
Importieren Sie allgemeine Teile wie Navigation und Fußzeile durch dynamische Aufrufe, etwa PHP-Includes.
8.Code ist in Abschnitte unterteilt
Code einrücken
9. Richtige End-Tags
Beachten Sie das schließende Tag
10.Hierarchie der Header-Tags
Verwenden Sie Überschriften-Tags wie <h1>~<h6>, um Absätze gegebenenfalls zu unterteilen.
11. Inhalt, Inhalt, Inhalt
Verwenden Sie entsprechende Etiketten und Zeichencodes, verwenden Sie &
copy; um © anzuzeigen, und verwenden Sie nicht </br>
12.Kein Styling!
Fügen Sie keine Stile in Tags ein. HTML dient nur zur Darstellung der Struktur. Überlassen Sie die Leistung CSS.

<<:  Schneller Einstieg in die Teleport-Komponenten und Verwendungssyntax von VUE 3

>>:  So implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx

Artikel empfehlen

Integrationspraxis des Vue+Element-Hintergrundverwaltungsframeworks

Inhaltsverzeichnis Vue+ElementUI-Hintergrundverwa...

Vue3 manuelle Kapselung Popup-Box-Komponente Nachrichtenmethode

In diesem Artikel wird der spezifische Code der m...

Vereinfachen Sie die komplexe Website-Navigation

<br />Das Navigationsdesign stellt eine der ...

Schritte zur Installation von GRUB auf einem Linux-Server

So installieren Sie GRUB für Linux Server Sie kön...

MySQL-Konfiguration Master-Slave-Server (ein Master und mehrere Slaves)

Inhaltsverzeichnis Ideen Hostkonfiguration Konfig...

Wie stellt MySQL die Datenintegrität sicher?

Die Bedeutung von Datenkonsistenz und -integrität...

Vollständige Schritte für dynamische Bindungssymbole in Vue

0 Unterschiede zwischen Symbolen und Bildern Symb...

Durchführung der lokalen Migration von Docker-Images

Ich habe vor Kurzem Docker gelernt und stoße dabe...

mysql ist keine interne Befehlsfehlerlösung

Der Fehler „mysql ist kein interner Befehl“ tritt...

Einfaches Beispiel zum Hinzufügen und Entfernen von HTML-Knoten

<br />Einfaches Beispiel zum Hinzufügen und ...

Standardmäßige Stilanordnung von HTML4.0-Elementen

Code kopieren Der Code lautet wie folgt: html, Ad...

So ändern Sie die Standardcodierung von MySQL in Linux

Wenn während des Entwicklungsprozesses nach der W...