Auto | arch-x1: 2026-06-05 13:49:34
This commit is contained in:
Dmitry
@@ -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 @@
|
||||
<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">
|
||||
@@ -487,6 +539,29 @@
|
||||
<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">
|
||||
@@ -502,6 +577,29 @@
|
||||
<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">
|
||||
@@ -517,6 +615,38 @@ Content-Type: text/html
|
||||
<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">
|
||||
@@ -531,6 +661,21 @@ Content-Type: text/html
|
||||
<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">
|
||||
@@ -540,6 +685,73 @@ Content-Type: text/html
|
||||
<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">
|
||||
@@ -551,6 +763,48 @@ Content-Type: text/html
|
||||
<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">
|
||||
@@ -560,6 +814,44 @@ Content-Type: text/html
|
||||
<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">
|
||||
@@ -572,6 +864,53 @@ 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">
|
||||
@@ -581,6 +920,46 @@ box-sizing: border-box;</pre>
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user