Dmitry
997 lines
74 KiB
HTML
997 lines
74 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;
|
||
}
|
||
|
||
.term-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px;
|
||
margin: 12px 0 16px;
|
||
}
|
||
|
||
.term {
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
background: #fafbfe;
|
||
}
|
||
|
||
.term strong {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
color: #111827;
|
||
}
|
||
|
||
.exam {
|
||
border-left: 4px solid var(--accent);
|
||
background: var(--soft);
|
||
padding: 10px 12px;
|
||
margin: 12px 0 14px;
|
||
border-radius: 0 6px 6px 0;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
.term-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>
|
||
<div class="term-grid">
|
||
<div class="term"><strong>IP</strong>Протокол сетевого уровня. Он отвечает за адресацию и доставку пакетов между сетями, но сам не гарантирует доставку.</div>
|
||
<div class="term"><strong>IPv4</strong>Версия IP с 32-битным адресом. Записывается четырьмя октетами: <code>0.0.0.0</code> ... <code>255.255.255.255</code>.</div>
|
||
<div class="term"><strong>IPv6</strong>Версия IP с 128-битным адресом. Нужна из-за нехватки IPv4 и упрощает глобальную адресацию.</div>
|
||
<div class="term"><strong>Октет</strong>8 бит. В IPv4 четыре октета, каждый отображается числом от 0 до 255.</div>
|
||
<div class="term"><strong>Публичный адрес</strong>Адрес, который маршрутизируется в интернете и может быть доступен извне.</div>
|
||
<div class="term"><strong>Приватный адрес</strong>Адрес для локальных сетей. В интернет напрямую не выходит, обычно используется с NAT.</div>
|
||
<div class="term"><strong>Localhost</strong>Имя или адрес для обращения к самому компьютеру. Обычно <code>localhost</code> и <code>127.0.0.1</code>.</div>
|
||
<div class="term"><strong>Хост</strong>Устройство или интерфейс в сети: компьютер, сервер, телефон, контейнер, виртуальная машина.</div>
|
||
</div>
|
||
<h4>Как выглядит путь от имени сайта к IP</h4>
|
||
<ol>
|
||
<li>Пользователь вводит домен, например <code>example.com</code>.</li>
|
||
<li>Браузер или ОС спрашивает DNS, какой IP соответствует имени.</li>
|
||
<li>После получения IP клиент открывает соединение к этому адресу.</li>
|
||
<li>Чтобы попасть в нужную программу на сервере, используется порт: например <code>443</code> для HTTPS.</li>
|
||
</ol>
|
||
<div class="exam">
|
||
На экзамене важно не путать: домен - имя для человека, IP - адрес узла, порт - адрес приложения внутри узла.
|
||
</div>
|
||
</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>
|
||
<div class="term-grid">
|
||
<div class="term"><strong>TCP</strong>Надёжный транспортный протокол. Перед передачей устанавливает соединение и подтверждает получение данных.</div>
|
||
<div class="term"><strong>UDP</strong>Транспортный протокол без соединения и подтверждений. Быстрее, но не гарантирует доставку и порядок.</div>
|
||
<div class="term"><strong>SYN</strong>Первый пакет TCP-рукопожатия: клиент просит открыть соединение.</div>
|
||
<div class="term"><strong>SYN-ACK</strong>Ответ сервера: запрос принят, сервер тоже готов открыть соединение.</div>
|
||
<div class="term"><strong>ACK</strong>Подтверждение клиента. После него TCP-соединение считается установленным.</div>
|
||
<div class="term"><strong>Порт</strong>Число от 0 до 65535, которое указывает процесс или сервис внутри IP-адреса.</div>
|
||
<div class="term"><strong>Маска подсети</strong>Показывает, какие биты IP относятся к сети, а какие к хосту.</div>
|
||
<div class="term"><strong>CIDR</strong>Краткая запись маски, например <code>/24</code>. Число показывает количество сетевых бит.</div>
|
||
<div class="term"><strong>NAT</strong>Замена адресов на границе сети. Обычно приватный адрес заменяется публичным.</div>
|
||
<div class="term"><strong>PAT</strong>Вариант NAT с портами. Позволяет многим внутренним устройствам использовать один внешний IP.</div>
|
||
</div>
|
||
<h4>Трёхстороннее рукопожатие TCP</h4>
|
||
<ol>
|
||
<li><code>SYN</code>: клиент говорит "хочу соединиться".</li>
|
||
<li><code>SYN-ACK</code>: сервер говорит "готов, подтверждаю".</li>
|
||
<li><code>ACK</code>: клиент подтверждает ответ сервера.</li>
|
||
</ol>
|
||
<h4>Подсеть на примере</h4>
|
||
<p><code>192.168.1.10/24</code>: первые 24 бита - сеть, последние 8 бит - хосты. Адрес сети <code>192.168.1.0</code>, типичный шлюз <code>192.168.1.1</code>, устройства часто получают адреса <code>192.168.1.2</code> ... <code>192.168.1.254</code>.</p>
|
||
<div class="exam">
|
||
Если два IP в одной подсети, устройство может отправить кадр напрямую в локальную сеть. Если адрес в другой подсети, пакет идёт через шлюз.
|
||
</div>
|
||
</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>
|
||
<div class="term-grid">
|
||
<div class="term"><strong>DNS resolver</strong>Сервер, который принимает запрос клиента и ищет ответ в DNS-иерархии.</div>
|
||
<div class="term"><strong>Root server</strong>Корневой DNS-сервер. Не знает IP всех сайтов, но знает, куда отправить за зоной верхнего уровня.</div>
|
||
<div class="term"><strong>TLD</strong>Зона верхнего уровня: <code>.ru</code>, <code>.com</code>, <code>.org</code>.</div>
|
||
<div class="term"><strong>Authoritative server</strong>Авторитативный сервер домена. Он хранит окончательный ответ по доменному имени.</div>
|
||
<div class="term"><strong>URI</strong>Uniform Resource Identifier. Любой идентификатор ресурса.</div>
|
||
<div class="term"><strong>URL</strong>Uniform Resource Locator. URI, который указывает адрес и способ получения ресурса.</div>
|
||
<div class="term"><strong>URN</strong>Uniform Resource Name. Устойчивое имя ресурса без обязательного расположения.</div>
|
||
<div class="term"><strong>Фрагмент</strong>Часть URL после <code>#</code>. Обычно указывает на элемент внутри документа.</div>
|
||
</div>
|
||
<h4>Компоненты URL</h4>
|
||
<pre>https://example.com:443/articles/1?print=true#comments</pre>
|
||
<ul>
|
||
<li><code>https</code> - схема, то есть способ доступа.</li>
|
||
<li><code>example.com</code> - хост: домен или IP.</li>
|
||
<li><code>443</code> - порт. Можно не писать, если он стандартный для схемы.</li>
|
||
<li><code>/articles/1</code> - путь к ресурсу на сервере.</li>
|
||
<li><code>?print=true</code> - query string, параметры запроса.</li>
|
||
<li><code>#comments</code> - фрагмент внутри страницы.</li>
|
||
</ul>
|
||
<div class="exam">
|
||
Формула: URL всегда URI, потому что он идентифицирует ресурс. Но URI не всегда URL, потому что может быть просто именем, например URN.
|
||
</div>
|
||
</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>
|
||
<div class="term-grid">
|
||
<div class="term"><strong>Метод</strong>Глагол HTTP-запроса: что клиент хочет сделать с ресурсом.</div>
|
||
<div class="term"><strong>Заголовок</strong>Пара "имя: значение" с метаданными запроса или ответа.</div>
|
||
<div class="term"><strong>Тело</strong>Данные после заголовков. В POST там часто форма или JSON.</div>
|
||
<div class="term"><strong>Статус-код</strong>Числовой результат обработки запроса: <code>200</code>, <code>404</code>, <code>500</code>.</div>
|
||
<div class="term"><strong>TLS</strong>Криптографический слой HTTPS: шифрует трафик и проверяет сервер.</div>
|
||
<div class="term"><strong>QUIC</strong>Транспорт для HTTP/3 поверх UDP со встроенным TLS 1.3 и потоками.</div>
|
||
</div>
|
||
<h4>Методы HTTP</h4>
|
||
<table>
|
||
<tr><th>Метод</th><th>Назначение</th></tr>
|
||
<tr><td><code>GET</code></td><td>Получить ресурс. Не должен менять состояние сервера.</td></tr>
|
||
<tr><td><code>POST</code></td><td>Отправить данные: форму, JSON, файл, команду создания.</td></tr>
|
||
<tr><td><code>HEAD</code></td><td>Получить только заголовки, без тела ответа.</td></tr>
|
||
<tr><td><code>PUT</code></td><td>Полностью создать или заменить ресурс.</td></tr>
|
||
<tr><td><code>PATCH</code></td><td>Частично изменить ресурс.</td></tr>
|
||
<tr><td><code>DELETE</code></td><td>Удалить ресурс.</td></tr>
|
||
<tr><td><code>OPTIONS</code></td><td>Узнать возможности сервера или разрешённые методы.</td></tr>
|
||
</table>
|
||
<h4>Частые заголовки</h4>
|
||
<table>
|
||
<tr><th>Заголовок</th><th>Смысл</th></tr>
|
||
<tr><td><code>Host</code></td><td>Домен или хост, к которому обращается клиент.</td></tr>
|
||
<tr><td><code>User-Agent</code></td><td>Информация о клиенте: браузер, ОС, версия.</td></tr>
|
||
<tr><td><code>Accept</code></td><td>Какие типы ответа клиент готов принять.</td></tr>
|
||
<tr><td><code>Content-Type</code></td><td>Тип данных в теле сообщения.</td></tr>
|
||
<tr><td><code>Cookie</code></td><td>Cookies, которые браузер отправляет серверу.</td></tr>
|
||
<tr><td><code>Authorization</code></td><td>Данные доступа, например <code>Bearer token</code>.</td></tr>
|
||
</table>
|
||
<div class="exam">
|
||
HTTPS не меняет HTML, URL-маршруты, методы GET/POST и коды ответа. Он добавляет защищённое соединение под HTTP.
|
||
</div>
|
||
</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>
|
||
<div class="term-grid">
|
||
<div class="term"><strong>Идентификация</strong>Пользователь сообщает идентификатор: логин, email, номер телефона.</div>
|
||
<div class="term"><strong>Аутентификация</strong>Проверка доказательства: пароль, код, ключ, сертификат.</div>
|
||
<div class="term"><strong>Авторизация</strong>Проверка прав: можно ли читать, создавать, редактировать, удалять.</div>
|
||
<div class="term"><strong>Сессия</strong>Состояние входа пользователя на сервере, обычно связывается с cookie в браузере.</div>
|
||
<div class="term"><strong>Cookie</strong>Небольшое значение, которое браузер хранит для сайта и отправляет с запросами.</div>
|
||
<div class="term"><strong>Bearer token</strong>Токен доступа. Кто владеет токеном, тот может выполнить разрешённые действия.</div>
|
||
<div class="term"><strong>Access token</strong>Короткоживущий токен для доступа к API.</div>
|
||
<div class="term"><strong>Refresh token</strong>Токен для получения нового access token без повторного входа пользователя.</div>
|
||
<div class="term"><strong>Scope</strong>Список разрешений токена: например читать профиль, но не удалять данные.</div>
|
||
<div class="term"><strong>OpenID Connect</strong>Надстройка над OAuth 2.0 для аутентификации пользователя.</div>
|
||
</div>
|
||
<div class="exam">
|
||
OAuth 2.0 сам по себе отвечает за доступ к ресурсам, а не за доказательство личности. Для "входа через провайдера" обычно нужен OpenID Connect.
|
||
</div>
|
||
</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>
|
||
<h4>Минимальный документ</h4>
|
||
<pre><!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Страница</title>
|
||
</head>
|
||
<body>
|
||
<main>Контент</main>
|
||
</body>
|
||
</html></pre>
|
||
<div class="term-grid">
|
||
<div class="term"><strong><code><!doctype html></code></strong>Сообщает браузеру, что документ написан по HTML5 и его нужно обрабатывать в стандартном режиме.</div>
|
||
<div class="term"><strong><code><html></code></strong>Корневой элемент всей HTML-страницы. Атрибут <code>lang</code> задаёт язык документа.</div>
|
||
<div class="term"><strong><code><head></code></strong>Служебная часть документа. Не отображает основной контент пользователю.</div>
|
||
<div class="term"><strong><code><body></code></strong>Видимое содержимое страницы: текст, формы, изображения, таблицы, разделы.</div>
|
||
<div class="term"><strong><code><meta charset></code></strong>Задаёт кодировку. Для русских текстов обычно нужен <code>UTF-8</code>.</div>
|
||
<div class="term"><strong><code><meta viewport></code></strong>Говорит мобильному браузеру использовать ширину устройства, а не виртуальную широкую страницу.</div>
|
||
<div class="term"><strong><code><title></code></strong>Название вкладки браузера и заголовок страницы для поисковиков.</div>
|
||
<div class="term"><strong><code><link></code></strong>Подключает внешний ресурс, чаще всего CSS: <code>rel="stylesheet"</code>.</div>
|
||
<div class="term"><strong><code><script></code></strong>Подключает или содержит JavaScript. Может быть в <code>head</code> или в конце <code>body</code>.</div>
|
||
<div class="term"><strong><code><style></code></strong>Внутренние CSS-правила прямо в HTML-документе.</div>
|
||
</div>
|
||
<h4>Теги содержимого</h4>
|
||
<table>
|
||
<tr><th>Тег</th><th>Назначение</th></tr>
|
||
<tr><td><code><h1>...<h6></code></td><td>Заголовки уровней. <code>h1</code> главный, <code>h6</code> самый низкий.</td></tr>
|
||
<tr><td><code><p></code></td><td>Абзац текста.</td></tr>
|
||
<tr><td><code><br></code></td><td>Принудительный перенос строки. Не использовать вместо абзацев.</td></tr>
|
||
<tr><td><code><strong></code></td><td>Важное смысловое выделение, обычно отображается жирным.</td></tr>
|
||
<tr><td><code><em></code></td><td>Смысловой акцент, обычно отображается курсивом.</td></tr>
|
||
<tr><td><code><code></code></td><td>Фрагмент кода или технического текста.</td></tr>
|
||
<tr><td><code><div></code></td><td>Нейтральный блочный контейнер без собственного смысла.</td></tr>
|
||
<tr><td><code><span></code></td><td>Нейтральный строчный контейнер без собственного смысла.</td></tr>
|
||
<tr><td><code><a></code></td><td>Ссылка. Главный атрибут: <code>href</code>.</td></tr>
|
||
<tr><td><code><img></code></td><td>Изображение. Важны <code>src</code> и <code>alt</code>.</td></tr>
|
||
<tr><td><code><ul></code>, <code><ol></code>, <code><li></code></td><td>Маркированный список, нумерованный список и элемент списка.</td></tr>
|
||
<tr><td><code><table></code>, <code><tr></code>, <code><th></code>, <code><td></code></td><td>Таблица, строка, заголовочная ячейка, обычная ячейка.</td></tr>
|
||
<tr><td><code><caption></code></td><td>Название таблицы.</td></tr>
|
||
<tr><td><code><thead></code>, <code><tbody></code>, <code><tfoot></code></td><td>Группы строк таблицы: заголовок, тело, итог.</td></tr>
|
||
</table>
|
||
<h4>Семантические теги документа</h4>
|
||
<table>
|
||
<tr><th>Тег</th><th>Когда использовать</th></tr>
|
||
<tr><td><code><header></code></td><td>Верхняя часть страницы или секции: логотип, заголовок, навигация.</td></tr>
|
||
<tr><td><code><nav></code></td><td>Блок основных навигационных ссылок.</td></tr>
|
||
<tr><td><code><main></code></td><td>Главный контент страницы. Обычно один на страницу.</td></tr>
|
||
<tr><td><code><section></code></td><td>Смысловой раздел, обычно с заголовком.</td></tr>
|
||
<tr><td><code><article></code></td><td>Самостоятельный материал: статья, пост, карточка новости.</td></tr>
|
||
<tr><td><code><aside></code></td><td>Дополнительный контент: боковая панель, подсказки, связанные ссылки.</td></tr>
|
||
<tr><td><code><footer></code></td><td>Нижняя часть страницы или секции.</td></tr>
|
||
</table>
|
||
<h4>Атрибуты HTML</h4>
|
||
<div class="term-grid">
|
||
<div class="term"><strong><code>class</code></strong>Класс элемента. Один и тот же класс можно дать многим элементам для CSS и JS.</div>
|
||
<div class="term"><strong><code>id</code></strong>Уникальный идентификатор элемента на странице. Используется для якорей, label, JS.</div>
|
||
<div class="term"><strong><code>href</code></strong>Адрес ссылки у <code>a</code>.</div>
|
||
<div class="term"><strong><code>src</code></strong>Источник файла у <code>img</code>, <code>script</code> и некоторых других тегов.</div>
|
||
<div class="term"><strong><code>alt</code></strong>Текстовое описание изображения. Нужно для доступности и если картинка не загрузилась.</div>
|
||
<div class="term"><strong><code>target="_blank"</code></strong>Открывает ссылку в новой вкладке.</div>
|
||
<div class="term"><strong><code>colspan</code></strong>Объединяет ячейку таблицы по столбцам.</div>
|
||
<div class="term"><strong><code>rowspan</code></strong>Объединяет ячейку таблицы по строкам.</div>
|
||
</div>
|
||
<div class="exam">
|
||
В обычном HTML несколько пробелов подряд схлопываются в один. Перенос строки в исходном коде не означает перенос на странице.
|
||
</div>
|
||
</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>
|
||
<h4>Теги формы</h4>
|
||
<table>
|
||
<tr><th>Тег</th><th>Назначение</th></tr>
|
||
<tr><td><code><form></code></td><td>Контейнер формы. Определяет, куда и как отправлять данные.</td></tr>
|
||
<tr><td><code><input></code></td><td>Универсальное поле. Поведение зависит от <code>type</code>.</td></tr>
|
||
<tr><td><code><label></code></td><td>Подпись поля. Связывается с полем через <code>for</code> и <code>id</code>.</td></tr>
|
||
<tr><td><code><button></code></td><td>Кнопка формы или обычного действия.</td></tr>
|
||
<tr><td><code><textarea></code></td><td>Многострочное текстовое поле.</td></tr>
|
||
<tr><td><code><select></code></td><td>Выпадающий список.</td></tr>
|
||
<tr><td><code><option></code></td><td>Вариант внутри <code>select</code>.</td></tr>
|
||
<tr><td><code><fieldset></code></td><td>Логическая группа полей.</td></tr>
|
||
<tr><td><code><legend></code></td><td>Заголовок группы <code>fieldset</code>.</td></tr>
|
||
</table>
|
||
<h4>Атрибуты формы и полей</h4>
|
||
<div class="term-grid">
|
||
<div class="term"><strong><code>action</code></strong>URL, куда отправляется форма.</div>
|
||
<div class="term"><strong><code>method</code></strong>HTTP-метод отправки: чаще <code>get</code> или <code>post</code>.</div>
|
||
<div class="term"><strong><code>name</code></strong>Имя параметра, которое попадёт в запрос на сервер.</div>
|
||
<div class="term"><strong><code>id</code></strong>Идентификатор поля, нужен для связи с <code>label</code>.</div>
|
||
<div class="term"><strong><code>value</code></strong>Значение поля или значение варианта.</div>
|
||
<div class="term"><strong><code>required</code></strong>Поле обязательно для заполнения в браузере.</div>
|
||
<div class="term"><strong><code>placeholder</code></strong>Подсказка внутри пустого поля. Не заменяет подпись.</div>
|
||
<div class="term"><strong><code>checked</code></strong>Предварительно выбранный checkbox или radio.</div>
|
||
<div class="term"><strong><code>disabled</code></strong>Поле выключено и обычно не отправляется.</div>
|
||
<div class="term"><strong><code>readonly</code></strong>Поле нельзя редактировать, но значение может отправляться.</div>
|
||
</div>
|
||
<h4>Основные input type</h4>
|
||
<table>
|
||
<tr><th>Тип</th><th>Что делает</th></tr>
|
||
<tr><td><code>text</code></td><td>Обычная строка.</td></tr>
|
||
<tr><td><code>password</code></td><td>Пароль, символы скрываются.</td></tr>
|
||
<tr><td><code>email</code></td><td>Email с базовой браузерной проверкой.</td></tr>
|
||
<tr><td><code>number</code></td><td>Число, можно использовать <code>min</code> и <code>max</code>.</td></tr>
|
||
<tr><td><code>radio</code></td><td>Один выбор из группы с одинаковым <code>name</code>.</td></tr>
|
||
<tr><td><code>checkbox</code></td><td>Независимый флажок. Можно выбрать несколько.</td></tr>
|
||
<tr><td><code>submit</code></td><td>Кнопка отправки формы.</td></tr>
|
||
<tr><td><code>file</code></td><td>Выбор файла.</td></tr>
|
||
<tr><td><code>hidden</code></td><td>Скрытое поле, не видно пользователю, но отправляется.</td></tr>
|
||
</table>
|
||
<div class="exam">
|
||
Браузерная HTML-валидация удобна, но не защищает сервер. Любые данные формы нужно проверять на сервере.
|
||
</div>
|
||
</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>
|
||
<h4>Типы селекторов</h4>
|
||
<table>
|
||
<tr><th>Селектор</th><th>Пример</th><th>Что выбирает</th></tr>
|
||
<tr><td>Универсальный</td><td><code>*</code></td><td>Все элементы.</td></tr>
|
||
<tr><td>Элемент</td><td><code>p</code></td><td>Все теги <code>p</code>.</td></tr>
|
||
<tr><td>Класс</td><td><code>.card</code></td><td>Все элементы с <code>class="card"</code>.</td></tr>
|
||
<tr><td>ID</td><td><code>#main</code></td><td>Элемент с <code>id="main"</code>.</td></tr>
|
||
<tr><td>Потомок</td><td><code>article p</code></td><td>Все <code>p</code> внутри <code>article</code> на любой глубине.</td></tr>
|
||
<tr><td>Дочерний</td><td><code>article > p</code></td><td>Только прямые дочерние <code>p</code>.</td></tr>
|
||
<tr><td>Соседний</td><td><code>h2 + p</code></td><td>Первый <code>p</code> сразу после <code>h2</code>.</td></tr>
|
||
<tr><td>Общий соседний</td><td><code>h2 ~ p</code></td><td>Все <code>p</code> после <code>h2</code> на том же уровне.</td></tr>
|
||
<tr><td>Атрибут</td><td><code>input[required]</code></td><td>Элементы с указанным атрибутом.</td></tr>
|
||
<tr><td>Псевдокласс</td><td><code>a:hover</code></td><td>Состояние элемента или структурное условие.</td></tr>
|
||
<tr><td>Псевдоэлемент</td><td><code>p::first-line</code></td><td>Виртуальную часть элемента.</td></tr>
|
||
</table>
|
||
<h4>Псевдоклассы</h4>
|
||
<div class="term-grid">
|
||
<div class="term"><strong><code>:hover</code></strong>Когда указатель мыши над элементом.</div>
|
||
<div class="term"><strong><code>:focus</code></strong>Когда элемент в фокусе, например поле ввода активно.</div>
|
||
<div class="term"><strong><code>:active</code></strong>Момент активации, например нажатие мышью.</div>
|
||
<div class="term"><strong><code>:first-child</code></strong>Элемент является первым ребёнком родителя.</div>
|
||
<div class="term"><strong><code>:last-child</code></strong>Элемент является последним ребёнком родителя.</div>
|
||
<div class="term"><strong><code>:nth-child(n)</code></strong>Элемент на заданной позиции среди детей.</div>
|
||
<div class="term"><strong><code>:not(...)</code></strong>Элементы, которые не подходят под вложенный селектор.</div>
|
||
<div class="term"><strong><code>:checked</code></strong>Выбранный checkbox или radio.</div>
|
||
</div>
|
||
<h4>Расчёт специфичности</h4>
|
||
<p>Удобно считать как четыре группы: inline, id, class/attribute/pseudo-class, tag/pseudo-element.</p>
|
||
<table>
|
||
<tr><th>Селектор</th><th>Вес</th><th>Комментарий</th></tr>
|
||
<tr><td><code>div p</code></td><td><code>0-0-0-2</code></td><td>Два тега.</td></tr>
|
||
<tr><td><code>body .content</code></td><td><code>0-0-1-1</code></td><td>Один класс и один тег.</td></tr>
|
||
<tr><td><code>#app .content p</code></td><td><code>0-1-1-1</code></td><td>ID почти всегда перебивает классы и теги.</td></tr>
|
||
<tr><td><code>style="..."</code></td><td><code>1-0-0-0</code></td><td>Inline-стиль сильнее обычного CSS.</td></tr>
|
||
</table>
|
||
<div class="exam">
|
||
Группировка селекторов через запятую не увеличивает специфичность. <code>h1, h2</code> - это два отдельных правила с одинаковыми объявлениями.
|
||
</div>
|
||
</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>
|
||
<h4>Части блочной модели</h4>
|
||
<div class="term-grid">
|
||
<div class="term"><strong>Content</strong>Содержимое элемента: текст, картинка, дочерние элементы.</div>
|
||
<div class="term"><strong>Padding</strong>Внутренний отступ между content и border. Увеличивает визуальный размер блока.</div>
|
||
<div class="term"><strong>Border</strong>Рамка вокруг padding и content.</div>
|
||
<div class="term"><strong>Margin</strong>Внешний отступ между элементом и соседями.</div>
|
||
<div class="term"><strong><code>content-box</code></strong>Значение по умолчанию: <code>width</code> задаёт только content.</div>
|
||
<div class="term"><strong><code>border-box</code></strong><code>width</code> включает content, padding и border.</div>
|
||
</div>
|
||
<h4>Display</h4>
|
||
<table>
|
||
<tr><th>Значение</th><th>Поведение</th></tr>
|
||
<tr><td><code>block</code></td><td>Элемент начинается с новой строки и обычно занимает всю доступную ширину.</td></tr>
|
||
<tr><td><code>inline</code></td><td>Идёт внутри строки, ширина и высота задаются плохо или не работают как у блока.</td></tr>
|
||
<tr><td><code>inline-block</code></td><td>Снаружи ведёт себя как строчный, внутри как блочный: можно задавать размеры.</td></tr>
|
||
<tr><td><code>none</code></td><td>Элемент полностью убирается из раскладки.</td></tr>
|
||
<tr><td><code>flex</code></td><td>Создаёт flex-контейнер.</td></tr>
|
||
<tr><td><code>grid</code></td><td>Создаёт grid-контейнер.</td></tr>
|
||
</table>
|
||
<h4>Фон и границы</h4>
|
||
<table>
|
||
<tr><th>Свойство</th><th>Смысл</th></tr>
|
||
<tr><td><code>background-color</code></td><td>Цвет фона.</td></tr>
|
||
<tr><td><code>background-image</code></td><td>Фоновое изображение.</td></tr>
|
||
<tr><td><code>background-repeat</code></td><td>Повторять ли фон.</td></tr>
|
||
<tr><td><code>background-position</code></td><td>Положение фонового изображения.</td></tr>
|
||
<tr><td><code>background-size</code></td><td>Размер фонового изображения: например <code>cover</code> или <code>contain</code>.</td></tr>
|
||
<tr><td><code>border</code></td><td>Краткая запись рамки: ширина, стиль, цвет.</td></tr>
|
||
<tr><td><code>border-radius</code></td><td>Скругление углов.</td></tr>
|
||
<tr><td><code>box-shadow</code></td><td>Тень блока.</td></tr>
|
||
</table>
|
||
<h4>Текст и шрифты</h4>
|
||
<table>
|
||
<tr><th>Свойство</th><th>Смысл</th></tr>
|
||
<tr><td><code>font-family</code></td><td>Семейство шрифта.</td></tr>
|
||
<tr><td><code>font-size</code></td><td>Размер шрифта.</td></tr>
|
||
<tr><td><code>font-weight</code></td><td>Толщина: например <code>400</code>, <code>700</code>, <code>bold</code>.</td></tr>
|
||
<tr><td><code>font-style</code></td><td>Наклон: например <code>italic</code>.</td></tr>
|
||
<tr><td><code>text-align</code></td><td>Горизонтальное выравнивание текста.</td></tr>
|
||
<tr><td><code>text-decoration</code></td><td>Линии текста: подчёркивание, зачёркивание, отсутствие линии.</td></tr>
|
||
<tr><td><code>line-height</code></td><td>Высота строки, расстояние между строками.</td></tr>
|
||
<tr><td><code>letter-spacing</code></td><td>Расстояние между буквами.</td></tr>
|
||
<tr><td><code>text-shadow</code></td><td>Тень текста.</td></tr>
|
||
</table>
|
||
<div class="exam">
|
||
<code>margin: 0 auto</code> центрирует блочный элемент по горизонтали, если у него задана ширина меньше контейнера.
|
||
</div>
|
||
</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>
|
||
<h4>Flexbox: термины</h4>
|
||
<div class="term-grid">
|
||
<div class="term"><strong>Flex container</strong>Элемент с <code>display: flex</code> или <code>inline-flex</code>.</div>
|
||
<div class="term"><strong>Flex item</strong>Прямой дочерний элемент flex-контейнера.</div>
|
||
<div class="term"><strong>Main axis</strong>Главная ось. Её направление задаёт <code>flex-direction</code>.</div>
|
||
<div class="term"><strong>Cross axis</strong>Поперечная ось, перпендикулярная главной.</div>
|
||
<div class="term"><strong><code>flex-direction</code></strong>Направление главной оси: <code>row</code>, <code>column</code>, обратные варианты.</div>
|
||
<div class="term"><strong><code>justify-content</code></strong>Распределение элементов по главной оси.</div>
|
||
<div class="term"><strong><code>align-items</code></strong>Выравнивание элементов по поперечной оси.</div>
|
||
<div class="term"><strong><code>flex-wrap</code></strong>Разрешает или запрещает перенос элементов на новую строку.</div>
|
||
</div>
|
||
<h4>Flex item properties</h4>
|
||
<table>
|
||
<tr><th>Свойство</th><th>Смысл</th></tr>
|
||
<tr><td><code>flex-grow</code></td><td>Как элемент забирает свободное место.</td></tr>
|
||
<tr><td><code>flex-shrink</code></td><td>Как элемент сжимается при нехватке места.</td></tr>
|
||
<tr><td><code>flex-basis</code></td><td>Базовый размер до распределения свободного места.</td></tr>
|
||
<tr><td><code>order</code></td><td>Порядок отображения элемента.</td></tr>
|
||
<tr><td><code>align-self</code></td><td>Индивидуальное выравнивание одного элемента по поперечной оси.</td></tr>
|
||
</table>
|
||
<h4>Grid: термины</h4>
|
||
<div class="term-grid">
|
||
<div class="term"><strong>Grid container</strong>Элемент с <code>display: grid</code>.</div>
|
||
<div class="term"><strong>Grid item</strong>Прямой дочерний элемент grid-контейнера.</div>
|
||
<div class="term"><strong>Grid lines</strong>Линии, которые образуют сетку. Именно это правильный ответ на вопрос про линии сетки.</div>
|
||
<div class="term"><strong>Grid tracks</strong>Полосы между линиями: строки или столбцы.</div>
|
||
<div class="term"><strong>Grid cells</strong>Ячейки на пересечении строки и столбца.</div>
|
||
<div class="term"><strong>Grid areas</strong>Именованные или прямоугольные области из одной или нескольких ячеек.</div>
|
||
<div class="term"><strong><code>fr</code></strong>Доля свободного пространства.</div>
|
||
<div class="term"><strong><code>gap</code></strong>Расстояние между строками и столбцами.</div>
|
||
</div>
|
||
<pre>.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: auto minmax(200px, 1fr);
|
||
gap: 16px;
|
||
}</pre>
|
||
<div class="exam">
|
||
Flexbox чаще выбирают для меню, кнопок и выравнивания в одном направлении. Grid - для макета страницы и таблиц карточек в два измерения.
|
||
</div>
|
||
</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>
|