Auto | arch-x1: 2026-06-05 13:44:29

99 System/Export/Подготовка к экзамену по веб-разработке.html

@@ -184,6 +184,12 @@
       margin-top: 0;
     }
 
+    .back {
+      margin: -4px 0 14px;
+      color: var(--muted);
+      font-size: 14px;
+    }
+
     .pill {
       display: inline-block;
       margin: 0 6px 6px 0;
@@ -253,108 +259,108 @@
 
   <h2>Карта тем</h2>
   <section class="grid">
-    <article class="topic">
+    <article class="topic" id="topic-addressing">
       <h3>1. Адресация, IPv4, IPv6</h3>
-      <p><span class="label">Кратко:</span>IP-адрес указывает узел сети. IPv4 - 32 бита, IPv6 - 128 бит. Домен через DNS превращается в IP.</p>
+      <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">
+    <article class="topic" id="topic-transport">
       <h3>2. TCP, порты, NAT и подсети</h3>
-      <p><span class="label">Кратко:</span>TCP отвечает за надёжную передачу, порт выбирает приложение, маска делит сеть, NAT переводит приватные адреса в публичные.</p>
+      <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">
+    <article class="topic" id="topic-dns-uri">
       <h3>3. DNS, URI, URL, URN</h3>
-      <p><span class="label">Кратко:</span>DNS находит IP по имени. URI - общий идентификатор, URL - адрес получения ресурса, URN - устойчивое имя.</p>
+      <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">
+    <article class="topic" id="topic-http">
       <h3>4. HTTP, HTTPS, HTTP/3</h3>
-      <p><span class="label">Кратко:</span>HTTP - запрос и ответ. HTTPS добавляет TLS. HTTP/3 переносит HTTP на QUIC поверх UDP.</p>
+      <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">
+    <article class="topic" id="topic-auth">
       <h3>5. Идентификация, аутентификация, OAuth 2.0</h3>
-      <p><span class="label">Кратко:</span>Идентификация - кто ты, аутентификация - докажи, авторизация - что тебе можно. OAuth 2.0 выдаёт ограниченный доступ без передачи пароля.</p>
+      <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">
+    <article class="topic" id="topic-html">
       <h3>6. HTML-документ</h3>
-      <p><span class="label">Кратко:</span>HTML описывает структуру страницы. <code>head</code> хранит служебные данные, <code>body</code> - видимое содержимое.</p>
+      <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">
+    <article class="topic" id="topic-html-forms">
       <h3>7. HTML-формы</h3>
-      <p><span class="label">Кратко:</span>Форма отправляет данные на сервер. <code>name</code> уходит в запросе, <code>id</code> связывает поле с <code>label</code>.</p>
+      <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">
+    <article class="topic" id="topic-css-selectors">
       <h3>8. CSS selectors и специфичность</h3>
-      <p><span class="label">Кратко:</span>Селектор выбирает элементы. Специфичность решает, какое CSS-правило победит при конфликте.</p>
+      <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">
+    <article class="topic" id="topic-css-box">
       <h3>9. CSS box model и базовые свойства</h3>
-      <p><span class="label">Кратко:</span>Блок состоит из content, padding, border и margin. <code>border-box</code> включает padding и border в заданную ширину.</p>
+      <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">
+    <article class="topic" id="topic-layout">
       <h3>10. Flexbox и Grid</h3>
-      <p><span class="label">Кратко:</span>Flexbox раскладывает по одной оси. Grid работает со строками и столбцами одновременно.</p>
+      <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">
+    <article class="topic" id="topic-django-models">
       <h3>11. Django models и ORM queries</h3>
-      <p><span class="label">Кратко:</span>Модель описывает таблицу. ORM строит запросы через Python. QuerySet ленивый и поддерживает цепочки методов.</p>
+      <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">
+    <article class="topic" id="topic-django-web">
       <h3>12. Django views, URLs, templates, forms</h3>
-      <p><span class="label">Кратко:</span>View принимает request и возвращает response. URL связывает путь и view. Template получает context. Form валидирует данные.</p>
+      <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>
@@ -467,6 +473,7 @@
 
   <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>
@@ -475,6 +482,7 @@
 
   <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>
@@ -483,6 +491,7 @@
 
   <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>
@@ -497,6 +506,7 @@
 
   <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>
@@ -511,6 +521,7 @@ Content-Type: text/html
 
   <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>
@@ -524,6 +535,7 @@ Content-Type: text/html
 
   <section class="details" id="detail-html">
     <h3>HTML-структура</h3>
+    <p class="back"><a href="#topic-html">← к краткой карточке</a></p>
     <p>HTML задаёт смысловую структуру документа. Комментарий пишется так: <code>&lt;!-- comment --&gt;</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>
@@ -532,6 +544,7 @@ Content-Type: text/html
 
   <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>&lt;label for="email"&gt;Email&lt;/label&gt;
@@ -542,6 +555,7 @@ Content-Type: text/html
 
   <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 &gt; 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>
@@ -550,6 +564,7 @@ Content-Type: text/html
 
   <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;
@@ -561,6 +576,7 @@ box-sizing: border-box;</pre>
 
   <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>
@@ -569,6 +585,7 @@ box-sizing: border-box;</pre>
 
   <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>
@@ -585,6 +602,7 @@ box-sizing: border-box;</pre>
 
   <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>