vault backup: 2026-05-30 19:03:22
This commit is contained in:
Dmitry
@@ -0,0 +1,87 @@
|
||||
---
|
||||
status: seed
|
||||
type: concept
|
||||
tags: [django, backend, orm, database, migrations]
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: Django: Модели и ORM
|
||||
source: ["[[lec1-django_start_models-1.pdf]]", "[[lec4-django_lec_queries.pdf]]", "[[p1-django-1.pdf]]"]
|
||||
---
|
||||
|
||||
# Django Модели и ORM
|
||||
|
||||
**Django ORM (Object-Relational Mapping)** — технология связи объектно-ориентированного кода и реляционной БД. Реализует паттерн Active Record.
|
||||
|
||||
## Структура проекта
|
||||
- `manage.py`: Утилита командной строки.
|
||||
- `settings.py`: Конфигурация проекта (БД, `INSTALLED_APPS`).
|
||||
- `urls.py`: Описание маршрутов.
|
||||
- `models.py`: Определение таблиц БД.
|
||||
|
||||
## Определение моделей
|
||||
```python
|
||||
from django.db import models
|
||||
|
||||
class Person(models.Model):
|
||||
first_name = models.CharField("Имя", max_length=30)
|
||||
age = models.IntegerField(default=18)
|
||||
bio = models.TextField(blank=True)
|
||||
|
||||
class Meta:
|
||||
verbose_name = "Человек"
|
||||
ordering = ["-first_name"]
|
||||
```
|
||||
|
||||
### Типы полей
|
||||
- `AutoField`, `CharField(max_length=N)`, `TextField`.
|
||||
- `IntegerField`, `DecimalField(max_digits, decimal_places)`.
|
||||
- `BooleanField`, `DateField`, `DateTimeField`.
|
||||
- `EmailField`, `FileField`, `ImageField`.
|
||||
|
||||
### Отношения
|
||||
- `ForeignKey(Target, on_delete=models.CASCADE)` — Один ко многим.
|
||||
- `OneToOneField(Target, on_delete=models.CASCADE)` — Один к одному.
|
||||
- `ManyToManyField(Target)` — Многие ко многим.
|
||||
- **on_delete:** `CASCADE`, `PROTECT`, `SET_NULL`, `SET_DEFAULT`, `DO_NOTHING`.
|
||||
|
||||
---
|
||||
|
||||
## Миграции
|
||||
Инструмент для синхронизации моделей с БД.
|
||||
- `python manage.py makemigrations` — создать файлы миграций.
|
||||
- `python manage.py migrate` — применить изменения в БД.
|
||||
- `python manage.py showmigrations` — список статусов миграций.
|
||||
|
||||
---
|
||||
|
||||
## Работа с QuerySet (Запросы)
|
||||
Django QuerySet ленивы (вычисляются только при обращении) и поддерживают цепочки методов.
|
||||
|
||||
### Базовые CRUD операции
|
||||
- **Create:** `obj = Person.objects.create(name="Ivan")` или `obj.save()`.
|
||||
- **Read:**
|
||||
- `Person.objects.all()` (все),
|
||||
- `Person.objects.get(id=1)` (один),
|
||||
- `Person.objects.filter(age__gt=20)` (фильтрация).
|
||||
- **Update:** `Person.objects.filter(id=1).update(age=25)`.
|
||||
- **Delete:** `obj.delete()` или `QuerySet.delete()`.
|
||||
|
||||
### Поиск по полям (Field Lookups)
|
||||
- `exact`, `iexact` (регистронезависимо).
|
||||
- `gt` (>), `gte` (>=), `lt` (<), `lte` (<=).
|
||||
- `contains`, `icontains`.
|
||||
- `in` (список), `range` (диапазон).
|
||||
- `isnull=True`.
|
||||
|
||||
### Оптимизация запросов
|
||||
- `select_related('field')`: INNER JOIN для ForeignKey и OneToOne.
|
||||
- `prefetch_related('field')`: 2-й запрос для ManyToMany и обратных связей.
|
||||
- **Проблема N+1:** Возникает при обращении к связанным полям в цикле без предварительной подгрузки.
|
||||
|
||||
### Агрегация и аннотация
|
||||
- `aggregate(Avg('rating'))`: терминальный метод, возвращает словарь.
|
||||
- `annotate(total=Count('entries'))`: добавляет вычисляемое поле к каждому объекту в выборке.
|
||||
|
||||
### Логические условия
|
||||
- `Q-объекты`: Позволяют использовать `OR` (`|`), `AND` (`&`), `NOT` (`~`).
|
||||
- `F-выражения`: Ссылки на поля в БД (атомарные операции без Race Condition).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
status: seed
|
||||
type: concept
|
||||
tags: [django, routing, templates, cbv, fbv]
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: Django: Представления, шаблоны и CBV
|
||||
source: ["[[lec2-django_lec_urls_views_templates-1.pdf]]", "[[lec3-django_cbv-1.pdf]]", "[[p4-django_cbv-1.pdf]]"]
|
||||
---
|
||||
|
||||
# Django: Представления и Шаблоны
|
||||
|
||||
## Маршрутизация (URL Routing)
|
||||
- Описывается в `urlpatterns` с помощью `path()` и `re_path()`.
|
||||
- Конвертеры: `<int:pk>`, `<slug:slug>`, `<uuid:id>`.
|
||||
- Включение других файлов: `path('blog/', include('blog.urls'))`.
|
||||
- Реверсирование: `{% url 'name' %}` в шаблонах или `reverse('name')` в Python.
|
||||
|
||||
---
|
||||
|
||||
## Представления (Views)
|
||||
Views принимают `HttpRequest` и возвращают `HttpResponse`.
|
||||
|
||||
### Функциональные представления (FBV)
|
||||
```python
|
||||
from django.shortcuts import render, get_object_or_404
|
||||
|
||||
def index(request):
|
||||
latest_items = Model.objects.all()[:5]
|
||||
return render(request, "app/index.html", {"items": latest_items})
|
||||
```
|
||||
|
||||
### Классовые представления (CBV)
|
||||
Абстрагируют типичные задачи. Вызываются в URL через `.as_view()`.
|
||||
|
||||
- **TemplateView:** Отображение статического шаблона.
|
||||
- **ListView:** Автоматический список объектов (данные в `object_list`).
|
||||
- **DetailView:** Детальная информация об одном объекте (ищет по `pk` или `slug`).
|
||||
|
||||
**Пример ListView:**
|
||||
```python
|
||||
class PostListView(ListView):
|
||||
model = Post
|
||||
template_name = "blog/list.html"
|
||||
context_object_name = "posts"
|
||||
paginate_by = 10
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Шаблоны (Templates)
|
||||
Используют **Django Template Language (DTL)**.
|
||||
|
||||
### Синтаксис
|
||||
- **Переменные:** `{{ var.attr }}`.
|
||||
- **Теги:** `{% if %}`, `{% for %}`, `{% url %}`, `{% csrf_token %}`.
|
||||
- **Фильтры:** `{{ date|date:"Y-m-d" }}`, `{{ list|length }}`, `{{ text|lower }}`.
|
||||
|
||||
### Наследование шаблонов
|
||||
Позволяет избежать дублирования HTML-кода.
|
||||
- **Базовый шаблон (`base.html`):** Определяет блоки `{% block content %}{% endblock %}`.
|
||||
- **Дочерний шаблон:** Использует `{% extends "base.html" %}` и переопределяет блоки.
|
||||
|
||||
---
|
||||
|
||||
## Статические файлы (Static)
|
||||
- Подключаются через `{% load static %}`.
|
||||
- Настройки в `settings.py`: `STATIC_URL`, `STATICFILES_DIRS`.
|
||||
- В продакшне используется команда `python manage.py collectstatic`.
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
status: seed
|
||||
type: concept
|
||||
tags: [django, forms, crud, validation, modelform]
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: Django: Работа с формами и CUD
|
||||
source: ["[[lec5-django_cud_form.pdf]]"]
|
||||
---
|
||||
|
||||
# Django: Формы и CUD
|
||||
|
||||
**CUD (Create, Update, Delete)** — операции изменения данных. Django предоставляет мощную подсистему форм для их реализации.
|
||||
|
||||
## Типы форм
|
||||
1. **`forms.Form`**: Для общих задач (поиск, обратная связь), не привязанных к моделям.
|
||||
2. **`forms.ModelForm`**: Автоматическая генерация полей на основе модели.
|
||||
|
||||
```python
|
||||
class BlogForm(forms.ModelForm):
|
||||
class Meta:
|
||||
model = Blog
|
||||
fields = ['name', 'tagline']
|
||||
widgets = {
|
||||
'name': forms.TextInput(attrs={'class': 'form-control'})
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Жизненный цикл формы в представлении
|
||||
```python
|
||||
def contact_view(request):
|
||||
if request.method == "POST":
|
||||
form = ContactForm(request.POST)
|
||||
if form.is_valid():
|
||||
# Данные очищены и доступны в form.cleaned_data
|
||||
data = form.cleaned_data
|
||||
# Действие (сохранение или отправка email)
|
||||
return redirect('success')
|
||||
else:
|
||||
form = ContactForm()
|
||||
return render(request, 'contact.html', {'form': form})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Валидация и очистка данных
|
||||
- **`is_valid()`**: Запускает процесс проверки.
|
||||
- **Автоматическая очистка**: Превращает текст в типы Python (например, строку в `datetime`).
|
||||
- **`clean_<fieldname>()`**: Валидация конкретного поля.
|
||||
- **`clean()`**: Валидация всей формы (сравнение полей).
|
||||
|
||||
---
|
||||
|
||||
## Generic Editing Views (CBV для CUD)
|
||||
Django предоставляет готовые классы для CRUD:
|
||||
- **CreateView**: Создание объекта.
|
||||
- **UpdateView**: Редактирование (требует `pk` в URL).
|
||||
- **DeleteView**: Удаление (требует подтверждения через POST).
|
||||
|
||||
**Пример:**
|
||||
```python
|
||||
class BlogCreateView(CreateView):
|
||||
model = Blog
|
||||
form_class = BlogForm
|
||||
template_name = "blog/blog_form.html"
|
||||
success_url = reverse_lazy('blog_list')
|
||||
```
|
||||
|
||||
## Отображение в шаблоне
|
||||
- `{{ form.as_p }}` — в параграфах.
|
||||
- `{{ form.as_table }}` — в строках таблицы.
|
||||
- **Ручное управление:**
|
||||
```html
|
||||
{% for field in form %}
|
||||
{{ field.label_tag }} {{ field }}
|
||||
{{ field.errors }}
|
||||
{% endfor %}
|
||||
```
|
||||
*Важно:* Не забывайте про `{% csrf_token %}` внутри тега `<form>`.
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
status: seed
|
||||
type: concept
|
||||
tags: [python, syntax, programming-basics, functional-programming]
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: Python: Базовый синтаксис и основы
|
||||
source: ["[[50-python-lec.pdf]]"]
|
||||
---
|
||||
|
||||
# Основы Python
|
||||
|
||||
**Python** — высокоуровневый объектно-ориентированный язык программирования с «двумерным синтаксисом» (структура определяется отступами).
|
||||
|
||||
## Вывод и ввод данных
|
||||
- **Вывод:** `print("текст", sep=" ", end="\n")`.
|
||||
- **f-строки:** `print(f"Значение: {var}")`.
|
||||
- **Ввод:** `input("Приглашение")` — всегда возвращает строку.
|
||||
|
||||
## Типы данных
|
||||
1. **int**: целые числа.
|
||||
2. **float**: числа с плавающей точкой.
|
||||
3. **bool**: `True` / `False`.
|
||||
4. **str**: строки (Unicode).
|
||||
5. **list**: изменяемые списки.
|
||||
6. **tuple**: неизменяемые кортежи.
|
||||
7. **set**: множества уникальных элементов.
|
||||
8. **dict**: словари (ключ-значение).
|
||||
|
||||
### Приведение типов
|
||||
`int()`, `float()`, `str()`, `bool()`, `list()`.
|
||||
|
||||
---
|
||||
|
||||
## Управляющие конструкции
|
||||
|
||||
### Условия
|
||||
```python
|
||||
if condition1:
|
||||
# действие
|
||||
elif condition2:
|
||||
# действие
|
||||
else:
|
||||
# действие по умолчанию
|
||||
```
|
||||
|
||||
### Циклы
|
||||
- **while**: пока условие истинно.
|
||||
- **for**: обход последовательности (`range`, `list`, `str`).
|
||||
- **else в циклах**: выполняется, если цикл не был прерван `break`.
|
||||
|
||||
---
|
||||
|
||||
## Функции
|
||||
Определяются через `def`.
|
||||
|
||||
```python
|
||||
def my_function(param, optional=10):
|
||||
return param + optional
|
||||
```
|
||||
- `*args`: произвольное количество позиционных аргументов (кортеж).
|
||||
- `**kwargs`: произвольное количество именованных аргументов (словарь).
|
||||
|
||||
---
|
||||
|
||||
## Работа со списками и итераторами
|
||||
- **Слайсы (срезы):** `list[start:stop:step]`.
|
||||
- **Методы:** `append()`, `extend()`, `insert()`, `remove()`, `pop()`, `sort()`.
|
||||
- **Функциональное программирование:**
|
||||
- `lambda x: x**2` (анонимные функции).
|
||||
- `map(func, iterable)` (применение к каждому).
|
||||
- `filter(func, iterable)` (фильтрация по условию).
|
||||
- `reduce(func, iterable)` (свертка списка).
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
status: seed
|
||||
type: concept
|
||||
tags: [python, oop, classes, inheritance, polymorphism, encapsulation]
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: Основы объектно-ориентированного программирования
|
||||
source: ["[[oop.pdf]]"]
|
||||
---
|
||||
|
||||
# Основы ООП в Python
|
||||
|
||||
**ООП** — методология, в основе которой лежат понятия **класса** (шаблон) и **объекта** (экземпляр).
|
||||
|
||||
## Четыре столпа ООП
|
||||
1. **Абстракция:** Выделение ключевых характеристик объекта и отсечение незначимых.
|
||||
2. **Инкапсуляция:** Сокрытие внутренней логики и данных. В Python реализуется соглашением об именовании:
|
||||
- `_name`: «защищенный» (не рекомендуется трогать вне класса).
|
||||
- `__name`: «приватный» (имя искажается для предотвращения прямого доступа).
|
||||
3. **Наследование:** Создание новых классов на базе существующих. Все классы наследуются от `object`.
|
||||
4. **Полиморфизм:** Возможность использовать разные типы данных через единый интерфейс.
|
||||
- *Полиморфизм подтипов:* Использование потомка вместо родителя.
|
||||
- *Параметрический:* Обработка данных любого типа (например, `len()`).
|
||||
- *Ad-hoc:* Перегрузка функций (в Python через разные аргументы).
|
||||
|
||||
---
|
||||
|
||||
## Работа с классами
|
||||
```python
|
||||
class Rectangle:
|
||||
default_color = "green" # Атрибут класса (статический)
|
||||
|
||||
def __init__(self, width, height):
|
||||
self.width = width # Атрибут экземпляра
|
||||
self.height = height
|
||||
|
||||
def area(self): # Метод экземпляра
|
||||
return self.width * self.height
|
||||
|
||||
@classmethod
|
||||
def change_color(cls, color):
|
||||
cls.default_color = color
|
||||
|
||||
@staticmethod
|
||||
def hint():
|
||||
print("Это прямоугольник")
|
||||
```
|
||||
|
||||
### Специальные методы (Магические методы)
|
||||
- `__init__`: Инициализатор (вызывается после создания объекта).
|
||||
- `__new__`: Конструктор (вызывается для создания экземпляра).
|
||||
- `__str__`: Строковое представление (для `print()`).
|
||||
|
||||
---
|
||||
|
||||
## Наследование
|
||||
```python
|
||||
class Square(Rectangle):
|
||||
def __init__(self, side):
|
||||
super().__init__(side, side) # Вызов родительского инициализатора
|
||||
```
|
||||
- `super()` — ссылка на родительский класс.
|
||||
|
||||
---
|
||||
|
||||
## Модули и пакеты
|
||||
- **Модуль:** Любой `.py` файл. Подключается через `import`.
|
||||
- **Пакет:** Папка с файлом `__init__.py`. Помогает Python находить вложенные модули.
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
status: seed
|
||||
type: concept
|
||||
tags: [css, flexbox, grid, adaptive-design, responsive-web]
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: CSS: Адаптивность, Flexbox и Grid
|
||||
source: ["[[14-css-adaptive.pdf]]", "[[17-css-grid.pdf]]", "[[18-css-flex.pdf]]"]
|
||||
---
|
||||
|
||||
# Адаптивная верстка
|
||||
|
||||
Адаптивность (AWD) и отзывчивость (RWD) позволяют сайту корректно отображаться на любых устройствах.
|
||||
|
||||
## Медиазапросы (@media)
|
||||
Синтаксис:
|
||||
```css
|
||||
@media screen and (max-width: 768px) {
|
||||
/* Стили для планшетов и телефонов */
|
||||
}
|
||||
```
|
||||
- **Mobile First:** Сначала стили для мобильных, затем `min-width`.
|
||||
- **Desktop First:** Сначала для десктопов, затем `max-width`.
|
||||
|
||||
---
|
||||
|
||||
# Flexbox (Flexible Box Layout)
|
||||
Одномерная модель раскладки (по одной оси).
|
||||
|
||||
- **Контейнер:** `display: flex;` / `inline-flex;`.
|
||||
- **Направление:** `flex-direction: row | column | row-reverse`.
|
||||
- **Перенос:** `flex-wrap: wrap | nowrap`.
|
||||
- **Выравнивание по главной оси:** `justify-content: flex-start | center | space-between | space-around`.
|
||||
- **Выравнивание по поперечной оси:** `align-items: center | stretch`.
|
||||
- **Свойства элементов:**
|
||||
- `flex-grow` (коэффициент роста),
|
||||
- `flex-shrink` (сжатие),
|
||||
- `flex-basis` (базовый размер),
|
||||
- `order` (порядок отображения).
|
||||
|
||||
---
|
||||
|
||||
# Grid Layout
|
||||
Двумерная модель раскладки (строки + столбцы).
|
||||
|
||||
- **Контейнер:** `display: grid;`.
|
||||
- **Определение сетки:**
|
||||
- `grid-template-columns: repeat(3, 1fr);` (3 колонки равной ширины).
|
||||
- `grid-template-rows: auto 1fr;`.
|
||||
- **Единица fr:** Доля свободного пространства.
|
||||
- **Отступы:** `gap: 10px;`.
|
||||
- **Размещение элементов:**
|
||||
- `grid-column: 1 / 3;` (от 1-й до 3-й линии).
|
||||
- `grid-row: 2 / span 2;` (со 2-й линии на 2 ячейки).
|
||||
- **Именованные области:**
|
||||
```css
|
||||
.container {
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"sidebar content"
|
||||
"footer footer";
|
||||
}
|
||||
header { grid-area: header; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Сравнение Flex и Grid
|
||||
- **Flexbox:** Лучше для одномерных структур (меню, тулбары) и распределения пространства между элементами.
|
||||
- **Grid:** Лучше для сложных макетов всей страницы, перекрытия элементов и точного контроля над строками и столбцами одновременно.
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
status: seed
|
||||
type: concept
|
||||
tags: [css, web-development, selectors, box-model]
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: CSS: Основы, селекторы и блочная модель
|
||||
source: ["[[11-css-основы_селекторы.pdf]]", "[[12-css-базовые_свойства.pdf]]", "[[12-css-блочная_модель.pdf]]", "[[12-css-фон.pdf]]"]
|
||||
---
|
||||
|
||||
# CSS: Основы и селекторы
|
||||
|
||||
**CSS (Cascading Style Sheets)** — язык таблиц стилей для оформления HTML-документов.
|
||||
|
||||
## Подключение CSS
|
||||
1. **Внешняя таблица:** `<link rel="stylesheet" href="style.css">`.
|
||||
2. **Внутренние стили:** Тег `<style>` в `<head>`.
|
||||
3. **Встроенные (inline) стили:** Атрибут `style` у тега.
|
||||
|
||||
## Селекторы
|
||||
- **Универсальный:** `*` — все элементы.
|
||||
- **По тегу:** `h1`, `p`.
|
||||
- **По классу:** `.className`.
|
||||
- **По ID:** `#idName`.
|
||||
- **Потомки:** `div p` (все `p` внутри `div`).
|
||||
- **Дочерние:** `div > p` (только прямые наследники).
|
||||
- **Соседние:** `h1 + p` (первый `p` после `h1`).
|
||||
- **По атрибуту:** `a[href^="https://"]`.
|
||||
|
||||
### Псевдоклассы и псевдоэлементы
|
||||
- `:hover`, `:focus`, `:active`.
|
||||
- `:nth-child(odd/even/n)`.
|
||||
- `::before`, `::after` (используются с `content`).
|
||||
|
||||
## Каскадность и Специфичность
|
||||
Если правила конфликтуют, побеждает то, у которого выше специфичность:
|
||||
1. Inline стили (1, 0, 0, 0)
|
||||
2. ID (0, 1, 0, 0)
|
||||
3. Классы, атрибуты, псевдоклассы (0, 0, 1, 0)
|
||||
4. Теги и псевдоэлементы (0, 0, 0, 1)
|
||||
|
||||
---
|
||||
|
||||
# Блочная модель (Box Model)
|
||||
|
||||
Каждый элемент в CSS — это прямоугольный блок.
|
||||
|
||||
- **Content:** Содержимое (текст, изображение).
|
||||
- **Padding:** Внутренние поля (между контентом и рамкой).
|
||||
- **Border:** Рамка.
|
||||
- **Margin:** Внешние отступы (между рамкой и соседями).
|
||||
|
||||
### box-sizing
|
||||
- `content-box` (по умолчанию): `width` задает только ширину контента.
|
||||
- `border-box`: `width` включает в себя `padding` и `border`.
|
||||
|
||||
## Свойство display
|
||||
- `block`: Занимает всю ширину, начинается с новой строки.
|
||||
- `inline`: Ширина по контенту, не позволяет задавать `width/height`.
|
||||
- `inline-block`: Строчный элемент, но с возможностью задавать размеры и отступы.
|
||||
- `none`: Убирает элемент из документа.
|
||||
|
||||
---
|
||||
|
||||
# Базовые свойства оформления
|
||||
|
||||
## Текст и шрифты
|
||||
- `font-family`, `font-size`, `font-weight`.
|
||||
- `text-align`, `text-transform` (`uppercase`, `capitalize`).
|
||||
- `text-decoration` (`underline`, `none`).
|
||||
- `line-height`, `letter-spacing`.
|
||||
|
||||
## Фон (Background)
|
||||
- `background-color`.
|
||||
- `background-image: url(...)`.
|
||||
- `background-size: cover / contain`.
|
||||
- `background-repeat: no-repeat`.
|
||||
- `background-position: center`.
|
||||
|
||||
## Границы и тени
|
||||
- `border: 1px solid black;`.
|
||||
- `border-radius: 5px;` (скругление углов).
|
||||
- `box-shadow: x y blur spread color;`.
|
||||
- `transition: 0.3s;` (плавные переходы).
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
status: seed
|
||||
type: concept
|
||||
tags: [bootstrap, web-development, css-framework, grid-system]
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: Основы Bootstrap
|
||||
source: ["[[21-bootstrap-1.pdf]]"]
|
||||
---
|
||||
|
||||
# Bootstrap 5
|
||||
|
||||
**Bootstrap** — популярный HTML/CSS/JS фреймворк для быстрой разработки адаптивных интерфейсов.
|
||||
|
||||
## Быстрый старт
|
||||
Для использования через CDN добавьте в `<head>`:
|
||||
```html
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
```
|
||||
И скрипты перед `</body>`:
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/js/bootstrap.bundle.min.js"></script>
|
||||
```
|
||||
|
||||
## Контрольные точки (Breakpoints)
|
||||
- **X-Small (`<576px`)**: по умолчанию.
|
||||
- **Small (`sm` ≥576px)**.
|
||||
- **Medium (`md` ≥768px)**.
|
||||
- **Large (`lg` ≥992px)**.
|
||||
- **Extra large (`xl` ≥1200px)**.
|
||||
- **Extra extra large (`xxl` ≥1400px)**.
|
||||
|
||||
## Сетка (Grid System)
|
||||
Базируется на Flexbox и состоит из контейнеров, строк и колонок (12 колонок в ряду).
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8">Основной контент</div>
|
||||
<div class="col-6 col-md-4">Сайдбар</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
- `.container`: фиксированная ширина (меняется на брейкпоинтах).
|
||||
- `.container-fluid`: всегда 100% ширины.
|
||||
- `.row`: обертка для колонок.
|
||||
- `.col-{breakpoint}-{size}`: настройка ширины колонки.
|
||||
|
||||
## Основные классы-утилиты
|
||||
- **Отступы:** `m-3` (margin), `p-2` (padding), `mt-1` (margin-top).
|
||||
- **Цвета:** `text-primary`, `bg-dark`, `btn-success`.
|
||||
- **Типографика:** `h1`, `display-1`, `text-center`, `fw-bold`.
|
||||
- **Flexbox:** `d-flex`, `justify-content-between`, `align-items-center`.
|
||||
|
||||
## Компоненты
|
||||
Bootstrap предоставляет готовые стили для:
|
||||
- Кнопок (`btn`), форм, навигационных панелей (`navbar`).
|
||||
- Карточек (`card`), алертов (`alert`), модальных окон.
|
||||
- Пагинации, списков, таблиц.
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
status: seed
|
||||
type: concept
|
||||
tags: [html, web-development, structure, tables, forms]
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: Основы HTML (структура, таблицы, формы)
|
||||
source: ["[[10-html_основы_НП.pdf]]", "[[13-html-таблицы.pdf]]", "[[15-html-формы-1.pdf]]"]
|
||||
---
|
||||
|
||||
# Основы HTML
|
||||
|
||||
**HTML (Hypertext Markup Language)** — язык разметки для структурирования и отображения веб-страниц.
|
||||
|
||||
## Структура HTML-документа
|
||||
Базовый шаблон (HTML5):
|
||||
```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>
|
||||
```
|
||||
- `<!DOCTYPE html>` — объявление типа документа.
|
||||
- `<head>` — метаданные (не отображаются в браузере).
|
||||
- `<body>` — основное содержимое.
|
||||
|
||||
### Метатег Viewport
|
||||
Критичен для мобильных устройств. Позволяет контролировать масштаб.
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
```
|
||||
|
||||
## Основные теги и семантика
|
||||
HTML5 вводит семантические теги для улучшения понимания структуры поисковиками и программами экранного доступа:
|
||||
- `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`.
|
||||
|
||||
### Текст и форматирование
|
||||
- **Заголовки:** `<h1>`...`<h6>`.
|
||||
- **Абзацы и переносы:** `<p>`, `<br>`.
|
||||
- **Логическое выделение:** `<strong>` (важное, жирный), `<em>` (акцент, курсив), `<code>` (код).
|
||||
- **Контейнеры:** `<div>` (блочный), `<span>` (строчный).
|
||||
|
||||
### Списки
|
||||
- **Маркированный:** `<ul>` + `<li>`.
|
||||
- **Нумерованный:** `<ol>` + `<li>`.
|
||||
|
||||
### Ссылки и изображения
|
||||
- **Ссылка:** `<a href="URL" target="_blank">Текст</a>`.
|
||||
- **Изображение:** `<img src="path" alt="описание" width="500">`.
|
||||
|
||||
---
|
||||
|
||||
## Таблицы
|
||||
Используются для отображения структурированных данных. Не рекомендуются для верстки макета.
|
||||
|
||||
**Структура таблицы:**
|
||||
```html
|
||||
<table>
|
||||
<caption>Заголовок таблицы</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Заголовок столбца 1</th>
|
||||
<th>Заголовок столбца 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Данные 1</td>
|
||||
<td>Данные 2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Итог 1</td>
|
||||
<td>Итог 2</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
```
|
||||
- **Объединение ячеек:** `colspan` (по горизонтали), `rowspan` (по вертикали).
|
||||
|
||||
---
|
||||
|
||||
## Формы
|
||||
Инструмент для сбора данных пользователя.
|
||||
|
||||
**Базовая форма:**
|
||||
```html
|
||||
<form action="/handler-url/" method="post">
|
||||
<label for="username">Имя:</label>
|
||||
<input type="text" id="username" name="name" placeholder="Введите имя">
|
||||
|
||||
<button type="submit">Отправить</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Элементы управления:
|
||||
- `<input>`: `type="text"`, `password`, `email`, `number`, `checkbox`, `radio`, `file`, `date`, `hidden`.
|
||||
- `<select>` + `<option>`: выпадающий список.
|
||||
- `<textarea>`: многострочный ввод текста.
|
||||
- `<fieldset>` + `<legend>`: группировка связанных полей.
|
||||
|
||||
### Атрибуты валидации:
|
||||
- `required`, `minlength`, `maxlength`, `min`, `max`, `pattern` (регулярные выражения).
|
||||
Reference in New Issue
Block a user