Справочник по IT

Русский

Українська
English

Русский

Українська
English

Appearance

Основы HTML5 ​

HTML5 — это пятая и текущая основная версия стандарта HTML. Он включает в себя не только новые элементы и атрибуты, отражающие современное использование веба, но и мощные API для создания более интерактивных и функциональных веб-приложений.

Ключевые особенности HTML5 ​

  • Новые семантические элементы: HTML5 ввел множество новых элементов, которые описывают структуру и смысл контента на странице. Это улучшает семантику, доступность и SEO. Примеры: <article>, <aside>, <nav>, <header>, <footer>, <section>.
  • Улучшенная поддержка мультимедиа: Встроены элементы <audio> и <video> для воспроизведения аудио и видео без использования сторонних плагинов (например, Flash).
  • Элемент <canvas> для 2D-графики: Предоставляет API для рисования графики, анимации, игр и визуализации данных с помощью JavaScript.
  • Элемент <svg> для векторной графики: Поддержка масштабируемой векторной графики (Scalable Vector Graphics) напрямую в HTML.
  • Новые типы полей форм: Добавлены новые типы полей для форм, такие как email, url, number, range, date, color, что упрощает валидацию и улучшает пользовательский опыт.
  • Атрибуты данных (data-*): Позволяют хранить произвольные данные, специфичные для элемента, непосредственно в HTML.
  • Веб-хранилище (Web Storage): API для хранения данных на стороне клиента (localStorage и sessionStorage), что позволяет создавать более отзывчивые веб-приложения.
  • Геолокация (Geolocation): API для получения географического положения пользователя (с его разрешения).
  • Веб-сокеты (WebSockets): Протокол, обеспечивающий полнодуплексную связь между браузером и сервером в режиме реального времени.
  • Перетаскивание (Drag and Drop): API для реализации функциональности перетаскивания элементов на веб-странице.
  • Веб-воркеры (Web Workers): API для запуска JavaScript-кода в фоновых потоках, не блокируя основной поток браузера, что улучшает производительность.
  • Улучшенная поддержка доступности (Accessibility): Новые семантические элементы и атрибуты помогают сделать веб-контент более доступным для людей с ограниченными возможностями.

Основные семантические элементы HTML5 ​

Семантические элементы четко описывают роль контента, который они содержат. Это делает HTML более понятным для разработчиков, браузеров и поисковых систем.

  • <article>: Представляет собой самостоятельный фрагмент контента (например, сообщение в блоге, статья, новость).
  • <aside>: Содержит контент, который связан с основным контентом, но не является его частью (например, боковая панель, рекламный блок).
  • <nav>: Предназначен для навигационных элементов (меню, ссылки).
  • <header>: Представляет вводный контент для раздела или всей страницы (обычно содержит заголовок, логотип, навигацию).
  • <footer>: Представляет подвал раздела или всей страницы (обычно содержит информацию об авторских правах, контактные данные, ссылки).
  • <section>: Группирует тематически связанный контент.
  • <main>: Представляет основной контент документа, который является уникальным и не повторяется на других страницах сайта.

Пример структуры страницы с использованием семантических элементов:

html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя HTML5 страница</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Название сайта</h1>
        <nav>
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Услуги</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Заголовок статьи</h2>
            <p>Содержание статьи...</p>
            <aside>
                <p>Дополнительная информация, связанная со статьей.</p>
            </aside>
        </article>

        <section>
            <h2>Другой раздел</h2>
            <p>Содержание другого раздела...</p>
        </section>
    </main>

    <aside>
        <h3>Реклама</h3>
        <p>Рекламный блок.</p>
    </aside>

    <footer>
        <p>&copy; 2023 Мой сайт</p>
        <nav>
            <ul>
                <li><a href="#">Политика конфиденциальности</a></li>
                <li><a href="#">Условия использования</a></li>
            </ul>
        </nav>
    </footer>

    <script src="script.js"></script>
</body>
</html>

Элементы мультимедиа ​

HTML5 значительно упростил работу с аудио и видео.

  • <audio>: Используется для встраивания аудиоконтента.

    html
    <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Ваш браузер не поддерживает элемент audio.
</audio>

  • <video>: Используется для встраивания видеоконтента.

    html
    <video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Ваш браузер не поддерживает элемент video.
</video>

Атрибут controls добавляет стандартные элементы управления воспроизведением (кнопки "play", "pause", "громкость" и т.д.). Элемент <source> позволяет указать несколько форматов файла для обеспечения совместимости с разными браузерами.

Графика: <canvas> и <svg> ​

  • <canvas>: Предоставляет холст для рисования 2D-графики с помощью JavaScript.

    html
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(20, 20, 150, 60);
</script>

  • <svg>: Позволяет встраивать векторную графику, которая масштабируется без потери качества.

    html
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Новые типы полей форм ​

HTML5 добавил множество новых типов полей для форм, которые обеспечивают встроенную валидацию и улучшенный пользовательский интерфейс.

html
<form action="/submit" method="post">
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div>
        <label for="url">URL:</label>
        <input type="url" id="url" name="url">
    </div>
    <div>
        <label for="number">Число:</label>
        <input type="number" id="number" name="number" min="0" max="10">
    </div>
    <div>
        <label for="range">Диапазон:</label>
        <input type="range" id="range" name="range" min="0" max="100" value="50">
    </div>
    <div>
        <label for="date">Дата:</label>
        <input type
html
="date" id="date" name="date">
    </div>
    <div>
        <label for="color">Цвет:</label>
        <input type="color" id="color" name="color" value="#ff0000">
    </div>
    <button type="submit">Отправить</button>
</form>

Атрибут required делает поле обязательным для заполнения. Браузер автоматически проверяет формат для таких типов, как email и url.

Атрибуты данных (data-*) ​

Атрибуты data-* позволяют хранить произвольную информацию, связанную с HTML-элементом. Эти данные могут быть использованы JavaScript для динамического взаимодействия с элементами.

html
<div class="product" data-product-id="12345" data-price="29.99">
    <h3>Название товара</h3>
    <p>Описание товара...</p>
    <button onclick="addToCart(this)">Добавить в корзину</button>
</div>

<script>
    function addToCart(button) {
        const productDiv = button.parentNode;
        const productId = productDiv.dataset.productId;
        const price = productDiv.dataset.price;
        console.log(`Добавлен в корзину товар с ID: ${productId} по цене: ${price}`);
        // Здесь может быть код для добавления товара в корзину
    }
</script>

Доступ к атрибутам данных осуществляется через свойство dataset элемента в JavaScript. Имена атрибутов преобразуются из kebab-case (например, data-product-id) в camelCase (например, dataset.productId).

Веб-хранилище (Web Storage) ​

HTML5 предоставляет два механизма для хранения данных на стороне клиента:

Отображенный скриншот является частью окна "Службы" операционной системы Windows. Выбранная служба - "Служба проверки сети антивирусной программы Microsoft Defender".

Вкладка "Общие" показывает следующую информацию об этой службе:

  • Имя: Служба проверки сети антивирусной программы Microsoft Defender
  • Имя службы: WdNisSvc
  • Описание: Позволяет защититься от попыток вторжения, нацеленных на известные и вновь обнаруженные уязвимости в сетевых протоколах.
  • Исполняемый файл: "C:\Program Files\Windows Defender\NisSrv.exe"
  • Тип запуска: Отключена
  • Состояние: Остановлена

Также доступны кнопки "Запустить", "Остановить", "Приостановить", "Продолжить". В разделе "Параметры запуска" указано, что можно настроить параметры запуска службы из этого диалогового окна.

Внизу окна расположены кнопки "OK", "Отмена" и "Применить". Вкладки "Вход в систему", "Восстановление" и "Зависимости" неактивны на этом скриншоте.

Общая информация указывает на то, что эта служба Microsoft Defender отвечает за обнаружение и предотвращение сетевых атак на уровне протоколов, и в данный момент она отключена на локальном компьютере в Черкассах, Черкасской области, Украина.

html
        <input type="date" id="date" name="date">
    </div>
    <div>
        <label for="color">Цвет:</label>
        <input type="color" id="color" name="color" value="#ff0000">
    </div>
    <button type="submit">Отправить</button>
</form>

<h2>Веб-хранилище</h2>
<button onclick="saveData()">Сохранить данные</button>
<button onclick="loadData()">Загрузить данные</button>
<div id="output"></div>

<script>
    function saveData() {
        localStorage.setItem('username', 'John Doe');
        sessionStorage.setItem('sessionToken', 'abcdef12345');
        document.getElementById('output').innerText = 'Данные сохранены.';
    }

    function loadData() {
        const username = localStorage.getItem('username');
        const token = sessionStorage.getItem('sessionToken');
        document.getElementById('output').innerText = `Имя пользователя: ${username}, Токен сессии: ${token}`;
    }
</script>
  • localStorage: Позволяет хранить данные постоянно (они сохраняются после закрытия браузера). Данные доступны для всех окон и вкладок с того же домена.
  • sessionStorage: Позволяет хранить данные только на время текущей сессии (пока открыта вкладка браузера). Данные удаляются после закрытия вкладки.

Оба API предоставляют методы setItem(key, value), getItem(key), removeItem(key) и clear().

Другие важные API HTML5 ​

HTML5 включает множество других мощных API, которые позволяют создавать интерактивные и функциональные веб-приложения:

  • Геолокация API (navigator.geolocation): Получение местоположения пользователя (требует разрешения).
  • Веб-сокеты API (WebSocket): Установка двустороннего соединения для обмена данными в реальном времени.
  • Drag and Drop API: Реализация перетаскивания элементов.
  • Веб-воркеры API (Worker): Запуск фоновых скриптов.
  • History API (window.history): Управление историей браузера без перезагрузки страницы (используется в SPA).
  • Fetch API: Современный интерфейс для выполнения HTTP-запросов.

Заключение ​

HTML5 — это значительный шаг вперед в развитии веб-технологий. Новые семантические элементы улучшают структуру и доступность контента, элементы мультимедиа и графики позволяют создавать более насыщенный визуальный опыт, а мощные API открывают двери для разработки интерактивных и функциональных веб-приложений прямо на стороне клиента. Понимание и использование возможностей HTML5 является ключевым навыком для современного веб-разработчика.