Dmitry
699 lines
62 KiB
HTML
699 lines
62 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Подготовка к экзамену по веб-разработке</title>
|
||
<style>
|
||
:root {
|
||
color-scheme: light;
|
||
--ink: #1f2933;
|
||
--muted: #5f6c7b;
|
||
--line: #d7dee8;
|
||
--paper: #ffffff;
|
||
--bg: #f5f7fa;
|
||
--accent: #16697a;
|
||
--accent-soft: #e5f4f6;
|
||
--warn-soft: #fff4df;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
line-height: 1.48;
|
||
color: var(--ink);
|
||
background: var(--bg);
|
||
}
|
||
|
||
main {
|
||
width: min(1120px, calc(100% - 32px));
|
||
margin: 0 auto;
|
||
padding: 28px 0 56px;
|
||
}
|
||
|
||
header {
|
||
padding: 28px 0 20px;
|
||
border-bottom: 2px solid var(--line);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
h1, h2, h3, h4 {
|
||
line-height: 1.2;
|
||
margin: 0 0 12px;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
h1 { font-size: 34px; }
|
||
h2 { font-size: 25px; margin-top: 34px; }
|
||
h3 { font-size: 18px; }
|
||
h4 { font-size: 16px; margin-top: 18px; }
|
||
|
||
p { margin: 0 0 10px; }
|
||
|
||
a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid rgba(22, 105, 122, 0.35);
|
||
}
|
||
|
||
a:hover { border-bottom-color: var(--accent); }
|
||
|
||
code {
|
||
padding: 1px 5px;
|
||
border-radius: 4px;
|
||
background: #edf1f5;
|
||
font-family: "JetBrains Mono", "Consolas", monospace;
|
||
font-size: 0.94em;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 12px 0 18px;
|
||
background: var(--paper);
|
||
}
|
||
|
||
th, td {
|
||
border: 1px solid var(--line);
|
||
padding: 8px 10px;
|
||
text-align: left;
|
||
vertical-align: top;
|
||
}
|
||
|
||
th { background: #edf3f7; }
|
||
|
||
ul { margin: 8px 0 12px 20px; padding: 0; }
|
||
li { margin: 4px 0; }
|
||
|
||
.meta {
|
||
color: var(--muted);
|
||
max-width: 760px;
|
||
}
|
||
|
||
.toc {
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 18px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.toc-block {
|
||
break-inside: avoid;
|
||
margin: 0 0 18px;
|
||
}
|
||
|
||
.toc-block:last-child { margin-bottom: 0; }
|
||
|
||
.toc-links {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.toc-links a {
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
background: #fbfcfd;
|
||
}
|
||
|
||
.block {
|
||
margin: 30px 0;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 14px;
|
||
min-height: 160px;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.card p { color: #2d3748; }
|
||
|
||
.detail-link {
|
||
display: inline-block;
|
||
margin-top: 6px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.details {
|
||
margin-top: 44px;
|
||
padding-top: 18px;
|
||
border-top: 3px solid var(--line);
|
||
}
|
||
|
||
.note {
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 18px;
|
||
margin: 18px 0;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.note-source {
|
||
padding: 8px 10px;
|
||
border-radius: 6px;
|
||
background: var(--accent-soft);
|
||
color: #24464d;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.exam {
|
||
background: var(--warn-soft);
|
||
border-left: 4px solid #d78b00;
|
||
padding: 10px 12px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
.back {
|
||
margin-top: 14px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
@media print {
|
||
body { background: #fff; }
|
||
main { width: 100%; padding: 0; }
|
||
.toc, .card, .note { box-shadow: none; }
|
||
a { color: #124f5f; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<header id="top">
|
||
<h1>Подготовка к экзамену по веб-разработке</h1>
|
||
<p class="meta">Краткий конспект по темам из файла подготовки. Оглавление ведёт к короткой карточке темы; ссылка в карточке ведёт к подробному блоку внизу; подробный блок возвращает обратно к краткому разделу.</p>
|
||
</header>
|
||
|
||
<nav class="toc" aria-label="Оглавление">
|
||
<h2>Оглавление</h2>
|
||
|
||
<div class="toc-block">
|
||
<h3>Блок 1. Общие вопросы</h3>
|
||
<div class="toc-links">
|
||
<a href="#s-ip-addressing">Адресация, IPv4, IPv6</a>
|
||
<a href="#s-tcp">TCP</a>
|
||
<a href="#s-subnet">Маска подсети</a>
|
||
<a href="#s-nat-localhost">NAT, localhost, подсети</a>
|
||
<a href="#s-dns">DNS</a>
|
||
<a href="#s-http">HTTP</a>
|
||
<a href="#s-http-message">HTTP-запрос/ответ</a>
|
||
<a href="#s-https">HTTPS</a>
|
||
<a href="#s-http3">HTTP/3</a>
|
||
<a href="#s-ports">Порты</a>
|
||
<a href="#s-auth">Идентификация/auth</a>
|
||
<a href="#s-oauth">OAuth 2.0</a>
|
||
<a href="#s-uri">URI, URL, URN</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-block">
|
||
<h3>Блок 2. HTML</h3>
|
||
<div class="toc-links">
|
||
<a href="#s-html-structure">Структура документа</a>
|
||
<a href="#s-html-comments">Комментарии</a>
|
||
<a href="#s-head">head</a>
|
||
<a href="#s-meta">Мета-теги</a>
|
||
<a href="#s-flow">Нормальный поток</a>
|
||
<a href="#s-block-inline">Блочные и строчные</a>
|
||
<a href="#s-semantic">Семантика</a>
|
||
<a href="#s-attrs">Атрибуты</a>
|
||
<a href="#s-class">class</a>
|
||
<a href="#s-id">id</a>
|
||
<a href="#s-text-table">Текст, списки, таблицы</a>
|
||
<a href="#s-img-link">Картинки и ссылки</a>
|
||
<a href="#s-whitespace">Пробелы и переносы</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-block">
|
||
<h3>Блок 3. HTML Forms</h3>
|
||
<div class="toc-links">
|
||
<a href="#s-form">Форма</a>
|
||
<a href="#s-form-id-name">id/name</a>
|
||
<a href="#s-inputs">radio/checkbox/submit</a>
|
||
<a href="#s-label">label</a>
|
||
<a href="#s-fieldset">Группировка</a>
|
||
<a href="#s-required">required</a>
|
||
<a href="#s-placeholder">placeholder</a>
|
||
<a href="#s-button-type">button type</a>
|
||
<a href="#s-textarea">textarea</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-block">
|
||
<h3>Блок 4. CSS</h3>
|
||
<div class="toc-links">
|
||
<a href="#s-css-universal">Универсальный селектор</a>
|
||
<a href="#s-css-basic-selectors">Элемент/class/id</a>
|
||
<a href="#s-css-combinators">Комбинаторы</a>
|
||
<a href="#s-css-attr">Атрибуты</a>
|
||
<a href="#s-css-pseudo">Псевдоклассы</a>
|
||
<a href="#s-css-group">Группировка</a>
|
||
<a href="#s-css-cascade">Каскад</a>
|
||
<a href="#s-css-specificity">Специфичность</a>
|
||
<a href="#s-box-model">Блочная модель</a>
|
||
<a href="#s-background">Фон</a>
|
||
<a href="#s-margin-align">Margin</a>
|
||
<a href="#s-fonts">Шрифты</a>
|
||
<a href="#s-text-align">Текст</a>
|
||
<a href="#s-line-letter">Интервалы</a>
|
||
<a href="#s-text-shadow">Тень текста</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-block">
|
||
<h3>Блок 5. Flexbox и Grid</h3>
|
||
<div class="toc-links">
|
||
<a href="#s-flex-container">Flex-контейнер</a>
|
||
<a href="#s-inline-flex">inline-flex</a>
|
||
<a href="#s-flex-align">Выравнивание</a>
|
||
<a href="#s-flex-grow">grow/shrink/basis</a>
|
||
<a href="#s-grid-container">Grid-контейнер</a>
|
||
<a href="#s-fr">fr</a>
|
||
<a href="#s-repeat-minmax">repeat/minmax</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toc-block">
|
||
<h3>Блоки 6-12. Django</h3>
|
||
<div class="toc-links">
|
||
<a href="#s-django-models">Модели</a>
|
||
<a href="#s-primary-key">Первичный ключ</a>
|
||
<a href="#s-migrations">Миграции</a>
|
||
<a href="#s-django-meta">Class Meta</a>
|
||
<a href="#s-null-blank">null/blank</a>
|
||
<a href="#s-charfield">CharField</a>
|
||
<a href="#s-foreignkey">ForeignKey</a>
|
||
<a href="#s-manytomany">Many-to-Many</a>
|
||
<a href="#s-fbv">FBV</a>
|
||
<a href="#s-render">render</a>
|
||
<a href="#s-context">Контекст</a>
|
||
<a href="#s-get-object">get_object_or_404</a>
|
||
<a href="#s-routing-fbv">Маршрутизация FBV</a>
|
||
<a href="#s-cbv-types">Template/List/DetailView</a>
|
||
<a href="#s-cbv-models">CBV и модели</a>
|
||
<a href="#s-cbv-extra">Доп. контекст</a>
|
||
<a href="#s-cbv-default-vars">Переменные по умолчанию</a>
|
||
<a href="#s-cbv-queryset">get_queryset/get_object</a>
|
||
<a href="#s-pagination">Паджинация</a>
|
||
<a href="#s-cbv-templates">Шаблоны CBV</a>
|
||
<a href="#s-cbv-super">super()</a>
|
||
<a href="#s-cbv-routing">Маршрутизация CBV</a>
|
||
<a href="#s-django-urls">Django URLs</a>
|
||
<a href="#s-django-templates">DTL</a>
|
||
<a href="#s-django-queries">Django queries</a>
|
||
<a href="#s-django-forms">Django forms</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="block" id="block-1">
|
||
<h2>Блок 1. Общие вопросы</h2>
|
||
<div class="cards">
|
||
<article class="card" id="s-ip-addressing">
|
||
<h3>Адресация в Интернете. IPv4. IPv6.</h3>
|
||
<p>В TCP/IP есть физический адрес, IP-адрес и символьное DNS-имя. IPv4 — 32 бита, 4 октета по 0-255; IPv6 — 128 бит, шестнадцатеричная запись и намного больше адресов.</p>
|
||
<a class="detail-link" href="#d-ip">Подробно: IP-адресация</a>
|
||
</article>
|
||
<article class="card" id="s-tcp">
|
||
<h3>Протокол TCP</h3>
|
||
<p>TCP — транспортный протокол с установлением соединения, порядком пакетов, подтверждениями и повторной передачей. Надёжнее UDP, но тяжелее по задержкам.</p>
|
||
<a class="detail-link" href="#d-tcp">Подробно: TCP</a>
|
||
</article>
|
||
<article class="card" id="s-subnet">
|
||
<h3>Маска подсети</h3>
|
||
<p>Маска отделяет сетевую часть IPv4-адреса от хостовой. `/24` значит 24 бита сети и 8 бит хоста; `255.255.255.0` — классический пример такой маски.</p>
|
||
<a class="detail-link" href="#d-subnet">Подробно: подсети</a>
|
||
</article>
|
||
<article class="card" id="s-nat-localhost">
|
||
<h3>Распределение IP, NAT, localhost, подсети</h3>
|
||
<p>Публичные адреса распределяются через ICANN/IANA и региональные регистраторы. NAT переводит приватные адреса во внешний адрес. `127.0.0.1`/`localhost` указывает на сам хост.</p>
|
||
<a class="detail-link" href="#d-nat">Подробно: NAT и localhost</a>
|
||
</article>
|
||
<article class="card" id="s-dns">
|
||
<h3>DNS. DNS-серверы</h3>
|
||
<p>DNS сопоставляет доменные имена с IP-адресами. Цепочка обычно идёт через кэширующий resolver, корневые серверы, TLD-серверы и авторитативные серверы домена.</p>
|
||
<a class="detail-link" href="#d-dns">Подробно: DNS</a>
|
||
</article>
|
||
<article class="card" id="s-http">
|
||
<h3>Протокол HTTP</h3>
|
||
<p>HTTP — прикладной протокол WWW. Клиент отправляет запрос, сервер возвращает ответ. HTTP stateless: связь между запросами не хранится без cookies, сессий или токенов.</p>
|
||
<a class="detail-link" href="#d-http">Подробно: HTTP</a>
|
||
</article>
|
||
<article class="card" id="s-http-message">
|
||
<h3>HTTP-запрос, ответ, методы, заголовки, коды</h3>
|
||
<p>Сообщение состоит из стартовой строки, заголовков, пустой строки и тела. Методы: `GET`, `POST`, `HEAD`, `PUT`, `PATCH`, `DELETE`. Коды: `2xx` успех, `3xx` редирект, `4xx` ошибка клиента, `5xx` ошибка сервера.</p>
|
||
<a class="detail-link" href="#d-http">Подробно: HTTP-сообщения</a>
|
||
</article>
|
||
<article class="card" id="s-https">
|
||
<h3>Протокол HTTPS</h3>
|
||
<p>HTTPS — HTTP поверх TLS. Даёт шифрование, проверку подлинности сервера через сертификат и защиту от подмены данных. Порт по умолчанию — `443`.</p>
|
||
<a class="detail-link" href="#d-https">Подробно: HTTPS</a>
|
||
</article>
|
||
<article class="card" id="s-http3">
|
||
<h3>Протокол HTTP/3</h3>
|
||
<p>HTTP/3 работает поверх QUIC/UDP. Семантика HTTP сохраняется, но транспорт меняется: независимые потоки, встроенный TLS 1.3, меньше блокировок при потере пакетов.</p>
|
||
<a class="detail-link" href="#d-http3">Подробно: HTTP/3</a>
|
||
</article>
|
||
<article class="card" id="s-ports">
|
||
<h3>Сетевые порты. HTTP и HTTPS</h3>
|
||
<p>Порт указывает процесс внутри IP-адреса. Всего 0-65535. HTTP обычно `80/tcp`, HTTPS `443/tcp`, DNS `53`, SSH `22`, альтернативный HTTP часто `8080`.</p>
|
||
<a class="detail-link" href="#d-ports">Подробно: порты</a>
|
||
</article>
|
||
<article class="card" id="s-auth">
|
||
<h3>Идентификация, аутентификация, авторизация</h3>
|
||
<p>Идентификация: "кто ты?". Аутентификация: "докажи". Авторизация: "что тебе разрешено?". В HTTP часто встречаются Basic, Digest и Bearer.</p>
|
||
<a class="detail-link" href="#d-auth">Подробно: auth</a>
|
||
</article>
|
||
<article class="card" id="s-oauth">
|
||
<h3>OAuth 2.0</h3>
|
||
<p>OAuth 2.0 — протокол авторизации: приложение получает ограниченный доступ к ресурсам пользователя через токен, не получая пароль пользователя.</p>
|
||
<a class="detail-link" href="#d-oauth">Подробно: OAuth 2.0</a>
|
||
</article>
|
||
<article class="card" id="s-uri">
|
||
<h3>URI, URL, URN</h3>
|
||
<p>URI — общий идентификатор ресурса. URL указывает местоположение и способ получения. URN задаёт устойчивое имя без привязки к расположению. Все URL — URI, но не все URI — URL.</p>
|
||
<a class="detail-link" href="#d-uri">Подробно: URI/URL/URN</a>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="block" id="block-2">
|
||
<h2>Блок 2. HTML</h2>
|
||
<div class="cards">
|
||
<article class="card" id="s-html-structure"><h3>Структура документа</h3><p>HTML5-документ начинается с <code><!doctype html></code>, затем <code><html></code>, внутри <code><head></code> с метаданными и <code><body></code> с видимым содержимым.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||
<article class="card" id="s-html-comments"><h3>Комментарии в HTML</h3><p>Комментарий пишется как <code><!-- текст --></code>. Браузер его не отображает, но он виден в исходном коде.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||
<article class="card" id="s-head"><h3>Теги внутри head</h3><p>В <code><head></code> обычно находятся <code><title></code>, <code><meta></code>, <code><link></code>, <code><style></code>, <code><script></code> и технические данные страницы.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||
<article class="card" id="s-meta"><h3>Мета-теги и viewport</h3><p><code><meta charset="utf-8"></code> задаёт кодировку. <code>viewport</code> нужен адаптивной вёрстке: <code>width=device-width, initial-scale=1.0</code>.</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>Ссылка: <code><a href="..."></code>. Картинка: <code><img src="..." alt="..."></code>; <code>alt</code> важен для доступности и случаев, когда изображение не загрузилось.</p><a class="detail-link" href="#d-html">Подробно: HTML</a></article>
|
||
<article class="card" id="s-whitespace"><h3>Переносы строк и пробелы</h3><p>В HTML последовательности пробелов схлопываются. Перенос строки в коде обычно не равен переносу на странице; для явного переноса есть <code><br></code>.</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>
|