Шпаргалка по HTML (теги и примеры для решения базовых задач)

Тег DIV

Описание

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

Как и при использовании других блочных элементов, содержимое тега <DIV> всегда начинается с новой строки. После него также добавляется перенос строки.

Синтаксис

<div>...</div>

Параметры

align Задает выравнивание содержимого тега <DIV>.
title Добавляет всплывающую подсказку к содержимому.

Тег BR

Описание

Тег <BR> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <P>, использование тега <BR> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью параметра clear тега <BR> можно сделать так, чтобы следующая строка начиналась ниже элемента.

Синтаксис

Текст <br> текст

Параметры

clear Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает плавающий элемент.

Тег TABLE

Описание

Элемент <TABLE> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD>. Внутри <TABLE> допустимо использовать следующие элементы: <CAPTION>, <COL>, <COLGROUP>, <TBODY>, <TD>, <TFOOT>, <TH>, <THEAD> и <TR>.

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

Синтаксис

<table> ... </table>

Параметры

align    Определяет выравнивание таблицы.
background   Задает фоновый рисунок в таблице.
bgcolor   Цвет фона таблицы.
border    Толщина рамки в пикселах.
bordercolor   Цвет рамки.
cellpadding    Отступ от рамки до содержимого ячейки.
cellspacing   Расстояние между ячейками.
cols   Число колонок в таблице.
height   Высота таблицы.
width   Ширина таблицы.
rowspan="3"

 объединить 3 ячейки по вертикали

colspan="3" объединить 3 ячейки по горизонтали

Примеры таблиц

<table border="1">
 <tr>
 <td rowspan="3">Cell 1</td>
 <td>Cell 2</td>
 </tr>
 <tr>
 <td>Cell 3</td>
 </tr>
 <tr>
 <td>Cell 4</td>
 </tr>
</table>

Cell 1	Cell 2
	Cell 3
	Cell 4

Верхний индекс

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

<sup>Верхний индекс</sup>

Синтаксис: ^{Верхний индекс}

Нижний индекс

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

<sub>Нижний индекс</sub>

Синтаксис: _{Нижний индекс}