Einige Vorschläge für HTML-Anfänger und Neulinge, Experten können sie ignorieren

Gefühle: Ich bin Backend-Entwickler. Manchmal fühle ich mich ein wenig schlecht, wenn ich einige statische (HTML-)Seiten bekomme und sehe, dass die Seitenstruktur und die Benennungsregeln äußerst unregelmäßig sind. Natürlich passieren solche Situationen normalerweise bei Neulingen. Im Allgemeinen nehmen wir die vorherigen Standardseiten heraus und benennen DEMOs, damit sie sie sehen können, um die Entwicklungseffizienz zu verbessern.

Zweck: Dieser Artikel ist keine Einführung in die Spezifikation. Die Standardspezifikation finden Sie beim W3C. Es handelt sich lediglich um eine Routine, die auf alle Situationen anwendbar ist und auch unerfahrenen Entwicklern den Einstieg erleichtern soll.
Programmierkenntnisse sind eine Sache, die ich hier nicht diskutieren werde. Hier werde ich nur über einige Methoden sprechen, die ich persönlich für in Ordnung halte.
Das ist fürs Erste alles. Schauen wir uns den Code an.
1. Seitencodierungsstruktur und grundlegende Namenskonventionen

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<Kopf>

<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<title>Unbenanntes Dokument</title>

<style type="text/css"></style>
<script type="text/javascript"></script>
</Kopf>
<Text>

<div id="Kopfzeile">

<div id="Navigation">
<ul>
<li><a href="##">Nav1</a></li>

<li><a href="##"><span>Nav1</span></a></li>
</ul>
</div>
</div>

<div id="Warp">

<div id="Linker Inhalt">

<div id="LinkeNavigation">
<ul>
<li><a href="###">Springen zu</a></li>
</ul>
</div>

<div id="Anzeige" ></div>

<div id="Kontakt" ></div>
</div>

<div id="RechterInhalt"></div>
</div>

<div id="Fußzeile"></div>
</body>
</html>

1. Ich glaube, die meisten Anfänger können es trotzdem verstehen. Die Seite ist in <head>, <header>, <warp> und <footer> unterteilt. Das Obige unterteilt die Seite in vier Teile, aber manchmal gibt es drei Teile, da der <header> im <warp> enthalten ist. Die spezifischen Details können je nach Designseite flexibel angepasst werden. Unabhängig davon, wie viele Blöcke unterteilt sind, ist es wichtig, dass jeder Block unabhängig beschriftet ist, um ein Muster zu bilden. Auf diese Weise können bei der nachfolgenden Programmentwicklung <header>, <footer> und <div id="LeftContent"> im obigen Code gemeinsame Steuerelemente verwenden, um die Effizienz der Back-End-Entwicklung und spätere Wartung zu erleichtern.

2. Auslagerungsdateistruktur

1. Wie in der Abbildung dargestellt, ist dies eine grundlegende Dateistruktur. NewsCenter und Produkt sind Spalten. Sie müssen Ordner entsprechend den Spalten erstellen und dann Auslagerungsdateien darin anlegen. Andernfalls ist Ihnen das möglicherweise beim ersten Start nicht bewusst, wenn alle Seiten im Stammverzeichnis abgelegt sind. Wenn Sie die Seiten jedoch an andere Personen weitergeben oder selbst ändern, sind Sie blind.

2. Die zweiten und wichtigsten Seitenelementdateien (von mir selbst definiert) werden alle im Skins-Ordner abgelegt. Anschließend werden Ordner entsprechend den Dateieigenschaften erstellt und anschließend die entsprechenden Dateien erstellt.

<<: Zusammenfassung mehrerer häufig verwendeter CentOS7-Images basierend auf Docker

>>: Beispiele für die Verwendung des Li-Tags in HTML

So verbergen Sie die Versionsnummer und die Cache-Zeit von Webseiten in Nginx

Artikel

Aggregatabfrage- und Union-Abfragevorgänge für MySQL-Datenbanken

Artikel

Analysieren Sie die Probleme der SQL-Anweisungseffizienzoptimierung beim Lesen, Schreiben, Indizieren und anderen Vorgängen in MySQL-Tabellen

Artikel

Verwendung und Prinzipien von Provide und Inject in Vue3

Einige Vorschläge für HTML-Anfänger und Neulinge, Experten können sie ignorieren

So verbergen Sie die Versionsnummer und die Cache-Zeit von Webseiten in Nginx

Aggregatabfrage- und Union-Abfragevorgänge für MySQL-Datenbanken

Analysieren Sie die Probleme der SQL-Anweisungseffizienzoptimierung beim Lesen, Schreiben, Indizieren und anderen Vorgängen in MySQL-Tabellen

Verwendung und Prinzipien von Provide und Inject in Vue3

Beispiel für die Anpassung von rem an mobile Geräte

Implementieren Sie ein einfaches Datenantwortsystem

Beispielcode zur Implementierung eines Waben-/Sechseckatlas mit CSS

Zusammenfassung der häufig verwendeten Datenbank- und Tabellen-Sharding-Lösungen von MySQL

React implementiert Endlosschleifen-Scrollinformationen

Gründe und Lösungen für die Auswahl des falschen Index durch MySQL

Artikel empfehlen

So löschen Sie Dateinamen oder Verzeichnisse mit Sonderzeichen in Linux

Detaillierte Erklärung zum Anpassen des Stils von CSS-Bildlaufleisten

Mysql löscht doppelte Daten, um die kleinste ID-Lösung beizubehalten

Tipps zum Escapen von HTML-Texten

Erläuterung der Truncate Table-Verwendung

So installieren Sie MySQL 5.7 unter Ubuntu und konfigurieren den Datenspeicherpfad

Zusammenfassung der Unterschiede zwischen globalen Objekten in Node.js und Browsern

Beispielcode für die Verwendung von Nginx zur Implementierung einer 301-Weiterleitung zum https-Stammdomänennamen

Zusammenfassung des Unterschieds zwischen der Verwendung von „from“ und „join“ zum Abfragen zweier Tabellen in MySQL

Detaillierter Prozess der FastAPI-Bereitstellung auf Docker

So begrenzen Sie die Anzahl gleichzeitiger Verbindungsanforderungen in Nginx

So ändern Sie die inländische Imagequelle für Docker

Tipps zur Verwendung von Vue-Elementen und Nuxt

So sortieren Sie eine Zeile oder Spalte in MySQL