| |
| software:development:demo:cms:ucms:sample_html5_page [2026/02/08 11:15] – создано VladPolskiy | software:development:demo:cms:ucms:sample_html5_page [2026/02/08 11:28] (текущий) – VladPolskiy |
|---|
| * [[software:development:demo:cms:ucms:sample_php_page_and_dinamic_page|4.2 Шаблон PHP и динамические страницы]] | * [[software:development:demo:cms:ucms:sample_php_page_and_dinamic_page|4.2 Шаблон PHP и динамические страницы]] |
| ===== Введение ===== | ===== Введение ===== |
| | HTML5 — это современный стандарт разметки веб-страниц, обеспечивающий встроенную поддержку мультимедиа (видео, аудио), семантическую структуру, улучшенные формы, работу в офлайн-режиме, графику (Canvas, SVG) и использование API для взаимодействия с аппаратными средствами (геолокация, камера) без сторонних плагинов, что повышает производительность и удобство для пользователей. |
| | \\ |
| | Основные возможности HTML5: |
| | * Мультимедиа без плагинов: Теги **%%<audio>%%** и **%%<video>%%** позволяют легко встраивать аудио- и видеоконтент, заменяя устаревшие технологии вроде Flash. |
| | * Семантическая разметка: Новые теги (**%%<article>, <section>, <nav>, <header>, <footer>, <aside>%%**) улучшают структуру документа, облегчая понимание кода разработчиками и поисковыми системами. |
| | * Графика и 3D: Элемент **%%<canvas>%%** позволяет рисовать графику, создавать анимации и 2D/3D игры с помощью JavaScript, а также поддерживается встроенный формат векторной графики SVG. |
| | * Геолокация и API: API геолокации определяет местоположение пользователя, а другие API поддерживают перетаскивание элементов (**%%Drag-and-Drop%%**) и работу с камерой. |
| | * Локальное хранилище данных: localStorage и sessionStorage позволяют хранить данные на устройстве пользователя, что быстрее и надежнее, чем файлы cookie. |
| | * Улучшенные формы: Новые типы полей ввода (**%%<input type="date">, number, email, range и др.%%**) упрощают валидацию данных. |
| | * Офлайн-приложения: Механизм кэширования позволяет веб-приложениям работать без подключения к интернету. |
| | * Web Workers и Sockets: Web Workers позволяют выполнять JavaScript в фоновом режиме, не тормозя интерфейс, а Web Sockets обеспечивают постоянное соединение с сервером для передачи данных в реальном времени. |
| | Эти возможности делают HTML5 мощной платформой для создания кроссплатформенных приложений, адаптированных как для десктопов, так и для мобильных устройств. |
| |
| | |
| | |
| | |
| | |
| | |
| | ===== Пример кода разметки HTML5 ===== |
| Простой, понятный пример HTML5-документа: | Простой, понятный пример HTML5-документа: |
| <code html HTML5> | <code html HTML5> |
| </html> | </html> |
| </code> | </code> |
| | Основные возможности HTML5 в примере: |
| | * **%%<!DOCTYPE html>%%**: Простое и обязательное объявление типа документа для HTML5. |
| | * **%%<meta charset="utf-8">%%**: Указывает кодировку символов, обеспечивая корректное отображение текста в браузере. |
| | * **%%<meta name="viewport" ...>%%**Обеспечивает корректное отображение и масштабирование касанием на мобильных устройствах. |
| | * Семантические элементы : Использует осмысленные теги, такие как **%%<header>, <nav>, <main>, <article>, <section>, и , <footer>%%**которые улучшают структуру документа и доступность. |
| <note shadow>{{:software:development:demo:cms:ucms:sample_html5_page_5.png|переход страниц}}</note> | <note shadow>{{:software:development:demo:cms:ucms:sample_html5_page_5.png|переход страниц}}</note> |
| |
