Files
SecondBrain/99 System/Archive/Вопросы по Вебу.md
T
2026-06-08 14:58:29 +03:00

26 KiB
Raw Blame History

status, type, tags, created, updated, aliases
status type tags created updated aliases
processing concept
2025-12-17 2026-06-05

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

Теория по блокам

Опорные заметки:

Блок 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 описывает структуру страницы. Минимальная структура:

<!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-комментарий:

<!-- комментарий -->

Нормальный поток - стандартная раскладка без 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>.

Ссылка:

<a href="https://example.com">Текст</a>

Картинка:

<img src="image.jpg" alt="Описание">

Повторяющиеся пробелы и переносы строк в HTML схлопываются. Для явного переноса используют <br>, но для абзацев лучше <p>.

Блок 3. HTML Forms

Форма собирает данные пользователя и отправляет их на сервер:

<form action="/login/" method="post">
  <input name="username">
  <button type="submit">Войти</button>
</form>

Главные атрибуты формы:

  • action - куда отправлять данные;
  • method - каким HTTP-методом: обычно get или post.

У полей:

  • id нужен для связи с label;
  • name нужен серверу, именно под этим именем поле попадёт в запрос.

label связывают с полем через for и id:

<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) - структурный псевдокласс.

Группировка:

h1, h2, h3 {
  color: black;
}

Комбинация селекторов:

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 - одномерная раскладка: по строке или колонке.

.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 - двумерная раскладка: строки и столбцы.

.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-функции:

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:

path("", views.home, name="home")

Блок 8. Django CBV

CBV - class-based view, представление как класс.

Основные классы:

  • TemplateView - просто показать шаблон;
  • ListView - показать список объектов;
  • DetailView - показать один объект.

CBV вызывается в маршруте через .as_view():

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:

paginate_by = 10

Шаблоны по умолчанию:

  • ListView: <app>/<model>_list.html;
  • DetailView: <app>/<model>_detail.html.

При переопределении методов часто вызывают super(), чтобы сохранить базовую логику Django.

Блок 9. Django URLs

Маршрутизация описывается в urls.py.

path():

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.

Шаблонный тег:

{% url 'app:name' arg %}

app_name задаёт namespace приложения.

Блок 10. Язык шаблонов Django

Переменные:

{{ user.name }}

Если переменной нет в контексте, обычно выводится пустая строка.

Теги:

{% for item in items %}
  {{ forloop.counter }}. {{ item }}
{% endfor %}

forloop даёт служебные данные цикла: counter, first, last.

Фильтры:

{{ title|lower }}
{{ items|length }}
{{ date|date:"Y-m-d" }}

Наследование:

{% extends "base.html" %}

{% block content %}
  Контент
{% endblock %}

Включение шаблона:

{% include "parts/menu.html" %}

Статика:

{% 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() - проверка существования.

Цепочки:

Post.objects.filter(is_published=True).order_by("-created_at")

Q нужен для сложных условий:

Post.objects.filter(Q(title__icontains="web") | Q(body__icontains="web"))

F нужен для работы с полями на стороне БД:

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-видом поля:

password = forms.CharField(widget=forms.PasswordInput)

help_text задаёт подсказку.

Валидация одного поля:

def clean_email(self):
    email = self.cleaned_data["email"]
    return email

Валидация связи между полями:

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
B. Победит тот, который короче
C. body .content
D. Они равны

Ответ: C. body .content


С помощью какого свойства можно добавить тень к тексту?

A. text-shadow
B. shadow-text
C. box-shadow
D. font-shadow

Ответ: A. text-shadow


Дан блок CSS

width: 100px;
padding: 10px;
border: 5px solid;
box-sizing: border-box;

Какова его реальная ширина?

A. 120px
B. 115px
C. 130px
D. 100px

Ответ: D. 100px


Значение свойства align-items по умолчанию

A. flex-start
B. stretch
C. center
D. baseline

Ответ: B. stretch


Как называются линии, которые образуют структуру сетки?

A. Grid Tracks
B. Grid Cells
C. Grid Areas
D. Grid Lines

Ответ: D. Grid Lines


С помощью какого аргумента можно указать собственную модель для промежуточной таблицы?

A. to_field
B. intermediate
C. through
D. link_model

Ответ: C. through


Как называется поле, которое Django создаёт автоматически, если не указан primary_key?

A. uuid
B. pk_id
C. id
D. index

Ответ: C. id


Как найти самую высокую цену товара в категории?

A. Product.objects.aggregate(Max('price'))
B. Product.objects.filter(max=True)
C. Category.objects.count('price')
D. Category.objects.annotate(Max('product__price'))

Ответ: D (для максимума по каждой категории)


Какой фильтр используется для поиска подстроки без учёта регистра?

A. __exact
B. __search
C. __icontains
D. __contains

Ответ: C. __icontains


В каком файле проекта обычно настраиваются основные маршруты?

A. models.py
B. urls.py
C. settings.py
D. views.py

Ответ: B. urls.py


Как называется аргумент в функции path(), который позволяет обращаться к маршруту по имени в шаблонах?

A. alias
B. id
C. name
D. ref

Ответ: C. name


Что произойдёт, если обратиться к переменной, которой нет в контексте?

A. Django вызовет NameError
B. Отобразится текст "None"
C. Страница вернёт ошибку 500
D. Вместо переменной будет выведена пустая строка

Ответ: D. Пустая строка


Какой синтаксис используется для шаблонных тегов?

A. {% tag %}
B. {{ tag }}
C. {# tag #}
D. <% tag %>

Ответ: A. {% tag %}


В чём ошибка? FBV

def home(request):
    context = {"title": "Home"}
    return render("index.html", context)

A. Первым аргументом в render всегда должен идти request
B. Путь к шаблону должен быть в кортеже
C. Context должен быть списком
D. Нужно использовать render_to_response

Ответ: A


Какая функция позволяет быстро получить объект из базы или выдать 404?

A. get_object
B. get_object_or_404
C. find_or_404

Ответ: B. get_object_or_404


Что произойдёт, если в ListView не указать ни model, ни queryset?

A. Django автоматически найдёт модель по названию класса
B. Ошибка во время запуска
C. Он покажет все объекты из базы
D. Покажет пустой список

Ответ: B


Как правильно создать ссылку на маршрут с именем find?

A. <a href="/myapp/find/">
B. <a href="{% path 'myapp:find' %}">
C. <a href="{{ search myapp.find }}">
D. <a href="{% url 'myapp:find' %}">

Ответ: D


Для чего используется app_name в urls.py?

A. Для выбора БД
B. Для задания пространства имён (namespace)
C. Для заголовка сайта
D. Технический комментарий

Ответ: B


Как обратиться к ключу словаря user_data['name'] в шаблоне?

A. {{ user_data.name }}
B. {{ user_data['name'] }}
C. {{ user_data.get('name') }}
D. {{ user_data->name }}

Ответ: A


Где обычно описывается логика FBV в Django?

A. admin.py
B. views.py
C. models.py

Ответ: B. views.py

  1. Делает SQL JOIN и получает данные за один запрос.
  2. Группирует данные через GROUP BY
  3. Кэширует данные
  4. Выполняет дополнительный отдельный запрос

В каком файле проекта обычно настраиваются основные маршруты (URL-адреса)?

  1. models.py
  2. urls.py
  3. settings.py
  4. views.py

Как называется аргумент в функции path(), позволяющий обращаться к маршруту по имени в шаблонах?

  1. alias
  2. id
  3. name
  4. ref

Какая функция позволяет быстро получить объект из базы или вызвать 404, если объект не найден?

  1. get_or_error()
  2. request_object()
  3. get_object_or_404()
  4. find_or_404()

Что произойдет, если в ListView не указать ни model, ни queryset?

  1. Он автоматически найдет модель по названию класса.
  2. Django выдаст ошибку.
  3. Он покажет все объекты базы.
  4. Покажет пустой список.

Какой метод в CBV отвечает за получение словаря контекста для шаблона?

  1. get_template_context()
  2. set_context_data()
  3. get_context_data()
  4. get_context()

Какой метод следует переопределить для валидации связи между полями (например, "Пароль" и "Повтор пароля")?

  1. Метод save() в модели.
  2. validate_fields().
  3. clean_password().
  4. Общий метод clean() всего класса формы.