` означает главный контент страницы, `

` — навигацию, `

` — самостоятельный материал. Это помогает браузеру, поисковым системам, скринридерам и другим инструментам лучше понимать структуру страницы. - `

` — верхняя часть страницы или секции: логотип, заголовок, навигация. - `

` — блок навигационных ссылок. - `

` — основной контент страницы; обычно один на страницу. - `

` — смысловой раздел страницы. - `

` — самостоятельный материал: статья, пост, карточка новости. - `

` — дополнительный контент: боковая панель, подсказки, связанные ссылки. - `

` — нижняя часть страницы или секции. ```html

Блог

Что такое HTML

HTML описывает структуру веб-страницы.

``` Неправильно заменять всё на `

`, если есть более точный тег. `

` нужен как нейтральный контейнер, когда у блока нет отдельного смыслового значения. ### Текст и форматирование - **Заголовки:** `

`...`

`. - Абзацы и переносы: `
`, `
`. - Логическое выделение: `` (важное, жирный), `` (акцент, курсив), `` (код). - Контейнеры: `
` (блочный), `` (строчный). ### Списки - Маркированный: `` + ``. - Нумерованный: `` + ``. ### Ссылки и изображения - Ссылка: `Текст`. - Изображение: ``. --- ## Таблицы Используются для отображения структурированных данных. Не рекомендуются для верстки макета. Структура таблицы: ```html Заголовок таблицы Заголовок столбца 1 Заголовок столбца 2 Данные 1 Данные 2 Итог 1 Итог 2 ``` - Объединение ячеек: `colspan` (по горизонтали), `rowspan` (по вертикали). Границы таблицы задаются с помощью свойств `border` и `border-collapse`: ```css /* внешние границы таблицы серого цвета толщиной 1px / table { border: 1px solid gray; border-collapse: collapse; width: 600px; } / границы ячеек тела таблицы */ td { border: 1px solid grey; } ``` --- ## Формы Инструмент для сбора данных пользователя. Базовая форма: ```html Имя: ``` ### Элементы управления - `` — универсальное поле ввода. Поведение зависит от `type`. - `` — многострочное поле для текста. - `<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"> ``` ### Атрибуты валидации - `required` — поле обязательно для заполнения. - `minlength` — минимальная длина текста. - `maxlength` — максимальная длина текста. - `min` — минимальное значение для числа или даты. - `max` — максимальное значение для числа или даты. - `pattern` — регулярное выражение, которому должно соответствовать значение. - `type="email"` — проверяет, что введён текст, похожий на email. - `type="url"` — проверяет, что введён URL. HTML-валидация работает в браузере до отправки формы. Она удобна для пользователя, но не заменяет проверку на сервере: данные можно отправить в обход браузера. ```html Логин: Email: Возраст: ``` ## Простыми словами для экзамена ### Документ и `head` `` хранит служебную информацию, а не видимый контент. Там обычно находятся: - ``; - ``; - ``; - `<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"` — сбрасывает форму.