HTML Урок 4. Создание списков

Цель урока: знакомство с тегами создания списков в HTML

Создание списков в HTML

В HTML поддерживается работа со всеми вилами списков, рассмотрим их

Неупорядоченный список HTML

Неупорядоченный или ненумерованный список HTML содержит следующие теги:

Синтаксис:

<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li><li>элемент n</li>
</ul>

Т.е. каждый пункт списка должен начинаться тегом li и завершаться его закрывающей парой, вместо которого будет отображаться маркер (диск, окружность или квадрат — зависит от предустановок браузера)

Чтобы задать вид маркера, необходимо использовать атрибут type:

<ul type="disk"> заполненный диск
<ul type="circle"> окружность 
<ul type="square"> квадрат

Упорядоченный список HTML

Упорядоченный список в HTML или нумерованный список практически такой же, как и ненумерованный, за исключением первого главного тега:

Синтаксис:

 
1
2
3
4
5
6
7
<ol>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li><li>элемент n</li>
</ol>

Для нумерованного списка тоже есть различные варианты нумерации:

<ol type = "a">
<ol type = "A">
<ol type = "I">
<ol type = "1">

Можно также применять к отдельному пункту:

<li type = "a">

Для того, чтобы продолжить список с определенного номера:

<ol start = "5">

Многоуровневый список HTML

Списки с определениями или многоуровневые списки в HTML создаются следующим образом:

1
2
3
4
5
6
7
8
9
<dl>
<dt>Пункт 1
  <dd>Элемент пункта 1
  <dd>Элемент пункта 1
<dt>Пункт 2
  <dd>Элемент пункта 2
<dt>Пункт 3
  <dd>Элемент пункта 3
</dl>

Результат:
Многоуровневый список HTML

Красивый список html или смешанный список

Чтобы сделать список максимально красивым, можно использовать в одном списке разные виды списков. Рассмотрим пример:

1
2
3
4
5
6
7
8
9
10
<dl><strong>Смешанный список</strong>
	<dt><i>Новость дня</i>
		<dd>
			<li>Сегодня идет дождь</li>
			<li>Дождь будет идти весь день</li>
	<dt><i>Новость ночи</i>
		<dd>
			<li>Ночью будет идти дождь</li>
			<li>Завтра начнется новый день</li>
</dl>

Результат:
Красивый список html пример

Лабораторная работа: скачайте файл list.html.

  • Откройте файл
  • Создайте смешанный список
  • Используйте нумерованный и маркированный список html и список определений так, чтобы:
    • вместо знака - отображался маркер
    • вместо порядковых чисел и букв (1, 2, 3, a, b, c) отображались соответствующие им числа и буквы автоматически
  • знак -, порядковые числа и буквы из текста удалить

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить