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

2026-06-05 13:29:15 +03:00
parent 8e206fed3a
commit 1acb87897f
6 changed files with 763 additions and 36 deletions
@@ -1,5 +1,5 @@
 ---
-status: seed
+status: processing
 type: concept
 tags: []
 created: 2025-12-17
@@ -9,6 +9,537 @@ aliases: []

 # Вопросы по Вебу

+## Теория по блокам
+
+Опорные заметки:
+
+- [[IP-адрес]], [[IPv6]], [[Подсети и маска подсети]], [[NAT]], [[DNS]], [[TCP Vs UDP]]
+- [[HTTP, HTTPS и HTTP3]], [[Сетевые порты]], [[Веб-аутентификация и авторизация]], [[OAuth 2.0]], [[URI, URL, URN]]
+- [[Основы HTML (структура, таблицы, формы)]]
+- [[CSS: Основы и селекторы]], [[CSS: Адаптивность, Flexbox и Grid]]
+- [[Django Модели и ORM]], [[Django: Представления, шаблоны и CBV]], [[Django: Формы и CUD]]
+
+### Блок 1. Общие вопросы
+
+**IP-адрес** - адрес узла в сети. IPv4 записывается как `192.168.1.10`, внутри это 32 бита. IPv6 длиннее, 128 бит, например `2001:db8::1`.
+
+**Маска подсети** показывает, какая часть IP относится к сети, а какая - к устройству. В `192.168.1.10/24` первые 24 бита - сеть, оставшаяся часть - хост.
+
+**Приватные IPv4-адреса** используются внутри локальных сетей: `10.0.0.0/8`, `172.16.0.0/12`, `192.168.0.0/16`. Они не маршрутизируются напрямую в интернете.
+
+**Localhost** - обращение к самому себе. Обычно это `127.0.0.1`.
+
+**NAT** переводит внутренний приватный адрес в публичный. Домашний роутер обычно делает PAT: много устройств выходят в интернет через один публичный IP, а различаются по портам.
+
+**DNS** превращает доменное имя в IP-адрес. Браузер не ходит на `example.com` как на текст - сначала нужно узнать IP через DNS.
+
+**TCP** устанавливает соединение через `SYN`, `SYN-ACK`, `ACK`, следит за доставкой и порядком данных. Поэтому он подходит для HTTP/HTTPS.
+
+**HTTP** - протокол запроса и ответа. Клиент отправляет запрос, сервер возвращает ответ. HTTP не хранит состояние сам по себе.
+
+**GET** обычно получает данные. **POST** обычно отправляет данные в теле запроса: форму, JSON, файл.
+
+**HTTP-ответ** содержит код состояния:
+
+- `2xx` - успех;
+- `3xx` - перенаправление;
+- `4xx` - ошибка клиента;
+- `5xx` - ошибка сервера.
+
+**HTTPS** - это HTTP поверх TLS. Он шифрует трафик и проверяет сервер через сертификат. HTTP обычно использует порт `80`, HTTPS - `443`.
+
+**HTTP/3** использует QUIC поверх UDP. Смысл методов и кодов HTTP не меняется, меняется транспорт.
+
+**Идентификация** - пользователь сообщает, кто он. **Аутентификация** - доказывает это. **Авторизация** - система решает, что ему можно.
+
+**OAuth 2.0** позволяет приложению получить ограниченный доступ без передачи пароля пользователя. Это протокол авторизации, не прямой протокол логина.
+
+**URI** - общий идентификатор ресурса. **URL** - адрес и способ получить ресурс. **URN** - устойчивое имя без обязательного адреса.
+
+### Блок 2. HTML
+
+HTML описывает структуру страницы. Минимальная структура:
+
+```html
+<!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>
+    Контент
+  </body>
+</html>
+```
+
+`<head>` содержит служебные данные: `meta`, `title`, `link`, `script`. Видимый контент находится в `<body>`.
+
+HTML-комментарий:
+
+```html
+<!-- комментарий -->
+```
+
+**Нормальный поток** - стандартная раскладка без flex/grid/position. Блочные элементы идут сверху вниз, строчные - внутри строки.
+
+**Блочные элементы**: `<div>`, `<p>`, `<h1>`, `<section>`, `<form>`. Обычно занимают всю строку.
+
+**Строчные элементы**: `<span>`, `<a>`, `<strong>`, `<em>`, `<code>`. Идут внутри текста.
+
+**Семантические теги** помогают показать смысл: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`.
+
+`class` используют для групповой стилизации. `id` должен быть уникальным на странице и часто используется для якорей и связи с `label`.
+
+Заголовки - `<h1>` ... `<h6>`, абзацы - `<p>`, списки - `<ul>`/`<ol>` + `<li>`, таблицы - `<table>`, `<tr>`, `<th>`, `<td>`.
+
+Ссылка:
+
+```html
+<a href="https://example.com">Текст</a>
+```
+
+Картинка:
+
+```html
+<img src="image.jpg" alt="Описание">
+```
+
+Повторяющиеся пробелы и переносы строк в HTML схлопываются. Для явного переноса используют `<br>`, но для абзацев лучше `<p>`.
+
+### Блок 3. HTML Forms
+
+Форма собирает данные пользователя и отправляет их на сервер:
+
+```html
+<form action="/login/" method="post">
+  <input name="username">
+  <button type="submit">Войти</button>
+</form>
+```
+
+Главные атрибуты формы:
+
+- `action` - куда отправлять данные;
+- `method` - каким HTTP-методом: обычно `get` или `post`.
+
+У полей:
+
+- `id` нужен для связи с `label`;
+- `name` нужен серверу, именно под этим именем поле попадёт в запрос.
+
+`label` связывают с полем через `for` и `id`:
+
+```html
+<label for="email">Email</label>
+<input id="email" name="email" type="email">
+```
+
+`radio` выбирает один вариант из группы с одинаковым `name`. `checkbox` - независимый флажок, можно выбрать несколько.
+
+`required` делает поле обязательным. `placeholder` показывает подсказку внутри пустого поля, но не заменяет `label`.
+
+`fieldset` и `legend` логически группируют поля.
+
+`textarea` - многострочное поле текста.
+
+У `<button>` важно явно указывать `type`: `submit`, `button`, `reset`.
+
+### Блок 4. CSS selectors
+
+CSS выбирает элементы селекторами и применяет к ним свойства.
+
+Основные селекторы:
+
+- `*` - все элементы;
+- `p` - все теги `<p>`;
+- `.card` - элементы с классом;
+- `#main` - элемент с id;
+- `div p` - потомки;
+- `div > p` - прямые дочерние элементы;
+- `h2 + p` - сосед сразу после `h2`;
+- `input[required]` - элементы по атрибуту;
+- `a:hover` - псевдокласс;
+- `li:nth-child(2)` - структурный псевдокласс.
+
+Группировка:
+
+```css
+h1, h2, h3 {
+  color: black;
+}
+```
+
+Комбинация селекторов:
+
+```css
+button.primary:hover {
+  background: blue;
+}
+```
+
+**Каскад** - правила могут переопределять друг друга. Если свойство конфликтует, важны специфичность и порядок.
+
+Специфичность по силе:
+
+1. inline-style;
+2. id;
+3. class, attribute, pseudo-class;
+4. tag, pseudo-element.
+
+Пример: `body .content` сильнее, чем `div p`, потому что класс сильнее тега.
+
+Наследование - некоторые свойства переходят от родителя к потомку, например `color` и `font-family`. `margin`, `padding`, `border` обычно не наследуются.
+
+### Блок 4. CSS базовые свойства
+
+Блочная модель:
+
+- `content` - содержимое;
+- `padding` - внутренний отступ;
+- `border` - рамка;
+- `margin` - внешний отступ.
+
+`box-sizing: content-box` - `width` задаёт только контент. `box-sizing: border-box` - `width` включает `padding` и `border`.
+
+Если задано `width: 100px`, `padding: 10px`, `border: 5px`, `box-sizing: border-box`, реальная ширина будет `100px`.
+
+Фон:
+
+- `background-color`;
+- `background-image`;
+- `background-repeat`;
+- `background-position`;
+- `background-size`.
+
+Шрифты:
+
+- `font-family` - семейство;
+- `font-size` - размер;
+- `font-weight` - толщина;
+- `font-style` - наклон.
+
+Текст:
+
+- `text-align` - выравнивание;
+- `text-decoration` - подчёркивание и другие линии;
+- `line-height` - расстояние между строками;
+- `letter-spacing` - расстояние между буквами;
+- `text-shadow` - тень текста.
+
+`margin: 0 auto` часто центрирует блочный элемент с заданной шириной.
+
+### Блок 5. FlexBox Layout. Grid Layout
+
+Flexbox - одномерная раскладка: по строке или колонке.
+
+```css
+.row {
+  display: flex;
+  flex-direction: row;
+}
+```
+
+Главная ось зависит от `flex-direction`. При `row` главная ось горизонтальная, при `column` - вертикальная.
+
+`justify-content` выравнивает по главной оси. `align-items` - по поперечной. Значение `align-items` по умолчанию - `stretch`.
+
+`inline-flex` создаёт строчный flex-контейнер.
+
+Свойства flex-элементов:
+
+- `flex-grow` - как элемент растёт;
+- `flex-shrink` - как сжимается;
+- `flex-basis` - базовый размер до распределения свободного места.
+
+Grid - двумерная раскладка: строки и столбцы.
+
+```css
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto minmax(200px, 1fr);
+}
+```
+
+`fr` - доля свободного пространства. `repeat(3, 1fr)` - три одинаковых столбца. `minmax(200px, 1fr)` - минимум 200px, максимум по доступному месту.
+
+Термины Grid:
+
+- grid lines - линии сетки;
+- grid tracks - строки или столбцы;
+- grid cells - ячейки;
+- grid areas - области.
+
+### Блок 6. Django models
+
+Модель Django - Python-класс, который описывает таблицу БД. Поле модели - колонка. Объект модели - строка.
+
+Если не указать `primary_key`, Django создаёт поле `id`.
+
+Миграции:
+
+- `makemigrations` - создать миграции из изменений моделей;
+- `migrate` - применить миграции к БД.
+
+`class Meta` задаёт настройки модели: сортировку, имена, ограничения.
+
+`null=True` разрешает `NULL` в БД. `blank=True` разрешает пустое значение в формах.
+
+`CharField` требует `max_length`.
+
+`ForeignKey` задаёт связь "многие к одному". `on_delete` говорит, что делать при удалении связанного объекта. `related_name` задаёт имя обратной связи.
+
+`ManyToManyField` задаёт связь многие-ко-многим. Связи меняются через `.add()`, `.remove()`, `.set()`, `.clear()`.
+
+Промежуточная модель задаётся через `through`, если у связи есть свои поля.
+
+### Блок 7. Django FBV
+
+FBV - function-based view, обычная функция-представление.
+
+View принимает `request` и возвращает `HttpResponse` или результат helper-функции:
+
+```python
+def home(request):
+    context = {"title": "Home"}
+    return render(request, "index.html", context)
+```
+
+В `render()` первым аргументом должен быть `request`.
+
+Данные в шаблон передаются через context-словарь.
+
+`get_object_or_404(Model, pk=pk)` получает объект или возвращает ошибку 404, если объекта нет.
+
+Маршрут связывает URL и view:
+
+```python
+path("", views.home, name="home")
+```
+
+### Блок 8. Django CBV
+
+CBV - class-based view, представление как класс.
+
+Основные классы:
+
+- `TemplateView` - просто показать шаблон;
+- `ListView` - показать список объектов;
+- `DetailView` - показать один объект.
+
+CBV вызывается в маршруте через `.as_view()`:
+
+```python
+path("posts/", PostListView.as_view(), name="post_list")
+```
+
+`ListView` и `DetailView` можно привязать к модели через `model = Post` или через `queryset`.
+
+Если в `ListView` не указать ни `model`, ни `queryset`, Django выдаст ошибку.
+
+Стандартные переменные:
+
+- `ListView`: `object_list` и `<model>_list`;
+- `DetailView`: `object` и `<model>`.
+
+Дополнительные данные добавляют через `get_context_data()`.
+
+Список объектов меняют через `get_queryset()`. Один объект в `DetailView` меняют через `get_object()`.
+
+Паджинация в `ListView`:
+
+```python
+paginate_by = 10
+```
+
+Шаблоны по умолчанию:
+
+- `ListView`: `<app>/<model>_list.html`;
+- `DetailView`: `<app>/<model>_detail.html`.
+
+При переопределении методов часто вызывают `super()`, чтобы сохранить базовую логику Django.
+
+### Блок 9. Django URLs
+
+Маршрутизация описывается в `urls.py`.
+
+`path()`:
+
+```python
+path("posts/<int:pk>/", views.detail, name="detail")
+```
+
+Аргументы:
+
+- route - шаблон URL;
+- view - представление;
+- kwargs - дополнительные аргументы;
+- name - имя маршрута.
+
+Path-конвертеры:
+
+- `<int:pk>`;
+- `<str:name>`;
+- `<slug:slug>`;
+- `<uuid:id>`;
+- `<path:subpath>`.
+
+`urlpatterns` - список маршрутов.
+
+`re_path()` использует регулярные выражения.
+
+`reverse()` строит URL по имени маршрута в Python.
+
+Шаблонный тег:
+
+```django
+{% url 'app:name' arg %}
+```
+
+`app_name` задаёт namespace приложения.
+
+### Блок 10. Язык шаблонов Django
+
+Переменные:
+
+```django
+{{ user.name }}
+```
+
+Если переменной нет в контексте, обычно выводится пустая строка.
+
+Теги:
+
+```django
+{% for item in items %}
+  {{ forloop.counter }}. {{ item }}
+{% endfor %}
+```
+
+`forloop` даёт служебные данные цикла: `counter`, `first`, `last`.
+
+Фильтры:
+
+```django
+{{ title|lower }}
+{{ items|length }}
+{{ date|date:"Y-m-d" }}
+```
+
+Наследование:
+
+```django
+{% extends "base.html" %}
+
+{% block content %}
+  Контент
+{% endblock %}
+```
+
+Включение шаблона:
+
+```django
+{% include "parts/menu.html" %}
+```
+
+Статика:
+
+```django
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/app.css' %}">
+```
+
+Функции Python с произвольными аргументами напрямую из шаблона обычно не вызывают. Логику готовят во view, model method, custom template tag или filter.
+
+### Блок 11. Django queries
+
+ORM позволяет писать запросы к БД через Python-код.
+
+`QuerySet` ленивый: запрос в БД не выполняется сразу при создании цепочки, а выполняется при обращении к данным.
+
+Методы:
+
+- `.all()` - все объекты;
+- `.filter()` - объекты по условию;
+- `.exclude()` - исключить условие;
+- `.get()` - один объект;
+- `.distinct()` - убрать дубли;
+- `.aggregate()` - итог по всей выборке, возвращает словарь;
+- `.annotate()` - вычисляемое поле для каждого объекта;
+- `.order_by()` - сортировка;
+- `.count()` - количество;
+- `.exists()` - проверка существования.
+
+Цепочки:
+
+```python
+Post.objects.filter(is_published=True).order_by("-created_at")
+```
+
+`Q` нужен для сложных условий:
+
+```python
+Post.objects.filter(Q(title__icontains="web") | Q(body__icontains="web"))
+```
+
+`F` нужен для работы с полями на стороне БД:
+
+```python
+Post.objects.update(views=F("views") + 1)
+```
+
+N+1 - проблема, когда один запрос получает список, а потом в цикле делается по запросу на каждый связанный объект.
+
+`select_related()` делает SQL JOIN и подходит для `ForeignKey`/`OneToOne`.
+
+`prefetch_related()` делает отдельный запрос и подходит для `ManyToMany` и обратных связей.
+
+### Блок 12. Django forms
+
+`forms.Form` - обычная форма без прямой привязки к модели.
+
+`forms.ModelForm` - форма на основе модели. Модель и поля задаются в `Meta`.
+
+Основные поля:
+
+- `CharField`;
+- `IntegerField`;
+- `BooleanField`;
+- `ChoiceField`;
+- `EmailField`;
+- `DateField`;
+- `FileField`.
+
+`widget` управляет HTML-видом поля:
+
+```python
+password = forms.CharField(widget=forms.PasswordInput)
+```
+
+`help_text` задаёт подсказку.
+
+Валидация одного поля:
+
+```python
+def clean_email(self):
+    email = self.cleaned_data["email"]
+    return email
+```
+
+Валидация связи между полями:
+
+```python
+def clean(self):
+    cleaned_data = super().clean()
+    return cleaned_data
+```
+
+После `is_valid()` появляются `cleaned_data` и `errors`. `cleaned_data` содержит очищенные Python-значения.
+
+## Тестовые вопросы
+
 ### Какой селектор сильнее: `body .content` или `div p`?

 A. div p  
@@ -263,7 +794,7 @@ C. models.py
 3) `get_object_or_404()`
 4) `find_or_404()`

-### Что произойдет, если в LiveView не указать ни `model`, ни `queryset`?
+### Что произойдет, если в ListView не указать ни `model`, ни `queryset`?
 1) Он автоматически найдет модель по названию класса.
 2) Django выдаст ошибку.
 3) Он покажет все объекты базы.
@@ -279,4 +810,4 @@ C. models.py
 1) Метод `save()` в модели.
 2) `validate_fields()`.
 3) `clean_password()`.
-4) Общий метод `clean()` всего класса формы.
+4) Общий метод `clean()` всего класса формы.