В этой главе:
Синтаксис элемента
Элемент HTML - это основная структурная единица веб-страницы, написанная на языке HTML. Изображение ниже демонстрирует синтаксис элементов. Для большинства тегов синтаксис элементов будет выглядеть одинаково, за исключением одиночных тегов.
Все элементы в HTML следуют одному формату:
- Элемент начинается с открывающего тега.
- Элемент заканчивается закрывающим тегом.
- Содержимым элемента является все, что находится между открывающим и закрывающим тегами.
- Некоторые элементы не имеют содержимого (пустые элементы).
- Большинство элементов могут содержать атрибуты
Примечание: не забывайте в закрывающем теге ставить символ "/ ", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом.
Пустые элементы
В HTML есть несколько элементов, которые не имеют закрывающего тега, например или
. Такие элементы называются пустыми
, потому что они не содержат в себе никакого содержимого и не имеют закрывающего тега.
Вложенные элементы
Все HTML-документы состоят из вложенных элементов. Большинство из них могут либо содержать в себе другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.
Следующий пример состоит из трех элементов, два из которых вложенные:
Мой первый абзац
Когда вы размещаете один элемент внутри другого, стоит быть внимательными и следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, следующий пример является неверным:
Это очень
интересноВ HTML существует два типа элементов - блочные (block elements) и строчные (inline elements). Ниже вы узнаете особенности этих элементов и разницу между ними, а также способы управлять ими через правила CSS.
Блочные элементы
Блочные элементы являются основой, которая используется для верстки веб-страниц. Такой элемент представляет собой прямоугольник, который по умолчанию занимает всю доступную ширину страницы (если иное значение не указано в CSS), а длина элемента зависит от его содержимого. Такой элемент всегда начинается с новой строки, то есть, располагается под предыдущим элементом. Блочный элемент может содержать в себе другие блочные и строчные элементы.
Примеры блочных элементов:
,
- ,
- Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.
- Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.
- Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.
- ,
и т. д.
Строчные элементы
В отличие от блочного, строчный элемент не переносится на новую строку, а располагается на той же строке, что и предыдущий элемент. Такие элементы, как правило, находятся внутри блочных элементов и их ширина зависит лишь от содержимого и настроек CSS. Еще одно отличие строчного элемента от блочного заключается к том, что в нем может находиться только контент и другие строчные элементы. Блочные элементы в строчные вкладывать нельзя.
Примеры строчных элементов:
, , , , и т. д.
Примечание: в HTML5 порядок вложения тегов такой роли не играет. Элементы уже не просто делятся на блочные и строчные, а группируются по смыслу и назначению, представляя собой категории контента .
CSS-свойство display: меняем тип элемента
При помощи крайне полезного свойства display в CSS можно заставить блочный элемент выглядеть как строчный и наоборот. Чтобы блочный элемент вел себя как inline-элемент (т. е. не переводился на новую строку), для него необходимо записать правило:
Display: inline;
Если же необходимо отобразить строчный элемент как block-элемент (чтобы до и после элемента происходил перенос строки), запишите следующее:
Display: block;
Действие {display:inline} и {display:block}
Также можно сделать «гибрид» - блочный элемент с поведением, как у строчного. В этом случае всё содержимое таких блочных элементов будет отображаться, как обычно, но при этом блоки будут вести себя как строчные элементы, выстраиваясь в одной строке друг за другом и переносясь на новую строку лишь при необходимости. Схлопывание margin в таких случаях перестает действовать. Для превращения элемента в блочно-строчный запишите:
Display: inline-block;
Действие {display:inline-block}
Далее в учебнике: свойство CSS border . Вы узнаете, как добавлять границы для элементов веб-страницы и какие настройки к ним можно применить, используя каскадные таблицы стилей.
Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
Тег является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег устанавливает ссылку или якорь.
Определяет жирное начертание шрифта.
Тег увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега увеличивает текст на одну условную единицу.
Тег
устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа
Использование тега
не добавляет пустой отступ перед строкой.
Тег предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Устанавливает курсивное начертание шрифта.
Тег
предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер
. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0"
в тег
.
Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег , но действует с точностью до наоборот.
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
Тег предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H 2 O.
Отображает шрифт в виде верхнего индекса. По своему действию похож на , но текст отображается выше базовой линии текста — м 2 .
Разница между блочными и строчными элементами следующая.
Элементы HTML по способу отображения на веб-странице делятся на строчные и блочные элементы.
Строчные элементы (inline)
Строчные элементы предназначены для выполнения некоторых действий над текстом, например: перенос строки, выделения фрагмента текста курсивом, логического выделения некоторого текста и применения к нему стилей с помощью CSS и т.д. В зависимости от назначения строчного элемента фрагмент текста помещают между открывающим и закрывающим тегом или применяют тег в любом месте текста, например для переноса строки.
Например:
Можно использовать строчный элемент чтобы выделить текст, привлекающий внимание посетителей сайта с помощью жирного начертания.
Строчный элемент имеет ширину, которая равна ширине его содержимого. Строчные элементы не могут содержать внутри себя блочные элементы.
Примеры строчных элементов: , ,