Wie sieht die dreistufige Struktur des Web-Frontends aus?

Die dreischichtige Struktur des Web-Frontends ist: 1. Die Strukturschicht, die durch Auszeichnungssprachen wie HTML oder XHTML erstellt wird und zum Speichern aller Inhalte verwendet wird, die Kunden lesen oder lesen möchten Die Ansicht kann Text, Bilder, Hyperlinks und Multimedia (Video, Audio usw.) enthalten. 2. Die durch CSS erstellte Präsentationsebene enthält Stilanweisungen zur Anzeige von Webdokumenten in einem Webbrowser. 3. Verhaltensebene, verantwortlich für die Beantwortung der Frage „Wie Inhalte auf Ereignisse reagieren sollen“ und die Interaktivität der Website, sodass Seiten auf Benutzeraktionen reagieren oder sich basierend auf einer Reihe von Bedingungen ändern können.

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

Web-Frontend ist die Webseite, die Benutzern angezeigt wird, also der Front-End-Teil der Website.

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

• Die Strukturschicht (Strukturschicht) wird durch eine Auszeichnungssprache wie HTML oder XHTML erstellt. Tags, also Wörter, die in spitzen Klammern stehen, beschreiben die semantische Bedeutung von Webinhalten, enthalten jedoch keine Informationen darüber, wie der Inhalt angezeigt wird. Das P-Tag drückt beispielsweise eine solche Semantik aus: „Dies ist ein Textabsatz.“ Die Präsentationsebene wird von CSS erstellt. CSS beantwortet die Frage, wie relevante Inhalte angezeigt werden.

• Die Verhaltensschicht ist für die Beantwortung der Frage verantwortlich, „wie Inhalte auf Ereignisse reagieren sollen“. Dies ist ein Bereich, der von der Javascript-Sprache und dem DOM dominiert wird.

• Die Präsentationsschicht und die Verhaltensschicht einer Webseite existieren immer, auch wenn wir keine expliziten Anweisungen geben. Zu diesem Zeitpunkt wendet der Webbrowser seine Standardstile und Standardereignishandler auf die Strukturebene der Webseite an. Beispielsweise lassen Browser beim Rendern eines „Textsegments“-Elements eine Eingabeaufforderung erscheinen, die den Wert des Titelattributs des Elements anzeigt, wenn der Benutzer mit der Maus über ein Element fährt usw.

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.

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. Es ist nicht erforderlich, jede Seite Ihrer Website einzeln zu 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. Mehrpersonenteams:

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, die Stil und Struktur klar trennt, schneidet bei Suchmaschinen wahrscheinlich besser ab, da sie den Inhalt 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 vonWie sieht die dreistufige Struktur des Web-Frontends aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!