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

Да

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

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

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

Всё, что нужно для работы с HTML/CSS — от основ до фишек.
Быстро ищи нужное или изучай последовательно.

Основная структура HTML-документа
Часто используемые HTML-теги
Атрибуты HTML
Семантические теги
Списки и таблицы
Формы и ввод данных
Картинки, видео, аудио
Основы CSS
Селекторы CSS
Блочная модель, отступы, размеры
Flexbox
CSS Grid
CSS-переменные (Custom properties)
Адаптив, медиазапросы
Лучшие практики и советы
Современные фишки CSS
Частые ошибки

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, всё ли понятно по структуре, легко ли менять стили?