Ist das Web-Frontend nur die Präsentationsebene?

Nein. Das Web-Frontend kann in drei Schichten unterteilt werden: 1. Die strukturelle Schicht, die durch Auszeichnungssprachen wie HTML oder XHTML erstellt wird und zum Speichern aller Inhalte dient, die Kunden lesen oder anzeigen möchten kann Text, Bilder, Hyperlinks und Multimedia enthalten. 2. Die durch CSS erstellte Präsentationsebene enthält Stilanweisungen zur Anzeige von Webdokumenten in einem Webbrowser. 3. Die Verhaltensschicht ist das Verhalten der Webseite. Sie wird von der JS-Sprache erstellt und kann den Inhalt der Webseite in Echtzeit aktualisieren, wodurch die Website interaktiv wird und es der Seite ermöglicht wird, auf Benutzervorgänge zu reagieren oder sich basierend auf a zu ändern Reihe von Bedingungen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Dell G3-Computer.

W3C bezieht sich auf das World Wide Web Consortium (World Wide Web Consortium), das im Oktober 1994 gegründet wurde. Das Aufkommen von W3C besteht darin, die Standards für die Webentwicklung anzupassen, sodass dieselbe Webseite in verschiedenen Browsern den gleichen Effekt haben kann. Daher müssen unsere benutzerdefinierten Webseiten den W3C-Spezifikationen entsprechen.

Die Idee der Web-Front-End-Entwicklung besteht darin, Webseiten in drei Ebenen zu unterteilen, nämlich: Strukturebene, Präsentationsebene (Stilebene) und Verhaltensebene.

HTML: Strukturebene

Die Struktur- oder Inhaltsebene einer Webseite ist der zugrunde liegende HTML-Code der Seite. So wie der Rahmen eines Hauses ein solides Fundament für den Rest des Hauses bildet, schafft ein solides Fundament aus HTML eine Plattform, auf der eine Website erstellt werden kann.

In der Strukturschicht werden alle Inhalte gespeichert, die der Kunde lesen oder ansehen möchte. Die HTML-Struktur kann Text und Bilder enthalten und enthält Hyperlinks, die Besucher zum Navigieren auf der Website verwenden. Diese ist in standardkonformem HTML5 codiert und kann Text, Bilder und Multimedia (Video, Audio usw.) umfassen.

CSS: Style Layer

Diese Ebene bestimmt, wie ein strukturiertes HTML-Dokument für Besucher der Website aussieht und wird durch CSS (Cascading Style Sheets) definiert. Diese Dateien enthalten Stilanweisungen für die Anzeige des Dokuments in einem Webbrowser. Die Stilebene umfasst normalerweise Medienabfragen, die die Anzeige der Site je nach Bildschirmgröße und Gerät ändern.

Alle visuellen Stile für Ihre Website sollten in externen Stylesheets vorliegen. Sie können mehrere Stylesheets verwenden. Beachten Sie jedoch, dass zum Abrufen jeder CSS-Datei eine HTTP-Anfrage erforderlich ist, was sich auf die Leistung der Website auswirkt.

JavaScript: Verhaltensschicht

Die Verhaltensschicht macht eine Website interaktiv und ermöglicht es Seiten, auf Benutzeraktionen zu reagieren oder sich basierend auf einer Reihe von Bedingungen zu ändern. JavaScript ist die am häufigsten verwendete Sprache für die Verhaltensebene, aber auch CGI und PHP werden häufig verwendet.

Wenn Entwickler von Verhaltensebenen sprechen, beziehen sich die meisten auf die Ebenen, die direkt im Webbrowser aktiviert werden. Sie können diese Ebene verwenden, um direkt mit dem DOM (Document Object Model) zu interagieren. Das Schreiben von gültigem HTML in der Inhaltsebene ist für die DOM-Interaktion in der Verhaltensebene sehr wichtig. Beim Erstellen von Verhaltensebenen sollten externe Skriptdateien wie CSS verwendet werden, um Geschwindigkeit und Leistung zu optimieren.

Einfach ausgedrückt bilden JavaScript, HTML und CSS zusammen die Webseiten, die wir sehen.

• HTML wird verwendet, um den Inhalt von Webseiten wie Titel, Text, Bilder usw. zu definieren.

• CSS wird verwendet, um das Erscheinungsbild der Webseite zu steuern, z. B. Farbe, Schriftart, Hintergrund usw.;

• JavaScript wird verwendet, um den Inhalt der Webseite in Echtzeit zu aktualisieren, z. B. um Daten vom Server abzurufen und zu aktualisieren Wenn Sie sie in die Webseite einfügen, den Stil einiger Tags oder den Inhalt ändern usw., können Sie Webseiten lebendiger gestalten.

HTML ist HyperText Markup Language, eine Standard-Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. HTML ist für die Struktur der drei Komponenten einer Webseite verantwortlich. HTML verwendet Tags, um verschiedene Komponenten einer Webseite zu identifizieren. Unter dem sogenannten Hypertext versteht man Hyperlinks, die es uns ermöglichen, von einer Seite zur anderen zu springen.

CSS bezieht sich auf Cascading Style Sheets. Stile definieren, wie HTML-Elemente angezeigt werden, und werden zur Steuerung des Erscheinungsbilds von Webseiten verwendet. CSS ist für die Leistung der drei Komponenten einer Webseite verantwortlich und Stile werden normalerweise in externen CSS-Dateien gespeichert. Wir müssen lediglich ein einfaches CSS-Dokument bearbeiten, um das Layout und das Erscheinungsbild aller Seiten zu ändern.

JavaScript ist eine Skriptsprache (kurz „JS“), eine leichtgewichtige Programmiersprache, die zur Steuerung des Verhaltens von Webseiten verwendet wird. JavaScript ist für das Verhalten der drei Komponenten einer Webseite verantwortlich. Es kann in den Programmiercode der HTML-Seite eingefügt werden. Nachdem JavaScript in die HTML-Seite eingefügt wurde, kann es von allen modernen Browsern ausgeführt werden.

Wissen erweitern: Die Vorteile von Layering

1. Gemeinsame Ressourcen:

Wenn Sie eine externe CSS- oder JavaScript-Datei schreiben, kann jede Seite der Website die Datei verwenden. Wenn Sie Änderungen an dieser Datei vornehmen müssen, beispielsweise um einige Typografiestile auf Ihrer Website zu aktualisieren, werden die Änderungen auf jede Seite übertragen, die dieses Stylesheet verwendet. Sie müssen nicht jede Seite Ihrer Website einzeln bearbeiten, was bei großen Websites eine mühsame Aufgabe sein kann.

2. Schnellere Download-Geschwindigkeit:

Nachdem das Skript oder Stylesheet zum ersten Mal vom Kunden heruntergeladen wurde, wird es vom Webbrowser zwischengespeichert. Da diese gemeinsam genutzten Ressourcen jetzt im Cache des Browsers enthalten sind, werden andere im Browser angeforderte Seiten schneller geladen, wodurch sich die Gesamtgeschwindigkeit und -leistung der Seite verbessert.

3. Mehrköpfiges Team:

Wenn mehrere Personen gleichzeitig an der Website arbeiten, können Sie ein System verwenden, das das Ein- und Auschecken von Dateien ermöglicht, um sicherzustellen, dass alle auf der neuesten Version sind. Noch schwieriger wird es, wenn Stile und Verhaltensweisen mit der strukturellen Dokumentation verknüpft sind.

4. Suchmaschinenoptimierung:

Eine Website mit einer klaren Trennung von Stil und Struktur schneidet bei Suchmaschinen wahrscheinlich besser ab, da sie Inhalte effektiver crawlen und die Seite verstehen kann, ohne sich in visuellen Stil- und Verhaltensinformationen zu verlieren.

5. Zugänglichkeit:

Externe Stylesheets und Skriptdateien sind für Menschen und Browser besser zugänglich. Software wie Screenreader können einfacher mit Inhalten in einer Strukturebene arbeiten, ohne sich mit Stilen auseinandersetzen zu müssen, die ohnehin unbrauchbar sind.

6. Abwärtskompatibilität:

Websites, die mit einer separaten Entwicklungsebene entworfen wurden, sind eher abwärtskompatibel, da Browser und Geräte, die bestimmte CSS-Stile nicht verwenden oder JavaScript deaktiviert haben, weiterhin HTML anzeigen können. Anschließend können Sie Ihre Website mithilfe der Funktionen der Browser, die diese unterstützen, schrittweise verbessern.

(Lernvideo-Sharing: Erste Schritte mit dem Web-Frontend)

Das obige ist der detaillierte Inhalt vonIst das Web-Frontend nur die Präsentationsebene?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!