vault backup: 2026-05-31 10:28:49
This commit is contained in:
Dmitry
Vendored
+10
-9
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
status: seed
|
status: processing
|
||||||
type: concept
|
type: concept
|
||||||
tags:
|
tags:
|
||||||
- html
|
- html
|
||||||
@@ -9,6 +9,7 @@ tags:
|
|||||||
- forms
|
- forms
|
||||||
created: 2026-05-30
|
created: 2026-05-30
|
||||||
updated: 2026-05-30
|
updated: 2026-05-30
|
||||||
|
title: "Основы HTML (структура, таблицы, формы)"
|
||||||
source:
|
source:
|
||||||
- '[[10-html_основы_НП.pdf]]'
|
- '[[10-html_основы_НП.pdf]]'
|
||||||
- '[[13-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>`.
|
- **Заголовки:** `<h1>`...`<h6>`.
|
||||||
@@ -110,10 +186,90 @@ HTML5 вводит семантические теги для улучшения
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Элементы управления:
|
### Элементы управления:
|
||||||
- `<input>`: `type="text"`, `password`, `email`, `number`, `checkbox`, `radio`, `file`, `date`, `hidden`.
|
- `<input>` — универсальное поле ввода. Поведение зависит от `type`.
|
||||||
- `<select>` + `<option>`: выпадающий список.
|
- `<select>` + `<option>` — выпадающий список.
|
||||||
- `<textarea>`: многострочный ввод текста.
|
- `<textarea>` — многострочное поле для текста.
|
||||||
- `<fieldset>` + `<legend>`: группировка связанных полей.
|
- `<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>
|
||||||
|
```
|
||||||
|
|||||||
+1
-1
@@ -555,7 +555,7 @@ total: 467
|
|||||||
| [[CSS: Адаптивность, Flexbox и Grid]] | CSS: Адаптивность, Flexbox и Grid | seed | concept | [css, flexbox, grid, adaptive-design, responsive-web] |
|
| [[CSS: Адаптивность, Flexbox и Grid]] | CSS: Адаптивность, Flexbox и Grid | seed | concept | [css, flexbox, grid, adaptive-design, responsive-web] |
|
||||||
| [[CSS: Основы, селекторы и блочная модель]] | CSS: Основы и селекторы | seed | concept | [css, web-development, selectors, box-model] |
|
| [[CSS: Основы, селекторы и блочная модель]] | CSS: Основы и селекторы | seed | concept | [css, web-development, selectors, box-model] |
|
||||||
| [[Основы Bootstrap]] | Основы Bootstrap | seed | concept | [bootstrap, web-development, css-framework, grid-system] |
|
| [[Основы Bootstrap]] | Основы Bootstrap | seed | concept | [bootstrap, web-development, css-framework, grid-system] |
|
||||||
| [[Основы HTML (структура, таблицы, формы)]] | Основы HTML (структура, таблицы, формы) | seed | concept | [html, web-development, structure, tables, forms] |
|
| [[Основы HTML (структура, таблицы, формы)]] | Основы HTML (структура, таблицы, формы) | processing | concept | [html, web-development, structure, tables, forms] |
|
||||||
| [[Основы веб-разработки]] | Основы веб-разработки | seed | moc | [web, html, css, bootstrap] |
|
| [[Основы веб-разработки]] | Основы веб-разработки | seed | moc | [web, html, css, bootstrap] |
|
||||||
|
|
||||||
## 90 Library/Sport
|
## 90 Library/Sport
|
||||||
|
|||||||
Reference in New Issue
Block a user