2.1 Знакомство с тегами
В основе разметки HTML-документов лежат теги. Что же такое тег?
Теги были придуманы еще в 70-е годы для того, чтобы люди могли добавлять в документы служебную информацию, для программ, которые эти документы обрабатывают.
Тег – это ключевое (служебное) слово, чаще всего на английском, которое обрамлялось в угловые скобочки (символы больше и меньше), чтобы программы не путали теги и обычные слова на английском.
Также тег может содержать различную служебную информацию, которая может быть полезна программе, обрабатывающей документ.
Пример текста с тегом:
<a href="http://javarush.com/about">
Ссылка на что-то интересное
</a>
В данном примере мы видим текст, тег «a», а также служебную информацию – атрибуты тега. Ниже вы узнаете о них подробнее.
2.2 Виды тегов: открывающий, закрывающие, пустой тег
Теги бывают разных типов. Во-первых, они бывают одиночные и парные. Чаще всего встречаются парные теги. И как ты, наверное, уже догадался, они всегда идут в паре. Их еще называют открывающий и закрывающий.
Открывающий тег – это просто ключевое слово в треугольных скобках. Пример:
<h1>
Закрывающий тег похож на открывающий, но перед ключевым словом стоит косая черта. Пример:
</h1>
Открывающий тег может содержать служебную информацию – атрибуты, закрывающий – нет. Открывающий тег всегда первый в паре. НЕ может сначала в тексте идти закрывающий тег, а затем – открывающий. Такой HTML-документ будет не валидный.
Одиночные теги не имеют закрывающего тега. Список таких тегов определяется HTML-стандартом. Примеры таких тегов:
<br>– перенос строки;<img>– картинка.
Кстати, парный тег, если он не содержит информации внутри, можно записать в сокращенном виде. Пример:
<h1/>
Это не одиночный тэг, а пустой парный тег. Это как бы и закрытый и открытый теги одновременно. От закрытого тега он отличается тем, что косая черта стоит в конце (перед второй треугольной скобочкой).
2.3 Дерево тегов
И еще важная информация про парные теги. В документе их может быть много и они могут быть вложенные. Что это значит? Это значит, что любой текст в HTML-документе может быть обрамлен (обернут) тегами, даже если он содержит другие теги. Пример:
<html>
Обычный текст
<a href="http://javarush.com/about">
Ссылка на что-то интересное
</a>
еще какой-то текст
</html>
Грубо говоря, в html-тексте может встретиться последовательность тегов:
<h1> <h2> </h2> </h1>
Но не может быть:
<h1> <h2> </h1> </h2>
Если открывающие тег <h2> находится внутри пару <h1>-тегов, то и его парный закрывающий тег </h2> тоже должен находиться внутри пары <h1>-тегов.
Таким образом все теги документа образуют некое дерево тегов. Сначала идет тег верхнего уровня, который обрамляет весь документ, обычно он называется <html>, у него есть дочерние пары тегов, у них свои и т.д.
Собственно программа, которая обрабатывает документ с тегами, именно так его видит – как дерево тегов с каким-то текстом внутри.
2.4 Атрибуты
Информация про теги была бы не полной, если бы мы не рассказали про атрибуты. Одиночные теги и открывающие теги парных тегов могут иметь атрибуты. Эти атрибуты содержат полезную информацию о содержимом тега.
Тег может содержать несколько атрибутов, и они имеют такой общий вид:
<tag name1="value1" name2="value2">
Каждый атрибут задан в виде пары имя и значение. Атрибутов может быть сколько угодно.
Но опытный программист сразу задаст вопрос: что делать если в качестве значения атрибута нужно использовать текст, содержащий символы «<», «>» или кавычки?
| Название символа | Символ | HTML-запись |
|---|---|---|
| Кавычка двойная | " | " |
| Амперсанд | & | & |
| Символ меньше | < | < |
| Символ больше | > | > |
| Пробел | | |
| Одинарная кавычка | ' | ' |
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ