Dmitry
315 lines
13 KiB
Markdown
315 lines
13 KiB
Markdown
---
|
||
status: processing
|
||
type: concept
|
||
tags:
|
||
- html
|
||
- web-development
|
||
- structure
|
||
- tables
|
||
- forms
|
||
created: 2026-05-30
|
||
updated: 2026-06-05
|
||
title: "Основы HTML (структура, таблицы, формы)"
|
||
source:
|
||
- '[[10-html_основы_НП.pdf]]'
|
||
- '[[13-html-таблицы.pdf]]'
|
||
- '[[15-html-формы-1.pdf]]'
|
||
aliases:
|
||
- Основы HTML (структура, таблицы, формы)
|
||
---
|
||
# Основы 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">
|
||
```
|
||
|
||
## Основные теги и семантика
|
||
**Тег** — элемент разметки, который говорит браузеру, что находится на странице: заголовок, абзац, ссылка, форма, таблица.
|
||
|
||
Обычно тег состоит из открывающей и закрывающей части:
|
||
|
||
```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>`.
|
||
- **Абзацы и переносы:** `<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`.
|
||
- `<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` — регулярное выражение, которому должно соответствовать значение.
|
||
- `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>
|
||
```
|
||
|
||
## Простыми словами для экзамена
|
||
|
||
### Документ и `head`
|
||
|
||
`<head>` хранит служебную информацию, а не видимый контент. Там обычно находятся:
|
||
|
||
- `<meta charset="UTF-8">`;
|
||
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
|
||
- `<title>`;
|
||
- `<link rel="stylesheet" href="...">`;
|
||
- `<script src="..."></script>`.
|
||
|
||
`viewport` особенно важен для мобильных устройств: без него страница может отображаться как уменьшенная десктопная версия.
|
||
|
||
### Нормальный поток
|
||
|
||
Нормальный поток — это стандартный порядок раскладки элементов без `position`, `flex`, `grid` и других специальных режимов. Блочные элементы идут сверху вниз, строчные элементы идут внутри строки слева направо.
|
||
|
||
### Пробелы и переносы
|
||
|
||
В обычном HTML несколько пробелов подряд схлопываются в один. Перенос строки в коде тоже обычно становится пробелом. Для явного переноса используют `<br>`, но абзацы лучше разделять через `<p>`.
|
||
|
||
### Формы
|
||
|
||
`id` нужен для связи с `label` и для уникального обращения к элементу. `name` нужен серверу: именно под этим именем значение поля уходит в запросе.
|
||
|
||
```html
|
||
<label for="email">Email</label>
|
||
<input id="email" name="email" type="email" required>
|
||
```
|
||
|
||
`radio` выбирает один вариант из группы с одинаковым `name`. `checkbox` подходит для независимых флажков, где можно выбрать несколько вариантов.
|
||
|
||
У `<button>` лучше явно указывать `type`:
|
||
|
||
- `type="submit"` — отправляет форму;
|
||
- `type="button"` — обычная кнопка;
|
||
- `type="reset"` — сбрасывает форму.
|