HTML-элементы и теги

Опубликовано 20, 4, 2021
Поделиться этим постом:

HTML-элементы и теги

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

Структура тегов

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

<strong> Этот элемент начинается и заканчивается тегом strong. strong>

Открывающий тег может содержать дополнительные атрибуты, которые предоставляют дополнительную информацию о содержимом тега и способах его отображения. Эти атрибуты записываются как пары имя - значение, разделенные знаком равенства (=), а значение помещается в кавычки.

<a href="http://example.com"> Это ссылка. Тег представляет собой "a" для "привязки", а атрибут href (гиперссылка) указывает, куда указывает ссылка. a>

Некоторые теги не встречаются в совпадающих парах, потому что они используются для вставки чего-либо, а не для описания текста. Эти теги называются «пустыми» или «пустыми», и наиболее распространенным является тег, используемый для вставки изображения. Атрибут src используется для указания URL-адреса изображения.

<img src = "https://media.whoishostingthis.com/2/v60/images/wiht-logo.png" />

Обратите внимание, что нет закрывающего тега и, следовательно, нет заключенного текста. Косая черта прямо перед последней угловой скобкой (/>) используется для "самозакрывания" тега. Это не обязательно, но это хорошее напоминание о том, что все последующее не будет заключено. (Это требуется в XHTML)

Есть еще несколько пустых тегов. Два из них довольно просты и распространены.

<br/> вставляет перенос строки.

<hr /> вставляет разделитель горизонтальной линейки (линии).

Другие не вставляют что-то визуальное, но используются для предоставления информации о самой странице.

Кроме того, тег <script> (который используется для добавления Javascript на страницу) может быть пустым, но не обязательно.

Блочный уровень против встроенного

За исключением тегов, которые предоставляют информацию о самом документе, теги HTML делятся на две категории: блочные и встроенные.

Блочные элементы

Блочные элементы представляют собой прямоугольные блоки содержимого. У них есть подразумеваемый разрыв строки до и после. Блочные элементы включают в себя секционное содержимое, такое как абзацы (<p>), разделы (<div>) и заголовки (<h1>, <h2> и т. Д.).

Стандартной практикой является набирать большинство тегов уровня блока в отдельных строках выше и ниже их содержимого:

<div>

Это div.

div>

Однако так бывает не всегда, особенно с заголовками:

<h1> Это заголовок страницы h1>

<h2> Это основной раздел h2>

<p>

Некоторое содержание в абзаце.

p>

Элементы уровня блока могут быть вложенными, но некоторые элементы уровня блока не могут содержать другие элементы уровня блока:

<div>

<h2> Название статьи h2>

<p>

Первый абзац статьи.

p>

div>

Абзацы и заголовки не могут содержать другие элементы уровня блока.

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

Встроенные элементы - это элементы, используемые в тексте. Полужирный (<strong>), курсив (<em>) и ссылки (<a>) - все это встроенные элементы.

Встроенные элементы иногда называют элементами "уровня диапазона". Существует также общий элемент уровня диапазона, называемый просто диапазоном (<span>). Сам по себе это не так много, но может быть использован для создания настраиваемых типов отображения текста с помощью элементов.

Это особенный текст. span>

(См. Раздел CSS для получения информации о том, как сделать class = "special-text" отображаемым в специальном формате.)

Иногда это не имеет смысла

Изображения (<img>) выглядят как элементы блочного уровня - они прямоугольные, имеют определенные размеры и обычно отображаются вне потока текста.

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

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

Подробнее об атрибутах

Почти каждый тег элемента может включать атрибуты. Многие элементы имеют определенный набор атрибутов, которые они поддерживают (например, <img> и атрибут src =), но есть несколько элементов, которые глобально поддерживаются всеми типами элементов.

Два важных типа атрибутов - это класс и идентификатор.

Этот тег привязки имеет три атрибута.

Атрибуты класса

Атрибуты класса используются для обозначения одного или нескольких элементов как принадлежащих к определенному «классу» или группе - это можно использовать для их отображения одинаковым образом.

Например, это Обычно неупорядоченный список (<ul>) используется в качестве меню, а элемент списка (<li>), указывающий на текущую страницу, выглядит иначе, чем все другие ссылки в том же списке.

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

Это первый абзац, и он также является частью класса буквицы.

p>

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

В CSS, JavaScript и других языках класс элемента помечается точкой перед именем.

/ * CSS * /

.first {
color: green;

}

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

Атрибут ID

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

<h1 id = "page-title"> Это заголовок страницы h1>

Идентификаторы реже используются для воздействия на отображение и чаще используются для функциональных целей.

Идентификаторы могут использоваться для внутренних ссылок на документ, таких как Оглавление статьи в Википедии.

  1. Введение

  2. История темы

Введение

<p>

Текст вводного раздела.

p>

<p>

Немного истории по этой теме.

p>

Обратите внимание, что ссылки на разделы включают имя тега с префиксом решетки или решетки (#). Это стандартный способ ссылаться на идентификатор элемента:

/ * CSS * /

#intro {
font-size: 14px;
}

Прочие атрибуты

Каждый тег HTML имеет собственный набор доступных атрибутов, относящихся к их конкретному назначению. Например, тег <a>, определяющий гиперссылку, включает атрибут href (гиперссылка), который указывает URL-адрес, на который выполняется ссылка.

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

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

Теги комментариев

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

Комментарии могут быть многострочными.

Это комментарий.

Он состоит из двух строк.

->

Комментарии не могут быть вложенными:

Если я попытаюсь вложить комментарий в другой комментарий.

Тогда эта часть после первого закрывающего тега выйдет за пределы комментария.

->

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

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

На самом деле все о тегах

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

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

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

Два наиболее распространенных атрибута - это атрибут class и id, которые используются как для стилизации, так и для функциональных целей.


HTML-элементы и теги снимок №10

Категория:
Программирование

Опубликовано:
20, 4, 2021