Wiki-учебник по веб-технологиям: HTML/Теги ...

Главная | |

Теги


Оглавление документа


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

Регистр символов для отображения тегов не важен, например, <p> и <P> означает одно и то же. Рекомендуется использовать нижний регистр для написания тегов.

Принцип наследования тегов


Теги-контейнеры. Прежде всего стоит определить то, как эти самые теги располагаются. Дело в том, что теги в большинстве своем состоят из двух частей – это открывающий (он же – содержащий параметры) и замыкающий, то есть, «конец» тега. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тега:

<Начало 1-го тега>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

  <Начало 2-го тега>

  текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

    <Начало 3-го тега>
    текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст  
    <Конец 3-го тега> 
 
  <Конец 2-го тега> 
 
<Конец 1-го тега>


«Отступы» от левого края — тоже не случайны — они автоматически выставляются программами, формирующими код HTML для упрощения его восприятия. Это делается, чтобы понимать, что чем дальше от левого края отстоит тег, тем «глубже» он лежит, тем большее количество «старших» тегов может на него действовать. В большинстве случаев параметры ранее заданного тега могут распространяться и на теги, размещенные внутри него, то есть на содержимое вложенных тегов.
Также следует заметить, что некоторые параметры вложенных тегов могут воздействовать и на вышестоящие, «старшие» теги. Например, это типично для таблиц, вложенных одна в другую.

Если у внутренней таблицы размер задан 100 пикселов, то у внешней не может быть размера меньше 100 пикселов + толщина рамки, и наоборот, если размер задан в процентах — если у внешней таблицы ширина 30%, то у внутренней ширина в процентах будет отсчитываться от ширины внешней.

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

Расстановка пробелов


Броузеру не важно положение тега — все отступы и «сдвиги» нужны только для упрощения понимания и ориентирования в коде. Конечно, количество пробелов внутри кода увеличивает размер HTML-странички, поэтому злоупотреблять ими не стоит. Но от того, что вы выделите какие-либо теги определенным образом, хуже не станет. Все пробелы больше одного броузеры просто «не замечают». То есть, сколько ни ставьте вы пробелов в тексте, броузер отобразит все равно с одним пробелом:

в коде написано:

текст          текст

броузер покажет:

текст текст

Впрочем, если «ну очень хочется», то пробелов можно наставить принудительно. Делается это размещением в коде “&nbsp;" (разумеется без кавычек!).

&nbsp; — обозначение пробела. Неразрывного пробела. То есть в этом месте будет пустое пространство. Но если простой текст с пробелами броузер может перенести на другую строку на месте любого пробела, то слова, разделенные “&nbsp;", он воспримет как единое целое. Вот потому не стоит злоупотреблять «гибкостью» и слишком часто использовать обозначение “&nbsp;". Не стоит использовать его и для «выравнивания» текста внутри таблицы. Для этого есть более простые и правильные способы. Не рекомендуется употреблять “&nbsp;" больше двух-трех раз подряд. Можете считать это правилом, поскольку при большем количестве символов наверняка проще прописать требуемое выравнивание в тег нужного элемента. Это будет и проще, и нагляднее, и «чище», в плане того, что ваши тексты не будут чересчур тяжелыми и долгогрузящимися.

Примеры кода по основным элементам HTML

Теги по алфавиту


Дерево кластера HTML/Теги:


/HTML/Теги/HEAD
/HTML/Теги/TITLE
/HTML/Теги/BASE
/HTML/Теги/STYLE
/HTML/Теги/LINK
/HTML/Теги/META
/HTML/Теги/FRAMESET
/HTML/Теги/FRAME
/HTML/Теги/NOFRAMES
/HTML/Теги/SCRIPT
/HTML/Теги/NOSCRIPT
/HTML/Теги/MAP
/HTML/Теги/AREA
/HTML/Теги/BODY
/HTML/Теги/A
/HTML/Теги/H1H2H6
/HTML/Теги/P
/HTML/Теги/DIV
/HTML/Теги/ADDRESS
/HTML/Теги/BLOCKQUOTE
/HTML/Теги/BR
/HTML/Теги/HR
/HTML/Теги/PRE
/HTML/Теги/LISTINGPLAINTEXTXMP
/HTML/Теги/BASEFONT
/HTML/Теги/FONT
/HTML/Теги/I
/HTML/Теги/EM
/HTML/Теги/B
/HTML/Теги/STRONG
/HTML/Теги/U
/HTML/Теги/SSTRIKE
/HTML/Теги/BIG
/HTML/Теги/SMALL
/HTML/Теги/SUP
/HTML/Теги/SUB
/HTML/Теги/CODEиSAMP
/HTML/Теги/TT
/HTML/Теги/KBD
/HTML/Теги/VAR
/HTML/Теги/CITE
/HTML/Теги/UL
/HTML/Теги/OL
/HTML/Теги/LI
/HTML/Теги/MENUиDIR
/HTML/Теги/DL
/HTML/Теги/DT
/HTML/Теги/DD
/HTML/Теги/IMG
/HTML/Теги/EMBED
/HTML/Теги/NOEMBED
/HTML/Теги/APPLET
/HTML/Теги/PARAM
/HTML/Теги/TABLE
/HTML/Теги/CAPTION
/HTML/Теги/TR
/HTML/Теги/TDиTH
/HTML/Теги/FORM
/HTML/Теги/TEXTAREA
/HTML/Теги/SELECT
/HTML/Теги/OPTION
/HTML/Теги/INPUT