diff --git a/90 Library/Networking/NAT.md b/90 Library/Networking/NAT.md index a21e610..60e64cb 100644 --- a/90 Library/Networking/NAT.md +++ b/90 Library/Networking/NAT.md @@ -1,12 +1,12 @@ --- -status: stable +status: processing type: concept tags: - network - networking - nat created: 2025-12-17 -updated: 2026-05-07 +updated: 2026-06-05 aliases: - NAT --- @@ -91,5 +91,20 @@ PAT - это совершенно иная по сути работы систе |Повышение безопасности за счёт скрытия внутренней топологии|Сложности с туннелированием (IPsec и др.)| |Лёгкая смена публичной схемы адресации без перенастройки хостов|Нарушение работы сервисов, требующих входящих соединений или UDP| +## Простыми словами для экзамена + +NAT нужен, чтобы частные адреса локальной сети могли ходить в интернет через один или несколько публичных адресов. + +Домашний пример: + +- ноутбук имеет `192.168.1.10`; +- телефон имеет `192.168.1.11`; +- роутер имеет публичный адрес провайдера; +- сайты видят запросы как пришедшие от публичного адреса роутера. + +PAT — самый частый вариант NAT. Он различает внутренние устройства по портам. Поэтому один публичный IP может обслуживать много внутренних клиентов одновременно. + +Главная идея: IP меняется на границе сети, а таблица NAT запоминает, кому вернуть ответ. + ## Связанные заметки -- [[Terraform]] — NAT-шлюзы и пулы IP-адресов — типовые сетевые ресурсы, которые Terraform декларативно управляет в облачной инфраструктуре (VPC, subnets) \ No newline at end of file +- [[Terraform]] — NAT-шлюзы и пулы IP-адресов — типовые сетевые ресурсы, которые Terraform декларативно управляет в облачной инфраструктуре (VPC, subnets) diff --git a/90 Library/Networking/OAuth 2.0.md b/90 Library/Networking/OAuth 2.0.md index 846aa01..0159cae 100644 --- a/90 Library/Networking/OAuth 2.0.md +++ b/90 Library/Networking/OAuth 2.0.md @@ -1,10 +1,10 @@ --- title: OAuth 2.0 -status: seed +status: processing type: concept tags: [web, security, oauth, authorization] created: 2026-06-04 -updated: 2026-06-04 +updated: 2026-06-05 source: "[[00_базовые_понятия.pdf]]" aliases: - OAuth 2 @@ -41,6 +41,20 @@ OAuth 2.0 — протокол авторизации, который позво OAuth 2.0 — про авторизацию. Сам по себе он не обязан доказывать личность пользователя как протокол аутентификации; для входа поверх OAuth обычно используют OpenID Connect. +## Простыми словами для экзамена + +OAuth 2.0 нужен, чтобы не отдавать пароль стороннему приложению. + +Пример: сайт просит "войти через GitHub". + +1. Сайт перенаправляет пользователя на GitHub. +2. Пользователь подтверждает доступ на GitHub. +3. GitHub возвращает сайту код авторизации. +4. Сайт меняет код на access token. +5. Сайт ходит в API GitHub с этим токеном. + +Токен можно ограничить по сроку и правам (`scope`). Это безопаснее, чем дать приложению пароль от аккаунта. + ## Связи - [[Веб-аутентификация и авторизация]] diff --git a/90 Library/Networking/Веб-аутентификация и авторизация.md b/90 Library/Networking/Веб-аутентификация и авторизация.md index 3f5c7d3..1d1d32c 100644 --- a/90 Library/Networking/Веб-аутентификация и авторизация.md +++ b/90 Library/Networking/Веб-аутентификация и авторизация.md @@ -1,10 +1,10 @@ --- title: Веб-аутентификация и авторизация -status: seed +status: processing type: concept tags: [web, security, authentication, authorization, oauth] created: 2026-06-04 -updated: 2026-06-04 +updated: 2026-06-05 source: "[[00_базовые_понятия.pdf]]" aliases: - Идентификация, аутентификация и авторизация @@ -38,6 +38,22 @@ Authorization: Bearer eyJhbGciOi... Bearer-токен даёт доступ тому, кто им владеет. Поэтому токены нужно хранить аккуратно, ограничивать срок их жизни и уметь отзывать. +## Простыми словами для экзамена + +Три термина часто путают: + +- идентификация — пользователь назвал себя: "я `ivan@example.com`"; +- аутентификация — система проверила доказательство: пароль, код, ключ; +- авторизация — система решила, что этому пользователю можно: читать, создавать, удалять. + +Пример: + +1. Ввод логина — идентификация. +2. Проверка пароля — аутентификация. +3. Проверка роли `admin` перед удалением записи — авторизация. + +HTTP сам по себе не помнит пользователя между запросами. Поэтому веб-приложения используют cookies, сессии или токены. + ## Связи - [[OAuth 2.0]] diff --git a/90 Library/Networking/Подсети и маска подсети.md b/90 Library/Networking/Подсети и маска подсети.md index 7c667c5..7473ac3 100644 --- a/90 Library/Networking/Подсети и маска подсети.md +++ b/90 Library/Networking/Подсети и маска подсети.md @@ -1,10 +1,10 @@ --- title: Подсети и маска подсети -status: seed +status: processing type: concept tags: [network, networking, subnet, ipv4] created: 2026-06-04 -updated: 2026-06-04 +updated: 2026-06-05 source: "[[00_базовые_понятия.pdf]]" aliases: - Маска подсети @@ -58,6 +58,21 @@ Loopback-диапазон: - `127.0.0.0/8`, чаще всего `127.0.0.1` как `localhost`. +## Простыми словами для экзамена + +Подсеть — это часть большой сети. Маска говорит, какие биты IP-адреса считаются номером сети, а какие остаются под устройства. + +Пример: `192.168.1.10/24`. + +- `/24` означает: первые 24 бита — сеть. +- Адрес сети: `192.168.1.0`. +- Хостовая часть: последнее число. +- Типичный диапазон устройств: `192.168.1.1` ... `192.168.1.254`. + +Чем больше число после `/`, тем меньше подсеть. `/24` меньше, чем `/16`, потому что под хосты остаётся меньше бит. + +На экзамене часто спрашивают не точный расчёт, а смысл: маска нужна, чтобы понять, находится ли адрес в той же локальной сети или пакет нужно отправлять через шлюз. + ## Связи - [[IP-адрес]] diff --git a/90 Library/Networking/Протоколы/DNS.md b/90 Library/Networking/Протоколы/DNS.md index 7a0050d..e0af239 100644 --- a/90 Library/Networking/Протоколы/DNS.md +++ b/90 Library/Networking/Протоколы/DNS.md @@ -1,5 +1,5 @@ --- -status: stable +status: processing type: concept tags: - network @@ -7,7 +7,7 @@ tags: - protocols - dns created: 2025-12-17 -updated: 2026-05-07 +updated: 2026-06-05 aliases: - DNS --- @@ -46,4 +46,27 @@ DNS - Domain Name System Аналог: контактная книга в тел 1. Recursive (рекурсивный) - запрос IP-адреса по домену. 2. Iterative (итеративный) - запрос IP-адреса, либо авторитативного DNS сервера. -3. Inverse (обратный) - запрос доменного имени по IP-адресу. \ No newline at end of file +3. Inverse (обратный) - запрос доменного имени по IP-адресу. + +## Простыми словами для экзамена + +DNS превращает понятное человеку имя сайта в IP-адрес, понятный сети. + +Упрощённая цепочка: + +1. Браузер проверяет свой кэш. +2. ОС проверяет локальные данные, например `hosts`. +3. Resolver спрашивает DNS-серверы. +4. Root-сервер подсказывает сервер зоны верхнего уровня. +5. TLD-сервер подсказывает авторитативный сервер домена. +6. Авторитативный сервер отдаёт нужную запись. + +Частые записи: + +- `A` — домен в IPv4. +- `AAAA` — домен в IPv6. +- `CNAME` — псевдоним на другое имя. +- `MX` — почтовые серверы домена. +- `TXT` — текстовые данные, часто для подтверждений и SPF/DKIM. + +DNS не загружает сайт. Он только помогает найти адрес, куда потом пойдёт HTTP/HTTPS-запрос. diff --git a/90 Library/Networking/Протоколы/HTTP, HTTPS и HTTP3.md b/90 Library/Networking/Протоколы/HTTP, HTTPS и HTTP3.md index 9862655..3303861 100644 --- a/90 Library/Networking/Протоколы/HTTP, HTTPS и HTTP3.md +++ b/90 Library/Networking/Протоколы/HTTP, HTTPS и HTTP3.md @@ -1,10 +1,10 @@ --- title: HTTP, HTTPS и HTTP/3 -status: seed +status: processing type: concept tags: [web, network, networking, protocols, http, https, http3] created: 2026-06-04 -updated: 2026-06-04 +updated: 2026-06-05 source: "[[00_базовые_понятия.pdf]]" aliases: - HTTP, HTTPS и HTTP/3 @@ -114,6 +114,38 @@ HTTP/3 работает поверх QUIC, а QUIC работает поверх HTTP/3 не меняет смысл методов, заголовков и кодов ответа. Меняется транспортный слой. +## Простыми словами для экзамена + +HTTP — это правила разговора браузера и сервера. + +Запрос отвечает на вопрос: "что клиент хочет?". Ответ отвечает: "что сервер вернул?". + +Пример GET: + +```http +GET /posts/?page=2 HTTP/1.1 +Host: example.com +``` + +Пример POST: + +```http +POST /login/ HTTP/1.1 +Host: example.com +Content-Type: application/x-www-form-urlencoded + +username=ivan&password=secret +``` + +Главное различие: + +- `GET` обычно получает данные; параметры видны в URL. +- `POST` обычно отправляет данные в теле запроса; подходит для форм, создания объектов, логина. + +HTTPS — это не "другой HTTP", а HTTP внутри защищённого TLS-соединения. Порт HTTP — `80`, HTTPS — `443`. + +HTTP/3 использует QUIC поверх UDP. Для экзамена достаточно помнить: HTTP/3 уменьшает задержки и проблему блокировки потоков при потере пакетов. + ## Связи - [[TCP vs UDP]] diff --git a/90 Library/Networking/Протоколы/IP-адрес.md b/90 Library/Networking/Протоколы/IP-адрес.md index 54525c1..927e24e 100644 --- a/90 Library/Networking/Протоколы/IP-адрес.md +++ b/90 Library/Networking/Протоколы/IP-адрес.md @@ -1,12 +1,12 @@ --- -status: stable +status: processing type: concept tags: - network - networking - protocols created: 2025-12-17 -updated: 2026-05-07 +updated: 2026-06-05 aliases: - IP-адрес --- @@ -21,4 +21,18 @@ IP-адрес - это просто набор из 32 нулей и едини Статика - задается вручную и не меняется в ходе работы. Динамика - задается автоматически посредством DHCP-сервера из определенного ему пула IP. -Т.к. переход на IPv6 дорог, да и иметь всем конкретный IP не очень безопасно, придумали [[NAT]] (Network Address Translation) и его надстройку PAT (Port Address Translation). Суть в том, что много устройств могут выходить в сеть под "одним" белым (внешним) IP. Но есть нюанс, при маршрутизации трафика к белому IP добавляется порт, который уточняет, к какому именно устройству сети и с каким "внутренним" IP направить эти пакеты. \ No newline at end of file +Т.к. переход на IPv6 дорог, да и иметь всем конкретный IP не очень безопасно, придумали [[NAT]] (Network Address Translation) и его надстройку PAT (Port Address Translation). Суть в том, что много устройств могут выходить в сеть под "одним" белым (внешним) IP. Но есть нюанс, при маршрутизации трафика к белому IP добавляется порт, который уточняет, к какому именно устройству сети и с каким "внутренним" IP направить эти пакеты. + +## Простыми словами для экзамена + +IP-адрес отвечает на вопрос: "на какой узел сети нужно доставить пакет?". В вебе это похоже на адрес дома: домен `example.com` сначала через [[DNS]] превращается в IP-адрес, а затем по этому адресу устанавливается соединение. + +IPv4 записывается как четыре числа от `0` до `255`, например `192.168.1.10`. Внутри это 32 бита. IPv6 длиннее: 128 бит, записывается шестнадцатеричными блоками, например `2001:db8::1`. + +Важно различать: + +- публичный IP — маршрутизируется в интернете; +- приватный IP — используется внутри локальных сетей: `10.0.0.0/8`, `172.16.0.0/12`, `192.168.0.0/16`; +- `127.0.0.1` или `localhost` — обращение к самому себе. + +Один IP указывает устройство или интерфейс, но не конкретное приложение. За приложение отвечает [[Сетевые порты|порт]]. diff --git a/90 Library/Networking/Протоколы/URI, URL, URN.md b/90 Library/Networking/Протоколы/URI, URL, URN.md index 2beb18d..94cebbe 100644 --- a/90 Library/Networking/Протоколы/URI, URL, URN.md +++ b/90 Library/Networking/Протоколы/URI, URL, URN.md @@ -1,10 +1,10 @@ --- title: URI, URL, URN -status: seed +status: processing type: concept tags: [web, network, networking, uri, url, urn] created: 2026-06-04 -updated: 2026-06-04 +updated: 2026-06-05 source: "[[00_базовые_понятия.pdf]]" aliases: - URI, URL, URN @@ -68,6 +68,28 @@ URI (Uniform Resource Identifier) — общий идентификатор ре Главное правило: все URL являются URI, но не все URI являются URL. +## Простыми словами для экзамена + +Самая короткая схема: + +- URI — любой идентификатор ресурса. +- URL — URI, который говорит, где ресурс лежит и как его получить. +- URN — URI, который даёт устойчивое имя, но не обязательно говорит, где ресурс скачать. + +Пример URL: + +```text +https://example.com/articles/1?print=true#comments +``` + +В нём: + +- `https` — схема; +- `example.com` — хост; +- `/articles/1` — путь; +- `?print=true` — параметры запроса; +- `#comments` — фрагмент внутри страницы. + ## Связи - [[HTTP, HTTPS и HTTP3]] diff --git a/90 Library/Networking/Сетевые порты.md b/90 Library/Networking/Сетевые порты.md index 8e3b168..8a5b4ab 100644 --- a/90 Library/Networking/Сетевые порты.md +++ b/90 Library/Networking/Сетевые порты.md @@ -1,10 +1,10 @@ --- title: Сетевые порты -status: seed +status: processing type: concept tags: [network, networking, ports, tcp, udp, web] created: 2026-06-04 -updated: 2026-06-04 +updated: 2026-06-05 source: "[[00_базовые_понятия.pdf]]" aliases: - Сетевые порты @@ -46,6 +46,23 @@ aliases: | `3389` | RDP | | `8080` | альтернативный HTTP | +## Простыми словами для экзамена + +IP-адрес выбирает компьютер, порт выбирает программу на этом компьютере. + +Пример: сервер имеет IP `203.0.113.10`. + +- `203.0.113.10:80` — обычный HTTP. +- `203.0.113.10:443` — HTTPS. +- `203.0.113.10:22` — SSH. + +Если в URL порт не указан, браузер берёт порт по схеме: + +- `http://example.com` → порт `80`; +- `https://example.com` → порт `443`. + +Порт клиента обычно временный и выбирается автоматически. Порт сервера обычно известный и заранее открыт сервисом. + ## Связи - [[HTTP, HTTPS и HTTP3]] diff --git a/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md b/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md index eb38721..8663949 100644 --- a/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md +++ b/90 Library/Programming/Web/Адаптивность, Flexbox и Grid.md @@ -1,5 +1,5 @@ --- -status: seed +status: processing type: concept tags: - css @@ -8,7 +8,7 @@ tags: - adaptive-design - responsive-web created: 2026-05-30 -updated: 2026-05-31 +updated: 2026-06-05 source: - '[[14-css-adaptive.pdf]]' - '[[17-css-grid.pdf]]' @@ -46,6 +46,13 @@ aliases: - `flex-basis` (базовый размер), - `order` (порядок отображения). +Главная ось зависит от `flex-direction`: + +- `row` — главная ось горизонтальная; +- `column` — главная ось вертикальная. + +`justify-content` выравнивает по главной оси. `align-items` выравнивает по поперечной оси. Значение `align-items` по умолчанию — `stretch`. + --- # Grid Layout @@ -56,6 +63,8 @@ aliases: - `grid-template-columns: repeat(3, 1fr);` (3 колонки равной ширины). - `grid-template-rows: auto 1fr;`. - **Единица fr:** Доля свободного пространства. +- **Функция `repeat`:** сокращает повторяющиеся колонки или строки. +- **Функция `minmax`:** задаёт минимальный и максимальный размер трека. - **Отступы:** `gap: 10px;`. - **Размещение элементов:** - `grid-column: 1 / 3;` (от 1-й до 3-й линии). @@ -76,3 +85,42 @@ header { grid-area: header; } # Сравнение Flex и Grid - **Flexbox:** Лучше для одномерных структур (меню, тулбары) и распределения пространства между элементами. - **Grid:** Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно. + +## Простыми словами для экзамена + +Flexbox — раскладка в одном направлении: строка или колонка. Grid — раскладка сразу по двум направлениям: строки и столбцы. + +Flex-контейнер создаётся так: + +```css +.menu { + display: flex; +} +``` + +Строчный flex-контейнер: + +```css +.menu { + display: inline-flex; +} +``` + +Grid-контейнер: + +```css +.layout { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: auto minmax(200px, 1fr); +} +``` + +Термины Grid: + +- grid lines — линии сетки; +- grid tracks — строки или столбцы между линиями; +- grid cells — ячейки; +- grid areas — именованные области. + +`fr` делит свободное место. `1fr 2fr` означает: второй столбец получит в два раза больше свободного места, чем первый. diff --git a/90 Library/Programming/Web/Основы HTML (структура, таблицы, формы).md b/90 Library/Programming/Web/Основы HTML (структура, таблицы, формы).md index 6016d20..c30b99f 100644 --- a/90 Library/Programming/Web/Основы HTML (структура, таблицы, формы).md +++ b/90 Library/Programming/Web/Основы HTML (структура, таблицы, формы).md @@ -8,7 +8,7 @@ tags: - tables - forms created: 2026-05-30 -updated: 2026-05-30 +updated: 2026-06-05 title: "Основы HTML (структура, таблицы, формы)" source: - '[[10-html_основы_НП.pdf]]' @@ -273,3 +273,42 @@ HTML-валидация работает в браузере до отправк ``` + +## Простыми словами для экзамена + +### Документ и `head` + +`` хранит служебную информацию, а не видимый контент. Там обычно находятся: + +- ``; +- ``; +- ``; +- `<link rel="stylesheet" href="...">`; +- `<script src="..."></script>`. + +`viewport` особенно важен для мобильных устройств: без него страница может отображаться как уменьшенная десктопная версия. + +### Нормальный поток + +Нормальный поток — это стандартный порядок раскладки элементов без `position`, `flex`, `grid` и других специальных режимов. Блочные элементы идут сверху вниз, строчные элементы идут внутри строки слева направо. + +### Пробелы и переносы + +В обычном HTML несколько пробелов подряд схлопываются в один. Перенос строки в коде тоже обычно становится пробелом. Для явного переноса используют `<br>`, но абзацы лучше разделять через `<p>`. + +### Формы + +`id` нужен для связи с `label` и для уникального обращения к элементу. `name` нужен серверу: именно под этим именем значение поля уходит в запросе. + +```html +<label for="email">Email</label> +<input id="email" name="email" type="email" required> +``` + +`radio` выбирает один вариант из группы с одинаковым `name`. `checkbox` подходит для независимых флажков, где можно выбрать несколько вариантов. + +У `<button>` лучше явно указывать `type`: + +- `type="submit"` — отправляет форму; +- `type="button"` — обычная кнопка; +- `type="reset"` — сбрасывает форму. diff --git a/90 Library/Programming/Web/Основы, селекторы и блочная модель.md b/90 Library/Programming/Web/Основы, селекторы и блочная модель.md index 6e92612..f526a01 100644 --- a/90 Library/Programming/Web/Основы, селекторы и блочная модель.md +++ b/90 Library/Programming/Web/Основы, селекторы и блочная модель.md @@ -1,5 +1,5 @@ --- -status: seed +status: processing type: concept tags: - css @@ -7,7 +7,7 @@ tags: - selectors - box-model created: 2026-05-30 -updated: 2026-05-31 +updated: 2026-06-05 source: - "[[12-css-базовые_свойства.pdf]]" - "[[12-css-блочная_модель.pdf]]" @@ -46,6 +46,23 @@ aliases: 3. Классы, атрибуты, псевдоклассы (0, 0, 1, 0) 4. Теги и псевдоэлементы (0, 0, 0, 1) +Пример: + +```css +body .content { color: red; } +div p { color: blue; } +``` + +`body .content` сильнее, потому что содержит класс `.content`. Класс весит больше, чем селектор элемента. + +Короткое правило: + +- `#id` сильнее `.class`; +- `.class` сильнее `div`; +- если специфичность одинаковая, побеждает правило, которое написано ниже. + +Наследование — это когда дочерний элемент получает значение свойства от родителя, например `font-family` или `color`. Не все свойства наследуются: `margin`, `padding`, `border`, `width` обычно не наследуются. + --- # Блочная модель (Box Model) @@ -61,6 +78,17 @@ aliases: - `content-box` (по умолчанию): `width` задает только ширину контента. - `border-box`: `width` включает в себя `padding` и `border`. +Если задано: + +```css +width: 100px; +padding: 10px; +border: 5px solid; +box-sizing: border-box; +``` + +Реальная ширина блока останется `100px`: внутрь этой ширины войдут контент, `padding` и `border`. + # Свойство display - `block`: Занимает всю ширину, начинается с новой строки. - `inline`: Ширина по контенту, не позволяет задавать `width/height`. @@ -88,4 +116,22 @@ aliases: - `border: 1px solid black;`. - `border-radius: 5px;` (скругление углов). - `box-shadow: x y blur spread color;`. +- `text-shadow: x y blur color;` — тень текста. - `transition: 0.3s;` (плавные переходы). + +## Простыми словами для экзамена + +CSS выбирает элементы селекторами и применяет к ним свойства. Если несколько правил спорят за одно свойство, решают каскад, специфичность и порядок. + +Частые селекторы: + +- `*` — все элементы; +- `p` — все `<p>`; +- `.card` — элементы с классом `card`; +- `#main` — элемент с id `main`; +- `article p` — все `p` внутри `article`; +- `article > p` — только прямые дочерние `p`; +- `h2 + p` — первый соседний `p` сразу после `h2`; +- `input[required]` — поля с атрибутом `required`. + +Для текста часто нужны: `font-family`, `font-size`, `font-weight`, `font-style`, `text-align`, `text-decoration`, `line-height`, `letter-spacing`, `text-shadow`.