23 подписчика

HTML основные команды.

15 февраля15 фев

4 мин

Оглавление

1. Структура HTML5 документа:
2. Новые семантические теги:
3. Новые элементы форм:

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

1. Структура HTML5 документа:

Базовый HTML5 документ выглядит следующим образом:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Заголовок страницы</title>

<link rel="stylesheet" href="style.css"> 

</head>

<body>

<h1>Заголовок первого уровня</h1>

<p>Это абзац текста.</p>

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

</body>

</html>

<!DOCTYPE html>: Этот тег сообщает браузеру, что это HTML5 документ. Он должен быть в самом начале.

<html lang="ru">: Корневой элемент HTML. Атрибут lang указывает язык страницы (в данном случае, русский).
<head>: Содержит метаданные о странице, которые не отображаются на самой странице.
<meta charset="UTF-8">: Указывает кодировку символов, обычно UTF-8 для поддержки всех символов.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Важный тег для адаптивного дизайна. Он говорит браузеру установить ширину страницы равной ширине устройства и задать начальный масштаб 1.0.
<title>Заголовок страницы</title>: Заголовок страницы, который отображается в заголовке вкладки браузера.
<link rel="stylesheet" href="style.css">: Подключает внешний файл стилей CSS для оформления страницы.
<body>: Содержит видимый контент страницы: текст, изображения, видео, ссылки, и т.д.
<h1> - <h6>: Заголовки различных уровней. <h1> - самый важный, <h6> - наименее важный.
<p>: Абзац текста.
<script src="script.js"></script>: Подключает внешний файл JavaScript для добавления интерактивности.

2. Новые семантические теги:

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

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

Пример использования семантических тегов:

<body>

<header>

<nav>

<ul>

<li><a href="#">Главная</a></li>

<li><a href="#">Контакты</a></li>

</ul>

</nav>

</header>

<main>

<article>

<h2>Заголовок статьи</h2>

<p>Текст статьи...</p>

</article>

</main>

<aside>

<h3>Реклама</h3>

<p>Купите наш товар!</p>

</aside>

<footer>

</footer>

</body>

3. Новые элементы форм:

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

<input type="email">: Поле для ввода email-адреса. Автоматически проверяет, является ли введенный текст валидным email-адресом.
<input type="url">: Поле для ввода URL-адреса. Автоматически проверяет, является ли введенный текст валидным URL.
<input type="number">: Поле для ввода числа. Можно задать минимальное и максимальное значения, а также шаг изменения значения.
<input type="range">: Ползунок для выбора значения из диапазона.
<input type="date">: Поле для выбора даты.
<input type="time">: Поле для выбора времени.
<input type="color">: Поле для выбора цвета.
<input type="search">: Поле для поиска отображается как обычное текстовое поле, но может иметь стилизацию для поиска).

4. Мультимедийные элементы:

HTML5 упрощает встраивание аудио и видео на веб-страницы с помощью новых элементов.

<audio>: Для встраивания аудио.
<video>: Для встраивания видео.

Пример использования <video>:

<video width="640" height="360" controls>

<source src="video.mp4" type="video/mp4">

<source src="video.webm" type="video/webm">

Ваш браузер не поддерживает видео.

</video>

Атрибут controls добавляет элементы управления воспроизведением (кнопки Play, Pause, Volume и т.д.). Внутри тега <video> можно указать несколько источников видео в разных форматах, чтобы браузер выбрал поддерживаемый формат.

5. Canvas и SVG:

HTML5 предоставляет мощные инструменты для создания графики на веб-страницах.

<canvas>: Элемент для рисования растровой графики с помощью JavaScript.
<svg>: Для создания векторной графики.

6. API геолокации:

HTML5 позволяет определить местоположение пользователя с помощью JavaScript.

7. Web Storage (Local Storage и Session Storage):

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

Local Storage: Данные хранятся постоянно, даже после закрытия браузера.
Session Storage: Данные хранятся только во время сессии (пока открыта вкладка браузера).

8. Преимущества HTML5:

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

Ресурсы для изучения HTML5:

MDN Web: Отличная документация от Mozilla.
HTMLBook: - Хороший русскоязычный справочник по HTML.
FreeCodeCamp: - Интерактивные уроки по веб-разработке.