✅ HTML5 Теги - Лучшие 4 тега HTML5 - Элементы ввода с примерами

Введение в теги HTML5
Счастливые часы
Давайте проверим размер этого h1
Давайте проверим размер этого h2
желанный

Введение в теги HTML5

Мы все знаем стандартную аббревиатуру HTML; который является языком разметки гипертекста. Итак, HTML5 является последней и новой версией HTML. Очевидно, что после разработки продукта появится много версий HTML со многими новыми разработками. Итак, HTML5 имеет новые атрибуты и поведение. Этот тег HTML5 больше не является языком программирования, но это язык разметки. Теперь, что такое язык разметки? Определение атрибутов элементов с помощью тегов в документе является языком разметки. Итак, теперь давайте подробно рассмотрим, как мы можем определить теги и создать веб-страницу.

Теги HTML5

Тег - это спецификация для отображения контента. Как правило, будет начальный и конечный тег. И есть также несколько тегов, которые не требуют конечного тега; нравиться
что означает разрыв строки, которая отображает данные рядом с этим тегом со следующей строки. Здесь давайте рассмотрим некоторые новые элементы в HTML5.

В HTML5 мы можем разделить теги на две категории.

Семантические элементы: несколько примеров для этих элементов;, , и т.д.
Несемантические элементы: примеры здесь;, и т.д.

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

1. Структурные метки

Ниже приведены типы структурных тегов с примерами:

а. Статья: Это тег, который в основном используется аналогично заголовку. В основном используется в формах, блогах, новостях и все в качестве примеров.

Код:

Первый

Добро пожаловать назад

Выход:

б. В сторону: что-то похожее на наши обычные теги, которые связывают контент с окружающим контентом, например, боковую панель в статье. И этот тег имеет смысл только при использовании версии IE выше 8.

с. Детали: Этот тег используется для предоставления некоторых дополнительных данных пользователю. Это может быть интерактивная платформа, которая может скрыть или показать детали. Мы можем увидеть использование этой вкладки под итоговым тегом.

д. Заголовок: этот тег связан с частью заголовка и содержит информацию заголовка. Он должен иметь начальный и конечный теги.

Код:

Счастливые часы

Утро | День | Вечер

выход:

е. hgroup: этот тег используется для описания группы заголовков. Давайте посмотрим на примере.

Код:

Давайте проверим размер этого h1

Давайте проверим размер этого h2

Давайте проверим размер этого х3

Давайте проверим размер этого х4

Давайте проверим размер этого х5

Выход:

е. Нижний колонтитул: этот тег должен быть размещен в конце страницы. Он имеет дело с чем-то вроде авторского права, исторической информации или данных. Давайте посмотрим на небольшой пример ниже.

Код:

Авторские права | Возвращайся скорее

Пожалуйста, подпишитесь на дополнительную информацию

Выход:

грамм. nav: Этот тег предназначен для предоставления раздела всех ссылок для навигации.

Код:

EDUCBA Домой
О EDUCBA
Курсы в EDUCBA

Выход:

Проверьте, нажав на ссылки, как только вы напишите свой код во время практики.

час Раздел: Как уже указывает название, этот тег определяет часть кода, такую как тело, заголовок, нижний колонтитул и т. Д. Здесь необходимы как начальный, так и конечный теги. Давайте посмотрим на небольшой пример ниже:

Код:

желанный

До скорого

Спасибо.

Выход:

я. Сводка: этот тег используется параллельно с вкладкой сведений. Под тегом details у нас есть итоговый тег для обобщения концепций. Пример ниже:

Код:

How is this Summary tag defined?

Нажав на стрелку рядом с Сводным вопросом, я получил

Данные после тега отображения отображаются следующим образом.

Выход:

Теперь, расширив сводные данные тега, мы получим следующее.

2. Форма тегов

Вот различные типы тегов формы, объясненных ниже с примерами:

а. Datalist: этот тег используется как раскрывающийся список, в котором есть предопределенные значения, которые пользователь может выбрать. Давайте посмотрим на небольшой пример ниже:

Код:

Введите имя вашего любимого браузера:

Выход:

Раскрывающийся список появляется при наведении курсора мыши.

б. Кейген: это для шифрования. Он предназначен для генерации зашифрованного ключа для передачи данных в зашифрованном формате. Для этого элемента достаточно / требуется только начальный тег, а конечный тег не является обязательным.

с. Метр: этот тег даст нам измерение данных, которые присутствуют в данном диапазоне.

Код:

25 out of 100

Это 25 из 100

70%

Это диапазон на 70%

Выход:

3. Форматирование тегов

Ниже приведены типы тегов форматирования с примерами:

а. BDI: это двунаправленная изоляция. Как видно из названия, этот тег можно использовать для выделения части текста и придания ему разных стилей со стилем другого текста.

б. Отметка: этот тег может помочь нам выделить определенный текст.

Код:

Вот как вы можете пометить или выделить текст.

Выход:

с. Вывод: как видно из названия, он дает результат любого расчета.

Код:

+ =

Выход:

Убедитесь, что вы заметили атрибут формы oninput. После того, как вы введете значение атрибута «x», вывод будет отображен.

д. Прогресс: этот тег дает нам прогресс конкретной задачи.

Код:

Этот индикатор выполнения выполнен на 80%

Выход:

е. Rp: используется, когда теги ruby не поддерживаются.

е. Rt: используется с тегом ruby. В основном это используется в произношении как на японском, так и на китайском языках.

грамм. Ruby: этот тег используется с тегами rt и rp, где произносятся аннотации в отношении двух языков - китайского и японского.

час Wbr: Этот тег предназначен для перерыва на слова. Он в основном используется для проверки того, как слово ломается при изменении размера окна.

4. Теги для встроенного контента

Вот типы тегов встроенного содержимого, объясненные ниже примерами:

а. Аудио. Как следует из названия, этот тег поможет нам включить аудиофайлы в документ HTML.

б. Холст: Определяет место на веб-странице, где графика или фигуры или графики присутствуют или могут быть определены. Вот пример.

Код:

window.onload = function()( var can = document.getElementById("run"); var context = can.getContext("2d"); context.moveTo(30, 60); context.lineTo(150, 30); context.stroke(); );

Выход:

с. Диалог: Этот тег дает нам блок по умолчанию, особенно если мы хотим, чтобы данные были в блоке.

Код:

Попытка диалога здесь Как появляется диалоговое окно?

Выход:

д. Встроить: этот тег можно использовать для добавления любого внешнего файла в файл HTML. У нас может быть только начальный тег, а конечный тег здесь не обязателен. Существуют различные атрибуты, которые могут использоваться с этим тегом, а именно; ширина, высота, размер и тип.

е. Рисунок и Figcaption: Это, как уже в своем названии, может включать изображения и может дать подпись к этому изображению.

е. Источник: этот тег может реализовывать несколько аудио и видео файлов, предоставляя расположение файлов с помощью этого тега источника.

грамм. Время: этот тег, как уже упоминалось в названии, является тегом для отображения времени. И обратите внимание, что этот тег не работает в случаях Internet Explorer версии 8 и ниже.

час Видео: с помощью имени тега мы можем узнать, где этот тег используется. Для указания видеофайлов у нас есть этот тег. Внутри этих аудио / видео тегов мы определяем исходные теги при указании файлов и их расположения.

Элементы ввода тегов HTML5

Вот некоторые элементы ввода, которые мы используем в тегах HTML5:

1. Электронная почта: это один из элементов ввода в HTML5. Этот элемент принимает только адреса электронной почты в качестве входных данных.

2. Число: этот элемент ввода принимает только номер.

3. Диапазон: как уже объясняется в названии, этот тег содержит диапазон чисел.

4. URL: этот тег ввода принимает поле ввода для адреса URL. В этом типе ввода мы можем только ввести URL.

5. Заполнитель: это один из атрибутов для типа ввода в виде текста или текстовой области или любого числа. Это значение заполнителя показывает значение, которое будет задано в качестве ввода.

Код:

Enter Date of birth : placeholder = "dd/mm/yyyy"/>

Выход:

6. Автофокус: этот атрибут автоматически фокусируется на определенном поле, где этот элемент был объявлен внутри тега ввода. Этот атрибут поддерживается только в последних версиях Chrome, Safari и Mozilla. Синтаксис похож на:

Tag : This tag represents a description of a definition. Tag : This tag deletes a specified text. Tag : This tag helps to display data in a scrolling manner. This texxt is in a scrolling manner


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner

Выход:

7.: это один из основных тегов, который поможет браузеру понять версию HTML-кода, на котором написана программа. Объявление этого тега должно быть написано перед тегом HTML.

8.: этот метатег описывает описание HTML-документа. Содержит имя автора, дату, модификации и т. Д.

В этом HTML5 у нас даже есть возможность получить геолокацию устройства. Существуют различные методы, которые могут быть полезны для облегчения этой маркировки местоположения. Есть также различные шрифты и цвета, доступные в HTML5. Ниже приведены несколько тегов, которые удалены из использования HTML из этой версии HTML5.

Аббревиатура, апплет, большой, dir, шрифт, набор фреймов, центр, tt (текст TeleType), базовый шрифт, центр, штрих, рамка, u (подчеркнутый текст), isindex, noframes и т. Д. Ниже приведены несколько удаленных атрибутов:

Выравнивание, bgcolor, cellpadding, пространство ячеек, граница, ссылка, форма, кодировка, архив, кодовая база, область действия, alink, vlink, ссылка, фон, граница, очистить, прокрутка, размер, ширина и т. Д.

9.: Этот тег используется для отображения содержимого, в котором отключено использование JavaScript. Любой контент, написанный внутри этого тега, может быть использован вместо контента везде, где используется javascript. В качестве упражнения вы можете попробовать выполнить различные теги, примеры которых не приведены.

Вывод

Итак, да, есть основные теги и ссылки для HTML5. Первоначальная версия HTML5 была выпущена 28 октября 2014 года. Мы видели различные новые теги, которые были введены и прошли через несколько атрибутов в HTML5. В конце мы даже рассмотрели, что было сделано не только введение новых элементов, но некоторые элементы и атрибуты, которые присутствовали, были ограничены от использования в этом новом выпуске HTML5.

Было много атрибутов, которые были приведены с примерами, а некоторые содержали только данные и назначение атрибута или элементов. Попробуйте практиковать все эти различные элементы и атрибуты и продолжайте учиться.

HTML5 Теги - Лучшие 4 тега HTML5 - Элементы ввода с примерами