Презентация по Web программированию на тему Списки
Списки в HTML Нумерованные (упорядоченные) списки Маркированные (неупорядоченные) списки списки определений
Нумерованные (упорядоченные) списки Элементы списка маркируются с помощью чисел или букв. Упорядоченный список начинается с тега <ol> . Каждый элемент списка начинается с тега <li>. У тега <ol> может быть два атрибута: - start (определяет первое число, с которого начинается нумерация пунктов), - type (определяет стиль нумерации пунктов). Может иметь значения: • "A" - заглавные буквы A, B, C ... • "a" - строчные буквы a, b, c ... • "I" - большие римские числа I, II, III ... • "i" - маленькие римские числа i, ii, iii ... • "1" - арабские числа 1, 2, 3 ...
Пример <html> <body> <h4>Упорядоченный список:</h4> <ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol> </body> </html>
Неупорядоченные (маркированные) списки Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг). Неупорядоченный список начинается с тега <ul>, имеет атрибут type=disk| circle |square Каждый элемент списка начинается с тега <li>.
Различные типы неупорядоченных списков <html> <body> <h4>Неупорядоченный список:</h4> <ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ul> </body> </html>
Различные типы неупорядоченных списков <h4>Список со значком окружностью:</h4> <ul type="circle"> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ul> *********************************<h4>Список со значком квадратом:</h4> <ul type="square"> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ul>
Списки определений Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>.
Пример<html> <body> <h4>Список определений:</h4> <dl> <dt>элемент 1</dt> <dd>описание элемента 1</dd> <dt>элемент 2</dt> <dd>описание элемента 2</dd> </dl> </body> </html>
Вложенный список <html> <body> <h4>Вложенный список:</h4> <ul> <li>элемент 1</li> <li>элемент 2</li> <ul> <li>элемент 2.1</li> <li>элемент 2.2</li> </ul> <li>элемент 3</li> </ul> </body> </html>