🔖 Справочник базовых тегов и CSS-свойств

⚡ Краткий справочник

  • <html>, <head>, <body> - каркас страницы.
  • <h1>, <p>, <ul>, <a> - базовые элементы контента.
  • display, margin, padding, color - первые CSS-свойства для оформления.

Базовый синтаксис

HTML-элементы описывают структуру, CSS-правила описывают внешний вид. Для старта достаточно запомнить, что HTML обычно идёт через теги, а CSS - через селектор и блок свойств.

Файл: subjects/html-css/course/lessons/01-history-html-css/commands.html

<!-- Базовый HTML-шаблон страницы -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Заголовок</h1>
  <p>Абзац текста.</p>
</body>
</html>

Файл: subjects/html-css/course/lessons/01-history-html-css/commands.html

/* Базовые CSS-правила */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 24px;
}

h1 {
  color: #1f3b73;
}

p {
  line-height: 1.6;
}

Теги, которые нужны в первом уроке

Тег Зачем нужен Когда использовать
<h1>...<h6> Заголовки разного уровня Для структуры страницы и разделов
<p> Абзац текста Когда нужен обычный текстовый блок
<ul>, <li> Список Когда нужно перечисление пунктов
<a> Ссылка Для навигации и переходов
<meta charset="UTF-8"> Кодировка страницы Почти всегда первой строкой в <head>

CSS-свойства, которые пригодятся сразу

Свойство Что делает Пример значения
display Задаёт тип отображения элемента block, inline, flex
margin Внешние отступы 0 auto, 24px
padding Внутренние отступы 16px
color Цвет текста #222
max-width Ограничивает ширину блока 720px

Как читать этот справочник

Если видите HTML-тег - думайте о смысле. Если видите CSS-свойство - думайте о внешнем виде. На практике это помогает не перепутать, что нужно менять: структуру страницы или её оформление.