Основные HTML-теги

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
</head>
<body>
    Содержание страницы
</body>
</html>

Это базовая структура HTML-документа. <!DOCTYPE html> объявляет тип документа, <html> - корневой элемент, <head> содержит метаинформацию, <body> - видимое содержимое.

Заголовки

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>

Текст

Это обычный абзац текста. Тег <p> используется для текстовых абзацев.

Это жирный текст (strong). <strong> указывает на важность текста.

Это курсивный текст (em). <em> делает акцент на тексте.

Подчеркнутый текст (u). <u> - устаревший тег, лучше использовать CSS.

~~Зачеркнутый текст (s).~~ <s> показывает, что текст больше не актуален.

Маленький текст (small). <small> уменьшает размер шрифта.

Верхний ^{регистр} и нижний _{регистр}. Теги <sup> и <sub>.

Выделенный текст (mark). <mark> выделяет текст как маркером.

Моноширинный текст (code). <code> для фрагментов кода.

Предформатированный текст (pre).
Сохраняет все пробелы
и переносы строк.

<pre> сохраняет форматирование текста как есть.

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

Это внутренняя ссылка (переход к разделу HTML). Тег <a href="URL">.

Это внешняя ссылка (откроется в новой вкладке). Атрибут target="_blank".

Тег <img src="URL" alt="текст"> для вставки изображений. Атрибут alt обязателен для доступности.

Списки

Нумерованный список (ol):

Первый пункт
Второй пункт
Третий пункт

<ol>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ol>

Маркированный список (ul):

Красный
Зеленый
Синий

<ul>
    <li>Красный</li>
    <li>Зеленый</li>
    <li>Синий</li>
</ul>

Список определений (dl):

HTML: Язык гипертекстовой разметки
CSS: Каскадные таблицы стилей

<dl>
    <dt>HTML</dt>
    <dd>Язык гипертекстовой разметки</dd>
    <dt>CSS</dt>
    <dd>Каскадные таблицы стилей</dd>
</dl>

Таблицы

Тег	Описание
table	Определяет таблицу
tr	Определяет строку таблицы
th	Определяет заголовок столбца
td	Определяет ячейку таблицы

<table>
    <thead>
        <tr>
            <th>Тег</th>
            <th>Описание</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>table</td>
            <td>Определяет таблицу</td>
        </tr>
        <tr>
            <td>tr</td>
            <td>Определяет строку таблицы</td>
        </tr>
    </tbody>
</table>

Формы

Имя:

Email:

Пароль:

Сообщение:

Пол:

Интересы: Спорт Музыка Книги

Возраст: До 20 20-40 Старше 40

<form action="#" method="post">
    <div>
        <label for="name">Имя:</label>
        <input type="text" id="name" name="name" placeholder="Введите ваше имя">
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Введите ваш email">
    </div>
    <button type="submit">Отправить</button>
</form>

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

Семантические теги придают смысл структуре страницы:

<header> - шапка сайта или раздела
<footer> - подвал сайта или раздела
<nav> - навигационное меню
<main> - основное содержимое страницы
<article> - самостоятельный раздел контента
<section> - тематическая группа контента
<aside> - дополнительный, косвенный контент

Основные CSS-свойства

Текст и шрифты

Этот блок демонстрирует различные CSS-свойства для работы с текстом.

.text-example {
    font-family: 'Arial', sans-serif; /* Шрифт */
    font-size: 16px; /* Размер шрифта */
    font-weight: bold; /* Жирность (normal, bold, 100-900) */
    font-style: italic; /* Стиль (normal, italic) */
    text-align: center; /* Выравнивание (left, right, center, justify) */
    text-decoration: underline; /* Оформление (none, underline, overline, line-through) */
    text-transform: uppercase; /* Преобразование (none, uppercase, lowercase, capitalize) */
    line-height: 1.5; /* Межстрочный интервал */
    letter-spacing: 1px; /* Расстояние между буквами */
    word-spacing: 5px; /* Расстояние между словами */
    color: #0066cc; /* Цвет текста */
    background-color: #f0f8ff; /* Цвет фона */
}

Box Model (Блочная модель)

Это демонстрация блочной модели CSS. Блок имеет ширину 300px, высоту 150px, padding 20px, border 5px и margin 25px.

.box-example {
    width: 300px; /* Ширина */
    height: 150px; /* Высота */
    padding: 20px; /* Внутренние отступы */
    border: 5px solid #ff6b6b; /* Граница */
    margin: 25px; /* Внешние отступы */
    background-color: #ffecec; /* Цвет фона */
    overflow: auto; /* Поведение при переполнении (visible, hidden, scroll, auto) */
}

Позиционирование

Относительное позиционирование (relative)

Абсолютное позиционирование (absolute)

Фиксированное позиционирование (fixed)

.relative {
    position: relative; /* Относительное позиционирование */
    height: 200px;
}

.absolute {
    position: absolute; /* Абсолютное позиционирование */
    top: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
}

.fixed {
    position: fixed; /* Фиксированное позиционирование */
    bottom: 20px;
    right: 20px;
}

Flexbox

.flex-container {
    display: flex; /* Активирует flexbox */
    justify-content: space-around; /* Выравнивание по главной оси */
    align-items: center; /* Выравнивание по поперечной оси */
    flex-wrap: wrap; /* Перенос элементов */
}

.flex-item {
    width: 100px;
    height: 100px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

Grid

.grid-container {
    display: grid; /* Активирует grid */
    grid-template-columns: repeat(3, 1fr); /* 3 колонки равной ширины */
    grid-gap: 10px; /* Расстояние между элементами */
}

.grid-item {
    padding: 20px;
    text-align: center;
}

Трансформации и переходы

Наведи курсор

.transform-example {
    width: 100px;
    height: 100px;
    background-color: #9b59b6;
    transition: all 0.3s ease; /* Плавный переход */
    transform: rotate(0deg); /* Начальное состояние */
}

.transform-example:hover {
    transform: rotate(45deg); /* Поворот при наведении */
    background-color: #3498db; /* Смена цвета */
}

Анимации

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.animation-example {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    animation: pulse 2s infinite;
}

Медиазапросы (Адаптивный дизайн)

@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    .flex-container {
        flex-direction: column;
    }
    .grid-container {
        grid-template-columns: 1fr;
    }
}

Медиазапросы позволяют применять стили в зависимости от характеристик устройства (ширина экрана, ориентация и т.д.).