Адресация в Интернете. IPv4. IPv6.
В TCP/IP есть физический адрес, IP-адрес и символьное DNS-имя. IPv4 — 32 бита, 4 октета по 0-255; IPv6 — 128 бит, шестнадцатеричная запись и намного больше адресов.
Подробно: IP-адресацияПодготовка к экзамену по веб-разработке
Блок 1. Общие вопросы
Протокол TCP
TCP — транспортный протокол с установлением соединения, порядком пакетов, подтверждениями и повторной передачей. Надёжнее UDP, но тяжелее по задержкам.
Подробно: TCPМаска подсети
Маска отделяет сетевую часть IPv4-адреса от хостовой. `/24` значит 24 бита сети и 8 бит хоста; `255.255.255.0` — классический пример такой маски.
Подробно: подсетиРаспределение IP, NAT, localhost, подсети
Публичные адреса распределяются через ICANN/IANA и региональные регистраторы. NAT переводит приватные адреса во внешний адрес. `127.0.0.1`/`localhost` указывает на сам хост.
Подробно: NAT и localhostDNS. DNS-серверы
DNS сопоставляет доменные имена с IP-адресами. Цепочка обычно идёт через кэширующий resolver, корневые серверы, TLD-серверы и авторитативные серверы домена.
Подробно: DNSПротокол HTTP
HTTP — прикладной протокол WWW. Клиент отправляет запрос, сервер возвращает ответ. HTTP stateless: связь между запросами не хранится без cookies, сессий или токенов.
Подробно: HTTPHTTP-запрос, ответ, методы, заголовки, коды
Сообщение состоит из стартовой строки, заголовков, пустой строки и тела. Методы: `GET`, `POST`, `HEAD`, `PUT`, `PATCH`, `DELETE`. Коды: `2xx` успех, `3xx` редирект, `4xx` ошибка клиента, `5xx` ошибка сервера.
Подробно: HTTP-сообщенияПротокол HTTPS
HTTPS — HTTP поверх TLS. Даёт шифрование, проверку подлинности сервера через сертификат и защиту от подмены данных. Порт по умолчанию — `443`.
Подробно: HTTPSПротокол HTTP/3
HTTP/3 работает поверх QUIC/UDP. Семантика HTTP сохраняется, но транспорт меняется: независимые потоки, встроенный TLS 1.3, меньше блокировок при потере пакетов.
Подробно: HTTP/3Сетевые порты. HTTP и HTTPS
Порт указывает процесс внутри IP-адреса. Всего 0-65535. HTTP обычно `80/tcp`, HTTPS `443/tcp`, DNS `53`, SSH `22`, альтернативный HTTP часто `8080`.
Подробно: портыИдентификация, аутентификация, авторизация
Идентификация: "кто ты?". Аутентификация: "докажи". Авторизация: "что тебе разрешено?". В HTTP часто встречаются Basic, Digest и Bearer.
Подробно: authOAuth 2.0
OAuth 2.0 — протокол авторизации: приложение получает ограниченный доступ к ресурсам пользователя через токен, не получая пароль пользователя.
Подробно: OAuth 2.0URI, URL, URN
URI — общий идентификатор ресурса. URL указывает местоположение и способ получения. URN задаёт устойчивое имя без привязки к расположению. Все URL — URI, но не все URI — URL.
Подробно: URI/URL/URNБлок 2. HTML
Структура документа
HTML5-документ начинается с <!doctype html>, затем <html>, внутри <head> с метаданными и <body> с видимым содержимым.
Комментарии в HTML
Комментарий пишется как <!-- текст -->. Браузер его не отображает, но он виден в исходном коде.
Теги внутри head
В <head> обычно находятся <title>, <meta>, <link>, <style>, <script> и технические данные страницы.
Мета-теги и viewport
<meta charset="utf-8"> задаёт кодировку. viewport нужен адаптивной вёрстке: width=device-width, initial-scale=1.0.
Нормальный поток
Нормальный поток — базовое расположение элементов без flex/grid/position: блочные идут сверху вниз, строчные текут внутри строки.
Подробно: HTMLБлочные и строчные элементы
Блочные занимают доступную ширину и начинаются с новой строки: `div`, `p`, `section`. Строчные занимают место по содержимому: `span`, `a`, `strong`.
Подробно: HTMLСемантические теги
`header`, `nav`, `main`, `section`, `article`, `aside`, `footer` описывают смысл блоков. Это важно для доступности, SEO и читаемости кода.
Подробно: HTMLАтрибуты тегов
Атрибуты уточняют элемент: `href`, `src`, `alt`, `class`, `id`, `name`, `type`. Обычно пишутся в открывающем теге.
Подробно: HTMLАтрибут class
`class` задаёт один или несколько CSS-классов. Один класс можно использовать на многих элементах.
Подробно: HTMLИдентификатор элемента
`id` должен быть уникален на странице. Используется для якорей, JS и CSS-селектора `#id`.
Подробно: HTMLЗаголовки, абзацы, списки, таблицы
`h1-h6` задают структуру заголовков, `p` — абзац, `ul/ol/li` — списки, `table/tr/th/td` — табличные данные.
Подробно: HTMLКартинки и ссылки
Ссылка: <a href="...">. Картинка: <img src="..." alt="...">; alt важен для доступности и случаев, когда изображение не загрузилось.
Переносы строк и пробелы
В HTML последовательности пробелов схлопываются. Перенос строки в коде обычно не равен переносу на странице; для явного переноса есть <br>.
Блок 3. HTML Forms
Форма и атрибуты
`form` собирает пользовательский ввод. Главные атрибуты: `action` — куда отправлять, `method` — `get` или `post`.
Подробно: HTML formsid и name
`id` связывает поле с `label` и должен быть уникальным. `name` — имя параметра, под которым значение уйдёт на сервер.
Подробно: HTML formsradio, checkbox, submit
`radio` выбирает один вариант в группе с одинаковым `name`. `checkbox` — независимый флажок. `submit` отправляет форму.
Подробно: HTML formsLabel
`label` подписывает поле и улучшает доступность. Связь делается через `for="field-id"` или вложением input внутрь label.
Подробно: HTML formsГруппировка элементов
`fieldset` объединяет связанные поля, `legend` задаёт подпись группы. Часто используется для radio-групп.
Подробно: HTML formsrequired
`required` запрещает отправку формы браузером, если поле пустое. Серверную валидацию всё равно нужно делать отдельно.
Подробно: HTML formsPlaceholder
`placeholder` показывает подсказку внутри пустого поля. Это не замена `label`, потому что исчезает при вводе.
Подробно: HTML formstype для button
`button` без `type` внутри формы часто ведёт себя как `submit`. Для обычной кнопки явно пишут `type="button"`.
Подробно: HTML formsTextarea
`textarea` — многострочное текстовое поле. Текст по умолчанию пишется между открывающим и закрывающим тегом.
Подробно: HTML formsБлок 4. CSS selectors и базовые свойства
Универсальный селектор
`*` выбирает все элементы. Часто применяют для сброса `box-sizing`, но специфичность у него нулевая.
Подробно: CSS selectorsЭлемент, класс, идентификатор
`p` выбирает теги, `.card` — класс, `#main` — уникальный id. ID специфичнее класса и тега.
Подробно: CSS selectorsДочерний, потомок, сестринский
`A B` — потомок, `A > B` — прямой ребёнок, `A + B` — следующий сосед, `A ~ B` — последующие соседи.
Подробно: CSS selectorsСелектор атрибута
`[attr]`, `[type="email"]`, `a[href^="https"]` выбирают элементы по наличию или значению атрибута.
Подробно: CSS selectorsПсевдоклассы
`:hover`, `:focus`, `:checked`, `:nth-child()` выбирают состояние или позицию элемента. Структурные псевдоклассы зависят от места в DOM.
Подробно: CSS selectorsГруппировка селекторов
Селекторы через запятую получают одно правило: `h1, h2, h3 { margin: 0; }`.
Подробно: CSS selectorsНаследование и каскадирование
Каскад решает конфликт правил по важности, специфичности и порядку. Наследуются в основном текстовые свойства, например `color` и `font-family`.
Подробно: CSS selectorsСпецифичность
Условный вес: inline > ID > классы/атрибуты/псевдоклассы > теги/псевдоэлементы. При равенстве побеждает правило ниже в коде.
Подробно: CSS selectorsБлочная модель
Блок состоит из content, padding, border и margin. `box-sizing: border-box` включает padding и border в заданную ширину.
Подробно: CSS свойстваФон элемента
Основные свойства: `background-color`, `background-image`, `background-repeat`, `background-position`, `background-size`.
Подробно: CSS свойстваMargin и выравнивание блоков
`margin` задаёт внешний отступ. Для центрирования блочного элемента с заданной шириной часто используют `margin-left/right: auto`.
Подробно: CSS свойстваШрифты
`font-family`, `font-size`, `font-weight`, `font-style` задают семейство, размер, толщину и наклон текста.
Подробно: CSS свойстваВыравнивание и подчёркивание текста
`text-align` управляет горизонтальным выравниванием текста, `text-decoration` — подчёркиванием и другими линиями.
Подробно: CSS свойстваline-height и letter-spacing
`line-height` задаёт высоту строки, `letter-spacing` — расстояние между буквами. На читаемость влияют сильнее, чем кажется.
Подробно: CSS свойстваТень текста
`text-shadow: x y blur color;` добавляет тень к тексту. В тестах важно помнить порядок смещения, размытия и цвета.
Подробно: CSS свойстваБлок 5. Flexbox Layout. Grid Layout
Flex-контейнер и оси
`display: flex` создаёт flex-контейнер. Главная ось задаётся `flex-direction`, поперечная идёт перпендикулярно.
Подробно: Flex/GridСтрочный flex-контейнер
`display: inline-flex` делает контейнер flex-контейнером, но сам контейнер ведёт себя как строчный элемент во внешнем потоке.
Подробно: Flex/GridВыравнивание по осям
`justify-content` выравнивает по главной оси, `align-items` — по поперечной. `align-content` работает при нескольких строках.
Подробно: Flex/Gridflex-grow, shrink, basis
`flex-basis` — базовый размер, `flex-grow` — как элемент растёт, `flex-shrink` — как сжимается при нехватке места.
Подробно: Flex/GridGrid-контейнер
`display: grid` создаёт двумерную сетку. Колонки задаются `grid-template-columns`, строки — `grid-template-rows`.
Подробно: Flex/GridВеличина fr
`fr` — доля свободного пространства grid-контейнера. `1fr 2fr` делит свободное место в пропорции 1 к 2.
Подробно: Flex/Gridrepeat и minmax
`repeat(3, 1fr)` повторяет трек. `minmax(200px, 1fr)` задаёт минимум и максимум размера трека.
Подробно: Flex/GridБлоки 6-12. Django
Создание моделей
Модель — класс-наследник `models.Model`; поля класса описывают столбцы таблицы. Модели обычно лежат в `models.py` приложения.
Подробно: Django modelsПервичный ключ
Первичный ключ уникально идентифицирует запись. Если не задать явно, Django создаёт поле `id` автоматически.
Подробно: Django modelsМиграции
`makemigrations` создаёт файлы миграций из изменений моделей, `migrate` применяет их к базе данных.
Подробно: Django modelsClass Meta
`class Meta` задаёт метаданные модели: `ordering`, `verbose_name`, `db_table`, ограничения и другие настройки.
Подробно: Django modelsnull=True и blank=True
`null=True` разрешает `NULL` в БД. `blank=True` разрешает пустое значение на уровне форм/валидации Django.
Подробно: Django modelsCharField
`CharField` хранит короткую строку и требует `max_length`. Для длинного текста обычно берут `TextField`.
Подробно: Django modelsForeignKey
`ForeignKey` задаёт связь многие-к-одному. `on_delete` определяет поведение при удалении связанного объекта; `related_name` задаёт имя обратной связи.
Подробно: Django modelsMany-to-Many
`ManyToManyField` задаёт связь многие-ко-многим. Django создаёт промежуточную таблицу автоматически, либо можно указать свою через `through`.
Подробно: Django modelsFBV
Function-Based View — функция, которая принимает `request` и возвращает `HttpResponse`, `render`, `redirect` или ошибку.
Подробно: Django FBVrender
`render(request, template, context)` рендерит шаблон с контекстом и возвращает `HttpResponse`.
Подробно: Django FBVПередача данных в шаблон
Данные передаются словарём context: ключи становятся именами переменных в шаблоне.
Подробно: Django FBVОбъект или 404
`get_object_or_404(Model, pk=pk)` возвращает объект или генерирует HTTP 404, если записи нет.
Подробно: Django FBVМаршрутизация FBV
В `urlpatterns` функция передаётся напрямую: `path("posts/<int:pk>/", views.detail, name="detail")`.
Подробно: Django FBVTemplateView, DetailView, ListView
`TemplateView` показывает шаблон, `DetailView` — один объект, `ListView` — список объектов.
Подробно: Django CBVCBV и модели
Для `ListView`/`DetailView` можно указать `model = Post`; Django сам построит queryset и стандартные имена шаблонов.
Подробно: Django CBVДополнительные данные
Дополнительный контекст обычно добавляют через `get_context_data`, вызывая `super()` и дополняя словарь.
Подробно: Django CBVПеременные по умолчанию
`ListView` отдаёт `object_list` и `modelname_list`; `DetailView` отдаёт `object` и `modelname`.
Подробно: Django CBVПереопределение выгрузки
`get_queryset()` меняет список объектов, `get_object()` — получение одного объекта. Часто используют фильтрацию по пользователю или статусу.
Подробно: Django CBVПаджинация
В `ListView` достаточно задать `paginate_by = N`; в шаблоне появится `page_obj`.
Подробно: Django CBVШаблоны по умолчанию
Для `DetailView`: `app/model_detail.html`; для `ListView`: `app/model_list.html`, если не задан `template_name`.
Подробно: Django CBVВызов базовой логики
При переопределении методов вроде `get_context_data` обычно сначала вызывают `super()`, чтобы не потерять стандартный контекст.
Подробно: Django CBVМаршрутизация CBV
Класс подключается через `.as_view()`: `path("", PostListView.as_view(), name="post_list")`.
Подробно: Django CBVDjango URLs
`path()` задаёт маршрут, view, kwargs и имя. `re_path()` использует regex. `reverse()` строит URL по имени маршрута.
Подробно: Django URLsЯзык шаблонов Django
Переменные пишутся как `{{ value }}`, теги как `{% for %}`, фильтры как `{{ name|lower }}`. Наследование делается через `extends` и `block`.
Подробно: Django templatesDjango queries
QuerySet ленивый и цепочечный. Важно знать `get`, `filter`, `exclude`, `order_by`, `annotate`, `aggregate`, `Q`, `F`, `select_related`, `prefetch_related`.
Подробно: Django queriesDjango forms
`forms.Form` — ручная форма, `ModelForm` строится по модели. Валидация через `is_valid`, `cleaned_data`, `clean_field`, `clean`.
Подробно: Django formsПодробные заметки
IP-адресация, IPv4, IPv6
В интернете используются адреса разных уровней: физический адрес интерфейса, сетевой IP-адрес и символьное DNS-имя. IPv4 записывается четырьмя октетами, например `192.168.1.10`. IPv6 использует 128 бит и записывается группами шестнадцатеричных чисел.
В тесте часто спрашивают: IPv4 = 32 бита, IPv6 = 128 бит, IPv4 октет = 0-255, IPv6 не совместим напрямую с IPv4.
TCP
Vault: TCP vs UDP
TCP устанавливает соединение перед передачей данных, делит данные на сегменты, нумерует их, подтверждает доставку и повторяет потерянные данные. За это платит дополнительными задержками и служебным трафиком.
В тесте: TCP — надёжный, connection-oriented; UDP — быстрее и проще, но без гарантий доставки и порядка.
Подсети и маска подсети
Vault: Подсети и маска подсети
Маска подсети определяет, какие биты IPv4-адреса относятся к сети, а какие к хосту. Запись `/24` равна маске `255.255.255.0`: первые 24 бита — сеть, последние 8 — хосты.
Запомнить: чем больше префикс `/N`, тем меньше адресов в подсети.
NAT, приватные адреса, localhost
Vault: NAT, Подсети и маска подсети
NAT переводит приватные IPv4-адреса во внешний публичный адрес. Частые приватные диапазоны: `10.0.0.0/8`, `172.16.0.0/12`, `192.168.0.0/16`. Loopback-диапазон `127.0.0.0/8` не используется для обмена между узлами сети; `127.0.0.1` и `localhost` указывают на текущую машину.
В тесте: NAT экономит публичные IPv4 и скрывает внутреннюю адресацию, но ломает прямую end-to-end связность.
DNS и DNS-серверы
Vault: DNS
DNS — распределённая база данных, которая по доменному имени возвращает IP-адрес или другие записи. Типичная цепочка: локальный кэш/hosts, resolver провайдера, root-серверы, TLD-серверы, авторитативные серверы домена.
В тесте: root не знает IP конкретного сайта, он направляет к TLD; авторитативный сервер знает записи домена.
HTTP и HTTP-сообщения
Vault: HTTP, HTTPS и HTTP/3
HTTP — протокол прикладного уровня. Запрос и ответ состоят из стартовой строки, заголовков, пустой строки и необязательного тела. Методы описывают действие над ресурсом, заголовки передают метаданные, коды ответа показывают результат обработки.
| Метод | Смысл |
|---|---|
| `GET` | Получить ресурс |
| `POST` | Отправить данные |
| `PUT` | Создать/заменить ресурс |
| `PATCH` | Частично изменить ресурс |
| `DELETE` | Удалить ресурс |
В тесте: `4xx` — проблема на стороне клиента, `5xx` — проблема на стороне сервера.
HTTPS
Vault: HTTP, HTTPS и HTTP/3
HTTPS — это HTTP, защищённый TLS. Сертификат связывает домен с ключами и подтверждает подлинность сервера. TLS обеспечивает шифрование, целостность и защиту от подмены трафика.
В тесте: HTTP порт `80`, HTTPS порт `443`; Basic auth без HTTPS небезопасен.
HTTP/3
Vault: HTTP, HTTPS и HTTP/3
HTTP/3 переносит HTTP на QUIC поверх UDP. QUIC делает потоки независимыми: потеря пакета не блокирует все запросы внутри соединения, как это возможно в HTTP/2 поверх TCP. TLS 1.3 встроен в QUIC.
В тесте: HTTP/3 не меняет методы и коды HTTP, меняет транспорт: UDP/QUIC вместо TCP.
Сетевые порты
Vault: Сетевые порты
Порт уточняет приложение-получателя внутри хоста. Номер порта находится в диапазоне `0-65535`. Порты TCP и UDP независимы: `53/tcp` и `53/udp` — разные конечные точки.
Минимум к запоминанию: HTTP `80`, HTTPS `443`, DNS `53`, SSH `22`, SMTP `25`.
Идентификация, аутентификация, авторизация
Vault: Веб-аутентификация и авторизация
Идентификация сообщает системе идентификатор субъекта. Аутентификация проверяет подлинность. Авторизация выдаёт права на действия. В HTTP встречаются схемы Basic, Digest и Bearer.
В тесте не путать: логин — идентификация, пароль/код — аутентификация, доступ к админке — авторизация.
OAuth 2.0
Vault: OAuth 2.0
OAuth 2.0 позволяет стороннему приложению получить ограниченный доступ к ресурсам пользователя. Вместо пароля приложение получает токен с конкретными правами и сроком жизни.
В тесте: OAuth 2.0 — авторизация, не парольная аутентификация. Для входа поверх OAuth обычно нужен OpenID Connect.
URI, URL, URN
Vault: URI, URL, URN
URL показывает, где находится ресурс и как его получить: схема, хост, порт, путь, параметры, фрагмент. URN задаёт стабильное имя ресурса без места получения. URI — общее понятие для идентификаторов ресурсов.
Главная формула: URL ⊂ URI; URN ⊂ URI; не каждый URI является URL.
HTML
Vault: Основы HTML (структура, таблицы, формы)
HTML описывает структуру документа. Важно знать базовый каркас, роль `head` и `body`, блочные и строчные элементы, семантические теги, атрибуты `class`/`id`, ссылки, изображения, списки и таблицы.
В тесте: `class` можно повторять, `id` должен быть уникальным; таблицы — для табличных данных, не для макета.
HTML Forms
Vault: Основы HTML (структура, таблицы, формы)
Форма отправляет данные на сервер. `action` задаёт URL, `method` — способ отправки. `label` связывается с полем через `for` и `id`. `name` определяет имя параметра при отправке. `required` и типы input помогают браузерной валидации, но не заменяют серверную проверку.
В тесте: у radio-кнопок одной группы должен быть одинаковый `name`; у `button` внутри формы лучше явно задавать `type`.
CSS selectors
Vault: CSS: Основы и селекторы
CSS-селектор выбирает элементы, к которым применяются правила. Нужно различать селекторы тега, класса, id, атрибута, псевдокласса и комбинаторы. Каскад учитывает важность, специфичность и порядок правил.
Специфичность: inline > ID > класс/атрибут/псевдокласс > тег/псевдоэлемент.
CSS базовые свойства
Vault: CSS: Основы и селекторы
Блочная модель состоит из content, padding, border и margin. `box-sizing` меняет расчёт ширины. Текстовые свойства управляют шрифтами, выравниванием, межстрочным расстоянием, расстоянием между буквами и декором текста. Фон задаётся через группу `background-*`.
В тесте: `width` при `content-box` не включает padding/border, при `border-box` включает.
Flexbox и Grid
Vault: CSS: Адаптивность, Flexbox и Grid
Flexbox — одномерная модель раскладки по главной и поперечной оси. Grid — двумерная сетка строк и колонок. Flex удобен для распределения элементов в строке или колонке, Grid — для общего макета страницы.
В тесте: `justify-content` работает по главной оси flex, `align-items` — по поперечной; `fr` — доля свободного пространства Grid.
Django models
Vault: Django Модели и ORM
Модели описывают структуру таблиц и связи между ними. `CharField` требует `max_length`; `ForeignKey` задаёт `on_delete`; `ManyToManyField` создаёт промежуточную таблицу или использует указанную через `through`. Миграции переносят изменения моделей в БД.
В тесте: `null=True` относится к БД, `blank=True` — к формам/валидации Django.
Django FBV
Vault: Django: Представления, шаблоны и CBV
FBV — обычная функция-представление. Она принимает `request`, получает данные, вызывает `render` или возвращает другой `HttpResponse`. Маршрутизируется через `path()` прямой передачей функции.
В тесте: `render(request, template, context)` возвращает HTTP-ответ; `get_object_or_404` возвращает объект или 404.
Django CBV
Vault: Django: Представления, шаблоны и CBV
CBV — классовые представления с готовой логикой. `TemplateView` показывает шаблон, `ListView` выводит список, `DetailView` выводит один объект. В URL подключаются через `.as_view()`.
В тесте: `ListView` по умолчанию даёт `object_list`, `DetailView` — `object`; шаблоны по умолчанию `model_list.html` и `model_detail.html`.
Django URLs
Vault: Django: Представления, шаблоны и CBV
`urlpatterns` связывает URL с представлениями. `path()` использует route, view, kwargs и name. Конвертеры вроде `int`, `slug`, `uuid`, `path` извлекают параметры. `reverse()` и `{% url %}` строят URL по имени маршрута.
В тесте: не хардкодить URL, если есть именованный маршрут и `reverse`/`url`.
Язык шаблонов Django
Vault: Django: Представления, шаблоны и CBV
DTL использует переменные `{{ value }}`, теги `{% tag %}` и фильтры `{{ value|filter }}`. Наследование строится через `{% extends %}` и `{% block %}`. Статика подключается через `{% load static %}` и `{% static 'path' %}`.
В тесте: функции Python с произвольными аргументами напрямую из шаблона вызывать нельзя; используют теги, фильтры или подготовку данных во view.
Django queries
Vault: Django Модели и ORM
QuerySet ленив: запрос выполняется при фактическом обращении к данным. Методы можно цепочечно комбинировать. `get()` возвращает один объект или ошибку, `filter()` возвращает QuerySet, `aggregate()` возвращает итоговый словарь, `annotate()` добавляет вычисляемые поля к объектам.
В тесте: `select_related` — для ForeignKey/OneToOne через JOIN; `prefetch_related` — для ManyToMany и обратных связей отдельными запросами.
Django forms
Vault: Django: Работа с формами и CUD
`forms.Form` описывает форму вручную, `forms.ModelForm` строится по модели через `Meta`. `is_valid()` запускает валидацию, `cleaned_data` содержит очищенные данные, `clean_
В тесте: `form.save()` есть у ModelForm; серверная валидация обязательна, HTML `required` не защита.