✅ Основные теги HTML - Изучите различные теги HTML и их использование

Что такое HTML?

Что такое HTML?

HTML расшифровывается как Hyper Text Markup Language, который представляет собой набор предопределенных элементов, также известных как теги, которые сообщают браузеру, какой контент отображать и как отображать этот контент. Это означает, что я могу взять пустой текстовый файл, добавить несколько тегов HTML, и браузер узнает, как отобразить мою веб-страницу.

Что такое тег?

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

Этот тег известен как тег заголовка. Символ h в имени тега позволяет нам и браузеру узнать, что мы работаем с тегом заголовка. Тот, что следует за h, указывает размер используемого заголовка. В этом случае 1 - это самый большой текст по умолчанию, который вы можете отобразить в браузере. Вывод этого тега в браузере будет отображать Hello World!

Что такое атрибут?

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

Добавить пиццу

Значением атрибута id может быть все, что вы хотите, но в нем не должно быть пробела. Второй атрибут - это атрибут класса. Атрибут class может принимать несколько значений, которые могут быть такими, какие вы хотите.

Глобальный атрибут

Глобальный атрибут может быть установлен на всех тегах. Давайте рассмотрим четыре наиболее часто используемых глобальных атрибута.

id: во- первых, это атрибут id. Это не добавляет никаких визуальных изменений к самому тегу. Он используется в основном для JavaScript и стилей, с CSS (каскадные таблицы стилей). Значение атрибута id должно быть уникальным на данной странице. Это означает, что никакие два тега не могут иметь одинаковое значение в идентификаторе
Атрибут class: class похож на тег id, за исключением того, что значение атрибута может повторяться несколько раз на данной странице. Вы найдете их в основном с CSS, а иногда и с JavaScript.
Атрибут style: style используется для встроенного CSS. Этого следует избегать, если это возможно.
title: title предоставляет идентификатор или своего рода подсказку для тега. Когда мышь наведена на тег, где отображается заголовок.

Например

Добро пожаловать!

Элемент блочного уровня против встроенного элемента

Ниже приведены атрибуты элемента уровня блока и встроенного элемента.

Элемент блочного уровня

Занимает всю ширину родительского контейнера.

Встроенный элемент

Занимает текущее пространство, которое существует в.

Вот основная иллюстрация.

Эта зеленая область представляет родительский контейнер. В нашем случае это окно браузера. Ширина браузера, нашего родительского тега, будет шириной элемента уровня блока.

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

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

Различные основные теги HTML

Давайте изучим различные теги HTML.

1) тег - DOCTYPE

DOCTYPE сообщает браузеру, какой тип файла будет открыт. Так как мы кодируем в HTML5. HTML5 - это последняя версия языка HTML-разметки, наш DOCTYPE чрезвычайно прост. Обратите внимание, нет закрывающего тега.

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

2) тег - HTML

Тег HTML, также называемый корневым элементом, следует за тегом DOCTYPE. Этот тег может иметь обычные глобальные атрибуты плюс атрибут с именем manifest. HTML-тег можно использовать только один раз на HTML-странице.

Все, что связано с HTML, вложено в этот тег. Это означает, что все наши теги будут расположены между открытием и закрытием тегов HTML.

3) бирка - голова

Тег head предоставляет общую информацию о отображаемой веб-странице. В тег head добавляется отдельный тег, который позволяет браузеру знать определенные особенности, такие как заголовок страницы, автор страницы и другую подобную информацию.

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

4) бирка - кузов

Тег body позволяет браузеру узнать, что отображать на странице. В теле тега мы разместим весь наш контент, такой как теги и текст. Все, что находится внутри тега body, будет отображаться на веб-странице.

Тег body размещается после тега head внутри тега HTML. На странице есть только один тег body. Тег body может иметь стандартные глобальные атрибуты.

5) Tag - span

Наш первый тег - это тег span. Этот тег является общим контейнером Inline. Это означает, что с ним не связан стиль по умолчанию. Вы можете использовать этот тег, если вам нужно сгруппировать тексты, которые вы хотите сохранить вместе.

6) тег - р

Тег абзаца или тег p используется, когда вы хотите сохранить абзац текста вместе. Этот элемент является элементом уровня блока, то есть он занимает ширину своего родительского контейнера. Идеальное использование будет, когда у вас есть много текста для отображения. Для этого конкретного элемента разрешены только глобальные атрибуты.

7) тег - div

Тег деления, или широко известный как тег div, является общим контейнерным блоком. Это означает, что вы можете сгруппировать много тегов вместе, чтобы создать раздел вашего сайта. Этот тег является глобальными атрибутами.

8) тег - саб

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

Пример: H ₂ O

9) тег - sup

Тег верхнего индекса или тег sup, являющийся встроенным элементом, позволяет тексту находиться над обычной строкой текста. Примером может служить математическое уравнение. Обратите внимание, что 2 выше, чем остальная часть текста в этом уравнении.

Пример: E = mc ²

Это глобальный атрибут.

10) Tag - U

U обозначает подчеркивание. Это подчеркнет любой текст в открытых и закрытых тегах. Это встроенный элемент и глобальный атрибут.

11) Tag - Em

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

12) тег - сильный

Если вы когда-нибудь захотите сделать какой-либо текст жирным, вы должны использовать сильный тег. Этот встроенный тег размещается вокруг текста, который вы хотите выделить жирным шрифтом. Так же, как тег выделения. Сильный тег придает дополнительную важность тексту на вашем сайте.

13) тег - бр

Бирка BR стоит на перерыв. Есть несколько тегов, которым не нужен закрывающий тег. Это не блок и не встроенный элемент. Это глобальный атрибут.

14) тег - час

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

Вложенные элементы / теги

Вложенные теги
Где один тег находится внутри другого тега

пример

16) Тэг - ли

Тег li, стоящий за элементом списка, является тегом, который будет вложенным. Внутри тега li вы можете поместить любой тип контента, который является списком.

17) Tag - ol

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

По умолчанию в списке будут использоваться цифры.

Атрибуты

Глобальный, обратный, начало, тип (a, A, I, i)

18) Tag - ul

Тег ul, или неупорядоченный список, является контейнером для вложенного тега li, как и тег ol. Но в отличие от тега ol, который отображает числовое значение рядом с каждым из элементов в списке, этот тег ul просто предоставляет маркеры рядом с элементами списка в списке.

19) Метка - h1, h2, h3, h4, h5, h6

Всего есть шесть тегов заголовка. Каждый из них имеет собственный номер от 1 до 6. Тег h1 и все остальные теги заголовка дают краткое описание раздела текста или содержимого. Эти теги являются глобальными атрибутами.

20) Метка - это

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

Привет, мир!

Еще один атрибут, который мы упомянем, это href. Это расшифровывается как ссылка на гипертекст. Главное, что нужно помнить, это то, что href - это атрибут, в котором мы указываем путь, чтобы мы могли ссылаться на другую страницу или другой сайт.

Атрибут, href. И мы всегда хотим поставить наш закрывающий тег. Ссылка на сайт Google.com.

Выход

21) тег - img

Тег img или тег image дает нам возможность отображать изображения на нашей странице.

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

Атрибут src и атрибут alt. Атрибут src или source, как вы видите в примере, обязателен.

Теперь значением этого атрибута является путь к фотографии, которую мы хотели бы отобразить. Путь может быть либо абсолютным, либо относительным путем. Другой атрибут - это атрибут alt. Это означает альтернативу. Значение alt должно описывать фотографию. Альтернативный текст будет отображаться в браузере, как показано ниже.

Заключение - основные теги HTML

HTML буквально удивительно огромные предметные области, которые, как считается, обладают. Когда вам удалось достичь этого, вы намного более чем способны к развитию передовой силы эволюции. Вам нужно быть намного более безопасным, разбивая веб-страницу на элементы и после этого код, связанный с HTML и CSS.