Структура веб-страницы

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

Заголовок вкладки: Структура веб-страницы...

Подключены: Стили и шрифты.

Это пример интерактивной веб-страницы. Наведите мышку на любой элемент, чтобы узнать, как он устроен.

Форма обратной связи

Ваш Email:

<!DOCTYPE html> <!-- Объявляет тип документа --> <html lang="ru"> <!-- Корневой элемент, lang="ru" указывает язык --> <head> <!-- Невидимая мета-информация --> <meta charset="UTF-8"> <!-- Кодировка символов --> <title>Структура веб-страницы</title> <!-- Заголовок вкладки -->
</head> <body> <!-- Видимое содержимое --> <header> <!-- "Шапка" сайта --> <h1>Добро пожаловать!</h1>
  </header> <main> <!-- Основной контент --> <p>Это пример...</p> <div> <!-- Контейнер --> <h3>Форма...</h3> <label for="email-input">...</label> <input type="email" id="email-input"> <button>Отправить</button>
    </div>
  </main> <footer> <!-- "Подвал" сайта --> <p>© 2025...</p>
  </footer>
</body> </html>

/* CSS отвечает за внешний вид */ body {
  font-family: 'Inter', sans-serif;
  background-color: #f0f2f5;
} header {
  background-color: #f3f4f6;
} h1 {
  font-size: 1.875rem;
  font-weight: 700;
} #submit-btn {
  background-color: #3b82f6;
  color: white;
} footer {
  text-align: center;
}

/* JavaScript добавляет интерактивность */ // 1. Находим кнопку в документе по её ID const button = document.getElementById('submit-btn'); // 2. Добавляем "слушатель" события клика button.addEventListener('click', function() {
  // 3. Действие при клике: alert('Форма отправлена (демонстрация)!');
});

Объяснение

Наведите курсор на элемент слева, и здесь появится подробное описание его назначения и кода.