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

Allgemeine Überlegungen zum Erstellen eines Hadoop 3.2.0-Clusters

Artikel empfehlen

Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten

Inhaltsverzeichnis Vorwort Untergeordnete Kompone...

Detaillierte Erläuterung der Gründe und Lösungen für schwebende Elemente, die die Höhe ihrer übergeordneten Elemente reduzieren

Schwebende Elemente führen dazu, dass ihre überge...

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

Allgemeine Überlegungen zum Erstellen eines Hadoop 3.2.0-Clusters

Linux-Grundlagen-Tutorial: Sonderberechtigungen SUID, SGID und SBIT

MySQL-Konfiguration SSL-Master-Slave-Replikation

Eine ausführliche Einführung in React-Referenzen

Zabbix benutzerdefinierte Überwachung Nginx Status Implementierungsprozess

Allgemeine Shell-Skriptbefehle und zugehöriges Wissen unter Linux

Detailliertes Beispiel der MySQL curdate()-Funktion

Automatische Sicherung der MySQL-Datenbank per Shell-Skript

Beispiel für die Verwendung eines negativen Rands zum Erreichen eines durchschnittlichen Layouts in CSS

Connector-Konfiguration in Tomcat

Artikel empfehlen

Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten

Beispielcode für die JS-Funktion „Anti-Shake“ und „Throttling“ zur Entwicklung von Webprojekten

CSS setzt Overflow, um die Bildlaufleiste auszublenden und gleichzeitig das Scrollen zu ermöglichen

js, css, html bestimmen die verschiedenen Versionen des Browsers

Beispiele für einfache Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge mit MySQL-Anweisungen

Detaillierte Erläuterung der Gründe und Lösungen für schwebende Elemente, die die Höhe ihrer übergeordneten Elemente reduzieren

Lernunterlagen zum Schreiben des ersten Vue-Programms

So überprüfen Sie, ob die Ports des lokalen Computers und des Remote-Servers unter Linux verbunden sind

Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung

Grundlegende Nutzungsdetails zur Vue-Komponentenbildung

Detaillierter Informationsaustausch über das MySQL-Protokollsystem

Tutorial zur MySQL-Installation in der Linux-CentOS7-Umgebung

Erläuterung der Faktoren, die die Datenbankleistung in MySQL beeinflussen

Der beste Weg, ein JAR-Paketprojekt unter einem Centos7-Server zu starten

Vor- und Nachteile von MySQL-Indizes und Richtlinien zum Erstellen von Indizes