ada/SecondBrain

Fork 0

Files

T

Dmitry 3112cb771b vault backup: 2026-06-07 17:58:07

2026-06-08 23:25:01 +03:00

13 KiB

Raw Blame History

status, type, tags, created, updated, title, source, aliases

status

type

Основы HTML

HTML (Hypertext Markup Language) — язык разметки для структурирования и отображения веб-страниц.

Структура HTML-документа

Базовый шаблон (HTML5):

<!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

Критичен для мобильных устройств. Позволяет контролировать масштаб.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Основные теги и семантика

Тег — элемент разметки, который говорит браузеру, что находится на странице: заголовок, абзац, ссылка, форма, таблица.

Обычно тег состоит из открывающей и закрывающей части:

<p>Текст абзаца</p>

Некоторые теги не имеют закрывающей пары:

<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>.

<p>
  Это абзац с <strong>важным текстом</strong> и
  <a href="/about/">ссылкой</a>.
</p>

Семантические теги

Семантика — это использование тегов по смыслу, а не только ради внешнего вида.

Например, <main> означает главный контент страницы, <nav> — навигацию, <article> — самостоятельный материал. Это помогает браузеру, поисковым системам, скринридерам и другим инструментам лучше понимать структуру страницы.

<header> — верхняя часть страницы или секции: логотип, заголовок, навигация.
<nav> — блок навигационных ссылок.
<main> — основной контент страницы; обычно один на страницу.
<section> — смысловой раздел страницы.
<article> — самостоятельный материал: статья, пост, карточка новости.
<aside> — дополнительный контент: боковая панель, подсказки, связанные ссылки.
<footer> — нижняя часть страницы или секции.

<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">.

Таблицы

Используются для отображения структурированных данных. Не рекомендуются для верстки макета.

Структура таблицы:

<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 (по вертикали).

Границы таблицы задаются с помощью свойств border и border-collapse:

/* внешние границы таблицы серого цвета толщиной 1px */
table {
	border: 1px solid gray;
	border-collapse: collapse;
	width: 600px;
}

/* границы ячеек тела таблицы */
td {
	border: 1px solid grey;
}

Формы

Инструмент для сбора данных пользователя.

Базовая форма:

<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 — скрытое поле, не видно пользователю, но отправляется с формой.

<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-валидация работает в браузере до отправки формы. Она удобна для пользователя, но не заменяет проверку на сервере: данные можно отправить в обход браузера.

<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 нужен серверу: именно под этим именем значение поля уходит в запросе.

<label for="email">Email</label>
<input id="email" name="email" type="email" required>

radio выбирает один вариант из группы с одинаковым name. checkbox подходит для независимых флажков, где можно выбрать несколько вариантов.

У <button> лучше явно указывать type:

type="submit" — отправляет форму;
type="button" — обычная кнопка;
type="reset" — сбрасывает форму.

13 KiB Raw Blame History Unescape Escape

Основы HTML

Структура HTML-документа

Метатег Viewport

Основные теги и семантика

Блочные и строчные элементы

Семантические теги

Текст и форматирование

Списки

Ссылки и изображения

Таблицы

Формы

Элементы управления

Атрибуты валидации

Простыми словами для экзамена

Документ и head

Нормальный поток

Пробелы и переносы

Формы

13 KiB

Raw Blame History

Документ и `head`