Dmitry
112 lines
4.0 KiB
Markdown
112 lines
4.0 KiB
Markdown
---
|
|
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` (регулярные выражения).
|