vault backup: 2026-05-31 10:28:49
This commit is contained in:
Dmitry
@@ -1,5 +1,5 @@
|
||||
---
|
||||
status: seed
|
||||
status: processing
|
||||
type: concept
|
||||
tags:
|
||||
- html
|
||||
@@ -9,6 +9,7 @@ tags:
|
||||
- forms
|
||||
created: 2026-05-30
|
||||
updated: 2026-05-30
|
||||
title: "Основы HTML (структура, таблицы, формы)"
|
||||
source:
|
||||
- '[[10-html_основы_НП.pdf]]'
|
||||
- '[[13-html-таблицы.pdf]]'
|
||||
@@ -46,8 +47,83 @@ aliases:
|
||||
```
|
||||
|
||||
## Основные теги и семантика
|
||||
HTML5 вводит семантические теги для улучшения понимания структуры поисковиками и программами экранного доступа:
|
||||
- `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`.
|
||||
**Тег** — элемент разметки, который говорит браузеру, что находится на странице: заголовок, абзац, ссылка, форма, таблица.
|
||||
|
||||
Обычно тег состоит из открывающей и закрывающей части:
|
||||
|
||||
```html
|
||||
<p>Текст абзаца</p>
|
||||
```
|
||||
|
||||
Некоторые теги не имеют закрывающей пары:
|
||||
|
||||
```html
|
||||
<img src="cat.jpg" alt="Кот">
|
||||
<br>
|
||||
<input type="email" name="email">
|
||||
```
|
||||
|
||||
**Атрибуты** уточняют поведение тега:
|
||||
- `href` — адрес ссылки.
|
||||
- `src` — путь к изображению или файлу.
|
||||
- `alt` — текстовое описание изображения.
|
||||
- `class` — CSS-класс для стилизации.
|
||||
- `id` — уникальный идентификатор элемента.
|
||||
- `name` — имя поля формы, с которым данные отправляются на сервер.
|
||||
|
||||
### Блочные и строчные элементы
|
||||
- **Блочные элементы** занимают всю доступную ширину и обычно начинаются с новой строки: `<div>`, `<p>`, `<h1>`, `<section>`, `<form>`.
|
||||
- **Строчные элементы** находятся внутри строки текста и не ломают поток: `<span>`, `<a>`, `<strong>`, `<em>`, `<code>`.
|
||||
|
||||
```html
|
||||
<p>
|
||||
Это абзац с <strong>важным текстом</strong> и
|
||||
<a href="/about/">ссылкой</a>.
|
||||
</p>
|
||||
```
|
||||
|
||||
### Семантические теги
|
||||
Семантика — это использование тегов по смыслу, а не только ради внешнего вида.
|
||||
|
||||
Например, `<main>` означает главный контент страницы, `<nav>` — навигацию, `<article>` — самостоятельный материал. Это помогает браузеру, поисковым системам, скринридерам и другим инструментам лучше понимать структуру страницы.
|
||||
|
||||
- `<header>` — верхняя часть страницы или секции: логотип, заголовок, навигация.
|
||||
- `<nav>` — блок навигационных ссылок.
|
||||
- `<main>` — основной контент страницы; обычно один на страницу.
|
||||
- `<section>` — смысловой раздел страницы.
|
||||
- `<article>` — самостоятельный материал: статья, пост, карточка новости.
|
||||
- `<aside>` — дополнительный контент: боковая панель, подсказки, связанные ссылки.
|
||||
- `<footer>` — нижняя часть страницы или секции.
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Блог</h1>
|
||||
<nav>
|
||||
<a href="/">Главная</a>
|
||||
<a href="/about/">О проекте</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2>Что такое HTML</h2>
|
||||
<p>HTML описывает структуру веб-страницы.</p>
|
||||
</article>
|
||||
|
||||
<aside>
|
||||
<h2>Похожие материалы</h2>
|
||||
<a href="/css/">Основы CSS</a>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>2026</p>
|
||||
</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
Неправильно заменять всё на `<div>`, если есть более точный тег. `<div>` нужен как нейтральный контейнер, когда у блока нет отдельного смыслового значения.
|
||||
|
||||
### Текст и форматирование
|
||||
- **Заголовки:** `<h1>`...`<h6>`.
|
||||
@@ -110,10 +186,90 @@ HTML5 вводит семантические теги для улучшения
|
||||
```
|
||||
|
||||
### Элементы управления:
|
||||
- `<input>`: `type="text"`, `password`, `email`, `number`, `checkbox`, `radio`, `file`, `date`, `hidden`.
|
||||
- `<select>` + `<option>`: выпадающий список.
|
||||
- `<textarea>`: многострочный ввод текста.
|
||||
- `<fieldset>` + `<legend>`: группировка связанных полей.
|
||||
- `<input>` — универсальное поле ввода. Поведение зависит от `type`.
|
||||
- `<select>` + `<option>` — выпадающий список.
|
||||
- `<textarea>` — многострочное поле для текста.
|
||||
- `<button>` — кнопка отправки, сброса или обычного действия.
|
||||
- `<fieldset>` + `<legend>` — группировка связанных полей с заголовком группы.
|
||||
|
||||
Основные `type` для `<input>`:
|
||||
- `text` — обычная строка.
|
||||
- `password` — поле пароля, символы скрываются.
|
||||
- `email` — email; браузер проверяет базовый формат адреса.
|
||||
- `number` — числовой ввод.
|
||||
- `checkbox` — независимый флажок: можно выбрать несколько вариантов.
|
||||
- `radio` — выбор одного варианта из группы с одинаковым `name`.
|
||||
- `file` — загрузка файла.
|
||||
- `date` — выбор даты.
|
||||
- `hidden` — скрытое поле, не видно пользователю, но отправляется с формой.
|
||||
|
||||
```html
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
|
||||
<label for="age">Возраст:</label>
|
||||
<input type="number" id="age" name="age" min="18" max="99">
|
||||
|
||||
<label>
|
||||
<input type="checkbox" name="agreement" required>
|
||||
Согласен с условиями
|
||||
</label>
|
||||
|
||||
<fieldset>
|
||||
<legend>Способ связи</legend>
|
||||
|
||||
<label>
|
||||
<input type="radio" name="contact_method" value="email">
|
||||
Email
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="radio" name="contact_method" value="phone">
|
||||
Телефон
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<label for="city">Город:</label>
|
||||
<select id="city" name="city">
|
||||
<option value="moscow">Москва</option>
|
||||
<option value="spb">Санкт-Петербург</option>
|
||||
</select>
|
||||
|
||||
<label for="comment">Комментарий:</label>
|
||||
<textarea id="comment" name="comment" rows="5"></textarea>
|
||||
```
|
||||
|
||||
### Атрибуты валидации:
|
||||
- `required`, `minlength`, `maxlength`, `min`, `max`, `pattern` (регулярные выражения).
|
||||
- `required` — поле обязательно для заполнения.
|
||||
- `minlength` — минимальная длина текста.
|
||||
- `maxlength` — максимальная длина текста.
|
||||
- `min` — минимальное значение для числа или даты.
|
||||
- `max` — максимальное значение для числа или даты.
|
||||
- `pattern` — регулярное выражение, которому должно соответствовать значение.
|
||||
- `type="email"` — проверяет, что введён текст, похожий на email.
|
||||
- `type="url"` — проверяет, что введён URL.
|
||||
|
||||
HTML-валидация работает в браузере до отправки формы. Она удобна для пользователя, но не заменяет проверку на сервере: данные можно отправить в обход браузера.
|
||||
|
||||
```html
|
||||
<form action="/register/" method="post">
|
||||
<label for="username">Логин:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
minlength="3"
|
||||
maxlength="20"
|
||||
pattern="[a-zA-Z0-9_]+"
|
||||
>
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
|
||||
<label for="age">Возраст:</label>
|
||||
<input type="number" id="age" name="age" min="18" max="99">
|
||||
|
||||
<button type="submit">Зарегистрироваться</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user