Ресурсы

HTML от 0 до 1: Узнайте основы веб-страниц, а затем с помощью агента создать личную домашнюю страницу

Каждый может создать свою собственную страницу с помощью агента: от структуры веб-страницы до создания сайта ИИ В настоящее время каждый может создать свою собственную страницу с помощью агента [...]

3 Август, 202696 прочтений13 минут для чтения
Статьи

Каждый может создать свою собственную страницу с помощью агента: от структуры страницы до создания сайта ИИ

Теперь каждый может создавать свои собственные веб-страницы с помощью агента.

Откройте инструмент программирования искусственного интеллекта (например, Codex, Cursor, Claude Code) и скажите ему: «Помогите мне создать личную домашнюю страницу».Он может создавать файлы, писать код, настраивать стили и запускать предварительный просмотр браузера.Завершить первую версию веб-страницы стало очень просто.

По-настоящему разрыв был преодолен вторым раундом пересмотра.

Человек, который понимает структуру веб-страницы, скажет агенту:

"Проверка относительного пути к папке images".

«Стойка мобильного телефона изменилась на отдельную компоновку».

«Корректируйте только CSS, не изменяйте содержимое HTML».

Такие инструкции ясны и точны, а агент быстро выявляет проблему и исправляет ее.

А те, кто не понимает структуры, обычно могут только сказать:

«Почему фото пропало? »

«Немного выше».

«Как это отличается от того, что было раньше? »

Агент может только догадываться, что изменение становится все больше и больше, и страницы становятся все сложнее контролировать.

Таким образом, традиционные знания HTML, CSS, JavaScript, корневых каталогов, относительных путей, адаптивного дизайна веб-страниц - это основные навыки использования агентов в эпоху ИИ.

Вам не нужно писать сотни строк кода вручную, но вам нужно описывать проблемы, ограничивать изменения и судить, правильно ли конечный результат.

Эта статья состоит из двух частей.

Первая часть - знакомство с веб-проектом с нуля и выполнение простых веб-страниц своими руками.

Вторая часть, войти в реальную битву агента, с желтой панк стиль персональной домашней страницы, полный опыт «поиск ссылок → анализ дизайна → создание веб-страницы → постоянное изменение → браузер принятие».

Во-первых, понимание веб-страниц, сайтов и веб-приложений.

Эти три понятия часто смешиваются.

Можно просто понять:

  • Веб-страница: одна страница;
  • Сайт: книга;
  • Веб-приложения: одна машина.

Сейчас вы создаете веб-страницу.

Позже добавляйте несколько страниц, таких как презентация, блог, контактные данные и т. д., и постепенно он будет развиваться в один сайт.

Во-вторых, проект веб-страницы на самом деле представляет собой совокупность документов.

Веб-проект - это не просто один HTML-файл.

Как правило, это включает:

  • Структура страницы;
  • файлы стилей;
  • интерактивные сценарии;
  • Фотографические ресурсы;
  • Описание проектов.

Его можно понимать как дом:

Корневой каталог проекта - это сам дом, HTML, CSS, JavaScript и изображения размещены в отдельных комнатах.

Общая структура:

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

В том числе:

  • index.html - входная страница;
  • css сохранение стиля;
  • js хранение взаимодействия;
  • images сохранение фотографий;
  • README.md Записывать описание проекта.

Первый шаг для новичка, не нужно спешить писать код.

Сначала создайте:

  • папка проектов;
  • css, js и images;
  • index.html;
  • Ссылка на Readme.md.

Сопоставляя структуру, агент узнает, где следует разместить файл.

Что такое HTML, CSS, JavaScript?

Кнопка на веб-странице, как правило, требует трех файлов:

HTML:

Решите, что будет на странице.

CSS:

Решите, как будет выглядеть страница.

JavaScript:

Решите, что происходит после нажатия.

Можно вспомнить:

HTML - это скелет, CSS - внешний вид, JavaScript - это поведение.

Например:

Хотите изменить текст → найти HTML.

Чтобы изменить цвет, найдите CSS.

Кнопка не реагирует → Проверка JavaScript.

Когда файлы разделены, веб-страницы проще поддерживаются, а агенты проще выявляют проблемы.

Почему index.html важен?

В простых веб-проектах,index.html Как правило, это первая страница, а также входный документ.

Когда пользователь открывает веб-сайт, сервер обычно отдает приоритет поиску:

index.html

Таким образом:

  • Он должен быть размещен в корневой папке проекта;
  • Не меняйте фамилию;
  • В названиях файлов используются нижние буквы.

HTML-страница состоит из двух частей:

head
└── 网页设置

body
└── 用户看到的内容

Head обычно содержит:

  • заголовки страницы;
  • Кодирование символов;
  • адаптация мобильного телефона;
  • CSS и JavaScript адреса.

Тело содержит:

  • заголовки;
  • текст;
  • Фотографии;
  • кнопки;
  • Содержание страницы.

Общие структуры:

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

Эти теги помогают браузерам и поисковым системам понять структуру страницы.

Создайте минимум страницы вручную.

Теперь создать первую страницу, которую можно открыть.

Во-первых, вставьте аватары:

images/avatar.jpg

Затем редактировать 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>

После сохранения, открыть в браузере.

Если вы увидите:

  • заголовки;
  • текст;
  • Фотографии;
  • кнопки;

Описание: HTML успешно выполнен.

Если картинка не открывается, обычно проверяется:

  • Название файла;
  • Большой и малый текст;
  • расширение;
  • Путь.

Например:

images/avatar.jpg

Они должны полностью соответствовать подлинным документам.

CSS дает дизайн веб-страниц.

HTML отвечает за контент, а CSS - за визуальность.

В:

css/style.css

Присоединение:

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;
}

После сохранения обновления:

  • изменение контекста;
  • уменьшение изображения;
  • Кнопка имеет закругленные углы.

CSS можно легко понять:

Найти кого → что изменить → что изменить.

JavaScript делает веб-страницы интерактивными.

Подключение:

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

Затем на:

js/script.js

Присоединение:

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

Обновить страницу, нажмите кнопку.

Если появляется всплывающее окно, это означает, что HTML, CSS, JavaScript успешно подключены.

Путь к файлам - это самое легкое место для ошибок для новичков.

Веб-страница должна знать, где находятся изображения, CSS, JavaScript.

Это и есть путь.

Например:

css/style.css

js/script.js

images/avatar.jpg

Все это относительные пути.

Помните три правила:

То же самое в каталоге:

file.jpg

Следующий уровень:

folder/file.jpg

Верхний уровень:

../file.jpg

Одновременно:

  • Имя файла не может быть неправильным;
  • Большие и малые не ошибаются;
  • Расширение не может быть ошибочным.

Многие «изображения исчезают», «стили не загружены», по сути, это проблемы с путями.

IX. Создание правильного процесса редактирования веб-страниц

Наиболее важные привычки в разработке веб-сайтов:

修改
 ↓
保存
 ↓
刷新
 ↓
验证

Поменяйте только одно место за один раз.

Не надо менять одновременно:

  • HTML;
  • css;
  • JavaScript.

В противном случае возникают проблемы, и трудно судить причину.

Эта привычка относится и к агентам.

После того, как агент изменил код, вам все равно нужно:

Откройте браузер → Проверить эффект → Определить правильность.

X. Вход в агент с ручной страницы

Предыдущие знания не предназначены для того, чтобы сделать вас программистом.

Вам нужно знать всего три вещи:

Во-первых, знакомство с ключевыми словами.

Например:

  • css;
  • путь к файлу;
  • Корневой каталог;
  • Отзывчивость.

Таким образом, вы можете точно сказать агенту, где проблема.

Во-вторых, поддерживайте привычку проверки.

После изменения агента:

Изменить → Проверка браузера → Продолжить оптимизацию.

В-третьих, способность судить.

Раскрытие изображения:

Может быть, это проблема с маршрутом.

Кнопки не реагируют:

Возможно, JavaScript не подключен.

Страница мобильного телефона хаос:

Возможно, это проблема с отзывчивым расположением.

Вам не нужно ремонтировать это лично, но вы знаете, где попросить агента проверить.

Используйте агентов для создания персональной страницы желтого панка.

Теперь вступаем в полномасштабную войну.

Цель:

Создайте личную домашнюю страницу в желтом стиле панк.

Содержимое:

  • Название: Punk
  • Введение: Я использую ИИ, дизайн и контент, чтобы превратить идеи в произведения;
  • Статус: MBA Китайского университета науки и техники, главный дизайнер HerName, исполнительный директор Stanley Business School;
  • Страницы: О мне, Работа, Контактные данные;
  • Изображение: images / punk.jpg

Шаг 1: Найти страницу ссылки.

Не позволяйте агенту начинать писать.

Сначала выберите 1 - 2 ссылки на дизайн.

Внимание:

  • цветные;
  • макет страниц;
  • уровень шрифта;
  • пропорции изображения;
  • Способы динамического эффекта.

Не копируйте:

  • Логотип;
  • Фотографии;
  • копии;
  • исходный код.

Изучают законы дизайна.

Шаг 2: Позвольте агенту анализировать, а не создавать

Первая директива касается только анализа конструкции.

Расскажите агенту:

  • анализ структуры страниц;
  • анализ цвета;
  • анализ шрифтов;
  • кнопки анализа;
  • Анализ изменений в мобильном телефоне;
  • Проектирование ДНК.

Не заставляйте его сразу писать код.

Причины просты:

В неправильном направлении, чем быстрее код написан, тем больше переработки.

Шаг 3: После подтверждения дизайна, позвольте агенту сделать

Требования к изготовлению:

  • Использование нативных HTML, CSS, JavaScript;
  • четкая структура документации;
  • не использовать рамки;
  • использование собственных изображений и контента;
  • сохранять оригинальность;
  • Завершить тестирование на компьютере и мобильном телефоне.

Также требуется агент:

  • Запуск локального предварительного просмотра;
  • проверка 1440×900;
  • Проверка 390×844;
  • кнопки проверки;
  • Проверка фотографий;
  • Проверка ошибок консоли.

Не слушайте агента, который говорит «завершено».

Обязательно посмотрите на результаты браузера.

Как улучшить первую версию?

Первая версия, как правило, не идеальна.

Не говорите при изменении:

«Немного выше».

Такое описание слишком расплывчато.

Следует отметить:

«Остановить структуру и повысить яркость желтого фона».

«Аватары увеличены на 20%, но остаются полными».

"Изменить только CSS, не изменить HTML".

Чем более конкретным является агент, тем легче его точно реализовать.

XIII. Окончательная приемка

Отдать агенту:

Проверка:

  • столовой конца;
  • мобильный телефон;
  • загрузка изображений;
  • загрузка CSS;
  • JavaScript;
  • кнопки функции;
  • прокрутка страниц;
  • Ошибка консоли.

Выявленные проблемы:

Ремонт - повторная проверка.

XIV. Развертывание в строке

В компьютере:

localhost

Посетить можно только сам.

Развертывание - это загрузка проекта на открытый сервер.

Для простых проектов HTML / CSS / JavaScript можно использовать GitHub Pages.

Базовые процессы:

  1. Создание репозитория GitHub;
  2. загрузка проектных документов;
  3. Убедитесь в том, что index.html находится в корневом каталоге;
  4. Открытие страниц;
  5. доступ к открытым веб-сайтам;
  6. Проверьте страницу еще раз.

Проверка перед запуском:

Не загружайте:

  • API Key;
  • личная телефонная связь;
  • домашний адрес;
  • Внутренние данные;
  • Фото не разрешено.

Заключение: будущее веб-разработки - это не написание кода, а описание проблем.

ИИ делает создание веб-страниц проще.

Но действительно определяющий результат - это не то, что вы позволите агенту генерировать код, а:

понимаете ли вы структуру веб-страницы;

Вы можете точно описать проблемы;

Вы знаете, как оценить результаты?

Основные знания HTML, CSS, JavaScript не устарели с появлением ИИ.

Наоборот, они становятся новым языком взаимодействия между людьми и агентами

В будущем разработки веб-сайтов, скорее всего, не будут программистами, которые будут писать код в одиночку, а люди, которые понимают структуру, будут быстро проектировать, реализовывать и итерации с помощью агентов.