Атрибуты HTML
Разберитесь, как добавлять дополнительные сведения об элементах с помощью атрибутов
«Атрибуты HTML» — бесплатный урок HTML for Kids на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.
Мультимедиа: добавление видео и аудио
Добро пожаловать в следующий урок! Сегодня мы узнаем, как добавлять видео и аудио на веб-страницы. Мультимедиа делает страницы более интерактивными и увлекательными!
Зачем добавлять мультимедиа?
Видео и аудио могут сделать ваши веб-страницы:
- более увлекательными;
- информативными и интересными;
- интерактивными.
Давайте узнаем, как добавлять их с помощью HTML!
Добавление видео
Видео добавляется с помощью тега <video>. Файл видео можно указать с помощью атрибута src.
Пример:
В этом примере:
src: указывает файл видео.controls: добавляет элементы управления воспроизведением, паузой и громкостью.width: задаёт ширину видео.
<video src="example.mp4" controls width="400"></video>
Добавление видео в разных форматах
Не все браузеры поддерживают одни и те же форматы видео. Вы можете добавить несколько источников с помощью тега <source>.
Пример:
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Добавление аудио
Аудио добавляется с помощью тега <audio>. Файл аудио можно указать с помощью атрибута src.
В этом примере:
src: указывает файл аудио.controls: добавляет элементы управления воспроизведением, паузой и громкостью.
<audio src="example.mp3" controls></audio>
Добавление аудио в разных форматах
Как и для видео, можно добавить несколько источников аудио для лучшей совместимости с браузерами.
Пример:
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
Автовоспроизведение и зацикливание
Вы можете включить автоматическое воспроизведение или зацикливание видео и аудио, добавив атрибуты autoplay и loop.
Пример:
Примечание: в некоторых браузерах автоматическое воспроизведение может быть отключено для удобства пользователей.
<audio src="example.mp3" autoplay loop></audio>
Встраивание видео YouTube
Вы можете встроить видео YouTube на страницу с помощью тега <iframe>.
Пример:
Замените example уникальным ID видео.
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
Отличная работа!
Поздравляем! Вы научились добавлять видео и аудио и даже встраивать ролики YouTube на веб-страницы. Мультимедиа делает содержимое более динамичным и увлекательным. В следующем уроке мы подробно разберём стилизацию с помощью CSS, чтобы ваши веб-страницы выглядели превосходно. Приготовьтесь исследовать мир дизайна!
Часто задаваемые вопросы
Урок «Атрибуты HTML» бесплатный?
Да — полный текст урока «Атрибуты HTML» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.
Чему я научусь в уроке «Атрибуты HTML»?
Разберитесь, как добавлять дополнительные сведения об элементах с помощью атрибутов Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Атрибуты HTML»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Таблицы: организуем данные
- Формы: собираем данные от пользователей
- Атрибуты HTML
- Мультимедиа: добавляем видео и аудио