Dmitry
600 lines
32 KiB
HTML
600 lines
32 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;
|
||
}
|
||
|
||
.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">
|
||
<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">
|
||
<h3>2. TCP, порты, NAT и подсети</h3>
|
||
<p><span class="label">Кратко:</span>TCP отвечает за надёжную передачу, порт выбирает приложение, маска делит сеть, NAT переводит приватные адреса в публичные.</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">
|
||
<h3>3. DNS, URI, URL, URN</h3>
|
||
<p><span class="label">Кратко:</span>DNS находит IP по имени. URI - общий идентификатор, URL - адрес получения ресурса, 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">
|
||
<h3>4. HTTP, HTTPS, HTTP/3</h3>
|
||
<p><span class="label">Кратко:</span>HTTP - запрос и ответ. HTTPS добавляет 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">
|
||
<h3>5. Идентификация, аутентификация, OAuth 2.0</h3>
|
||
<p><span class="label">Кратко:</span>Идентификация - кто ты, аутентификация - докажи, авторизация - что тебе можно. OAuth 2.0 выдаёт ограниченный доступ без передачи пароля.</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">
|
||
<h3>6. HTML-документ</h3>
|
||
<p><span class="label">Кратко:</span>HTML описывает структуру страницы. <code>head</code> хранит служебные данные, <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">
|
||
<h3>7. HTML-формы</h3>
|
||
<p><span class="label">Кратко:</span>Форма отправляет данные на сервер. <code>name</code> уходит в запросе, <code>id</code> связывает поле с <code>label</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">
|
||
<h3>8. CSS selectors и специфичность</h3>
|
||
<p><span class="label">Кратко:</span>Селектор выбирает элементы. Специфичность решает, какое CSS-правило победит при конфликте.</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">
|
||
<h3>9. CSS box model и базовые свойства</h3>
|
||
<p><span class="label">Кратко:</span>Блок состоит из content, padding, border и margin. <code>border-box</code> включает 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">
|
||
<h3>10. Flexbox и Grid</h3>
|
||
<p><span class="label">Кратко:</span>Flexbox раскладывает по одной оси. Grid работает со строками и столбцами одновременно.</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">
|
||
<h3>11. Django models и ORM queries</h3>
|
||
<p><span class="label">Кратко:</span>Модель описывает таблицу. ORM строит запросы через Python. 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">
|
||
<h3>12. Django views, URLs, templates, forms</h3>
|
||
<p><span class="label">Кратко:</span>View принимает request и возвращает response. URL связывает путь и view. Template получает context. Form валидирует данные.</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>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>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>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>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>Идентификация: пользователь сообщает, кто он. Аутентификация: система проверяет доказательство. Авторизация: система проверяет права.</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>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><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>Селекторы: <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>Блок состоит из 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>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>Модель - 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>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>
|