Подготовка к экзамену по веб-разработке

Краткий конспект по темам из файла подготовки. Оглавление ведёт к короткой карточке темы; ссылка в карточке ведёт к подробному блоку внизу; подробный блок возвращает обратно к краткому разделу.

Блок 1. Общие вопросы

Адресация в Интернете. IPv4. IPv6.

В TCP/IP есть физический адрес, IP-адрес и символьное DNS-имя. IPv4 — 32 бита, 4 октета по 0-255; IPv6 — 128 бит, шестнадцатеричная запись и намного больше адресов.

Подробно: IP-адресация

Протокол TCP

TCP — транспортный протокол с установлением соединения, порядком пакетов, подтверждениями и повторной передачей. Надёжнее UDP, но тяжелее по задержкам.

Подробно: TCP

Маска подсети

Маска отделяет сетевую часть IPv4-адреса от хостовой. `/24` значит 24 бита сети и 8 бит хоста; `255.255.255.0` — классический пример такой маски.

Подробно: подсети

Распределение IP, NAT, localhost, подсети

Публичные адреса распределяются через ICANN/IANA и региональные регистраторы. NAT переводит приватные адреса во внешний адрес. `127.0.0.1`/`localhost` указывает на сам хост.

Подробно: NAT и localhost

DNS. DNS-серверы

DNS сопоставляет доменные имена с IP-адресами. Цепочка обычно идёт через кэширующий resolver, корневые серверы, TLD-серверы и авторитативные серверы домена.

Подробно: DNS

Протокол HTTP

HTTP — прикладной протокол WWW. Клиент отправляет запрос, сервер возвращает ответ. HTTP stateless: связь между запросами не хранится без cookies, сессий или токенов.

Подробно: HTTP

HTTP-запрос, ответ, методы, заголовки, коды

Сообщение состоит из стартовой строки, заголовков, пустой строки и тела. Методы: `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.

Подробно: auth

OAuth 2.0

OAuth 2.0 — протокол авторизации: приложение получает ограниченный доступ к ресурсам пользователя через токен, не получая пароль пользователя.

Подробно: OAuth 2.0

URI, URL, URN

URI — общий идентификатор ресурса. URL указывает местоположение и способ получения. URN задаёт устойчивое имя без привязки к расположению. Все URL — URI, но не все URI — URL.

Подробно: URI/URL/URN

Блок 2. HTML

Структура документа

HTML5-документ начинается с ``, затем ``, внутри `` с метаданными и `` с видимым содержимым.

Подробно: HTML

Комментарии в HTML

Комментарий пишется как ``. Браузер его не отображает, но он виден в исходном коде.

Подробно: HTML

Теги внутри head

В `` обычно находятся ``, `<meta>`, `<link>`, `<style>`, `<script>` и технические данные страницы.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-meta"><h3>Мета-теги и viewport</h3><p>`<meta charset="utf-8">` задаёт кодировку. `viewport` нужен адаптивной вёрстке: `width=device-width, initial-scale=1.0`.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-flow"><h3>Нормальный поток</h3><p>Нормальный поток — базовое расположение элементов без flex/grid/position: блочные идут сверху вниз, строчные текут внутри строки.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-block-inline"><h3>Блочные и строчные элементы</h3><p>Блочные занимают доступную ширину и начинаются с новой строки: `div`, `p`, `section`. Строчные занимают место по содержимому: `span`, `a`, `strong`.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-semantic"><h3>Семантические теги</h3><p>`header`, `nav`, `main`, `section`, `article`, `aside`, `footer` описывают смысл блоков. Это важно для доступности, SEO и читаемости кода.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-attrs"><h3>Атрибуты тегов</h3><p>Атрибуты уточняют элемент: `href`, `src`, `alt`, `class`, `id`, `name`, `type`. Обычно пишутся в открывающем теге.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-class"><h3>Атрибут class</h3><p>`class` задаёт один или несколько CSS-классов. Один класс можно использовать на многих элементах.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-id"><h3>Идентификатор элемента</h3><p>`id` должен быть уникален на странице. Используется для якорей, JS и CSS-селектора `#id`.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-text-table"><h3>Заголовки, абзацы, списки, таблицы</h3><p>`h1-h6` задают структуру заголовков, `p` — абзац, `ul/ol/li` — списки, `table/tr/th/td` — табличные данные.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-img-link"><h3>Картинки и ссылки</h3><p>Ссылка: `<a href="...">`. Картинка: `<img src="..." alt="...">`; `alt` важен для доступности и случаев, когда изображение не загрузилось.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> <article class="card" id="s-whitespace"><h3>Переносы строк и пробелы</h3><p>В HTML последовательности пробелов схлопываются. Перенос строки в коде обычно не равен переносу на странице; для явного переноса есть `<br>`.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article> </div> </section> <section class="block" id="block-3"> <h2>Блок 3. HTML Forms</h2> <div class="cards"> <article class="card" id="s-form"><h3>Форма и атрибуты</h3><p>`form` собирает пользовательский ввод. Главные атрибуты: `action` — куда отправлять, `method` — `get` или `post`.</p><a class="detail-link" href="#d-html-forms">Подробно: HTML forms</a></article> <article class="card" id="s-form-id-name"><h3>id и name</h3><p>`id` связывает поле с `label` и должен быть уникальным. `name` — имя параметра, под которым значение уйдёт на сервер.</p><a class="detail-link" href="#d-html-forms">Подробно: HTML forms</a></article> <article class="card" id="s-inputs"><h3>radio, checkbox, submit</h3><p>`radio` выбирает один вариант в группе с одинаковым `name`. `checkbox` — независимый флажок. `submit` отправляет форму.</p><a class="detail-link" href="#d-html-forms">Подробно: HTML forms</a></article> <article class="card" id="s-label"><h3>Label</h3><p>`label` подписывает поле и улучшает доступность. Связь делается через `for="field-id"` или вложением input внутрь label.</p><a class="detail-link" href="#d-html-forms">Подробно: HTML forms</a></article> <article class="card" id="s-fieldset"><h3>Группировка элементов</h3><p>`fieldset` объединяет связанные поля, `legend` задаёт подпись группы. Часто используется для radio-групп.</p><a class="detail-link" href="#d-html-forms">Подробно: HTML forms</a></article> <article class="card" id="s-required"><h3>required</h3><p>`required` запрещает отправку формы браузером, если поле пустое. Серверную валидацию всё равно нужно делать отдельно.</p><a class="detail-link" href="#d-html-forms">Подробно: HTML forms</a></article> <article class="card" id="s-placeholder"><h3>Placeholder</h3><p>`placeholder` показывает подсказку внутри пустого поля. Это не замена `label`, потому что исчезает при вводе.</p><a class="detail-link" href="#d-html-forms">Подробно: HTML forms</a></article> <article class="card" id="s-button-type"><h3>type для button</h3><p>`button` без `type` внутри формы часто ведёт себя как `submit`. Для обычной кнопки явно пишут `type="button"`.</p><a class="detail-link" href="#d-html-forms">Подробно: HTML forms</a></article> <article class="card" id="s-textarea"><h3>Textarea</h3><p>`textarea` — многострочное текстовое поле. Текст по умолчанию пишется между открывающим и закрывающим тегом.</p><a class="detail-link" href="#d-html-forms">Подробно: HTML forms</a></article> </div> </section> <section class="block" id="block-4"> <h2>Блок 4. CSS selectors и базовые свойства</h2> <div class="cards"> <article class="card" id="s-css-universal"><h3>Универсальный селектор</h3><p>`*` выбирает все элементы. Часто применяют для сброса `box-sizing`, но специфичность у него нулевая.</p><a class="detail-link" href="#d-css-selectors">Подробно: CSS selectors</a></article> <article class="card" id="s-css-basic-selectors"><h3>Элемент, класс, идентификатор</h3><p>`p` выбирает теги, `.card` — класс, `#main` — уникальный id. ID специфичнее класса и тега.</p><a class="detail-link" href="#d-css-selectors">Подробно: CSS selectors</a></article> <article class="card" id="s-css-combinators"><h3>Дочерний, потомок, сестринский</h3><p>`A B` — потомок, `A > B` — прямой ребёнок, `A + B` — следующий сосед, `A ~ B` — последующие соседи.</p><a class="detail-link" href="#d-css-selectors">Подробно: CSS selectors</a></article> <article class="card" id="s-css-attr"><h3>Селектор атрибута</h3><p>`[attr]`, `[type="email"]`, `a[href^="https"]` выбирают элементы по наличию или значению атрибута.</p><a class="detail-link" href="#d-css-selectors">Подробно: CSS selectors</a></article> <article class="card" id="s-css-pseudo"><h3>Псевдоклассы</h3><p>`:hover`, `:focus`, `:checked`, `:nth-child()` выбирают состояние или позицию элемента. Структурные псевдоклассы зависят от места в DOM.</p><a class="detail-link" href="#d-css-selectors">Подробно: CSS selectors</a></article> <article class="card" id="s-css-group"><h3>Группировка селекторов</h3><p>Селекторы через запятую получают одно правило: `h1, h2, h3 { margin: 0; }`.</p><a class="detail-link" href="#d-css-selectors">Подробно: CSS selectors</a></article> <article class="card" id="s-css-cascade"><h3>Наследование и каскадирование</h3><p>Каскад решает конфликт правил по важности, специфичности и порядку. Наследуются в основном текстовые свойства, например `color` и `font-family`.</p><a class="detail-link" href="#d-css-selectors">Подробно: CSS selectors</a></article> <article class="card" id="s-css-specificity"><h3>Специфичность</h3><p>Условный вес: inline > ID > классы/атрибуты/псевдоклассы > теги/псевдоэлементы. При равенстве побеждает правило ниже в коде.</p><a class="detail-link" href="#d-css-selectors">Подробно: CSS selectors</a></article> <article class="card" id="s-box-model"><h3>Блочная модель</h3><p>Блок состоит из content, padding, border и margin. `box-sizing: border-box` включает padding и border в заданную ширину.</p><a class="detail-link" href="#d-css-props">Подробно: CSS свойства</a></article> <article class="card" id="s-background"><h3>Фон элемента</h3><p>Основные свойства: `background-color`, `background-image`, `background-repeat`, `background-position`, `background-size`.</p><a class="detail-link" href="#d-css-props">Подробно: CSS свойства</a></article> <article class="card" id="s-margin-align"><h3>Margin и выравнивание блоков</h3><p>`margin` задаёт внешний отступ. Для центрирования блочного элемента с заданной шириной часто используют `margin-left/right: auto`.</p><a class="detail-link" href="#d-css-props">Подробно: CSS свойства</a></article> <article class="card" id="s-fonts"><h3>Шрифты</h3><p>`font-family`, `font-size`, `font-weight`, `font-style` задают семейство, размер, толщину и наклон текста.</p><a class="detail-link" href="#d-css-props">Подробно: CSS свойства</a></article> <article class="card" id="s-text-align"><h3>Выравнивание и подчёркивание текста</h3><p>`text-align` управляет горизонтальным выравниванием текста, `text-decoration` — подчёркиванием и другими линиями.</p><a class="detail-link" href="#d-css-props">Подробно: CSS свойства</a></article> <article class="card" id="s-line-letter"><h3>line-height и letter-spacing</h3><p>`line-height` задаёт высоту строки, `letter-spacing` — расстояние между буквами. На читаемость влияют сильнее, чем кажется.</p><a class="detail-link" href="#d-css-props">Подробно: CSS свойства</a></article> <article class="card" id="s-text-shadow"><h3>Тень текста</h3><p>`text-shadow: x y blur color;` добавляет тень к тексту. В тестах важно помнить порядок смещения, размытия и цвета.</p><a class="detail-link" href="#d-css-props">Подробно: CSS свойства</a></article> </div> </section> <section class="block" id="block-5"> <h2>Блок 5. Flexbox Layout. Grid Layout</h2> <div class="cards"> <article class="card" id="s-flex-container"><h3>Flex-контейнер и оси</h3><p>`display: flex` создаёт flex-контейнер. Главная ось задаётся `flex-direction`, поперечная идёт перпендикулярно.</p><a class="detail-link" href="#d-layout">Подробно: Flex/Grid</a></article> <article class="card" id="s-inline-flex"><h3>Строчный flex-контейнер</h3><p>`display: inline-flex` делает контейнер flex-контейнером, но сам контейнер ведёт себя как строчный элемент во внешнем потоке.</p><a class="detail-link" href="#d-layout">Подробно: Flex/Grid</a></article> <article class="card" id="s-flex-align"><h3>Выравнивание по осям</h3><p>`justify-content` выравнивает по главной оси, `align-items` — по поперечной. `align-content` работает при нескольких строках.</p><a class="detail-link" href="#d-layout">Подробно: Flex/Grid</a></article> <article class="card" id="s-flex-grow"><h3>flex-grow, shrink, basis</h3><p>`flex-basis` — базовый размер, `flex-grow` — как элемент растёт, `flex-shrink` — как сжимается при нехватке места.</p><a class="detail-link" href="#d-layout">Подробно: Flex/Grid</a></article> <article class="card" id="s-grid-container"><h3>Grid-контейнер</h3><p>`display: grid` создаёт двумерную сетку. Колонки задаются `grid-template-columns`, строки — `grid-template-rows`.</p><a class="detail-link" href="#d-layout">Подробно: Flex/Grid</a></article> <article class="card" id="s-fr"><h3>Величина fr</h3><p>`fr` — доля свободного пространства grid-контейнера. `1fr 2fr` делит свободное место в пропорции 1 к 2.</p><a class="detail-link" href="#d-layout">Подробно: Flex/Grid</a></article> <article class="card" id="s-repeat-minmax"><h3>repeat и minmax</h3><p>`repeat(3, 1fr)` повторяет трек. `minmax(200px, 1fr)` задаёт минимум и максимум размера трека.</p><a class="detail-link" href="#d-layout">Подробно: Flex/Grid</a></article> </div> </section> <section class="block" id="block-django"> <h2>Блоки 6-12. Django</h2> <div class="cards"> <article class="card" id="s-django-models"><h3>Создание моделей</h3><p>Модель — класс-наследник `models.Model`; поля класса описывают столбцы таблицы. Модели обычно лежат в `models.py` приложения.</p><a class="detail-link" href="#d-django-models">Подробно: Django models</a></article> <article class="card" id="s-primary-key"><h3>Первичный ключ</h3><p>Первичный ключ уникально идентифицирует запись. Если не задать явно, Django создаёт поле `id` автоматически.</p><a class="detail-link" href="#d-django-models">Подробно: Django models</a></article> <article class="card" id="s-migrations"><h3>Миграции</h3><p>`makemigrations` создаёт файлы миграций из изменений моделей, `migrate` применяет их к базе данных.</p><a class="detail-link" href="#d-django-models">Подробно: Django models</a></article> <article class="card" id="s-django-meta"><h3>Class Meta</h3><p>`class Meta` задаёт метаданные модели: `ordering`, `verbose_name`, `db_table`, ограничения и другие настройки.</p><a class="detail-link" href="#d-django-models">Подробно: Django models</a></article> <article class="card" id="s-null-blank"><h3>null=True и blank=True</h3><p>`null=True` разрешает `NULL` в БД. `blank=True` разрешает пустое значение на уровне форм/валидации Django.</p><a class="detail-link" href="#d-django-models">Подробно: Django models</a></article> <article class="card" id="s-charfield"><h3>CharField</h3><p>`CharField` хранит короткую строку и требует `max_length`. Для длинного текста обычно берут `TextField`.</p><a class="detail-link" href="#d-django-models">Подробно: Django models</a></article> <article class="card" id="s-foreignkey"><h3>ForeignKey</h3><p>`ForeignKey` задаёт связь многие-к-одному. `on_delete` определяет поведение при удалении связанного объекта; `related_name` задаёт имя обратной связи.</p><a class="detail-link" href="#d-django-models">Подробно: Django models</a></article> <article class="card" id="s-manytomany"><h3>Many-to-Many</h3><p>`ManyToManyField` задаёт связь многие-ко-многим. Django создаёт промежуточную таблицу автоматически, либо можно указать свою через `through`.</p><a class="detail-link" href="#d-django-models">Подробно: Django models</a></article> <article class="card" id="s-fbv"><h3>FBV</h3><p>Function-Based View — функция, которая принимает `request` и возвращает `HttpResponse`, `render`, `redirect` или ошибку.</p><a class="detail-link" href="#d-django-fbv">Подробно: Django FBV</a></article> <article class="card" id="s-render"><h3>render</h3><p>`render(request, template, context)` рендерит шаблон с контекстом и возвращает `HttpResponse`.</p><a class="detail-link" href="#d-django-fbv">Подробно: Django FBV</a></article> <article class="card" id="s-context"><h3>Передача данных в шаблон</h3><p>Данные передаются словарём context: ключи становятся именами переменных в шаблоне.</p><a class="detail-link" href="#d-django-fbv">Подробно: Django FBV</a></article> <article class="card" id="s-get-object"><h3>Объект или 404</h3><p>`get_object_or_404(Model, pk=pk)` возвращает объект или генерирует HTTP 404, если записи нет.</p><a class="detail-link" href="#d-django-fbv">Подробно: Django FBV</a></article> <article class="card" id="s-routing-fbv"><h3>Маршрутизация FBV</h3><p>В `urlpatterns` функция передаётся напрямую: `path("posts/<int:pk>/", views.detail, name="detail")`.</p><a class="detail-link" href="#d-django-fbv">Подробно: Django FBV</a></article> <article class="card" id="s-cbv-types"><h3>TemplateView, DetailView, ListView</h3><p>`TemplateView` показывает шаблон, `DetailView` — один объект, `ListView` — список объектов.</p><a class="detail-link" href="#d-django-cbv">Подробно: Django CBV</a></article> <article class="card" id="s-cbv-models"><h3>CBV и модели</h3><p>Для `ListView`/`DetailView` можно указать `model = Post`; Django сам построит queryset и стандартные имена шаблонов.</p><a class="detail-link" href="#d-django-cbv">Подробно: Django CBV</a></article> <article class="card" id="s-cbv-extra"><h3>Дополнительные данные</h3><p>Дополнительный контекст обычно добавляют через `get_context_data`, вызывая `super()` и дополняя словарь.</p><a class="detail-link" href="#d-django-cbv">Подробно: Django CBV</a></article> <article class="card" id="s-cbv-default-vars"><h3>Переменные по умолчанию</h3><p>`ListView` отдаёт `object_list` и `modelname_list`; `DetailView` отдаёт `object` и `modelname`.</p><a class="detail-link" href="#d-django-cbv">Подробно: Django CBV</a></article> <article class="card" id="s-cbv-queryset"><h3>Переопределение выгрузки</h3><p>`get_queryset()` меняет список объектов, `get_object()` — получение одного объекта. Часто используют фильтрацию по пользователю или статусу.</p><a class="detail-link" href="#d-django-cbv">Подробно: Django CBV</a></article> <article class="card" id="s-pagination"><h3>Паджинация</h3><p>В `ListView` достаточно задать `paginate_by = N`; в шаблоне появится `page_obj`.</p><a class="detail-link" href="#d-django-cbv">Подробно: Django CBV</a></article> <article class="card" id="s-cbv-templates"><h3>Шаблоны по умолчанию</h3><p>Для `DetailView`: `app/model_detail.html`; для `ListView`: `app/model_list.html`, если не задан `template_name`.</p><a class="detail-link" href="#d-django-cbv">Подробно: Django CBV</a></article> <article class="card" id="s-cbv-super"><h3>Вызов базовой логики</h3><p>При переопределении методов вроде `get_context_data` обычно сначала вызывают `super()`, чтобы не потерять стандартный контекст.</p><a class="detail-link" href="#d-django-cbv">Подробно: Django CBV</a></article> <article class="card" id="s-cbv-routing"><h3>Маршрутизация CBV</h3><p>Класс подключается через `.as_view()`: `path("", PostListView.as_view(), name="post_list")`.</p><a class="detail-link" href="#d-django-cbv">Подробно: Django CBV</a></article> <article class="card" id="s-django-urls"><h3>Django URLs</h3><p>`path()` задаёт маршрут, view, kwargs и имя. `re_path()` использует regex. `reverse()` строит URL по имени маршрута.</p><a class="detail-link" href="#d-django-urls">Подробно: Django URLs</a></article> <article class="card" id="s-django-templates"><h3>Язык шаблонов Django</h3><p>Переменные пишутся как `{{ value }}`, теги как `{% for %}`, фильтры как `{{ name|lower }}`. Наследование делается через `extends` и `block`.</p><a class="detail-link" href="#d-django-templates">Подробно: Django templates</a></article> <article class="card" id="s-django-queries"><h3>Django queries</h3><p>QuerySet ленивый и цепочечный. Важно знать `get`, `filter`, `exclude`, `order_by`, `annotate`, `aggregate`, `Q`, `F`, `select_related`, `prefetch_related`.</p><a class="detail-link" href="#d-django-queries">Подробно: Django queries</a></article> <article class="card" id="s-django-forms"><h3>Django forms</h3><p>`forms.Form` — ручная форма, `ModelForm` строится по модели. Валидация через `is_valid`, `cleaned_data`, `clean_field`, `clean`.</p><a class="detail-link" href="#d-django-forms">Подробно: Django forms</a></article> </div> </section> <section class="details" id="details"> <h2>Подробные заметки</h2> <article class="note" id="d-ip"> <h3>IP-адресация, IPv4, IPv6</h3> <p class="note-source">Vault: <a href="../../Networking/Протоколы/IP-адрес.md">IP-адрес</a>, <a href="../../Networking/Протоколы/IPv6.md">IPv6</a></p> <p>В интернете используются адреса разных уровней: физический адрес интерфейса, сетевой IP-адрес и символьное DNS-имя. IPv4 записывается четырьмя октетами, например `192.168.1.10`. IPv6 использует 128 бит и записывается группами шестнадцатеричных чисел.</p> <div class="exam">В тесте часто спрашивают: IPv4 = 32 бита, IPv6 = 128 бит, IPv4 октет = 0-255, IPv6 не совместим напрямую с IPv4.</div> <p class="back"><a href="#s-ip-addressing">Назад к краткой теме</a></p> </article> <article class="note" id="d-tcp"> <h3>TCP</h3> <p class="note-source">Vault: <a href="../../Networking/Протоколы/TCP vs UDP.md">TCP vs UDP</a></p> <p>TCP устанавливает соединение перед передачей данных, делит данные на сегменты, нумерует их, подтверждает доставку и повторяет потерянные данные. За это платит дополнительными задержками и служебным трафиком.</p> <div class="exam">В тесте: TCP — надёжный, connection-oriented; UDP — быстрее и проще, но без гарантий доставки и порядка.</div> <p class="back"><a href="#s-tcp">Назад к краткой теме</a></p> </article> <article class="note" id="d-subnet"> <h3>Подсети и маска подсети</h3> <p class="note-source">Vault: <a href="../../Networking/Подсети и маска подсети.md">Подсети и маска подсети</a></p> <p>Маска подсети определяет, какие биты IPv4-адреса относятся к сети, а какие к хосту. Запись `/24` равна маске `255.255.255.0`: первые 24 бита — сеть, последние 8 — хосты.</p> <div class="exam">Запомнить: чем больше префикс `/N`, тем меньше адресов в подсети.</div> <p class="back"><a href="#s-subnet">Назад к краткой теме</a></p> </article> <article class="note" id="d-nat"> <h3>NAT, приватные адреса, localhost</h3> <p class="note-source">Vault: <a href="../../Networking/NAT.md">NAT</a>, <a href="../../Networking/Подсети и маска подсети.md">Подсети и маска подсети</a></p> <p>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` указывают на текущую машину.</p> <div class="exam">В тесте: NAT экономит публичные IPv4 и скрывает внутреннюю адресацию, но ломает прямую end-to-end связность.</div> <p class="back"><a href="#s-nat-localhost">Назад к краткой теме</a></p> </article> <article class="note" id="d-dns"> <h3>DNS и DNS-серверы</h3> <p class="note-source">Vault: <a href="../../Networking/Протоколы/DNS.md">DNS</a></p> <p>DNS — распределённая база данных, которая по доменному имени возвращает IP-адрес или другие записи. Типичная цепочка: локальный кэш/hosts, resolver провайдера, root-серверы, TLD-серверы, авторитативные серверы домена.</p> <div class="exam">В тесте: root не знает IP конкретного сайта, он направляет к TLD; авторитативный сервер знает записи домена.</div> <p class="back"><a href="#s-dns">Назад к краткой теме</a></p> </article> <article class="note" id="d-http"> <h3>HTTP и HTTP-сообщения</h3> <p class="note-source">Vault: <a href="../../Networking/Протоколы/HTTP, HTTPS и HTTP3.md">HTTP, HTTPS и HTTP/3</a></p> <p>HTTP — протокол прикладного уровня. Запрос и ответ состоят из стартовой строки, заголовков, пустой строки и необязательного тела. Методы описывают действие над ресурсом, заголовки передают метаданные, коды ответа показывают результат обработки.</p> <table><tr><th>Метод</th><th>Смысл</th></tr><tr><td>`GET`</td><td>Получить ресурс</td></tr><tr><td>`POST`</td><td>Отправить данные</td></tr><tr><td>`PUT`</td><td>Создать/заменить ресурс</td></tr><tr><td>`PATCH`</td><td>Частично изменить ресурс</td></tr><tr><td>`DELETE`</td><td>Удалить ресурс</td></tr></table> <div class="exam">В тесте: `4xx` — проблема на стороне клиента, `5xx` — проблема на стороне сервера.</div> <p class="back"><a href="#s-http">Назад к HTTP</a> · <a href="#s-http-message">Назад к HTTP-сообщениям</a></p> </article> <article class="note" id="d-https"> <h3>HTTPS</h3> <p class="note-source">Vault: <a href="../../Networking/Протоколы/HTTP, HTTPS и HTTP3.md">HTTP, HTTPS и HTTP/3</a></p> <p>HTTPS — это HTTP, защищённый TLS. Сертификат связывает домен с ключами и подтверждает подлинность сервера. TLS обеспечивает шифрование, целостность и защиту от подмены трафика.</p> <div class="exam">В тесте: HTTP порт `80`, HTTPS порт `443`; Basic auth без HTTPS небезопасен.</div> <p class="back"><a href="#s-https">Назад к краткой теме</a></p> </article> <article class="note" id="d-http3"> <h3>HTTP/3</h3> <p class="note-source">Vault: <a href="../../Networking/Протоколы/HTTP, HTTPS и HTTP3.md">HTTP, HTTPS и HTTP/3</a></p> <p>HTTP/3 переносит HTTP на QUIC поверх UDP. QUIC делает потоки независимыми: потеря пакета не блокирует все запросы внутри соединения, как это возможно в HTTP/2 поверх TCP. TLS 1.3 встроен в QUIC.</p> <div class="exam">В тесте: HTTP/3 не меняет методы и коды HTTP, меняет транспорт: UDP/QUIC вместо TCP.</div> <p class="back"><a href="#s-http3">Назад к краткой теме</a></p> </article> <article class="note" id="d-ports"> <h3>Сетевые порты</h3> <p class="note-source">Vault: <a href="../../Networking/Сетевые порты.md">Сетевые порты</a></p> <p>Порт уточняет приложение-получателя внутри хоста. Номер порта находится в диапазоне `0-65535`. Порты TCP и UDP независимы: `53/tcp` и `53/udp` — разные конечные точки.</p> <div class="exam">Минимум к запоминанию: HTTP `80`, HTTPS `443`, DNS `53`, SSH `22`, SMTP `25`.</div> <p class="back"><a href="#s-ports">Назад к краткой теме</a></p> </article> <article class="note" id="d-auth"> <h3>Идентификация, аутентификация, авторизация</h3> <p class="note-source">Vault: <a href="../../Networking/Веб-аутентификация и авторизация.md">Веб-аутентификация и авторизация</a></p> <p>Идентификация сообщает системе идентификатор субъекта. Аутентификация проверяет подлинность. Авторизация выдаёт права на действия. В HTTP встречаются схемы Basic, Digest и Bearer.</p> <div class="exam">В тесте не путать: логин — идентификация, пароль/код — аутентификация, доступ к админке — авторизация.</div> <p class="back"><a href="#s-auth">Назад к краткой теме</a></p> </article> <article class="note" id="d-oauth"> <h3>OAuth 2.0</h3> <p class="note-source">Vault: <a href="../../Networking/OAuth 2.0.md">OAuth 2.0</a></p> <p>OAuth 2.0 позволяет стороннему приложению получить ограниченный доступ к ресурсам пользователя. Вместо пароля приложение получает токен с конкретными правами и сроком жизни.</p> <div class="exam">В тесте: OAuth 2.0 — авторизация, не парольная аутентификация. Для входа поверх OAuth обычно нужен OpenID Connect.</div> <p class="back"><a href="#s-oauth">Назад к краткой теме</a></p> </article> <article class="note" id="d-uri"> <h3>URI, URL, URN</h3> <p class="note-source">Vault: <a href="../../Networking/Протоколы/URI, URL, URN.md">URI, URL, URN</a></p> <p>URL показывает, где находится ресурс и как его получить: схема, хост, порт, путь, параметры, фрагмент. URN задаёт стабильное имя ресурса без места получения. URI — общее понятие для идентификаторов ресурсов.</p> <div class="exam">Главная формула: URL ⊂ URI; URN ⊂ URI; не каждый URI является URL.</div> <p class="back"><a href="#s-uri">Назад к краткой теме</a></p> </article> <article class="note" id="d-html"> <h3>HTML</h3> <p class="note-source">Vault: <a href="Основы HTML (структура, таблицы, формы).md">Основы HTML (структура, таблицы, формы)</a></p> <p>HTML описывает структуру документа. Важно знать базовый каркас, роль `head` и `body`, блочные и строчные элементы, семантические теги, атрибуты `class`/`id`, ссылки, изображения, списки и таблицы.</p> <div class="exam">В тесте: `class` можно повторять, `id` должен быть уникальным; таблицы — для табличных данных, не для макета.</div> <p class="back"><a href="#block-2">Назад к краткому блоку HTML</a></p> </article> <article class="note" id="d-html-forms"> <h3>HTML Forms</h3> <p class="note-source">Vault: <a href="Основы HTML (структура, таблицы, формы).md">Основы HTML (структура, таблицы, формы)</a></p> <p>Форма отправляет данные на сервер. `action` задаёт URL, `method` — способ отправки. `label` связывается с полем через `for` и `id`. `name` определяет имя параметра при отправке. `required` и типы input помогают браузерной валидации, но не заменяют серверную проверку.</p> <div class="exam">В тесте: у radio-кнопок одной группы должен быть одинаковый `name`; у `button` внутри формы лучше явно задавать `type`.</div> <p class="back"><a href="#block-3">Назад к краткому блоку HTML Forms</a></p> </article> <article class="note" id="d-css-selectors"> <h3>CSS selectors</h3> <p class="note-source">Vault: <a href="Основы, селекторы и блочная модель.md">CSS: Основы и селекторы</a></p> <p>CSS-селектор выбирает элементы, к которым применяются правила. Нужно различать селекторы тега, класса, id, атрибута, псевдокласса и комбинаторы. Каскад учитывает важность, специфичность и порядок правил.</p> <div class="exam">Специфичность: inline > ID > класс/атрибут/псевдокласс > тег/псевдоэлемент.</div> <p class="back"><a href="#block-4">Назад к краткому блоку CSS</a></p> </article> <article class="note" id="d-css-props"> <h3>CSS базовые свойства</h3> <p class="note-source">Vault: <a href="Основы, селекторы и блочная модель.md">CSS: Основы и селекторы</a></p> <p>Блочная модель состоит из content, padding, border и margin. `box-sizing` меняет расчёт ширины. Текстовые свойства управляют шрифтами, выравниванием, межстрочным расстоянием, расстоянием между буквами и декором текста. Фон задаётся через группу `background-*`.</p> <div class="exam">В тесте: `width` при `content-box` не включает padding/border, при `border-box` включает.</div> <p class="back"><a href="#block-4">Назад к краткому блоку CSS</a></p> </article> <article class="note" id="d-layout"> <h3>Flexbox и Grid</h3> <p class="note-source">Vault: <a href="Адаптивность, Flexbox и Grid.md">CSS: Адаптивность, Flexbox и Grid</a></p> <p>Flexbox — одномерная модель раскладки по главной и поперечной оси. Grid — двумерная сетка строк и колонок. Flex удобен для распределения элементов в строке или колонке, Grid — для общего макета страницы.</p> <div class="exam">В тесте: `justify-content` работает по главной оси flex, `align-items` — по поперечной; `fr` — доля свободного пространства Grid.</div> <p class="back"><a href="#block-5">Назад к краткому блоку Flex/Grid</a></p> </article> <article class="note" id="d-django-models"> <h3>Django models</h3> <p class="note-source">Vault: <a href="../Python/Модели и ORM.md">Django Модели и ORM</a></p> <p>Модели описывают структуру таблиц и связи между ними. `CharField` требует `max_length`; `ForeignKey` задаёт `on_delete`; `ManyToManyField` создаёт промежуточную таблицу или использует указанную через `through`. Миграции переносят изменения моделей в БД.</p> <div class="exam">В тесте: `null=True` относится к БД, `blank=True` — к формам/валидации Django.</div> <p class="back"><a href="#block-django">Назад к краткому блоку Django</a></p> </article> <article class="note" id="d-django-fbv"> <h3>Django FBV</h3> <p class="note-source">Vault: <a href="../Python/Представления, шаблоны и CBV.md">Django: Представления, шаблоны и CBV</a></p> <p>FBV — обычная функция-представление. Она принимает `request`, получает данные, вызывает `render` или возвращает другой `HttpResponse`. Маршрутизируется через `path()` прямой передачей функции.</p> <div class="exam">В тесте: `render(request, template, context)` возвращает HTTP-ответ; `get_object_or_404` возвращает объект или 404.</div> <p class="back"><a href="#block-django">Назад к краткому блоку Django</a></p> </article> <article class="note" id="d-django-cbv"> <h3>Django CBV</h3> <p class="note-source">Vault: <a href="../Python/Представления, шаблоны и CBV.md">Django: Представления, шаблоны и CBV</a></p> <p>CBV — классовые представления с готовой логикой. `TemplateView` показывает шаблон, `ListView` выводит список, `DetailView` выводит один объект. В URL подключаются через `.as_view()`.</p> <div class="exam">В тесте: `ListView` по умолчанию даёт `object_list`, `DetailView` — `object`; шаблоны по умолчанию `model_list.html` и `model_detail.html`.</div> <p class="back"><a href="#block-django">Назад к краткому блоку Django</a></p> </article> <article class="note" id="d-django-urls"> <h3>Django URLs</h3> <p class="note-source">Vault: <a href="../Python/Представления, шаблоны и CBV.md">Django: Представления, шаблоны и CBV</a></p> <p>`urlpatterns` связывает URL с представлениями. `path()` использует route, view, kwargs и name. Конвертеры вроде `int`, `slug`, `uuid`, `path` извлекают параметры. `reverse()` и `{% url %}` строят URL по имени маршрута.</p> <div class="exam">В тесте: не хардкодить URL, если есть именованный маршрут и `reverse`/`url`.</div> <p class="back"><a href="#s-django-urls">Назад к краткой теме</a></p> </article> <article class="note" id="d-django-templates"> <h3>Язык шаблонов Django</h3> <p class="note-source">Vault: <a href="../Python/Представления, шаблоны и CBV.md">Django: Представления, шаблоны и CBV</a></p> <p>DTL использует переменные `{{ value }}`, теги `{% tag %}` и фильтры `{{ value|filter }}`. Наследование строится через `{% extends %}` и `{% block %}`. Статика подключается через `{% load static %}` и `{% static 'path' %}`.</p> <div class="exam">В тесте: функции Python с произвольными аргументами напрямую из шаблона вызывать нельзя; используют теги, фильтры или подготовку данных во view.</div> <p class="back"><a href="#s-django-templates">Назад к краткой теме</a></p> </article> <article class="note" id="d-django-queries"> <h3>Django queries</h3> <p class="note-source">Vault: <a href="../Python/Модели и ORM.md">Django Модели и ORM</a></p> <p>QuerySet ленив: запрос выполняется при фактическом обращении к данным. Методы можно цепочечно комбинировать. `get()` возвращает один объект или ошибку, `filter()` возвращает QuerySet, `aggregate()` возвращает итоговый словарь, `annotate()` добавляет вычисляемые поля к объектам.</p> <div class="exam">В тесте: `select_related` — для ForeignKey/OneToOne через JOIN; `prefetch_related` — для ManyToMany и обратных связей отдельными запросами.</div> <p class="back"><a href="#s-django-queries">Назад к краткой теме</a></p> </article> <article class="note" id="d-django-forms"> <h3>Django forms</h3> <p class="note-source">Vault: <a href="../Python/Работа с формами и CUD.md">Django: Работа с формами и CUD</a></p> <p>`forms.Form` описывает форму вручную, `forms.ModelForm` строится по модели через `Meta`. `is_valid()` запускает валидацию, `cleaned_data` содержит очищенные данные, `clean_<field>()` валидирует поле, `clean()` — форму целиком. `widget` управляет HTML-представлением поля.</p> <div class="exam">В тесте: `form.save()` есть у ModelForm; серверная валидация обязательна, HTML `required` не защита.</div> <p class="back"><a href="#s-django-forms">Назад к краткой теме</a></p> </article> </section> <p class="back"><a href="#top">Наверх</a></p> </main> </body> </html>