Heim > Artikel > Web-Frontend > Was sind die drei Grundlagen des Frontends?

Was sind die drei Grundlagen des Frontends?

青灯夜游Original: 2021-11-01 15:50:034093Durchsuche

Die drei Grundlagen des Frontends beziehen sich auf: 1. Hypertext Markup Language HTML, eine Sprache zum Erstellen von Webseiten; 2. Cascading Style Sheet CSS, eine Struktursprache zum Definieren von Stilen; Javascript ist eine interpretierte Skriptsprache, die verwendet wird, um eine dynamische interaktive Beziehung zwischen Benutzern und Webseiten in Echtzeit herzustellen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3&&HTML5&&Javascript Version 1.8.5, Dell G3-Computer.

Heutzutage übersteigt die Popularität des Front-Ends die Vorstellungskraft der Entwickler. Es handelt sich offensichtlich nur um eine einfache Entwicklung einer Seite und ist nicht so beliebt, wie es auf dem Markt behauptet wird. Tatsächlich sind die Linien wie Berge getrennt, wenn wir vor der Tür stehen, können wir die tatsächliche Situation hinter der Tür nicht verstehen.

Der Grund, warum das Frontend immer wichtiger wird, ist tatsächlich, dass die Benutzererfahrung auf ein sehr hohes Niveau gehoben wurde. Dies ist Gang Leader Qiao zu verdanken, dass wir in der Welt von Symbian möglicherweise immer noch Probleme haben .

Der Front-End-Bereich, der direkt mit Benutzern interagiert, hat atemberaubende Höhen erreicht. Dennoch hat sich das Fundament des Front-Ends, also die Kerntechnologie des Front-Ends, nicht geändert.

Die Sprachen, aus denen die tägliche Frontend-Entwicklung besteht, sind immer noch HTML, CSS und Javascript.

1. HTML – Hyper Text Markup Language

HTML (Hyper Text Markup Language): Es handelt sich um eine Sprache zum Erstellen von Webseiten (Tag), um Bilder, Töne, Bilder und Text zu kombinieren usw. Der Inhalt wird angezeigt. Es legt seine eigenen Sprachregeln fest und wird verwendet, um bedeutungsreichere Elemente als „Text“ auszudrücken.

HTML5: Der neueste Standard für HTML, formuliert und veröffentlicht im Jahr 2014. HTML5 fügt einige neue semantische Tags hinzu, um Video, Audio, Canvas/Webgl und andere Funktionen zu unterstützen.

HTML-Basis-Tags: Kopf, Körper, HTML, Titel (h1-h7), Absatz (p), Link (a), Bild (image), Tabelle (table), Liste (ul, ol) usw.

Die Grundstruktur eines HTML-Dokuments:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<p>Hello</p>
<a href="http://www.baidu.com"></a>
</body>
</html>

2. CSS-Cascading Style Sheet

Obwohl es schon seit vielen Jahren entwickelt wurde, hat es in dieser Sprache eigentlich immer noch kein Mitspracherecht Lösen Sie das Problem der Aufblähung von HTML-Tags (Tag-Elementen) und das Sprachdesign ist wirklich großartig. Der Kern von CSS ist die Definition und Auswahl des Dokumentflusses. Durch die Neudefinition von HTML-Dokumenten wird das Konzept des Dokumentflusses eingeführt, und die ursprünglichen aufgeblähten Tags können verwendet werden, um den Stil des Seiteninhalts durch flexible Selektoren zu ändern. Der Schwerpunkt muss auf der Definition des Dokumentenflusses, dem Elementbox-Modell sowie der Zerstörung und Änderung des Dokumentenflusses liegen.

CSS (Cascading Style Sheets): Cascading Style Sheets, eine Struktursprache, die Stile wie Schriftarten, Farben und Positionierung definiert und beschreibt, wie Informationen auf einer Webseite formatiert und angezeigt werden.

CSS3: der neueste CSS-Standard. CSS3 fügt neue Funktionen wie Animationen und Selektoren hinzu. Eine wesentliche Änderung in der Entwicklung von CSS3 ist die Entscheidung des W3C, CSS3 in eine Reihe von Modulen aufzuteilen. Es umfasst hauptsächlich Module wie Boxmodell, Listenmodul, Hyperlink-Methode, Sprachmodul, Hintergrund und Rahmen, Texteffekte, mehrspaltiges Layout usw. Die Aufteilung in mehrere kleinere Module ist für die zeitnahe Aktualisierung und Veröffentlichung von Spezifikationen praktischer. Hersteller können sich auch dafür entscheiden, einige CSS3-Modulfunktionen zu unterstützen, um die Förderung von CSS3 zu erleichtern.

CSS-Schreibposition in HTML:

1), in Zeile geschrieben (nicht empfohlen)

<h1 style="color:red">haha</h1>

2), im Style-Tag in HTML geschrieben (nicht empfohlen)

<style>
h1{
color:red
}
</style>

3), Link-Methode (empfohlen)

<link rel="stylesheet" type="text/css" href="style.css">

3. In Javascript eingebettete Skriptsprache

Da Javascript zunächst im Browser ausgeführt wird, wird es oft als eingebettetes Skript bezeichnet, hat jedoch keinen Einfluss darauf, dass Javascript eine leistungsstarke Programmiersprache wird. Diese Sprache implementiert hauptsächlich das Antwortproblem des Benutzerverhaltens, sodass sie auf unterschiedliche Betriebsergebnisse basierend auf Benutzerverhaltensereignissen reagiert. Diese Sprache steht im Mittelpunkt des Frontends, da alle Benutzererfahrungen die Implementierung von Javascript erfordern. Die Sprache wird immer vollständiger und bewegt sich allmählich in Richtung Statik.

1), Bibliothek

Eine Bibliothek ist eine Kapselung für eine bestimmte Funktion, beispielsweise eine Kapselungsimplementierung für Datei-Upload-Szenarien, die als Datei-Upload-Klassenbibliothek bezeichnet wird. Dies ist beispielhaft, aber nicht darauf beschränkt.

2), Framework

Das Framework ist eine gekapselte Implementierung zur Lösung weiterer Probleme. Das jQuery-Framework ist beispielsweise ein Framework zur Erreichung der Javascript-Browser-API-Kompatibilität auf der PC-Seite (Zepto ist für Mobilgeräte) und die MVVM Das Framework dient der schnellen Implementierung der Schnittstellenkapselung durch Kapselung von DOM-Vorgängen, reduziert manuelle DOM-Vorgänge und konzentriert sich auf die Implementierung von Datenstrukturen und Geschäftslogik.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonWas sind die drei Grundlagen des Frontends?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die Javascript-ZufallsmethodeNächster Artikel：So verwenden Sie die Javascript-Zufallsmethode

In Verbindung stehende Artikel

Mehr sehen