Aus welchen drei Teilen besteht das Web-Frontend?

Drei Teile des Web-Frontends: 1. Strukturebene, das Skelett der Webseite, erstellt durch HTML- oder XHTML-Markup-Sprache, verwendet, um die Struktur des Dokuments aufzubauen und den Inhalt der Webseite zu definieren, B. Titel, Text, Bilder usw.; 2. Darstellung Die Ebene ist der Stil der Webseite, der von CSS erstellt wird und zum Festlegen des Präsentationseffekts des Dokuments verwendet wird, z. B. Farbe, Schriftart, Hintergrund usw. 3. Die Verhaltensschicht ist das Verhalten der Webseite, die von der JavaScript-Sprache erstellt wird und den Inhalt der Webseite in Echtzeit aktualisieren kann, indem sie beispielsweise Daten vom Server abrufen und auf der Webseite aktualisieren kann die Webseite lebendiger.

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

Drei Teile des Web-Frontends

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.

Gemäß W3C-Standards besteht eine Webseite hauptsächlich aus drei Teilen: Strukturschicht (HTNL), Präsentationsschicht (CSS) und Verhaltensschicht (JavaScript).

Strukturelle Schicht

Die strukturelle Schicht ist das Skelett der Seite, das von der HTML- oder XHTML-Auszeichnungssprache erstellt und zum Aufbau der Struktur des Dokuments verwendet wird.

HTML wird verwendet, um den Inhalt einer Webseite zu definieren, wie z. B. Titel, Text, Bilder usw.;

Präsentationsebene

Die Präsentationsebene ist der Stil der Seite, der durch CSS (Cascading) erstellt wird Style Sheet) und wird verwendet, um den Präsentationseffekt des Dokuments festzulegen.

CSS wird verwendet, um das Erscheinungsbild von Webseiten zu steuern, z. B. Farben, Schriftarten, Hintergründe usw.;

Verhaltensebene

Die Verhaltensebene ist das Verhalten der Seite, die von der JavaScript-Sprache erstellt und verwendet wird um das Verhalten des Dokuments zu implementieren.

JavaScript wird verwendet, um den Inhalt der Webseite in Echtzeit zu aktualisieren, z. B. um Daten vom Server abzurufen und auf der Webseite zu aktualisieren, den Stil einiger Tags oder deren Inhalt zu ändern usw., wodurch das Webseite lebendiger.

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.

So lernen Sie HTML, CSS, JavaScript

1. Systematisches Erlernen von HTML und CSS

Html und CSS sind relativ einfach, erfordern aber dennoch systematisches Lernen.

2. Tiefes Verständnis von Javascript

Ein ausgezeichneter Front-End-Programmierer muss die Prinzipien, Mechanismen, Ursprünge und die objektbasierte Natur von Javascript genau verstehen. Es wird empfohlen, mehr Open-Source-Projekte zu lesen, denn Übung bringt wahres Wissen.

Web-Front-End-Entwicklungstechnologie folgt dem Prozess von einfach bis schwierig, was erfordert, dass Web-Front-End-Entwicklungstechniker mit dem Erlernen grundlegender Web-Entwicklungstechnologie, der Verschönerung der Website-Leistung, SEO und Grundkenntnissen über die Serverseite vertraut sind Andererseits gibt es auch spezifische Anforderungen an Entwickler, wie zum Beispiel die Fähigkeit, verschiedene Tools geschickt und flexibel zur Unterstützung der Entwicklung einzusetzen.

Gleichzeitig ist es notwendig, die grundlegenden Theorien des relevanten Wissens zu beherrschen, darunter: Wartbarkeit des Codes, hierarchische semantische Vorlagen, Benutzerfreundlichkeit von Komponenten usw. Die Front-End-Entwicklungstechnologie umfasst traditionelles Javascript, CSS, usw. Technologie und Adobe RIA, Google Gears, konzeptionelles interaktives Design und visuelles Design mit starker künstlerischer Farbe usw.

Verwendet man das Internet als Analogie, wird alles, was vom Browser bis zum Client-Computer reicht, zusammenfassend als Front-End-Technologie bezeichnet. Was auf der Serverseite gespeichert wird, wird zusammenfassend als Back-End-Technologie bezeichnet. Zu den Front-End-Technologien gehören: „traditionelle“ Technologien wie JavaScript, ActionScript, CSS, xHTML, Adobe AIR, Google Gears sowie konzeptionelles interaktives Design und künstlerische Visuals Design usw. Es gibt viele Positionen in der Web-Front-End-Entwicklung. Nehmen Sie zunächst die drei Positionen „Front-End-Entwicklungsingenieur“, „Senior Front-End-Entwicklungsingenieur“ und „Front-End-Architekt“ als Beispiele jeweiligen Verantwortlichkeiten.

Front-End-Entwicklungsingenieur (oder „Webseiten-Produktion“, „Über-Webseiten-Produktionsingenieur“, „Front-End-Produktionsingenieur“, „Website-Rekonstruktionsingenieur“). Die Hauptaufgabe dieser Position besteht in der Zusammenarbeit mit Interaktionsdesignern. Visuelle Designer arbeiten gemeinsam an Innovationen und verwenden HTML und CSS, um die Produktion von Website-Seiten basierend auf den Designzeichnungen abzuschließen. Auf dieser Grundlage ist es notwendig, grundlegende Wartungsarbeiten an der fertigen Seite durchzuführen und die Frontend-Performance der Website entsprechend zu optimieren.

Darüber hinaus sollte ein qualifizierter Front-End-Entwicklungsingenieur über eigene ästhetische Erkenntnisse und eigene Ideen im Kunstbetrieb verfügen. Nur so kann eine visuelle Zusammenarbeit gut gelingen. Ein bestimmtes ästhetisches Talent und grundlegende künstlerische Fähigkeiten sind für Ingenieure unverzichtbare Fähigkeiten. Die Front-End-Entwicklungstechnologie deckt ein breites Spektrum an Bereichen ab, beispielsweise Software-Engineering und andere Bereiche. Bei der tatsächlichen Analyse der Front-End-Entwicklungstechnologie können wir das Internet nutzen, um die Front-End-Entwicklungstechnologie zu verstehen und zu analysieren. Das heißt, solange der Computer dem Design vom Browser bis zum Benutzerende folgt, kann diese Technologie kollektiv sein Als Front-End-Technologie bezeichnet. Der Hauptinhalt der Back-End-Technologie ist die Technologie, die auf der Serverseite gespeichert werden muss.

Am 5. Dezember 2015 zeigten die Informationen im „Guangzhou Internet Industry Talent Shortage Index (TSI) Report“, dass Front-End-Entwicklungsingenieure zu den gefragtesten Positionen in der Internetbranche von Guangzhou geworden sind.

Front-End-Entwicklungstechnologie deckt ein breites Spektrum an Bereichen ab, beispielsweise Software-Engineering und andere Bereiche. Bei der tatsächlichen Analyse der Front-End-Entwicklungstechnologie können wir das Internet nutzen, um die Front-End-Entwicklungstechnologie zu verstehen und zu analysieren. Das heißt, diese Technologie kann dem Computer vom Browser bis zum Benutzer-End-Design folgen Zusammenfassend als Front-End-Technologie bezeichnet. Der Hauptinhalt der Back-End-Technologie ist die Technologie, die auf der Serverseite gespeichert werden muss. Am 5. Dezember 2015 zeigten Informationen im „Guangzhou Internet Industry Talent Shortage Index (TSI) Report“, dass Front-End-Entwicklungsingenieure zu den gefragtesten Positionen in der Internetbranche von Guangzhou geworden sind.

Die Aufgabe der Web-Frontend-Entwicklung konzentriert sich darüber hinaus auf die Softwareentwicklung, die Analyse der Benutzerfreundlichkeit der Website und die Optimierung problematischer Bereiche im Frontend-Design der Website basierend auf den von Benutzern zurückgemeldeten Informationen. In diesem Prozess kann die Seite durch die Dreifaltigkeit von Javascript, Flashactionscript3.0 und HTML-CSS-Technologie den Benutzern helfen, nach der Optimierung ein besseres Erlebnis zu bieten. Beispielsweise wurden Bilder in der Bildsuchfunktion im QQ-Bereich früher nur nach dem Aufnehmen von Bildern angezeigt und auch in Kategorien auf der Webseite angezeigt. Jetzt ist das Durchsuchen von Bildern direkt auf der Webseite eine der von Front entwickelten Funktionen -End-Entwicklungsingenieure. Darüber hinaus gibt es verschiedene Informationswebsites, die Folieneffekte, Ajax-Technologie usw. anzeigen können.

Beim Starten des Web-Front-Ends werden das Design der Front-End-Architektur und die zugrunde liegende Datenübertragung verwendet. Daher erfordert die Web-Front-End-Entwicklung bessere grundlegende Programmierkenntnisse als erstere und erfordert auch Kenntnisse über das Back-End der Website. Ende Sprache. In der heutigen Phase entwickelt sich die Front-End-Entwicklungstechnologie sehr schnell, was strengere Anforderungen an Praktiker stellt. Es ist notwendig, neue Front-End-Entwicklungstechnologien zu beherrschen und gleichzeitig die zukünftige Ausrichtung der Front-End-Welt zu klären Es wird schwierig sein, die Vorteile der Technologie mit den Funktionen voll auszuschöpfen.

Die Xunfa-Familie der Front-End-Technologie ist eine Zusammenfassung der Entwicklungen und Veränderungen, die mit dem Internet selbst einhergehen. Im Anfangsstadium dient die HTML-Technologie lediglich der einfachen Darstellung von Seiten. Möchte man Wartungs- und Aktualisierungsfunktionen implementieren, stößt man direkt auf große Probleme. Der Artikel analysiert und erfasst schrittweise den zukünftigen Entwicklungsweg des Internets von Web 1.0, Web 2.0, Web 3.0 bis hin zu Web 4.0. Web1.0 zeichnet sich durch grundlegende Bearbeitung aus. Nachdem der Website-Editor Bearbeitungs- und Verarbeitungsvorgänge durchgeführt hat, stellt die Website den Benutzern entsprechende Inhalte zur Verfügung und Benutzer können ihr Recht zum Durchsuchen ausüben. Dieser Prozess des Übergangs von der Website zum Benutzer ist ein einseitiges Verhalten. In der Web 1.0-Ära spielten die drei großen Portale Sina, Sohu und NetEase die Rolle der drei Giganten.

Web 2.0, ein Level gegenüber der vorherigen Stufe aktualisiert. Die Interaktion zwischen der Website und ihren Benutzern wurde gestärkt. Der Inhalt der Website kann aus dem stammen, was Benutzer auf der Website bereitstellen. Auf diese Weise können Benutzer besser an der Konstruktion mehrerer Funktionen der Website teilnehmen Durch die wechselseitige Kommunikation zwischen der Website und den Benutzern kann die Beteiligungsbeziehung zwischen Benutzern realisiert werden. Im Gegensatz zu Web 1.0 ist die Interaktivität von Web 2.0 der Schlüssel zu seinem Potenzial. Im Zeitalter des Web 2.0 sind Blog China, Yiyou Dating und Liaison zu herausragenden Vertretern geworden. Benutzer dieser Art von Website verfügen über ein eigenes Datenrepository, das vollständig auf dem Web basiert und der Browser alle Funktionen implementieren kann.

Web3.0, ein neues Konzept von Microsoft, wurde erfolgreich für eine Reihe von Patenten angemeldet. Auf verschiedenen Web 3.0-Websites können Informationen direkt ausgetauscht und interagiert werden. Gleichzeitig können Informationsplattformen von Drittanbietern auch die umfangreichen Informationen verschiedener Websites integrieren und klassifizieren. Mit dem Web 3.0-System können Benutzer auch ihre eigenen Daten im Internet haben. Fortschrittlicher als Web 2.0 ist, dass Benutzer diese Daten auf verschiedenen Websites verwenden können. Die Realisierung von Funktionen basiert vollständig auf dem Web, und verschiedene Vorgänge, die nur von komplexen Systemprogrammen ausgeführt werden können, können einfach über einen Browser ausgeführt werden.

Web 4.0 verbindet, ähnlich wie bei einer Dinnerparty mit mehreren Personen, alle miteinander und integriert die Ressourcen, die jedem gehören. Jeder kann entsprechend seinen eigenen Bedürfnissen aus dem Ressourceneigentümer wählen. Die Plattform spielt eine verbindende Rolle und nicht eine Website. Die Website ist ein Benutzer, der die Vereinbarung umgibt und sich um das Protokoll dreht , kann die Menschheit tatsächlich in das Internetzeitalter eintreten, das aus vielen Websites bestehen muss.

Als die Web-Standards erstmals formuliert wurden, wurde bereits mit der Erforschung der Front-End-Entwicklung begonnen, aber der Fortschritt war sehr langsam. Größere Fortschritte machte die Front-End-Entwicklung erst, nachdem Javascript allmählich zu einer ausgereiften Sprache für die Web-Front-End-Entwicklung wurde. Mit der Anwendung von Web 4.0 und dem Aufkommen von Produkten wie Weibo, Blogs, Webspielen, SNS und Video-Websites haben die Menschen höhere Anforderungen an Webseiten gestellt. Daher müssen Designer während des Entwicklungsprozesses mehr Aspekte berücksichtigen. Derzeit ist die Javascript-Sprache in der Webentwicklung sehr wichtig, und die aktuelle, von Javascript geprägte Web-Frontend-Entwicklung entwickelt sich sehr schnell.

Derzeit ist die Web-Front-End-Entwicklung zu einem heißen Forschungsthema geworden. Um den Benutzerfreundlichkeitsanforderungen verschiedener Websites gerecht zu werden und die Benutzererfahrung von Produkten zu verbessern, haben sich schnell verschiedene „Benutzererfahrungs“-Teams und eine Arbeitsteilung entwickelt Das Entwicklungsteam ist klarer geworden. Beispielsweise entwerfen und entwickeln Interaktionsdesigner, User Experience-Analysten, Front-End-Entwicklungsingenieure und Webdesigner hauptsächlich starke Front-End-Anwendungen.

Für Web-Front-End-Entwickler müssen sie die folgenden Fähigkeiten und Technologien beherrschen: Vertrautheit mit W3C-Standards, ein tiefes Verständnis der Web-Semantik, Leistung und Datentrennung usw.; Verständnis für die Back-End-Entwicklung (C/C++/ PHP/Java usw.), Algorithmen und Datenstrukturen usw.; Vertraut mit Seitenarchitektur und -layout, kompetent in CSS, HTML/XHTML und anderen Webseitenproduktionstechnologien sowie kompetent in Ajax, Javascript und anderen Webentwicklungstechnologien.

Mit der Entwicklung der Technologie wird sich die Front-End-Entwicklungstechnologie weiter verbessern. HTML5, CSS 4.0 und andere Technologien werden zur Mainstream-Technologie der Front-End-Entwicklung werden. Selbst wenn HTML5 Realität wird, werden es weitere Front-End-Entwicklungstechnologien sein Achten Sie bei der Frontend-Entwicklung immer auf die neueste Technologie.

Derzeit ist die Front-End-Entwicklungstechnologie gerade erst ausgereift. Man geht davon aus, dass die Nachfrage nach ihren Talenten in den nächsten Jahren weiter zunehmen wird. Aber wenn eine Nachfrage gesättigt ist, ist die Sättigung der Talentnachfrage auch ein Zeichen für die wahre Reife der Front-End-Entwicklung. In Zukunft werden Front-End-Entwickler einen größeren Entwicklungsraum, größere Herausforderungen und eine höhere Bühne haben, auf der die Menschen ihre Stärke zeigen können. Gleichzeitig müssen wissenschaftliche Forscher ihre eigenen Fähigkeiten weiter verbessern und mehr Produkte entwickeln, die den Bedürfnissen der Benutzer gerecht werden.

(Lernvideo-Sharing: Web-Frontend)

Das obige ist der detaillierte Inhalt vonAus welchen drei Teilen besteht das Web-Frontend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!