Dmitry
618 lines
37 KiB
HTML
618 lines
37 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 {
|
||
--bg: #f7f8fb;
|
||
--paper: #ffffff;
|
||
--ink: #1f2430;
|
||
--muted: #5f687a;
|
||
--line: #d7dce6;
|
||
--accent: #2b6cb0;
|
||
--accent-2: #0f766e;
|
||
--soft: #eef5ff;
|
||
--soft-2: #ecfdf5;
|
||
--warn: #fff7ed;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: Inter, Arial, sans-serif;
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
main {
|
||
max-width: 1120px;
|
||
margin: 0 auto;
|
||
padding: 32px 24px 56px;
|
||
}
|
||
|
||
h1, h2, h3 {
|
||
margin: 0;
|
||
line-height: 1.25;
|
||
color: #111827;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 34px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 24px;
|
||
margin: 34px 0 14px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid var(--line);
|
||
}
|
||
|
||
h3 {
|
||
font-size: 18px;
|
||
margin: 24px 0 8px;
|
||
}
|
||
|
||
p {
|
||
margin: 0 0 10px;
|
||
}
|
||
|
||
a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid rgba(43, 108, 176, 0.35);
|
||
}
|
||
|
||
ul, ol {
|
||
margin: 8px 0 12px 22px;
|
||
padding: 0;
|
||
}
|
||
|
||
code {
|
||
padding: 1px 5px;
|
||
border: 1px solid #d8dee9;
|
||
border-radius: 4px;
|
||
background: #f3f5f8;
|
||
font-family: "JetBrains Mono", Consolas, monospace;
|
||
font-size: 0.92em;
|
||
}
|
||
|
||
pre {
|
||
margin: 10px 0 14px;
|
||
padding: 12px 14px;
|
||
overflow-x: auto;
|
||
border: 1px solid #d8dee9;
|
||
border-radius: 8px;
|
||
background: #111827;
|
||
color: #f9fafb;
|
||
font-family: "JetBrains Mono", Consolas, monospace;
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.hero {
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 26px 28px;
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
.subtitle {
|
||
color: var(--muted);
|
||
max-width: 780px;
|
||
}
|
||
|
||
.note {
|
||
background: var(--soft);
|
||
border: 1px solid #c8ddff;
|
||
border-radius: 8px;
|
||
padding: 12px 14px;
|
||
margin: 14px 0;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 14px;
|
||
}
|
||
|
||
.topic {
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
break-inside: avoid;
|
||
}
|
||
|
||
.topic h3 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.topic-meta {
|
||
display: grid;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.label {
|
||
display: inline-block;
|
||
min-width: 124px;
|
||
color: var(--muted);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.question {
|
||
background: var(--warn);
|
||
border: 1px solid #fed7aa;
|
||
border-radius: 6px;
|
||
padding: 8px 10px;
|
||
}
|
||
|
||
.diagram {
|
||
margin: 18px 0;
|
||
padding: 14px;
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
break-inside: avoid;
|
||
}
|
||
|
||
.diagram svg {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.details {
|
||
background: var(--paper);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 18px 20px;
|
||
margin: 16px 0;
|
||
break-inside: avoid;
|
||
}
|
||
|
||
.details h3 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.back {
|
||
margin: -4px 0 14px;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.pill {
|
||
display: inline-block;
|
||
margin: 0 6px 6px 0;
|
||
padding: 3px 8px;
|
||
border-radius: 999px;
|
||
background: var(--soft-2);
|
||
color: #14532d;
|
||
border: 1px solid #bbf7d0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 10px 0 14px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
th, td {
|
||
border: 1px solid var(--line);
|
||
padding: 8px 9px;
|
||
text-align: left;
|
||
vertical-align: top;
|
||
}
|
||
|
||
th {
|
||
background: #f1f5f9;
|
||
}
|
||
|
||
@media (max-width: 820px) {
|
||
.grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
main {
|
||
padding: 20px 14px 40px;
|
||
}
|
||
}
|
||
|
||
@media print {
|
||
body {
|
||
background: #fff;
|
||
}
|
||
|
||
main {
|
||
max-width: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.hero, .topic, .details, .diagram {
|
||
border-color: #c7cbd3;
|
||
}
|
||
|
||
a {
|
||
color: #111827;
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<section class="hero">
|
||
<h1>Подготовка к экзамену по веб-разработке</h1>
|
||
<p class="subtitle">Краткая самостоятельная шпаргалка: тема, суть простыми словами, ссылка на подробный раздел внутри этого же документа и пример экзаменационного вопроса.</p>
|
||
</section>
|
||
|
||
<h2>Карта тем</h2>
|
||
<section class="grid">
|
||
<article class="topic" id="topic-addressing">
|
||
<h3>1. Адресация, IPv4, IPv6</h3>
|
||
<p><span class="label">Кратко:</span>IP-адрес нужен, чтобы доставить пакет до конкретного узла сети. IPv4 записывается как четыре числа и занимает 32 бита, поэтому адресов мало; IPv6 занимает 128 бит и записывается шестнадцатеричными блоками. Доменное имя само по себе не является сетевым адресом: перед подключением DNS превращает его в IP.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-addressing">адресация и IP</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Чем IPv4 отличается от IPv6?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-transport">
|
||
<h3>2. TCP, порты, NAT и подсети</h3>
|
||
<p><span class="label">Кратко:</span>TCP устанавливает соединение и контролирует доставку данных: порядок, подтверждения и повторную отправку. IP выбирает устройство, а порт выбирает приложение на этом устройстве. Маска подсети отделяет адрес сети от адреса хоста, а NAT позволяет приватным адресам локальной сети выходить наружу через публичный IP.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-transport">TCP, порты, NAT</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Зачем нужен NAT и как он связан с портами?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-dns-uri">
|
||
<h3>3. DNS, URI, URL, URN</h3>
|
||
<p><span class="label">Кратко:</span>DNS сопоставляет доменное имя с IP-адресом, чтобы браузер понял, к какому серверу подключаться. URI - общее понятие для идентификатора ресурса. URL является частным случаем URI: он указывает, где находится ресурс и как его получить; URN задаёт устойчивое имя без обязательного сетевого адреса.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-dns-uri">DNS и идентификаторы</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Почему URL является URI, но не каждый URI является URL?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-http">
|
||
<h3>4. HTTP, HTTPS, HTTP/3</h3>
|
||
<p><span class="label">Кратко:</span>HTTP - прикладной протокол обмена сообщениями: клиент отправляет запрос, сервер возвращает ответ со статусом, заголовками и, возможно, телом. GET обычно получает данные, POST отправляет данные в теле запроса. HTTPS - это HTTP внутри TLS-соединения, а HTTP/3 сохраняет смысл HTTP, но использует QUIC поверх UDP.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-http">HTTP-протоколы</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Чем GET отличается от POST?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-auth">
|
||
<h3>5. Идентификация, аутентификация, OAuth 2.0</h3>
|
||
<p><span class="label">Кратко:</span>Идентификация отвечает на вопрос "кто пользователь?", аутентификация проверяет доказательство личности, например пароль или код. Авторизация решает, какие действия разрешены уже проверенному пользователю. OAuth 2.0 используется, чтобы стороннее приложение получило ограниченный access token без получения пароля пользователя.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-auth">доступ и OAuth</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Почему OAuth 2.0 называют протоколом авторизации?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-html">
|
||
<h3>6. HTML-документ</h3>
|
||
<p><span class="label">Кратко:</span>HTML описывает смысловую структуру страницы: заголовки, абзацы, ссылки, изображения, таблицы и разделы. В <code>head</code> находятся служебные данные: кодировка, viewport, заголовок вкладки, подключение CSS и скриптов. В <code>body</code> находится видимый контент; семантические теги помогают показать назначение частей страницы.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-html">HTML-структура</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Для чего нужен meta viewport?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-html-forms">
|
||
<h3>7. HTML-формы</h3>
|
||
<p><span class="label">Кратко:</span>HTML-форма собирает ввод пользователя и отправляет его на сервер по адресу из <code>action</code> методом <code>GET</code> или <code>POST</code>. Атрибут <code>name</code> определяет имя параметра в запросе, а <code>id</code> обычно нужен для связи поля с <code>label</code>. <code>required</code>, <code>type</code> и другие атрибуты дают базовую проверку в браузере.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-html-forms">HTML Forms</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Чем radio отличается от checkbox?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-css-selectors">
|
||
<h3>8. CSS selectors и специфичность</h3>
|
||
<p><span class="label">Кратко:</span>CSS-селектор выбирает элементы, к которым применяются свойства. При конфликте правил учитываются каскад, специфичность и порядок записи. ID сильнее класса, класс сильнее тега; если специфичность равна, побеждает правило, написанное ниже.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-css-selectors">CSS selectors</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Какой селектор сильнее: <code>body .content</code> или <code>div p</code>?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-css-box">
|
||
<h3>9. CSS box model и базовые свойства</h3>
|
||
<p><span class="label">Кратко:</span>Каждый элемент в CSS рассматривается как прямоугольный блок: content, padding, border и margin. При <code>content-box</code> ширина задаёт только content, а padding и border добавляются сверху. При <code>border-box</code> заданная ширина уже включает content, padding и border, поэтому размеры проще контролировать.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-css-box">блочная модель</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Какая ширина у блока с <code>width:100px</code> и <code>box-sizing:border-box</code>?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-layout">
|
||
<h3>10. Flexbox и Grid</h3>
|
||
<p><span class="label">Кратко:</span>Flexbox удобен для одномерной раскладки: элементы распределяются вдоль главной оси, а поперечная ось используется для выравнивания. Grid решает двумерные задачи: одновременно управляет строками, столбцами, линиями, ячейками и областями. <code>fr</code>, <code>repeat()</code> и <code>minmax()</code> помогают задавать гибкую сетку.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-layout">Flexbox и Grid</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Какое значение <code>align-items</code> по умолчанию?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-django-models">
|
||
<h3>11. Django models и ORM queries</h3>
|
||
<p><span class="label">Кратко:</span>Модель Django описывает таблицу базы данных: класс - таблица, поле - колонка, объект - строка. ORM позволяет строить SQL-запросы через Python-методы вроде <code>filter()</code>, <code>get()</code>, <code>annotate()</code> и <code>aggregate()</code>. QuerySet ленивый: запрос обычно выполняется только тогда, когда реально нужны данные.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-django-models">Django models и queries</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Когда использовать <code>select_related</code>, а когда <code>prefetch_related</code>?</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="topic" id="topic-django-web">
|
||
<h3>12. Django views, URLs, templates, forms</h3>
|
||
<p><span class="label">Кратко:</span>Django view принимает <code>request</code> и возвращает HTTP-ответ: HTML, redirect, JSON или ошибку. URL-маршрут связывает путь с view, шаблон получает context и отображает данные, а форма описывает поля, валидирует ввод и отдаёт очищенные значения через <code>cleaned_data</code>. FBV проще как функция, CBV удобнее для типовых страниц.</p>
|
||
<div class="topic-meta">
|
||
<p><span class="label">Подробнее:</span><a href="#detail-django-web">Django web layer</a></p>
|
||
<p class="question"><span class="label">Вопрос:</span>Что будет, если в <code>ListView</code> не указать ни <code>model</code>, ни <code>queryset</code>?</p>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<h2>Схемы</h2>
|
||
|
||
<figure class="diagram">
|
||
<svg viewBox="0 0 980 260" role="img" aria-label="HTTP request response">
|
||
<rect x="20" y="60" width="180" height="100" rx="10" fill="#eef5ff" stroke="#2b6cb0" stroke-width="2"/>
|
||
<text x="110" y="105" text-anchor="middle" font-size="24" font-weight="700" fill="#1f2430">Клиент</text>
|
||
<text x="110" y="132" text-anchor="middle" font-size="16" fill="#5f687a">браузер</text>
|
||
<rect x="780" y="60" width="180" height="100" rx="10" fill="#ecfdf5" stroke="#0f766e" stroke-width="2"/>
|
||
<text x="870" y="105" text-anchor="middle" font-size="24" font-weight="700" fill="#1f2430">Сервер</text>
|
||
<text x="870" y="132" text-anchor="middle" font-size="16" fill="#5f687a">web app</text>
|
||
<line x1="220" y1="85" x2="760" y2="85" stroke="#2b6cb0" stroke-width="4" marker-end="url(#arrowBlue)"/>
|
||
<text x="490" y="70" text-anchor="middle" font-size="18" fill="#1f2430">HTTP request: GET /posts/</text>
|
||
<line x1="760" y1="145" x2="220" y2="145" stroke="#0f766e" stroke-width="4" marker-end="url(#arrowGreen)"/>
|
||
<text x="490" y="178" text-anchor="middle" font-size="18" fill="#1f2430">HTTP response: 200 OK + HTML</text>
|
||
<defs>
|
||
<marker id="arrowBlue" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||
<path d="M0,0 L0,6 L9,3 z" fill="#2b6cb0"/>
|
||
</marker>
|
||
<marker id="arrowGreen" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||
<path d="M0,0 L0,6 L9,3 z" fill="#0f766e"/>
|
||
</marker>
|
||
</defs>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="diagram">
|
||
<svg viewBox="0 0 900 300" role="img" aria-label="CSS box model">
|
||
<rect x="90" y="30" width="720" height="240" fill="#fff7ed" stroke="#f97316" stroke-width="3"/>
|
||
<rect x="170" y="70" width="560" height="160" fill="#ecfdf5" stroke="#0f766e" stroke-width="3"/>
|
||
<rect x="240" y="105" width="420" height="90" fill="#eef5ff" stroke="#2b6cb0" stroke-width="3"/>
|
||
<rect x="320" y="128" width="260" height="44" fill="#ffffff" stroke="#111827" stroke-width="2"/>
|
||
<text x="450" y="155" text-anchor="middle" font-size="20" font-weight="700">content</text>
|
||
<text x="450" y="95" text-anchor="middle" font-size="18">padding</text>
|
||
<text x="450" y="58" text-anchor="middle" font-size="18">border</text>
|
||
<text x="450" y="25" text-anchor="middle" font-size="18">margin</text>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="diagram">
|
||
<svg viewBox="0 0 980 360" role="img" aria-label="Flexbox and Grid">
|
||
<text x="230" y="34" text-anchor="middle" font-size="24" font-weight="700">Flexbox: одна ось</text>
|
||
<rect x="40" y="60" width="420" height="100" rx="8" fill="#f8fafc" stroke="#64748b"/>
|
||
<rect x="70" y="85" width="90" height="50" rx="6" fill="#bfdbfe"/>
|
||
<rect x="180" y="85" width="90" height="50" rx="6" fill="#bfdbfe"/>
|
||
<rect x="290" y="85" width="130" height="50" rx="6" fill="#bfdbfe"/>
|
||
<line x1="70" y1="190" x2="420" y2="190" stroke="#2b6cb0" stroke-width="4" marker-end="url(#arrowFlex)"/>
|
||
<text x="245" y="218" text-anchor="middle" font-size="18">главная ось</text>
|
||
|
||
<text x="735" y="34" text-anchor="middle" font-size="24" font-weight="700">Grid: строки + столбцы</text>
|
||
<rect x="560" y="60" width="350" height="240" fill="#f8fafc" stroke="#64748b"/>
|
||
<g stroke="#64748b" stroke-width="2">
|
||
<line x1="676" y1="60" x2="676" y2="300"/>
|
||
<line x1="793" y1="60" x2="793" y2="300"/>
|
||
<line x1="560" y1="140" x2="910" y2="140"/>
|
||
<line x1="560" y1="220" x2="910" y2="220"/>
|
||
</g>
|
||
<rect x="570" y="70" width="106" height="60" rx="6" fill="#bbf7d0"/>
|
||
<rect x="686" y="70" width="107" height="60" rx="6" fill="#bbf7d0"/>
|
||
<rect x="803" y="70" width="100" height="60" rx="6" fill="#bbf7d0"/>
|
||
<rect x="570" y="150" width="223" height="60" rx="6" fill="#bbf7d0"/>
|
||
<rect x="803" y="150" width="100" height="140" rx="6" fill="#bbf7d0"/>
|
||
<defs>
|
||
<marker id="arrowFlex" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||
<path d="M0,0 L0,6 L9,3 z" fill="#2b6cb0"/>
|
||
</marker>
|
||
</defs>
|
||
</svg>
|
||
</figure>
|
||
|
||
<figure class="diagram">
|
||
<svg viewBox="0 0 980 320" role="img" aria-label="Django request cycle">
|
||
<g font-size="18" fill="#1f2430">
|
||
<rect x="40" y="115" width="130" height="70" rx="8" fill="#eef5ff" stroke="#2b6cb0" stroke-width="2"/>
|
||
<text x="105" y="155" text-anchor="middle" font-weight="700">Browser</text>
|
||
<rect x="230" y="115" width="130" height="70" rx="8" fill="#f8fafc" stroke="#64748b" stroke-width="2"/>
|
||
<text x="295" y="155" text-anchor="middle" font-weight="700">urls.py</text>
|
||
<rect x="420" y="115" width="130" height="70" rx="8" fill="#ecfdf5" stroke="#0f766e" stroke-width="2"/>
|
||
<text x="485" y="155" text-anchor="middle" font-weight="700">View</text>
|
||
<rect x="610" y="55" width="130" height="70" rx="8" fill="#fff7ed" stroke="#f97316" stroke-width="2"/>
|
||
<text x="675" y="95" text-anchor="middle" font-weight="700">Model</text>
|
||
<rect x="610" y="205" width="130" height="70" rx="8" fill="#fef2f2" stroke="#dc2626" stroke-width="2"/>
|
||
<text x="675" y="245" text-anchor="middle" font-weight="700">Template</text>
|
||
<rect x="800" y="55" width="130" height="70" rx="8" fill="#f8fafc" stroke="#64748b" stroke-width="2"/>
|
||
<text x="865" y="95" text-anchor="middle" font-weight="700">DB</text>
|
||
</g>
|
||
<g stroke="#334155" stroke-width="3" marker-end="url(#arrowDjango)">
|
||
<line x1="170" y1="150" x2="230" y2="150"/>
|
||
<line x1="360" y1="150" x2="420" y2="150"/>
|
||
<line x1="550" y1="130" x2="610" y2="95"/>
|
||
<line x1="740" y1="90" x2="800" y2="90"/>
|
||
<line x1="550" y1="170" x2="610" y2="230"/>
|
||
<line x1="610" y1="250" x2="170" y2="180"/>
|
||
</g>
|
||
<defs>
|
||
<marker id="arrowDjango" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||
<path d="M0,0 L0,6 L9,3 z" fill="#334155"/>
|
||
</marker>
|
||
</defs>
|
||
</svg>
|
||
</figure>
|
||
|
||
<h2>Подробная теория</h2>
|
||
|
||
<section class="details" id="detail-addressing">
|
||
<h3>Адресация и IP</h3>
|
||
<p class="back"><a href="#topic-addressing">← к краткой карточке</a></p>
|
||
<p>IP-адрес нужен, чтобы доставить пакет до конкретного узла сети. Доменное имя удобно человеку, но сеть работает с IP.</p>
|
||
<p><span class="pill">IPv4</span> 32 бита, запись вроде <code>192.168.1.10</code>. Адресов мало, поэтому используют приватные диапазоны и NAT.</p>
|
||
<p><span class="pill">IPv6</span> 128 бит, запись вроде <code>2001:db8::1</code>. Адресов намного больше, запись можно сокращать через <code>::</code>.</p>
|
||
<p>Приватные IPv4-диапазоны: <code>10.0.0.0/8</code>, <code>172.16.0.0/12</code>, <code>192.168.0.0/16</code>. <code>127.0.0.1</code> - localhost, обращение к самому себе.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-transport">
|
||
<h3>TCP, порты, NAT и подсети</h3>
|
||
<p class="back"><a href="#topic-transport">← к краткой карточке</a></p>
|
||
<p>TCP устанавливает соединение через три шага: <code>SYN</code>, <code>SYN-ACK</code>, <code>ACK</code>. Он следит за порядком данных, потерями и повторной отправкой.</p>
|
||
<p>Порт выбирает приложение внутри одного IP-адреса. HTTP обычно работает на <code>80</code>, HTTPS - на <code>443</code>.</p>
|
||
<p>Маска подсети показывает, где в IP-адресе часть сети, а где часть хоста. В <code>192.168.1.10/24</code> сеть - <code>192.168.1.0</code>, хост - <code>.10</code>.</p>
|
||
<p>NAT переводит приватные адреса во внешний публичный адрес. PAT дополнительно использует порты, поэтому много внутренних устройств могут выходить через один публичный IP.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-dns-uri">
|
||
<h3>DNS и URI/URL/URN</h3>
|
||
<p class="back"><a href="#topic-dns-uri">← к краткой карточке</a></p>
|
||
<p>DNS - система имён. Она ищет IP-адрес по домену. Упрощённо: кэш браузера, кэш ОС, resolver, root, TLD, авторитативный DNS-сервер.</p>
|
||
<table>
|
||
<tr><th>Запись</th><th>Смысл</th></tr>
|
||
<tr><td><code>A</code></td><td>домен в IPv4</td></tr>
|
||
<tr><td><code>AAAA</code></td><td>домен в IPv6</td></tr>
|
||
<tr><td><code>CNAME</code></td><td>псевдоним</td></tr>
|
||
<tr><td><code>MX</code></td><td>почтовый сервер</td></tr>
|
||
<tr><td><code>TXT</code></td><td>служебный текст, например SPF/DKIM</td></tr>
|
||
</table>
|
||
<p>URI - общий идентификатор. URL - URI с адресом и способом получения: <code>https://example.com/path?x=1#top</code>. URN - устойчивое имя, например ISBN или UUID.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-http">
|
||
<h3>HTTP, HTTPS, HTTP/3</h3>
|
||
<p class="back"><a href="#topic-http">← к краткой карточке</a></p>
|
||
<p>HTTP-сообщение состоит из стартовой строки, заголовков, пустой строки и необязательного тела.</p>
|
||
<pre>GET /posts/?page=2 HTTP/1.1
|
||
Host: example.com</pre>
|
||
<pre>HTTP/1.1 200 OK
|
||
Content-Type: text/html
|
||
|
||
<html>...</html></pre>
|
||
<p><code>GET</code> обычно получает данные, параметры видны в URL. <code>POST</code> обычно отправляет данные в теле запроса.</p>
|
||
<p>Коды: <code>2xx</code> успех, <code>3xx</code> редирект, <code>4xx</code> ошибка клиента, <code>5xx</code> ошибка сервера.</p>
|
||
<p>HTTPS - HTTP поверх TLS. HTTP/3 - HTTP поверх QUIC/UDP; смысл методов и кодов не меняется.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-auth">
|
||
<h3>Идентификация, аутентификация, авторизация, OAuth 2.0</h3>
|
||
<p class="back"><a href="#topic-auth">← к краткой карточке</a></p>
|
||
<p>Идентификация: пользователь сообщает, кто он. Аутентификация: система проверяет доказательство. Авторизация: система проверяет права.</p>
|
||
<p>OAuth 2.0 позволяет приложению получить access token без знания пароля пользователя. Права ограничиваются scope, сроком жизни токена и настройками сервиса.</p>
|
||
<ol>
|
||
<li>Клиент отправляет пользователя на authorization server.</li>
|
||
<li>Пользователь подтверждает доступ.</li>
|
||
<li>Клиент получает authorization code.</li>
|
||
<li>Код меняется на access token.</li>
|
||
<li>Access token используется для API-запросов.</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section class="details" id="detail-html">
|
||
<h3>HTML-структура</h3>
|
||
<p class="back"><a href="#topic-html">← к краткой карточке</a></p>
|
||
<p>HTML задаёт смысловую структуру документа. Комментарий пишется так: <code><!-- comment --></code>.</p>
|
||
<p><code>head</code> содержит <code>meta</code>, <code>title</code>, <code>link</code>, <code>script</code>. <code>meta viewport</code> нужен, чтобы мобильный браузер корректно рассчитывал ширину страницы.</p>
|
||
<p>Блочные элементы занимают строку: <code>div</code>, <code>p</code>, <code>section</code>, <code>form</code>. Строчные идут внутри текста: <code>span</code>, <code>a</code>, <code>strong</code>, <code>em</code>.</p>
|
||
<p>Семантические теги: <code>header</code>, <code>nav</code>, <code>main</code>, <code>section</code>, <code>article</code>, <code>aside</code>, <code>footer</code>.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-html-forms">
|
||
<h3>HTML Forms</h3>
|
||
<p class="back"><a href="#topic-html-forms">← к краткой карточке</a></p>
|
||
<p><code>form</code> отправляет данные. <code>action</code> задаёт URL, <code>method</code> - способ отправки: <code>get</code> или <code>post</code>.</p>
|
||
<p><code>id</code> уникален на странице и связывает поле с label. <code>name</code> - имя параметра, которое уйдёт на сервер.</p>
|
||
<pre><label for="email">Email</label>
|
||
<input id="email" name="email" type="email" required></pre>
|
||
<p><code>radio</code> выбирает один вариант из группы с одинаковым <code>name</code>. <code>checkbox</code> - независимый флажок. <code>fieldset</code> и <code>legend</code> группируют поля.</p>
|
||
<p><code>placeholder</code> - подсказка внутри поля. <code>required</code> - поле обязательно. У кнопки лучше явно писать <code>type="submit"</code>, <code>type="button"</code> или <code>type="reset"</code>.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-css-selectors">
|
||
<h3>CSS selectors и специфичность</h3>
|
||
<p class="back"><a href="#topic-css-selectors">← к краткой карточке</a></p>
|
||
<p>Селекторы: <code>*</code>, <code>p</code>, <code>.class</code>, <code>#id</code>, <code>div p</code>, <code>div > p</code>, <code>h2 + p</code>, <code>input[required]</code>, <code>:hover</code>, <code>:nth-child(2)</code>.</p>
|
||
<p>Специфичность: inline-style сильнее id, id сильнее class/attribute/pseudo-class, class сильнее tag.</p>
|
||
<p><code>body .content</code> сильнее <code>div p</code>, потому что класс имеет больший вес, чем селектор тега.</p>
|
||
<p>Если специфичность одинаковая, побеждает правило ниже в CSS. Наследуются, например, <code>color</code> и <code>font-family</code>; не наследуются <code>margin</code>, <code>padding</code>, <code>border</code>.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-css-box">
|
||
<h3>CSS box model и базовые свойства</h3>
|
||
<p class="back"><a href="#topic-css-box">← к краткой карточке</a></p>
|
||
<p>Блок состоит из content, padding, border и margin. <code>content-box</code> считает <code>width</code> только как ширину контента. <code>border-box</code> включает padding и border в width.</p>
|
||
<pre>width: 100px;
|
||
padding: 10px;
|
||
border: 5px solid;
|
||
box-sizing: border-box;</pre>
|
||
<p>Реальная ширина такого блока - <code>100px</code>.</p>
|
||
<p>Шрифты: <code>font-family</code>, <code>font-size</code>, <code>font-weight</code>, <code>font-style</code>. Текст: <code>text-align</code>, <code>text-decoration</code>, <code>line-height</code>, <code>letter-spacing</code>, <code>text-shadow</code>.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-layout">
|
||
<h3>Flexbox и Grid</h3>
|
||
<p class="back"><a href="#topic-layout">← к краткой карточке</a></p>
|
||
<p>Flexbox создаётся через <code>display: flex</code> или <code>display: inline-flex</code>. Главная ось зависит от <code>flex-direction</code>.</p>
|
||
<p><code>justify-content</code> выравнивает по главной оси, <code>align-items</code> - по поперечной. Значение <code>align-items</code> по умолчанию - <code>stretch</code>.</p>
|
||
<p><code>flex-grow</code> отвечает за рост, <code>flex-shrink</code> - за сжатие, <code>flex-basis</code> - за базовый размер.</p>
|
||
<p>Grid создаётся через <code>display: grid</code>. <code>grid-template-columns</code> задаёт столбцы, <code>grid-template-rows</code> - строки. <code>fr</code> - доля свободного места. <code>repeat()</code> сокращает повтор, <code>minmax()</code> задаёт минимум и максимум.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-django-models">
|
||
<h3>Django models и ORM queries</h3>
|
||
<p class="back"><a href="#topic-django-models">← к краткой карточке</a></p>
|
||
<p>Модель - Python-класс таблицы. Поле - колонка. Объект - строка. Если не указать primary key, Django создаёт <code>id</code>.</p>
|
||
<p><code>CharField</code> требует <code>max_length</code>. <code>null=True</code> разрешает NULL в БД, <code>blank=True</code> разрешает пустое значение в форме.</p>
|
||
<p><code>ForeignKey</code> - многие к одному. <code>related_name</code> задаёт обратную связь. <code>ManyToManyField(..., through="Model")</code> задаёт промежуточную модель.</p>
|
||
<table>
|
||
<tr><th>Метод</th><th>Что возвращает</th></tr>
|
||
<tr><td><code>all()</code></td><td>QuerySet всех объектов</td></tr>
|
||
<tr><td><code>filter()</code></td><td>QuerySet по условию</td></tr>
|
||
<tr><td><code>get()</code></td><td>один объект или ошибка</td></tr>
|
||
<tr><td><code>aggregate()</code></td><td>словарь с итогом по выборке</td></tr>
|
||
<tr><td><code>annotate()</code></td><td>QuerySet с вычисляемым полем у каждого объекта</td></tr>
|
||
</table>
|
||
<p><code>select_related</code> делает SQL JOIN для ForeignKey/OneToOne. <code>prefetch_related</code> делает отдельный запрос для ManyToMany и обратных связей.</p>
|
||
</section>
|
||
|
||
<section class="details" id="detail-django-web">
|
||
<h3>Django views, URLs, templates, forms</h3>
|
||
<p class="back"><a href="#topic-django-web">← к краткой карточке</a></p>
|
||
<p>FBV - функция. Она принимает <code>request</code> и возвращает response. В <code>render()</code> первым аргументом должен быть <code>request</code>.</p>
|
||
<pre>def home(request):
|
||
return render(request, "index.html", {"title": "Home"})</pre>
|
||
<p>CBV вызывается через <code>.as_view()</code>. <code>TemplateView</code> показывает шаблон, <code>ListView</code> показывает список, <code>DetailView</code> - один объект.</p>
|
||
<p>В <code>ListView</code> нужны <code>model</code> или <code>queryset</code>. Дополнительный context добавляют через <code>get_context_data()</code>, список меняют через <code>get_queryset()</code>.</p>
|
||
<p><code>path(route, view, kwargs, name)</code> задаёт маршрут. <code>app_name</code> задаёт namespace. В шаблоне URL строится так: <code>{% url 'app:name' %}</code>.</p>
|
||
<p>В шаблонах переменные пишутся как <code>{{ value }}</code>, теги как <code>{% tag %}</code>, фильтры как <code>{{ value|lower }}</code>. Если переменной нет, обычно выводится пустая строка.</p>
|
||
<p><code>forms.Form</code> - обычная форма. <code>forms.ModelForm</code> - форма на основе модели. Для связи между полями используют общий метод <code>clean()</code>. После <code>is_valid()</code> доступны <code>cleaned_data</code> и <code>errors</code>.</p>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|