Продолжая использование сайта, Вы соглашаетесь c Политикой использования Cookies
Да

Шпаргалка по HTML & CSS

Полное руководство по основам HTML и CSS для начинающих веб-разработчиков

Изучите базовые теги HTML, правила написания CSS и практические советы для создания адаптивных и стильных сайтов.

Всё, что нужно для работы с HTML/CSS — от основ до фишек.
Быстро ищи нужное или изучай последовательно.
  1. Основная структура HTML-документа
  2. Часто используемые HTML-теги
  3. Атрибуты HTML
  4. Семантические теги
  5. Списки и таблицы
  6. Формы и ввод данных
  7. Картинки, видео, аудио
  8. Основы CSS
  9. Селекторы CSS
  10. Блочная модель, отступы, размеры
  11. Flexbox
  12. CSS Grid
  13. CSS-переменные (Custom properties)
  14. Адаптив, медиазапросы
  15. Лучшие практики и советы
  16. Современные фишки CSS
  17. Частые ошибки

1. Основная структура HTML-документа

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    Контент страницы
  </body>
</html>
  • <!DOCTYPE html> — обязательно для современных сайтов (HTML5).
  • <html> — корень, язык страницы.
  • <head> — мета-инфо, заголовок, стили, шрифты и т.п.
  • <body> — сам контент страницы.

2. Часто используемые HTML-теги

ТегЗначение
<h1>...</h1>Заголовок, 1 уровень (на странице только один!)
<h2> – <h6>Подзаголовки
<p>Параграф текста
<a href="">Ссылка
<img src="" alt="">Картинка
<ul>, <ol>, <li>Списки (маркированный, нумерованный, пункт)
<div>Блок-контейнер
<span>Встроенный контейнер
<br>Перенос строки
<hr>Горизонтальная линия
<strong>, <em>Выделение (жирный, курсив)
<section>, <article>, <nav>, <aside>, <footer>Семантические блоки (см. ниже)

3. Атрибуты HTML

  • id — уникальный идентификатор.
  • class — CSS-класс (можно несколько через пробел).
  • style — встроенный стиль (использовать редко).
  • href — адрес для <a>.
  • src — путь к картинке или скрипту.
  • alt — альтернативный текст картинки.
  • target="_blank" — открыть ссылку в новом окне.
  • title — всплывающая подсказка.
  • data-* — кастомные атрибуты для JS (data-id="...").

4. Семантические теги

Для структуры, SEO и доступности:
  • <header> — шапка сайта или секции
  • <nav> — навигация (меню)
  • <main> — основное содержание
  • <section> — раздел (логически связанный)
  • <article> — самостоятельный контент (статья, пост)
  • <aside> — боковая панель (сайдбар, реклама, инфо)
  • <footer> — подвал (низ) сайта или секции
Используй семантические теги для структуры, а не просто <div>!

<main>
  <article>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </article>
  <aside>...</aside>
</main>
    

5. Списки и таблицы

Списки


<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

<ol>
  <li>Первый</li>
  <li>Второй</li>
</ol>
    

Таблицы


<table>
  <tr><th>Имя</th><th>Возраст</th></tr>
  <tr><td>Анна</td><td>25</td></tr>
</table>
    
  • <thead>, <tbody>, <tfoot> — для структуры больших таблиц.
  • Лучше избегать вложенных таблиц — для layout сейчас есть flex и grid.

6. Формы и ввод данных


<form action="/submit" method="post">
  <label>Имя:
    <input type="text" name="name">
  </label>
  <input type="submit" value="Отправить">
</form>
    
  • <input> — поля (text, password, email, checkbox, radio, file, hidden, submit и т.д.)
  • <textarea> — многострочный текст
  • <select>, <option> — выпадающий список
  • required, placeholder, disabled, checked, value — атрибуты для <input>

7. Картинки, видео, аудио

  • <img src="pic.jpg" alt="описание">
  • <video src="video.mp4" controls></video>
  • <audio src="audio.mp3" controls></audio>
  • Для адаптива — <picture> (современные форматы и ретина):

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="описание">
</picture>
    

8. Основы CSS

  • Подключение: <link rel="stylesheet" href="style.css"> (или <style> прямо в <head>).
  • Синтаксис: селектор { свойство: значение; }

p {
  color: #222;
  font-size: 1.2rem;
  margin-bottom: 1em;
}
    
  • Каскадность: последнее правило перезаписывает предыдущее.
  • Специфичность: чем более точный селектор, тем важнее его правило.

9. Селекторы CSS

Примеры:
  • h2 — все <h2>
  • .className — все элементы с классом className
  • #idName — элемент по id
  • div > p — все <p> внутри <div> (только прямые потомки)
  • ul li — все <li> внутри <ul> (вложенные на любом уровне)
  • p:first-child — первый <p> в своём родителе
  • input[type="text"] — все <input type="text">
  • a:hover — ссылка при наведении

/* Несколько классов через запятую */
.button, .link { color: #0066ff; }

/* Все элементы внутри .block */
.block * { box-sizing: border-box; }
    

10. Блочная модель, отступы, размеры

Каждый элемент — это “прямоугольник” с:
  • content — содержимое
  • padding — внутренний отступ
  • border — рамка
  • margin — внешний отступ
Современный способ — всегда использовать box-sizing: border-box; чтобы padding и border входили в ширину.

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  margin: 16px;
  box-sizing: border-box;
}
    

11. Flexbox

Самый удобный способ быстро строить горизонтальные и вертикальные ряды/колонки:
  • display: flex; — включить flex-контейнер
  • flex-direction: row | column; — направление (по умолчанию row — горизонтально)
  • justify-content — выравнивание по главной оси
  • align-items — по поперечной оси
  • gap — расстояние между элементами
  • flex-wrap — перенос по строкам

.flex-row {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}
    
  • Чтобы элементы занимали всё доступное место: flex: 1;
  • Для адаптива часто удобно использовать flex-wrap: wrap;

12. CSS Grid

Идеален для сложных раскладок, сеток, карточек, галерей:
  • display: grid; — включить grid-контейнер
  • grid-template-columns — задать колонки
  • grid-template-rows — строки
  • gap — отступы между ячейками
  • grid-column, grid-row — позиционирование ячеек

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
    
  • Гриды отлично сочетаются с minmax(), auto-fit и auto-fill для адаптива.

13. CSS-переменные (Custom properties)

Позволяют задавать переменные прямо в CSS (работают во всех современных браузерах):

:root {
  --main-color: #0066ff;
  --radius: 10px;
}
.button {
  color: var(--main-color);
  border-radius: var(--radius);
}
    
  • Можно переопределять переменные для отдельных блоков или медиа-запросов.

14. Адаптив, медиазапросы

Для адаптации сайта под разные экраны — медиазапросы:

@media (max-width: 900px) {
  .block {
    padding: 12px 6px;
    font-size: 1rem;
  }
}
    
  • Чаще всего используют max-width (для уменьшения экрана).
  • Процентные и vw/vh-единицы для ширины/высоты.
Для мобильной верстки всегда добавляй в <head> строку:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

15. Лучшие практики и советы

  • Старайся давать осмысленные названия классам (BEM — отличный подход).
  • Не злоупотребляй инлайн-стилями, всегда выноси стили в отдельный файл.
  • Используй семантику: <main>, <nav>, <footer> и т.д.
  • Не используй фиксированную высоту там, где она не нужна.
  • Добавляй alt к картинкам для доступности.
  • Проверяй сайт на разных устройствах и браузерах.
  • Используй normalize.css или reset для согласованного отображения.
Совет: Для типографики используй rem и em вместо px — удобно масштабировать.

16. Современные фишки CSS

  • clamp() — для адаптивного размера шрифтов:
font-size: clamp(1rem, 3vw, 2.2rem);
  • aspect-ratio — для соотношения сторон блоков:
.img-wrap { aspect-ratio: 16/9; }
  • container queries (контейнерные запросы, поддержка с 2023):

@container (min-width: 500px) {
  .card { font-size: 1.3rem; }
}
    
  • scroll-behavior: smooth; — плавная прокрутка по якорям:
html { scroll-behavior: smooth; }
  • backdrop-filter — размытие фона для модальных окон и панелей:
.modal { backdrop-filter: blur(10px); }

17. Частые ошибки

  • Забыли <meta name="viewport"> — сайт "ломается" на телефоне.
  • Нет alt у картинок — плохо для доступности и SEO.
  • Много <div> вместо семантических тегов.
  • Фиксированные размеры (особенно height) там, где нужен авто-рост.
  • Не используешь box-sizing: border-box — неудобно считать размеры.
  • Инлайн-стили или "style" вместо CSS-файла.
  • Повторяющиеся классы вместо переиспользуемых блоков.
  • Ошибки с вложенностью flex/grid — не задаёшь display: flex|grid; родителю.
  • Путаешь padding и margin (внутри/снаружи блока).
Всегда проверяй себя: есть ли лишние div, всё ли понятно по структуре, легко ли менять стили?