diff --git a/99 System/Export/Подготовка к экзамену по веб-разработке.html b/99 System/Export/Подготовка к экзамену по веб-разработке.html index 9e1b437..c953e05 100644 --- a/99 System/Export/Подготовка к экзамену по веб-разработке.html +++ b/99 System/Export/Подготовка к экзамену по веб-разработке.html @@ -201,6 +201,34 @@ 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; @@ -224,6 +252,10 @@ grid-template-columns: 1fr; } + .term-grid { + grid-template-columns: 1fr; + } + main { padding: 20px 14px 40px; } @@ -478,6 +510,26 @@

IPv4 32 бита, запись вроде 192.168.1.10. Адресов мало, поэтому используют приватные диапазоны и NAT.

IPv6 128 бит, запись вроде 2001:db8::1. Адресов намного больше, запись можно сокращать через ::.

Приватные IPv4-диапазоны: 10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16. 127.0.0.1 - localhost, обращение к самому себе.

+
+
IPПротокол сетевого уровня. Он отвечает за адресацию и доставку пакетов между сетями, но сам не гарантирует доставку.
+
IPv4Версия IP с 32-битным адресом. Записывается четырьмя октетами: 0.0.0.0 ... 255.255.255.255.
+
IPv6Версия IP с 128-битным адресом. Нужна из-за нехватки IPv4 и упрощает глобальную адресацию.
+
Октет8 бит. В IPv4 четыре октета, каждый отображается числом от 0 до 255.
+
Публичный адресАдрес, который маршрутизируется в интернете и может быть доступен извне.
+
Приватный адресАдрес для локальных сетей. В интернет напрямую не выходит, обычно используется с NAT.
+
LocalhostИмя или адрес для обращения к самому компьютеру. Обычно localhost и 127.0.0.1.
+
ХостУстройство или интерфейс в сети: компьютер, сервер, телефон, контейнер, виртуальная машина.
+
+

Как выглядит путь от имени сайта к IP

+
    +
  1. Пользователь вводит домен, например example.com.
    2. +
  2. Браузер или ОС спрашивает DNS, какой IP соответствует имени.
    3. +
  3. После получения IP клиент открывает соединение к этому адресу.
    4. +
  4. Чтобы попасть в нужную программу на сервере, используется порт: например 443 для HTTPS.
    5. +
+
+ На экзамене важно не путать: домен - имя для человека, IP - адрес узла, порт - адрес приложения внутри узла. +
@@ -487,6 +539,29 @@

Порт выбирает приложение внутри одного IP-адреса. HTTP обычно работает на 80, HTTPS - на 443.

Маска подсети показывает, где в IP-адресе часть сети, а где часть хоста. В 192.168.1.10/24 сеть - 192.168.1.0, хост - .10.

NAT переводит приватные адреса во внешний публичный адрес. PAT дополнительно использует порты, поэтому много внутренних устройств могут выходить через один публичный IP.

+
+
TCPНадёжный транспортный протокол. Перед передачей устанавливает соединение и подтверждает получение данных.
+
UDPТранспортный протокол без соединения и подтверждений. Быстрее, но не гарантирует доставку и порядок.
+
SYNПервый пакет TCP-рукопожатия: клиент просит открыть соединение.
+
SYN-ACKОтвет сервера: запрос принят, сервер тоже готов открыть соединение.
+
ACKПодтверждение клиента. После него TCP-соединение считается установленным.
+
ПортЧисло от 0 до 65535, которое указывает процесс или сервис внутри IP-адреса.
+
Маска подсетиПоказывает, какие биты IP относятся к сети, а какие к хосту.
+
CIDRКраткая запись маски, например /24. Число показывает количество сетевых бит.
+
NATЗамена адресов на границе сети. Обычно приватный адрес заменяется публичным.
+
PATВариант NAT с портами. Позволяет многим внутренним устройствам использовать один внешний IP.
+
+

Трёхстороннее рукопожатие TCP

+
    +
  1. SYN: клиент говорит "хочу соединиться".
    2. +
  2. SYN-ACK: сервер говорит "готов, подтверждаю".
    3. +
  3. ACK: клиент подтверждает ответ сервера.
    4. +
+

Подсеть на примере

+

192.168.1.10/24: первые 24 бита - сеть, последние 8 бит - хосты. Адрес сети 192.168.1.0, типичный шлюз 192.168.1.1, устройства часто получают адреса 192.168.1.2 ... 192.168.1.254.

+
+ Если два IP в одной подсети, устройство может отправить кадр напрямую в локальную сеть. Если адрес в другой подсети, пакет идёт через шлюз. +
@@ -502,6 +577,29 @@ TXTслужебный текст, например SPF/DKIM

URI - общий идентификатор. URL - URI с адресом и способом получения: https://example.com/path?x=1#top. URN - устойчивое имя, например ISBN или UUID.

+
+
DNS resolverСервер, который принимает запрос клиента и ищет ответ в DNS-иерархии.
+
Root serverКорневой DNS-сервер. Не знает IP всех сайтов, но знает, куда отправить за зоной верхнего уровня.
+
TLDЗона верхнего уровня: .ru, .com, .org.
+
Authoritative serverАвторитативный сервер домена. Он хранит окончательный ответ по доменному имени.
+
URIUniform Resource Identifier. Любой идентификатор ресурса.
+
URLUniform Resource Locator. URI, который указывает адрес и способ получения ресурса.
+
URNUniform Resource Name. Устойчивое имя ресурса без обязательного расположения.
+
ФрагментЧасть URL после #. Обычно указывает на элемент внутри документа.
+
+

Компоненты URL

+ 
https://example.com:443/articles/1?print=true#comments
+ +
+ Формула: URL всегда URI, потому что он идентифицирует ресурс. Но URI не всегда URL, потому что может быть просто именем, например URN. +
@@ -517,6 +615,38 @@ Content-Type: text/html

GET обычно получает данные, параметры видны в URL. POST обычно отправляет данные в теле запроса.

Коды: 2xx успех, 3xx редирект, 4xx ошибка клиента, 5xx ошибка сервера.

HTTPS - HTTP поверх TLS. HTTP/3 - HTTP поверх QUIC/UDP; смысл методов и кодов не меняется.

+
+
МетодГлагол HTTP-запроса: что клиент хочет сделать с ресурсом.
+
ЗаголовокПара "имя: значение" с метаданными запроса или ответа.
+
ТелоДанные после заголовков. В POST там часто форма или JSON.
+
Статус-кодЧисловой результат обработки запроса: 200, 404, 500.
+
TLSКриптографический слой HTTPS: шифрует трафик и проверяет сервер.
+
QUICТранспорт для HTTP/3 поверх UDP со встроенным TLS 1.3 и потоками.
+
+

Методы HTTP

+ + + + + + + + + +
МетодНазначение
GETПолучить ресурс. Не должен менять состояние сервера.
POSTОтправить данные: форму, JSON, файл, команду создания.
HEADПолучить только заголовки, без тела ответа.
PUTПолностью создать или заменить ресурс.
PATCHЧастично изменить ресурс.
DELETEУдалить ресурс.
OPTIONSУзнать возможности сервера или разрешённые методы.
+

Частые заголовки

+ + + + + + + + +
ЗаголовокСмысл
HostДомен или хост, к которому обращается клиент.
User-AgentИнформация о клиенте: браузер, ОС, версия.
AcceptКакие типы ответа клиент готов принять.
Content-TypeТип данных в теле сообщения.
CookieCookies, которые браузер отправляет серверу.
AuthorizationДанные доступа, например Bearer token.
+
+ HTTPS не меняет HTML, URL-маршруты, методы GET/POST и коды ответа. Он добавляет защищённое соединение под HTTP. +
@@ -531,6 +661,21 @@ Content-Type: text/html
  • Код меняется на access token.
  • Access token используется для API-запросов.
    • +
    +
    ИдентификацияПользователь сообщает идентификатор: логин, email, номер телефона.
    +
    АутентификацияПроверка доказательства: пароль, код, ключ, сертификат.
    +
    АвторизацияПроверка прав: можно ли читать, создавать, редактировать, удалять.
    +
    СессияСостояние входа пользователя на сервере, обычно связывается с cookie в браузере.
    +
    CookieНебольшое значение, которое браузер хранит для сайта и отправляет с запросами.
    +
    Bearer tokenТокен доступа. Кто владеет токеном, тот может выполнить разрешённые действия.
    +
    Access tokenКороткоживущий токен для доступа к API.
    +
    Refresh tokenТокен для получения нового access token без повторного входа пользователя.
    +
    ScopeСписок разрешений токена: например читать профиль, но не удалять данные.
    +
    OpenID ConnectНадстройка над OAuth 2.0 для аутентификации пользователя.
    +
    +
    + OAuth 2.0 сам по себе отвечает за доступ к ресурсам, а не за доказательство личности. Для "входа через провайдера" обычно нужен OpenID Connect. +
    @@ -540,6 +685,73 @@ Content-Type: text/html

    head содержит meta, title, link, script. meta viewport нужен, чтобы мобильный браузер корректно рассчитывал ширину страницы.

    Блочные элементы занимают строку: div, p, section, form. Строчные идут внутри текста: span, a, strong, em.

    Семантические теги: header, nav, main, section, article, aside, footer.

    +

    Минимальный документ

    + 
    <!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>
    +
    +
    <!doctype html>Сообщает браузеру, что документ написан по HTML5 и его нужно обрабатывать в стандартном режиме.
    +
    <html>Корневой элемент всей HTML-страницы. Атрибут lang задаёт язык документа.
    +
    <head>Служебная часть документа. Не отображает основной контент пользователю.
    +
    <body>Видимое содержимое страницы: текст, формы, изображения, таблицы, разделы.
    +
    <meta charset>Задаёт кодировку. Для русских текстов обычно нужен UTF-8.
    +
    <meta viewport>Говорит мобильному браузеру использовать ширину устройства, а не виртуальную широкую страницу.
    +
    <title>Название вкладки браузера и заголовок страницы для поисковиков.
    +
    <link>Подключает внешний ресурс, чаще всего CSS: rel="stylesheet".
    +
    <script>Подключает или содержит JavaScript. Может быть в head или в конце body.
    +
    <style>Внутренние CSS-правила прямо в HTML-документе.
    +
    +

    Теги содержимого

    + + + + + + + + + + + + + + + + +
    ТегНазначение
    <h1>...<h6>Заголовки уровней. h1 главный, h6 самый низкий.
    <p>Абзац текста.
    <br>Принудительный перенос строки. Не использовать вместо абзацев.
    <strong>Важное смысловое выделение, обычно отображается жирным.
    <em>Смысловой акцент, обычно отображается курсивом.
    <code>Фрагмент кода или технического текста.
    <div>Нейтральный блочный контейнер без собственного смысла.
    <span>Нейтральный строчный контейнер без собственного смысла.
    <a>Ссылка. Главный атрибут: href.
    <img>Изображение. Важны src и alt.
    <ul>, <ol>, <li>Маркированный список, нумерованный список и элемент списка.
    <table>, <tr>, <th>, <td>Таблица, строка, заголовочная ячейка, обычная ячейка.
    <caption>Название таблицы.
    <thead>, <tbody>, <tfoot>Группы строк таблицы: заголовок, тело, итог.
    +

    Семантические теги документа

    + + + + + + + + + +
    ТегКогда использовать
    <header>Верхняя часть страницы или секции: логотип, заголовок, навигация.
    <nav>Блок основных навигационных ссылок.
    <main>Главный контент страницы. Обычно один на страницу.
    <section>Смысловой раздел, обычно с заголовком.
    <article>Самостоятельный материал: статья, пост, карточка новости.
    <aside>Дополнительный контент: боковая панель, подсказки, связанные ссылки.
    <footer>Нижняя часть страницы или секции.
    +

    Атрибуты HTML

    +
    +
    classКласс элемента. Один и тот же класс можно дать многим элементам для CSS и JS.
    +
    idУникальный идентификатор элемента на странице. Используется для якорей, label, JS.
    +
    hrefАдрес ссылки у a.
    +
    srcИсточник файла у img, script и некоторых других тегов.
    +
    altТекстовое описание изображения. Нужно для доступности и если картинка не загрузилась.
    +
    target="_blank"Открывает ссылку в новой вкладке.
    +
    colspanОбъединяет ячейку таблицы по столбцам.
    +
    rowspanОбъединяет ячейку таблицы по строкам.
    +
    +
    + В обычном HTML несколько пробелов подряд схлопываются в один. Перенос строки в исходном коде не означает перенос на странице. +
    @@ -551,6 +763,48 @@ Content-Type: text/html <input id="email" name="email" type="email" required>

    radio выбирает один вариант из группы с одинаковым name. checkbox - независимый флажок. fieldset и legend группируют поля.

    placeholder - подсказка внутри поля. required - поле обязательно. У кнопки лучше явно писать type="submit", type="button" или type="reset".

    +

    Теги формы

    + + + + + + + + + + + +
    ТегНазначение
    <form>Контейнер формы. Определяет, куда и как отправлять данные.
    <input>Универсальное поле. Поведение зависит от type.
    <label>Подпись поля. Связывается с полем через for и id.
    <button>Кнопка формы или обычного действия.
    <textarea>Многострочное текстовое поле.
    <select>Выпадающий список.
    <option>Вариант внутри select.
    <fieldset>Логическая группа полей.
    <legend>Заголовок группы fieldset.
    +

    Атрибуты формы и полей

    +
    +
    actionURL, куда отправляется форма.
    +
    methodHTTP-метод отправки: чаще get или post.
    +
    nameИмя параметра, которое попадёт в запрос на сервер.
    +
    idИдентификатор поля, нужен для связи с label.
    +
    valueЗначение поля или значение варианта.
    +
    requiredПоле обязательно для заполнения в браузере.
    +
    placeholderПодсказка внутри пустого поля. Не заменяет подпись.
    +
    checkedПредварительно выбранный checkbox или radio.
    +
    disabledПоле выключено и обычно не отправляется.
    +
    readonlyПоле нельзя редактировать, но значение может отправляться.
    +
    +

    Основные input type

    + + + + + + + + + + + +
    ТипЧто делает
    textОбычная строка.
    passwordПароль, символы скрываются.
    emailEmail с базовой браузерной проверкой.
    numberЧисло, можно использовать min и max.
    radioОдин выбор из группы с одинаковым name.
    checkboxНезависимый флажок. Можно выбрать несколько.
    submitКнопка отправки формы.
    fileВыбор файла.
    hiddenСкрытое поле, не видно пользователю, но отправляется.
    +
    + Браузерная HTML-валидация удобна, но не защищает сервер. Любые данные формы нужно проверять на сервере. +
    @@ -560,6 +814,44 @@ Content-Type: text/html

    Специфичность: inline-style сильнее id, id сильнее class/attribute/pseudo-class, class сильнее tag.

    body .content сильнее div p, потому что класс имеет больший вес, чем селектор тега.

    Если специфичность одинаковая, побеждает правило ниже в CSS. Наследуются, например, color и font-family; не наследуются margin, padding, border.

    +

    Типы селекторов

    + + + + + + + + + + + + + +
    СелекторПримерЧто выбирает
    Универсальный*Все элементы.
    ЭлементpВсе теги p.
    Класс.cardВсе элементы с class="card".
    ID#mainЭлемент с id="main".
    Потомокarticle pВсе p внутри article на любой глубине.
    Дочернийarticle > pТолько прямые дочерние p.
    Соседнийh2 + pПервый p сразу после h2.
    Общий соседнийh2 ~ pВсе p после h2 на том же уровне.
    Атрибутinput[required]Элементы с указанным атрибутом.
    Псевдоклассa:hoverСостояние элемента или структурное условие.
    Псевдоэлементp::first-lineВиртуальную часть элемента.
    +

    Псевдоклассы

    +
    +
    :hoverКогда указатель мыши над элементом.
    +
    :focusКогда элемент в фокусе, например поле ввода активно.
    +
    :activeМомент активации, например нажатие мышью.
    +
    :first-childЭлемент является первым ребёнком родителя.
    +
    :last-childЭлемент является последним ребёнком родителя.
    +
    :nth-child(n)Элемент на заданной позиции среди детей.
    +
    :not(...)Элементы, которые не подходят под вложенный селектор.
    +
    :checkedВыбранный checkbox или radio.
    +
    +

    Расчёт специфичности

    +

    Удобно считать как четыре группы: inline, id, class/attribute/pseudo-class, tag/pseudo-element.

    + + + + + + +
    СелекторВесКомментарий
    div p0-0-0-2Два тега.
    body .content0-0-1-1Один класс и один тег.
    #app .content p0-1-1-1ID почти всегда перебивает классы и теги.
    style="..."1-0-0-0Inline-стиль сильнее обычного CSS.
    +
    + Группировка селекторов через запятую не увеличивает специфичность. h1, h2 - это два отдельных правила с одинаковыми объявлениями. +
    @@ -572,6 +864,53 @@ border: 5px solid; box-sizing: border-box;

    Реальная ширина такого блока - 100px.

    Шрифты: font-family, font-size, font-weight, font-style. Текст: text-align, text-decoration, line-height, letter-spacing, text-shadow.

    +

    Части блочной модели

    +
    +
    ContentСодержимое элемента: текст, картинка, дочерние элементы.
    +
    PaddingВнутренний отступ между content и border. Увеличивает визуальный размер блока.
    +
    BorderРамка вокруг padding и content.
    +
    MarginВнешний отступ между элементом и соседями.
    +
    content-boxЗначение по умолчанию: width задаёт только content.
    +
    border-boxwidth включает content, padding и border.
    +
    +

    Display

    + + + + + + + + +
    ЗначениеПоведение
    blockЭлемент начинается с новой строки и обычно занимает всю доступную ширину.
    inlineИдёт внутри строки, ширина и высота задаются плохо или не работают как у блока.
    inline-blockСнаружи ведёт себя как строчный, внутри как блочный: можно задавать размеры.
    noneЭлемент полностью убирается из раскладки.
    flexСоздаёт flex-контейнер.
    gridСоздаёт grid-контейнер.
    +

    Фон и границы

    + + + + + + + + + + +
    СвойствоСмысл
    background-colorЦвет фона.
    background-imageФоновое изображение.
    background-repeatПовторять ли фон.
    background-positionПоложение фонового изображения.
    background-sizeРазмер фонового изображения: например cover или contain.
    borderКраткая запись рамки: ширина, стиль, цвет.
    border-radiusСкругление углов.
    box-shadowТень блока.
    +

    Текст и шрифты

    + + + + + + + + + + + +
    СвойствоСмысл
    font-familyСемейство шрифта.
    font-sizeРазмер шрифта.
    font-weightТолщина: например 400, 700, bold.
    font-styleНаклон: например italic.
    text-alignГоризонтальное выравнивание текста.
    text-decorationЛинии текста: подчёркивание, зачёркивание, отсутствие линии.
    line-heightВысота строки, расстояние между строками.
    letter-spacingРасстояние между буквами.
    text-shadowТень текста.
    +
    + margin: 0 auto центрирует блочный элемент по горизонтали, если у него задана ширина меньше контейнера. +
    @@ -581,6 +920,46 @@ box-sizing: border-box;

    justify-content выравнивает по главной оси, align-items - по поперечной. Значение align-items по умолчанию - stretch.

    flex-grow отвечает за рост, flex-shrink - за сжатие, flex-basis - за базовый размер.

    Grid создаётся через display: grid. grid-template-columns задаёт столбцы, grid-template-rows - строки. fr - доля свободного места. repeat() сокращает повтор, minmax() задаёт минимум и максимум.

    +

    Flexbox: термины

    +
    +
    Flex containerЭлемент с display: flex или inline-flex.
    +
    Flex itemПрямой дочерний элемент flex-контейнера.
    +
    Main axisГлавная ось. Её направление задаёт flex-direction.
    +
    Cross axisПоперечная ось, перпендикулярная главной.
    +
    flex-directionНаправление главной оси: row, column, обратные варианты.
    +
    justify-contentРаспределение элементов по главной оси.
    +
    align-itemsВыравнивание элементов по поперечной оси.
    +
    flex-wrapРазрешает или запрещает перенос элементов на новую строку.
    +
    +

    Flex item properties

    + + + + + + + +
    СвойствоСмысл
    flex-growКак элемент забирает свободное место.
    flex-shrinkКак элемент сжимается при нехватке места.
    flex-basisБазовый размер до распределения свободного места.
    orderПорядок отображения элемента.
    align-selfИндивидуальное выравнивание одного элемента по поперечной оси.
    +

    Grid: термины

    +
    +
    Grid containerЭлемент с display: grid.
    +
    Grid itemПрямой дочерний элемент grid-контейнера.
    +
    Grid linesЛинии, которые образуют сетку. Именно это правильный ответ на вопрос про линии сетки.
    +
    Grid tracksПолосы между линиями: строки или столбцы.
    +
    Grid cellsЯчейки на пересечении строки и столбца.
    +
    Grid areasИменованные или прямоугольные области из одной или нескольких ячеек.
    +
    frДоля свободного пространства.
    +
    gapРасстояние между строками и столбцами.
    +
    + 
    .grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto minmax(200px, 1fr);
+  gap: 16px;
+}
    +
    + Flexbox чаще выбирают для меню, кнопок и выравнивания в одном направлении. Grid - для макета страницы и таблиц карточек в два измерения. +