Heim > Web-Frontend > js-Tutorial > Wie HTML, CSS und JavaScript funktionieren

Wie HTML, CSS und JavaScript funktionieren

王林
Freigeben: 2024-07-30 07:18:23
Original
377 Leute haben es durchsucht

Was ist HTML?

HTML ist die Abkürzung für HyperText Markup Language. Ich weiß, es ist ein Scherz, aber im Grunde verwenden wir HTML, um die Struktur oder Bausteine ​​unserer Webseiten zu definieren.

Was ist CSS?

CSS ist die Abkürzung für Cascading Style Sheets. Wir verwenden es, um Webseiten zu gestalten und sie schön zu gestalten.

Was ist JavaScript?

JavaScript wird verwendet, um Webseiten Funktionalität hinzuzufügen. Lassen Sie mich Ihnen eine Analogie geben.

Denken Sie an ein Gebäude.

How HTML, CSS, and JavaScript Work

Ein Gebäude in der realen Welt ist wie eine Webseite im Internet. Es hat ein Skelett oder eine Struktur – den Rahmen und das Fundament des Gebäudes (HTML).

Es kann auch hübsche Wände, Fenster und Fliesen haben, die es abrunden und schön aussehen lassen (CSS).

How HTML, CSS, and JavaScript Work

Und es kann bestimmte Funktionen haben, z. B. ein Zuhause, ein Krankenhaus oder ein Supermarkt (JavaScript).

How HTML, CSS, and JavaScript Work

Wenn wir zum Beispiel den Aufzugknopf drücken, holt er uns ab. JavaScript würde dies in unserer Analogie ermöglichen.

Ein echtes Beispiel

Hier ist ein echtes Beispiel. Nehmen wir an, Sie möchten eine Website wie Twitter erstellen. Für das Profil möchten Sie ein Layout wie dieses haben:

How HTML, CSS, and JavaScript Work

Zuerst verwenden wir HTML, um die Bausteine ​​dieses Layouts zu definieren. Was sind das für Bausteine ​​hier?

  1. Ein Bild.
  2. Ein Text, der den Twitter-Handle des Benutzers angibt (z. B. @KarlgustaAnnoh).
  3. Ein weiterer Textblock, der die Nachricht enthält (Codieren durch Geschichten lehren...).
  4. Schaltflächen/Symbole zum Bearbeiten des Profils, des Standorts, des Links und des Datums.
  5. Follower-Anzahl.

Wir verwenden HTML, um diese Bausteine ​​zu unserer Webseite hinzuzufügen.

Dann verwenden wir CSS, um es optisch ansprechend zu gestalten. Mit CSS können wir beispielsweise den Text fett formatieren (wie den Namen) und unser Bild rund machen. Wir können auch die Farbe der Orts-, Link- und Datumssymbole ändern und ihr Aussehen definieren, wenn wir mit der Maus darüber fahren.

Bei CSS dreht sich also alles um die visuellen Effekte. Mit CSS können wir auch schöne Animationen erstellen.

Heutzutage sind die meisten Webseiten interaktiv. Sie reagieren auf unsere Aktionen wie Klicken und Scrollen. Hier kommt JavaScript ins Spiel. Mit JavaScript können wir unseren Webseiten Funktionalität oder Verhalten hinzufügen. Wir können zum Beispiel auf eine Schaltfläche klicken, um einer Person zu folgen.

JavaScript ist also eine Programmiersprache, während HTML (Markup Language) und CSS (Styling Language) technisch gesehen keine sind. Das bedeutet, dass wir sie nicht verwenden können, um Computern zu sagen, was sie tun sollen. Wir verwenden sie, um die Bausteine ​​unserer Webseiten zu definieren und sie zu gestalten.

Jede Webseite, die Sie im Internet gesehen haben, ist mit diesen drei Sprachen erstellt. Je besser Sie sie und ihre Funktionen lernen und verstehen, desto besser werden Sie in der Frontend-Entwicklung sein.

Bis zum nächsten Mal!

P.S. Das ist meine neue Serie. Wenn Sie neu im Programmieren sind und Hilfe beim Erlernen des Programmierens benötigen, schauen Sie sich The 2 Hour Web Developer an.

Das obige ist der detaillierte Inhalt vonWie HTML, CSS und JavaScript funktionieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage