Перейти к основному содержимому

HTML, CSS и JavaScript — три слоя веб-страницы

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику

Каждая страница в браузере собирается из трёх слоёв. Их удобно хранить в отдельных файлах и не смешивать задачи.

СлойТехнологияВопрос
Структура и смыслHTMLЧто на странице — заголовок, абзац, форма, ссылка
ОформлениеCSSКак это выглядит — цвет, шрифт, отступы, сетка
ПоведениеJavaScriptЧто происходит при действии — клик, отправка формы, запрос к серверу

Аналогия с тортом: HTML — корж, CSS — крем и украшение, JavaScript — механизм, который реагирует на нажатие кнопки.

Разделение ответственности — когда структура в HTML, вид в CSS, логика в JS. Так проще править дизайн, чинить баги и подключать новые страницы. Один и тот же CSS можно применить к разным HTML-шаблонам.

Подробнее про путь от файла до экрана — Как работают сайты.

HTML — каркас страницы​

HTML (HyperText Markup Language, язык разметки гипертекста) описывает содержимое и иерархию страницы. Это язык разметки, а не полноценное программирование: вы говорите браузеру, где заголовок, где абзац, где ссылка.

Тег — команда в угловых скобках, например <p>, <a>, <button>. Большинство тегов парные: открывающий и закрывающий, между ними — текст или вложенные элементы.

Минимальный документ:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Добро пожаловать</h1>
    <p>Это абзац с <a href="/about">ссылкой</a>.</p>
    <script src="app.js"></script>
  </body>
</html>

Части документа:

  • <!DOCTYPE html> — подсказка браузеру, что это современный HTML5;
  • <head> — служебная информация (кодировка, заголовок вкладки, подключение CSS);
  • <body> — всё, что видит пользователь;
  • <link rel="stylesheet"> — подключение файла CSS;
  • <script src="..."> — подключение файла JavaScript (обычно в конце body, чтобы HTML успел загрузиться).

Дальше по HTML — раздел 3.09, первая страница. Готовые блоки — Lab / HTML+CSS, страницы целиком / 1153.

Семантическая разметка​

Семантика — выбор тега по смыслу элемента, а не по тому, как он выглядит на экране. Внешний вид всё равно задаёт CSS.

Плохой вариантЛучший вариантПочему
<div class="heading"><h1> … <h6>Скринридер и поисковики понимают иерархию заголовков
<div onclick="..."><button>Кнопка доступна с клавиатуры, у неё есть фокус
<b> вместо заголовка<strong> или <h2><b> только визуально выделяет; заголовок несёт структуру

Полезные семантические теги: <header>, <nav>, <main>, <article>, <footer>, <section>.

HTML и текстовый редактор​

Word и похожие программы сохраняют готовый вид — шрифт, отступы, цвет прямо в файле. HTML сохраняет роли блоков. Жирный текст в Word и тег <strong> решают разные задачи: в HTML вы описываете смысл ("важный фрагмент"), а жирность задаёт CSS при необходимости.

Копировать из Word в HTML напрямую нельзя — в разметку попадёт лишний мусор. Пишите в редакторе кода или вставляйте чистый текст.

CSS — оформление страницы​

CSS (Cascading Style Sheets, каскадные таблицы стилей) связывает селектор (какие элементы красить) с правилами (цвет, размер, расположение).

h1 {
  color: #1a365d;
  font-family: system-ui, sans-serif;
  margin-bottom: 1rem;
}

.card {
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

Селектор h1 применяет стили ко всем заголовкам первого уровня. Класс .card — к элементам с class="card".

Обзор — CSS intro, основы.

Каскад и специфичность​

На один элемент часто действуют несколько правил CSS. Браузер выбирает итог по каскаду:

  • важность (!important — использовать редко);
  • специфичность селектора (id сильнее класса, класс сильнее тега);
  • порядок в файле (ниже — перекрывает выше).

Стили в отдельном .css-файле проще переиспользовать и менять тему, чем атрибут style="..." на каждом теге.

Блочная модель​

Каждый элемент на странице — прямоугольник из четырёх зон:

  • content — текст и картинка внутри;
  • padding — внутренний отступ от текста до границы;
  • border — рамка;
  • margin — внешний отступ до соседних элементов.
┌──────── margin ────────┐
│ ┌──── border ────────┐ │
│ │ ┌── padding ─────┐ │ │
│ │ │   content    │ │ │
│ │ └──────────────┘ │ │
│ └──────────────────┘ │
└──────────────────────┘

Свойство box-sizing: border-box включает padding и border в заданную width. Без него блок с width: 100% и padding часто вылезает за край родителя.

Сетка страницы — Flexbox и CSS Grid. Адаптив под телефон — медиазапросы. Готовые эффекты — Lab / анимации.

JavaScript — логика в браузере​

JavaScript (JS) — язык программирования, который выполняется в браузере (и на сервере в Node.js, но здесь речь о фронте).

Браузер строит из HTML дерево DOM (Document Object Model, объектная модель документа). JavaScript читает и меняет узлы этого дерева — текст, классы, атрибуты — и реагирует на события (клик, ввод, отправка формы).

const button = document.querySelector("#greet");
button.addEventListener("click", () => {
  const name = document.querySelector("#name").value;
  document.querySelector("#output").textContent = `Привет, ${name}!`;
});

Здесь:

  • document.querySelector находит элемент по CSS-селектору;
  • addEventListener("click", ...) подписывается на клик;
  • textContent меняет текст внутри узла.

Типичные задачи JS на странице:

  • показать или скрыть блок меню;
  • проверить email в форме до отправки на сервер;
  • запросить данные с API через fetch — глава 1, Lab / fetch;
  • обновить список задач без перезагрузки всей страницы (основа SPA).

Статическую разметку (заголовки, формы, ссылки) лучше описывать в HTML. JavaScript дополняет её интерактивом. Если весь интерфейс рисуется только скриптом, страдают доступность и индексация в поиске — SEO.

Введение в язык — JavaScript intro.

Как слои работают вместе​

  1. Сервер или диск отдаёт файл HTML.
  2. Браузер разбирает разметку, строит DOM, запрашивает CSS и JS по ссылкам из <head> и <body>.
  3. CSS накладывается на узлы DOM — появляется визуальный макет.
  4. JavaScript выполняется, подписывается на события, при необходимости меняет DOM.
  5. При fetch("/api/...") скрипт получает JSON и подставляет данные в уже существующие блоки страницы.

Отладка по слоям в DevTools:

  • Elements — дерево DOM и разметка;
  • Styles — какие правила CSS применились и откуда;
  • Console — ошибки и вывод JavaScript;
  • Network — загрузка файлов и запросы к API.

Минимальный проект из трёх файлов​

my-site/
  index.html    — структура
  styles.css    — оформление
  app.js        — поведение

В index.html подключите CSS в <head>, скрипт — перед закрывающим </body>. Для локального просмотра с API поднимите простой HTTP-сервер (расширение Live Server в VS Code, npx serve) — запуск приложений.

Частые ошибки новичка​

ОшибкаЧто происходитКуда смотреть
Вёрстка целиком на <table>Таблицы предназначены для табличных данных, не для сетки страницыFlexbox и Grid
style="..." на каждом тегеСтили нельзя переиспользовать и менять централизованноКлассы в .css
document.write для UIЛомает порядок загрузки и индексациюDOM API, textContent, innerHTML осторожно
Вставка из WordЛишние теги и стили в HTMLЧистый текст, редактор кода
Один файл app.js на тысячи строкСложно искать багиМодули import/export, сборщик — 4.04

Когда подключают фреймворк​

На больших проектах HTML превращают в компоненты (React JSX, Vue SFC), CSS — в модули или utility-классы (Tailwind), JavaScript группируют по экранам. Схема "три слоя" остаётся — меняется только организация файлов.

Карта стека, React, Node, базы — Как делают веб-приложения.

Практика на один вечер​

  1. Создайте index.html с заголовком, абзацем и кнопкой.
  2. В styles.css задайте шрифт, фон и вид кнопки.
  3. В app.js по клику меняйте текст абзаца.
  4. Откройте DevTools и посмотрите DOM и применённые стили.

Дальше — HTTP и API, этапы проекта или основы дизайна.

Содержание