vault backup: 2026-05-30 19:03:22

2026-05-30 19:03:22 +03:00
parent a54f2b19c3
commit 7a4f2ced46
16 changed files with 1986 additions and 19 deletions
@@ -0,0 +1,111 @@
+---
+status: seed
+type: concept
+tags: [html, web-development, structure, tables, forms]
+created: 2026-05-30
+updated: 2026-05-30
+title: Основы HTML (структура, таблицы, формы)
+source: ["[[10-html_основы_НП.pdf]]", "[[13-html-таблицы.pdf]]", "[[15-html-формы-1.pdf]]"]
+---
+
+# Основы 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">
+```
+
+## Основные теги и семантика
+HTML5 вводит семантические теги для улучшения понимания структуры поисковиками и программами экранного доступа:
+- `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`.
+
+### Текст и форматирование
+- **Заголовки:** `<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="text"`, `password`, `email`, `number`, `checkbox`, `radio`, `file`, `date`, `hidden`.
+- `<select>` + `<option>`: выпадающий список.
+- `<textarea>`: многострочный ввод текста.
+- `<fieldset>` + `<legend>`: группировка связанных полей.
+
+### Атрибуты валидации:
+- `required`, `minlength`, `maxlength`, `min`, `max`, `pattern` (регулярные выражения).