Лабораторная работа № Списки
HTML предлагает три вида списков. Первый вид называется маркированным (неупорядоченным) списком. Маркированный список открывается тэгом <ul>, а каждый его пункт начинается стандартным тэгом <li>.
Пример
<ul> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li> </ul>
|
Результат:
|
Второй вид - нумерованный (упорядоченный) список. Он использует тэги <ol> и <li>. Пример:
<ol> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li> </ol>
|
Результат:
|
И последний - это список определений (глоссарий). Он представляет текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение, открывается тэгом <dl>. Каждый термин открывается тэгом <dt>, а определение тэгом <dd>. Пример:
<dl> <dt>первый термин</dt> <dd>его определение</dd>
<dt>второй термин</dt> <dd>его определение</dd>
<dt>третий термин</dt> <dd>его определение</dd> </dl>
|
Результат: первый термин его определение второй термин его определение третий термин его определение
|
Списки могут быть вложенными, один в другой. Пример:
<ol> <li>первый пункт списка</li> <li>второй пункт списка <ul> <li>первый пункт вложенного списка</li> <li>второй пункт вложенного списка</li> </ul> </li> <li>третий пункт списка</li> </ol>
|
Результат:
|
Специальные символы
Символ |
Код |
Пример |
Знак авторского права |
© |
Copyright © 1999 KM.ru |
Зарегистрированная марка |
® |
MagiCo ® |
Торговая марка |
™ |
Webfarer™ |
Меньше чем |
< |
< |
Больше чем |
> |
> |
Амперсант |
& |
& |
не разрывающий пробел |
|
|
тире |
— |
— |
двойная кавычка |
" |
" |
Специальные символы могут быть введены в ваш HTML-документ при помощи символа & (амперсант) и кода символа:
Таблицы
Год |
Продажи |
2000 |
$18М |
2001 |
$25М |
2002 |
$36М |
Вот пример простой таблицы:
HTML-код :
<table border="3">
<tr><th>Год</th><th>Продажи</th></tr>
<tr><td>2000</td><td>$18М </td></tr>
<tr><td>2001</td><td>$25М</td></tr>
<tr><td>2002</td><td>$36М </td></tr>
</table>
Элемент table является контейнером для таблицы. Атрибут border определяет толщину границы в пикселях. Элемент tr является контейнером для каждой строки таблицы. Элементы th и td являются контейнерами для ячеек, содержащих заголовки и данные соответственно.
Год |
Продажи |
2000 |
$18M |
2001 |
$25M |
2002 |
$36M |
Можно добавить свободное пространство между данными внутри ячейки и ее границами, используя атрибут cellpadding в элементе table. Установим cellpadding равным 10 пикселям:<table border="3" cellpadding="10">. такое изменение кода приведет к следующему эффекту:
Год |
Продажи |
2000 |
$18M |
2001 |
$25M |
2002 |
$36M |
Атрибут cellspacing задает толщину свободного пространства между ячейками. Установим cellspacing, равным 10 пикселям: <table border="3" cellpadding="10" cellspacing="10">
Такое изменение кода приведет к следующему эффекту: