Res sour cen

HTML von 0 bis 1: Lernen Sie die Grundlagen der Webseite und erstellen Sie eine persönliche Homepage mit einem Agent

Jeder kann mit einem Agent eine eigene Webseite erstellen: Von der Webseitenstruktur bis zum KI-Sitebuild Jetzt kann jeder mit einem Agent eigene Webseiten erstellen.

3 August, 202695 Lesen13 Minuten Lesen.
Artikel Ver zeich nis

Jeder kann mit einem Agent eine eigene Webseite erstellen: Von der Webseitenstruktur bis hin zu KI-Sitebuild.

Jeder kann jetzt seine eigene Webseite mit einem Agent erstellen.

Öffnen Sie ein KI-Programmierungstool (z. B. Codex, Cursor, Claude Code) und sagen Sie ihm: "Erstellen Sie mir eine persönliche Homepage." Es kann Dateien erstellen, Code schreiben, Stile anpassen und dann eine Browservorschau starten. Die erste Version der Webseite ist sehr einfach geworden.

Was die Lücke wirklich schließt, ist die zweite Runde der Änderung.

Wer die Struktur der Webseite kennt, sagt dem Agent:

"Prüf den relativen Pfad des Ordners images."

„Handys wechseln in ein einzelnes Layout."

„Nur CSS anpassen, nicht HTML-Inhalte ändern."

Diese Anweisungen sind klar und präzise, und der Agent kann das Problem schnell lokalisieren und Änderungen vornehmen.

Und wer die Struktur nicht kennt, kann normalerweise nur sagen:

„Warum sind die Bilder weg?"

» Noch höher. «

„Warum ist das anders als vorhin?"

Der Agent kann nur ständig raten, der Umfang der Änderungen wird größer und die Seite wird immer schwieriger zu kontrollieren.

Also, HTML, CSS, JavaScript, Stammverzeichnis, relativen Pfad, Responsive Design diese scheinbar traditionellen Webseiten Kenntnisse sind im Zeitalter der KI zu den Kernkompetenzen der Verwendung von Agenten geworden.

Sie müssen nicht Hunderte von Zeilen von Code schreiben, aber Sie müssen die Konzepte verwenden, um das Problem zu beschreiben, den Umfang der Änderungen zu begrenzen und zu beurteilen, ob das Endergebnis korrekt ist.

Dieser Artikel ist in zwei Teile unterteilt:

Der erste Teil, um das Web-Projekt von Null zu verstehen und eine einfache Web-Seite mit eigenen Händen zu erstellen.

Der zweite Teil, gehen Sie in den tatsächlichen Kampf des Agenten, mit einer gelben Punk-Stil - persönlichen Homepage, vollständige Erfahrung des gesamten Prozesses von "Suche nach Referenzen → Analyse des Designs → Erstellung von Webseiten → kontinuierliche Änderung → Browser-Akzeptanz".

Verstehen Sie zuerst Webseiten, Websites und Webanwendungen

Diese drei Begriffe werden häufig verwechselt.

Es kann einfach verstanden werden:

  • Webseite: eine Seite Papier;
  • Webseite: ein Buch;
  • Webanwendung: Eine Maschine.

Sie erstellen jetzt eine Webseite.

Später fügen Sie mehrere Seiten wie Werkspräsentation, Blog, Kontaktinformationen hinzu, und es wird sich allmählich zu einer Website entwickeln.

Das Web-Projekt ist eigentlich eine Dokumentstruktur.

Ein Web-Projekt besteht nicht nur aus einer HTML-Datei.

In der Regel enthalten:

  • Struktur der Seite;
  • Form der Dokumentation;
  • interaktives Skript;
  • Foto-Ressourcen;
  • Projekt erklärt.

Es kann als ein Haus verstanden werden:

Das Projekt-Wurzelverzeichnis ist das Haus selbst, HTML, CSS, JavaScript und Bilder sind in verschiedenen Räumen.

Eine gemeinsame Struktur:

my-first-site/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── avatar.jpg
└── README.md

Dazu gehören:

  • index.html Eintrittsseite;
  • css Aufbewahrungsart;
  • js Interaktive Aufbewahrung;
  • images Aufbewahrung von Fotos;
  • README.md Erläuterung des Projektes.

Der erste Schritt ist, dass man sich nicht in Eile mit dem Schreiben von Code befassen muss.

Zuerst erstellt:

  • Ein Projekt-Dokument;
  • css, js und images;
  • ein index.html;
  • Ein README.MD.

Wenn Sie die Strukturen korrigieren, dann weiß der Agent, wo die Dateien platziert werden sollen.

Was sind HTML, CSS und JavaScript?

Für einen Schaltflächen in einer Webseite sind in der Regel drei Dokumente erforderlich:

HTML:

Entscheiden Sie, was die Seite enthält.

CSS:

Entscheiden Sie, wie die Seite aussehen soll.

JavaScript:

Entscheiden, was nach dem Klick passiert.

Erinnern kann man sich:

HTML ist das Skelett, CSS ist das Aussehen und JavaScript ist das Verhalten.

Zum Beispiel,

Ich möchte den Text ändern → Suche nach HTML.

Ich möchte die Farbe ändern → Suche nach CSS.

Die Schaltfläche reagiert nicht → Überprüfen Sie JavaScript

Wenn die Dateien getrennt sind, ist die Wartung der Webseite einfacher und der Agent kann Probleme leichter lokalisieren.

Warum ist index.html wichtig?

In einem einfachen Web-Projekt,index.html In der Regel ist es die Startseite und auch das Eintrittsdokument.

Wenn ein Benutzer eine Website öffnet, gibt der Server in der Regel Priorität:

index.html

Folglich:

  • Es sollte in der Projekt-Root - Verzeichnis;
  • Nicht ändern Sie Ihren Namen;
  • Der Name des Dokuments verwendet englische Kleinschrift.

Eine HTML-Seite besteht aus zwei Teilen:

head
└── 网页设置

body
└── 用户看到的内容

Head enthält in der Regel:

  • Titel der Seite;
  • Zeichen-Codierung;
  • Anpassung des Mobiltelefons;
  • CSS und JavaScript Adressen.

Body enthält:

  • Titel;
  • Text;
  • Bilder;
  • Knöpfe;
  • Inhalte der Seite.

Gemeinsame Strukturen:

body
├── header
├── main
│   ├── section
│   ├── section
│   └── section
└── footer

Diese Tags helfen Browsern und Suchmaschinen, die Struktur der Seite zu verstehen.

5. Erstellen Sie eine kleine Website.

Jetzt erstellen Sie die erste Seite, die Sie wirklich öffnen können.

Zunächst einmal ein Bild einfügen:

images/avatar.jpg

und dann editieren. index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>

<body>

<h1>你好，这是我的第一个网页。</h1>

<p>我正在学习网页是怎样组成的。</p>

<img src="images/avatar.jpg">

<button id="hello-button">
和我打个招呼
</button>

</body>
</html>

Nach dem Speichern öffnen Sie es mit dem Browser.

Wenn Sie sehen:

  • Titel;
  • Text;
  • Bilder;
  • Knöpfe;

Das HTML wurde erfolgreich ausgeführt.

Wenn sich das Bild nicht öffnet, überprüfen Sie in der Regel:

  • Name des Dokuments;
  • Kleines Schreiben;
  • Erweiterung;
  • Weg.

Zum Beispiel,

images/avatar.jpg

Es muss mit den authentischen Dokumenten übereinstimmen.

CSS verleiht Webseiten Design.

HTML ist für den Inhalt verantwortlich, CSS für die Visualisierung.

in:

css/style.css

Beitritt:

body {
  margin:0;
  padding:48px;
  background:#f5f5f5;
  font-family:Arial,sans-serif;
}

img {
  width:240px;
  border-radius:24px;
}

button {
  padding:12px 20px;
  border-radius:999px;
}

Nach der Erneuerung:

  • Veränderung des Hintergrundes;
  • Bilder verringern;
  • Der Knopf erscheint mit runden Ecken.

CSS lässt sich leicht verstehen:

Finden Sie heraus, wer → was zu ändern → was zu ändern.

Javascript macht Webseiten interaktiv

Verbinden:

<script src="js/script.js"></script>

Und dann in:

js/script.js

Beitritt:

document
.querySelector("#hello-button")
.addEventListener("click",()=>{
 alert("你好呀！");
});

Aktualisieren Sie die Seite, klicken Sie auf den Button.

Wenn ein Popup-Fenster erscheint, ist die Verbindung zwischen HTML, CSS und JavaScript erfolgreich.

8. Der Pfad der Dateien ist der am leichtesten Fehler für Neueinsteiger

Webseiten müssen wissen, wo Bilder, CSS, JavaScript sind.

Das ist der Weg.

Zum Beispiel,

css/style.css

js/script.js

images/avatar.jpg

Es handelt sich dabei um relative Wege.

Denken Sie an drei Regeln:

Der gleiche Katalog:

file.jpg

Nächste Etage:

folder/file.jpg

Oberer Stock:

../file.jpg

Gleichzeitig:

  • Der Name des Dokuments kann nicht falsch sein;
  • Kleines Schreiben kann nicht falsch sein;
  • Die Erweiterung kann nicht falsch sein.

Viele "Bilder verschwinden" "Stile nicht geladen", im Wesentlichen sind Pfad-Probleme.

9. Richtige Verfahren für die Änderung der Webseite

Die wichtigsten Gewohnheiten beim Webentwickeln:

修改
 ↓
保存
 ↓
刷新
 ↓
验证

Nur einen Ort zu einem Zeitpunkt wechseln.

Nicht gleichzeitig ändern:

  • HTML,
  • CSS;
  • JavaScript.

Ansonsten gibt es Probleme, die Ursache ist schwer zu beurteilen.

Diese Gewohnheit gilt auch für den Agenten.

Nachdem der Agent den Code geändert hat, benötigen Sie immer noch:

Öffnen Sie den Browser → Überprüfen Sie den Effekt → Beurteilen Sie, ob es richtig ist.

10. Von der Handschrift Seite zum Agent-Standort gelangen

Das vorherige Wissen ist nicht dazu gedacht, dass Sie Programmierer werden.

Sie müssen nur drei Dinge beherrschen:

Erstens, die Schlüsselwörter zu kennen.

Zum Beispiel,

  • CSS;
  • Pfad der Dokumente;
  • Verzeichnis der Wurzel;
  • Reaktionsform.

So können Sie dem Agenten genau sagen, wo das Problem ist.

Zweitens: Bewahren Sie die Gewohnheit der Verifizierung.

Nach dem Wechsel des Agents:

Ändern → Browser überprüfen → Optimierung fortfahren.

Drittens: Beurteilungsfähigkeit.

Bild gespalten:

Vielleicht ist es ein Wegproblem.

Tasten reagieren nicht:

Javascript ist möglicherweise nicht verbunden.

Mobilfunkseite verwirrt:

Vielleicht ist es ein reagierendes Layout Problem.

Sie müssen es nicht selbst reparieren, aber Sie wissen, wo Sie den Agenten überprüfen sollten.

11. Erstellen Sie eine gelbe Punk-Homepage mit einem Agent

Jetzt geht es in den vollständigen Kampf.

Ziel:

Erstellen Sie eine gelbe Punk-Stil - persönliche Homepage.

Inhalte:

  • Titel: Punk
  • Einführung: Ich verwende KI, Design und Inhalte, um Ideen in Werke zu verwandeln;
  • Status: MBA der China University of Science and Technology, Chefdesigner von HerName, Executive Dean der Stanley Business School;
  • Seite: Über mich, Arbeiten, Kontaktinformationen;
  • Bild: images/punk.jpg.

Erster Schritt: Suche nach einer Referenzseite.

Lassen Sie den Agent nicht direkt schreiben.

Zuerst finden Sie 1 - 2 Referenzen.

Sorge:

  • Farben;
  • Seite Layout;
  • Schriftstufen;
  • Bildverhältnisse;
  • Wirkungsmittel.

Kopieren Sie nicht:

  • Logo;
  • Bilder;
  • Text;
  • Quellcode.

Das Lernen ist die Gestaltungsgesetze.

Schritt 2: Lassen Sie den Agent analysieren, nicht erstellen

Die erste Anweisung betrifft nur die Designanalyse.

Sagt dem Agenten:

  • Analyse der Seitenstruktur;
  • Analyse der Farbe;
  • Analyse von Schriften;
  • Analyse-Button;
  • Analyse von Änderungen am Telefon;
  • Zusammenfassung der DNA.

Lassen Sie ihn nicht sofort Code schreiben.

Der Grund ist ganz einfach:

Je schneller der Code geschrieben wird, desto mehr Nacharbeit.

Schritt 3: Nach der Bestätigung des Designs lassen Sie den Agent erstellen

Herstellungsanforderung:

  • native HTML, CSS, JavaScript;
  • Klarheit der Dokumentstruktur;
  • keine Verwendung des Rahmens;
  • die Verwendung eigener Bilder und Inhalte;
  • Originalität zu bewahren;
  • Abschluss der Computer - und Mobilfunk-Test.

Zudem verlangt der Agent:

  • Öffnen Sie die lokale Vorschau;
  • Inspektion 1440 × 900;
  • Prüfen Sie 390 × 844;
  • Überprüfen Sie den Knopf;
  • Überprüfen von Bildern;
  • Überprüfen Sie den Fehler der Konsole.

Hören Sie nicht nur auf, dass der Agent "fertig" sagt.

Schauen Sie sich die Browser-Ergebnisse an.

12. Wie man die erste Version optimiert

Die erste Version ist in der Regel nicht perfekt.

Beim Wechsel sagen Sie nicht:

„Ein bisschen höher."

Diese Beschreibung ist zu vage.

Man sollte sagen:

„Halte die Struktur unverändert und erhöhe die Helligkeit des gelben Hintergrunds."

„Avatar um 20% vergrößert, aber vollständig angezeigt."

„Nur CSS ändern, nicht HTML ändern."

Je konkreter der Agent ist, desto leichter ist es, ihn genau auszuführen.

13. Endgültige Übernahme

Übergeben an den Agenten:

Insp ek tion :

  • Tisch am Ende;
  • Mobiltelefonen;
  • Bilder geladen;
  • CSS geladen;
  • Javascript;
  • Tastenfunktion;
  • Seiten rollen;
  • Kontrollfehler.

Problem entdeckt:

Reparatur, erneut überprüfen.

14. Einführung in die Linie

Auf dem Computer:

localhost

Nur selber kann man besuchen.

Die Bereitstellung bedeutet, das Projekt auf einen öffentlichen Server hochzuladen.

Für einfache HTML / CSS / JavaScript-Projekte können Sie GitHub Pages verwenden.

Grundlagenprozess:

  1. Erstellen eines GitHub-Repositories;
  2. Hochladen von Projektdokumenten;
  3. Bestätigen Sie, dass index.html im Stammverzeichnis ist;
  4. Öffnen von Pages;
  5. Zugang zu öffentlichen Webseiten;
  6. Überprüfen Sie die Webseite noch einmal.

Überprüfen Sie vor dem Start:

nicht hochladen:

  • API-Schlüssel;
  • Privattelefonie;
  • Hausadresse;
  • internen Informationen;
  • Bilder sind nicht autorisiert.

In der Zukunft wird die Web-Entwicklung nicht Code schreiben, sondern Probleme beschreiben.

AI macht das Erstellen einer Webseite einfach.

Aber es entscheidet nicht, ob Sie den Agent Code generieren lassen, sondern:

Sie verstehen die Struktur der Website;

Kannst du das Problem genau beschreiben?

Sie wissen, wie Sie die Ergebnisse überprüfen können.

HTML, CSS, JavaScript diese Grundkenntnisse werden nicht durch das Aufkommen von KI überholt.

Stattdessen werden sie zu einer neuen Sprache für die Zusammenarbeit zwischen Menschen und Agenten.

Die zukünftige Website-Entwicklung ist wahrscheinlich nicht der Programmierer, der alleine Code schreibt, sondern jemand, der die Struktur versteht, der schnell Design, Implementierung und Iteration durch Agenten durchführt.