Пометить элемент списка можно с помощью тега. Примеры стильного оформление ul li списков CSS. Атрибуты и свойства тега
Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный HTML-документ. Фреймы прекрасно подходят для оформления следующих документов:
Обычные фреймы на данный момент считаются устаревшей технологией и не поддерживаются в HTML5. Не используйте обычные фреймы в своих проектах! В HTML5 тегов frame , frameset и noframes уже просто нет, вместо них предусмотрен один единственный тег iframe (встроенный или плавающий фрейм).
ТегТег - заменяет тег и используется для разделения экрана. Имеет закрывающий тег.
АтрибутыВ отдельном теге имеет смысл использовать только один из атрибутов – COLS или ROWS. Это означает, что фреймовая структура будет состоять или только из столбцов, или только из строк. Чтобы создать строки внутри столбцов или столбцы внутри строк, вам потребуется вложенные контейнеры ….
Пример
Результат:
Обратите внимание также на различие в порядке нумерации фреймов.
ТегТег , помещенный в контейнер …, определяет, что именно должно отображаться в конкретном фрейме. Не имеет закрывающего тега.
Атрибуты
В следующем примере экран разбивается на две вертикальные области. В меньшей левой части находится оглавление, а в правую будут загружаться все остальные HTML-документы. В файле оглавления находятся простые текстовые гиперссылки на соответствующие разделы. Чтобы все работало, необходимо создать HTML-документы в файлах cosm.htm, eat.htm, perf.htm, massage.htm и manic.htm.
Пример Оглавление- Товары
- Косметика
- Пищевые добавки
- Парфюмерия
- Услуги
- Массаж
- Маникюр
Тег избавит вас от необходимости повторять атрибут TARGET в каждой отдельной гиперссылки, если все они указывают на одно и то же окно фрейма. Для этого надо поместить тег с атрибутом TARGET в контейнер ….
Использование тега даст возможность уменьшить размер файла оглавления left.htm предыдущего примера.
Пример Оглавление- Товары
- Косметика
- Пищевые добавки
- Парфюмерия
- Услуги
- Массаж
- Маникюр
Атрибут TARGET каждой конкретной ссылки замещает одноименный атрибут тега .
Пример Оглавление- Товары
- Косметика
- Пищевые добавки
- Парфюмерия
- Услуги
- Массаж
- Маникюр
Как уже упоминалось, имена фреймов не могут начинаться с символа подчеркивания, так как с него начинаются служебные имена, передающие броузеру особую информацию. Ниже перечислены специальные имена, каждое из которых используется для достижения определенного эффекта.
В основном эти служебные имена предназначены для того, чтобы тем или иным способом "вырваться" из текущей фреймовой структуры. Поэкспериментируйте с ними, чтобы понять, как можно загружать документы в различные окна.
ТегВ HTML 4.0 появились плавающие (или встроенные) фреймы. С помощью тега можно поместить один фрейм в обычный HTML-документ. Причем контейнер … здесь не нужен.
Закрывающий тег обязателен!
АтрибутыОпределяет, что будет показано в окне браузера если он не поддерживает фреймы.
Ваш браузер не поддерживает плавающие фреймы!
Как загрузить фрейм без дополнительных файлов?Чтобы загрузить фрейм без использования внешних файлов, необходимо положить в переменную HTML-код фрейма, а затем в качестве SRC тега указать "javascript:parent.имя переменной ".
var varFrame = " HTML-код "; ...
Проблема адресной строки при фреймовой структуре сайтаПри использовании фреймов на сайте используется одна страница, которая указывает местоположение фреймов.
Приведём пример такой страницы:
...
После загрузки этой страницы происходит загрузка информации во фреймы. Внутри этих фреймов происходят все переходы пользователя по страницам сайта. В адресной строке всегда отображается только путь к начальной странице, который не изменяется при переходах. Посетитель не знает, где он находится в данный момент.
Если посетитель сразу попадает не на главную страницу сайта (например, из поисковика), то это не приводит к воссозданию общей структуры фреймов. Это является причиной того, что владелец сайта не может указать адрес на внутреннюю страницу сайта.
Есть несколько решений этой проблемы
Ранее бал рассмотрен пример фреймовой структуры. Будем рассматривать различные способы решения этой проблемы именно на нём.
Идея заключается в следующем: при загрузке страницы, содержащей информационную часть, будем проверять окружение страницы и, если требуемая фреймовая структура отсутствует - создадим её при помощи скрипта.
Возможны три случая:
В первом случае после выполнения проверки никаких действий не требуется. Второй и третий практически идентичны, поэтому далее будем рассматривать только второй случай.
И так, посетитель попадает "куда не надо". В самое начало страницы вставляем скрипт, который будет создавать фреймовую структуру.
Реализация решения возможна как на стороне клиента, так и на стороне сервера. Основной недостаток реализации на стороне клиента очевиден - зависимость от возможностей и настроек клиента. Например, на компьютере пользователя запрещено выполнение скриптов. Второй вариант не будет работать, если на сервере нет поддержки PHP .
JavaScript-решение.При таком подходе есть ограничение - не все браузеры поддерживают JavaScript , а в ряде случаев пользователи сами отключают скрипты.
Вначале проверяем окружение страницы, а затем, в случае отсутствия требуемой фреймовой структуры, создаём её.
Создадим файл frame.js :
If (window.name != "main") { window.name="root"; document.write(""); document.write(""); document.write(""); document.write(""); }
Вначале мы проверяем название окна, в который загружается страница: if (window.name != "main") . Если имя окна и название фрейма не совпадают, значит надо создать фреймовую структуру. Это делается динамически с использованием метода write объекта document .
К каждой странице сайта подключаем файл frame.js . Теперь страницы сайта будут иметь такую структуру:
... ...
При таком подходе к решению данной задачи исчезает необходимость в файле, содержащем фреймовую структуру.
PHP-решениеПри таком подходе сайт станет доступным большему числу посетителей.
Проверять окружение страницы будем по другому (не так, как при использовании JavaScript ). Загрузку документа во фрейм будем выполнять с параметром frames=yes . При открытии страницы проверяем этот параметр, и в случае необходимости динамически создаём фреймовую структуру. Ниже приведён код, который за это отвечает.
Помещаем код в файл frames.php . Теперь необходимо подключить его к каждой странице сайта. Ниже приведён пример такой страницы.
frames ...
В данном случае, как и при реализации на стороне клиента нет необходимости отдельно создавать HTML документ, описывающий фреймовую структуру.
.
Определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега . С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Тег заменяет собой элемент на веб-странице. Допустимо использовать вложенную структуру элементов, это позволяет разбить один фрейм на две и более области.
При использовании фреймов примите во внимание их следующие особенности.
- Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, обычно нет ссылок на другие документы.
- Фреймы скрывают адрес страницы на которой находится посетитель и устанавливаемый через тег TITLE, и всегда показывают только адрес сайта. По этой причине понравившуюся страницу невозможно поместить в раздел «Избранное» браузера.
- Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
- Большое число фреймов требует для браузера выделения больше памяти, чем обычно.
Параметр BORDER
Устанавливает толщину границы между фреймами. По умолчанию линия отображается трехмерной, используя параметры bordercolor и border можно настроить ее вид по своему усмотрению. Браузеры по-разному интерпретируют параметры тега FRAMESET и показывают линию.
Если у тега установлен параметр framespacing="0", то браузер Opera вообще не показывает границу, а Internet Exporer игнорирует значения атрибутов bordercolor и border.
Синтаксис ...Допустимое значение - целое положительное число. Значение 0 скрывает рамку.
Параметр BORDERCOLORОпределяет цвет видимых границ между фреймами. Цвет родительского элемента FRAME SET может быть изменен с помощью дочернего тега FRAMESET или индивидуального элемента FRAME. Браузер Opera вообще игнорирует данный параметр.
Синтаксис ... Параметр COLSЗадает размеры или пропорции колонок фреймов в структуре . Если создаются несколько колонок, то для параметра cols необходимо установить определенное значение. Для этого используется три варианта:
Используйте значение в пикселах, когда требуется установить размер фрейма заданной ширины. Это особенно полезно для отображения содержания заданных размеров, например, изображения. Проценты удобно применять для пропорционального разделения фреймов, в этом случае, независимо от размера окна браузера пропорции будут сохраняться, главное, чтобы суммарная ширина колонок равнялась 100%. Если значения не составляют в сумме 100%, браузер отобразит фреймы, но ширина их будет установлена не точно. Наконец, если требуется отвести оставшееся место под фрейм, то используется символ звездочки. В этом случае браузер вычисляет ширину фрейма, когда размеры для остальных фреймов уже установлены. Допускается смешивать отдельные типы значения, перечисляя их через запятую. Тогда работа по расчету нужной ширины выпадает на долю браузера.
Синтаксис ...Значения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *. Значение по умолчанию - 100%.
Параметр FRAMEBORDERОпределяет, показывать границу между фреймами или нет. Браузер Opera в любом случае демонстрирует тонкую линию, если не используется framespacing="0".
Синтаксис ... ...Допускается использовать значения yes или 1 для отображения границы и no или 0, чтобы ее скрыть.
Параметр FRAMESPACINGПараметр framespacing является аналогом frameborder и предназначен для установки размеров границы между фреймами. Причина существования двух разных атрибутов с близкими свойствами в том, что framespacing более старый параметр и поддерживается браузерами для совместимости с их ранними версиями.
Синтаксис ...Допустимое значение - целое положительное число. При framespacing="0" браузер Opera полностью скрывает границы между фреймами, а Internet Explorer устанавливает их параметры по умолчанию. Этот атрибут напрочь игнорируется браузером Netscape. Значение по умолчанию 2.
Параметр ROWSЗадает высоту или пропорции фреймов в структуре в виде строк. Если создаются несколько строк, то для параметра rows необходимо установить определенное значение. Для этого используется три варианта:
Удобство использования параметра rows совместно со значением * состоит в том, что фрейм можно определить в нижней части окна браузера. Когда требуется создать равномерную сетку фреймов, используйте в теге одновременно параметры rows и cols. Для более сложной структуры необходимо вкладывать один тег внутрь другого.
Синтаксис...
Значения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *. Значение по умолчанию 100%.
Определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега . С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Тег заменяет собой элемент на веб-странице. Допустимо использовать вложенную структуру элементов, это позволяет разбить один фрейм на две и более области.
При использовании фреймов примите во внимание их следующие особенности.
- Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, обычно нет ссылок на другие документы.
- Фреймы скрывают адрес страницы на которой находится посетитель и устанавливаемый через тег TITLE , и всегда показывают только адрес сайта. По этой причине понравившуюся страницу невозможно поместить в раздел «Избранное» браузера.
- Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
- Большое число фреймов требует для браузера выделения больше памяти, чем обычно.
Обязателен.
Пример 1. Использование тега
Тег FRAMESET
Некоторые примеры организации фреймов приведены ниже.
|
|
|||||||||
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Устанавливает толщину границы между фреймами. По умолчанию линия отображается трехмерной, используя параметры bordercolor и border можно настроить ее вид по своему усмотрению. Браузеры по-разному интерпретируют параметры тега FRAMESET и показывают линию. Например, для линии черного цвета толщиной 5 пикселов.
Если у тега установлен параметр framespacing="0" , то браузер Opera вообще не показывает границу, а Internet Exporer игнорирует значения атрибутов bordercolor и border .
Синтаксис...
АргументыЦелое положительное число. Значение 0 скрывает рамку.
Значение по умолчаниюЗависит от браузера и операционной системы.
Аналог CSSПример 2. Изменение толщины границы
Тег FRAMESET, параметр border
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Определяет цвет видимых границ между фреймами. Цвет родительского элемента FRAMESET может быть изменен с помощью дочернего тега FRAMESET или индивидуального элемента FRAME . Браузер Opera вообще игнорирует данный параметр.
Синтаксис...
АргументыЗначение цвета можно задавать двумя способами.
1. По его названиюБраузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значениюДля задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Значение по умолчаниюЗависит от браузера и настроек операционной системы.
Аналог CSSПример 3. Цвет границы между фреймами
Тег FRAMESET, параметр bordercolor
Задает размеры или пропорции колонок фреймов в структуре . Если создаются несколько колонок, то для параметра cols необходимо установить определенное значение. Для этого используется три варианта:
Используйте значение в пикселах, когда требуется установить размер фрейма заданной ширины. Это особенно полезно для отображения содержания заданных размеров, например, изображения. Проценты удобно применять для пропорционального разделения фреймов, в этом случае, независимо от размера окна браузера пропорции будут сохраняться, главное, чтобы суммарная ширина колонок равнялась 100%. Если значения не составляют в сумме 100%, браузер отобразит фреймы, но ширина их будет установлена не точно. Наконец, если требуется отвести оставшееся место под фрейм, то используется символ звездочки. В этом случае браузер вычисляет ширину фрейма, когда размеры для остальных фреймов уже установлены. Допускается смешивать отдельные типы значения, перечисляя их через запятую. Тогда работа по расчету нужной ширины выпадает на долю браузера.
Синтаксис...
Аргументы Значение по умолчаниюПример 4. Ширина фреймов
Тег FRAMESET, параметр cols
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Определяет, показывать границу между фреймами или нет. Браузер Opera в любом случае демонстрирует тонкую линию, если не используется framespacing="0" .
Синтаксис...
...
Допускается использовать значения yes или 1 для отображения границы и no или 0 , чтобы ее скрыть.
Значение по умолчаниюПо умолчанию этот параметр включен.
Пример 5. Сокрытие границы между фреймами
Тег FRAMESET, параметр frameborder
HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Параметр framespacing является аналогом frameborder и предназначен для установки размеров границы между фреймами. Причина существования двух разных атрибутов с близкими свойствами в том, что framespacing более старый параметр и поддерживается браузерами для совместимости с их ранними версиями.
Синтаксис...
АргументыЦелое положительное число. При framespacing="0" браузер Opera полностью скрывает границы между фреймами, а Internet Explorer устанавливает их параметры по умолчанию. Этот атрибут напрочь игнорируется браузером Netscape.
Значение по умолчаниюПример 6. Использование параметра framespacing
Тег FRAMESET, параметр framespacing
Задает высоту или пропорции фреймов в структуре в виде строк. Если создаются несколько строк, то для параметра rows необходимо установить определенное значение. Для этого используется три варианта:
Удобство использования параметра rows совместно со значением * состоит в том, что фрейм можно определить в нижней части окна браузера. Когда требуется создать равномерную сетку фреймов, используйте в теге одновременно параметры rows и cols . Для более сложной структуры необходимо вкладывать один тег внутрь другого.
Синтаксис...
АргументыЗначения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *.
Значение по умолчаниюПример 7. Высота фреймов
Тег FRAMESET, параметр rows
HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:
маркированный список —
- — каждый элемент списка
- отмечается маркером,
нумерованный список — — каждый элемент списка - отмечается цифрой,
список определений — — состоит из пар термин — определение.Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.
Создание HTML-списков 1. Маркированный списокМаркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега
. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.Браузеры по умолчанию добавляют следующее форматирование блоку списка:
Каждый элемент списка создаётся с помощью парного тега
- (от англ. List Item) .
- Microsoft
- Apple
- . Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
- доступен атрибут value , который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать
- , то остальная нумерация будет пересчитана относительно нового значения.
Для тега доступны следующие атрибуты:
Таблица 1. Атрибуты тега
Атрибут Описание, принимаемое значение reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…). start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, . type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv). - Microsoft
- Apple Рис. 2. Нумерованный список 3. Список определений
- Пункт 1.
- Пункт 2.
- Подпункт 2.1.
- Подпункт 2.2.
- Подпункт 2.2.1.
- Подпункт 2.2.2.
- Подпункт 2.3.
- Пункт 3.
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- доступны .
Нумерованный список создаётся с помощью парного тега . Каждый пункт списка также создаётся с помощью элемента
Списки определений создаются с помощью тега . Для добавления термина применяется тег , а для вставки определения — тег .
Блок списка определений имеет следующие стили браузера по умолчанию:
Для тегов , и доступны .
Режиссер: Петр Точилин В ролях: Андрей Гайдулян Алексей Гаврилов Виталий Гогунский Мария Кожевникова Рис. 3. Список определений
4. Вложенный списокЗачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов . Разметка для вложенного списка будет следующей:
Рис. 4. Вложенный список 5. Многоуровневый нумерованный список
Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
Ol {
/* убираем стандартную нумерацию */
list-style: none;
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */
counter-reset: li;
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
counter-increment: li;
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li,".") ". ";
}
Рис. 5. Многоуровневый нумерованный список
В языке разметки гипертекста HTML имеется тег
-
, используемый для создания маркированных списков. Он поддерживается всеми современными браузерами и позволяет выводить элементы в порядке, не нуждающемся в нумерации. Например, очень часть с помощью него выводятся пункты меню и все что касается списков на странице: блюд, продуктов, оборудования, инструментов и многое другое, что нужно перечислить без указания на приоритетность того или иного пункта.
- Элемент #1
- Элемент #2
- Элемент #3
- ...
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
-
- Элемент #2-1
- Элемент #2-2
- Элемент #2-3
- Элемент #3
- ...
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- Элемент #1
- Элемент #2
- ...
- disc - маркер в виде кружка (пример был выше)
- circle - маркер в виде прозрачного кружка (пример был выше)
- square - маркер в виде квадратика (пример был выше)
- decimal - маркер в виде нумереннового списка арабскими цифрами: 1, 2, 3, ...
- decimal-leading-zero - маркер в виде нумереннового списка арабскими цифрами с нулем в начале: 01, 02, 03, ...
- lower-roman - маркер в виде нумереннового списка римским алфавитом маленькими буквами: i, ii, iii, iv, v
- upper-roman - маркер в виде нумереннового списка римским алфавитом большими буквами: I, II, III, IV, V
- lower-latin - маркер в виде списка латинским алфавитом маленькими буквами: a, b, c, d, ...
- upper-latin - маркер в виде списка латинским алфавитом большими буквами: A, B, C, D, ...
- lower-greek - маркер в виде списка греческим алфавитом маленькими буквами
- upper-greek - маркер в виде списка греческим алфавитом большими буквами
-
. При задании атрибута тегу
-
все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #1
- Элемент #2
- Элемент #3
Код при этом выглядит так:
- с помощью CSS
Элементы маркированного списка, создаваемые тегом
-
, могут маркироваться произвольными изображениями. Для изменения типа маркера используется CSS. Например
А так это выглядит на странице:
C помощью CSS мы можем задать и другие типы отображения маркеров. Но нужно помнить, что при задании какого-либо стиля тегу
- , он распространяется на все элементы списка.
Синтаксис тега
Этот код преобразуется в маркированный список на сайте:
Тег
-
требует обязательного использования закрывающего тега
Для формирования элементов списка используется парный тег . Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.
Что может являться содержимым маркированного списка?Это могут быть различные тексты, включая одиночные слова, фразы и абзацы, изображения, вложенные списки, куски php-кода и многое другое, нуждающееся в простой маркировке.
Каждый элемент маркированного списка отступает по умолчанию на 40 пикселей вправо. Используя стили CSS, мы можем изменить отображение данного списка по своему усмотрению. Тег
-
является блочным, поэтому он занимает всю доступную для него область, ограниченную краем экрана, рамкой таблицы или другими элементами страницы.
Допускается вложения "список в списке"
Например
Широко распространённым атрибутом тега
-
является атрибут type
, указывающий на то, как будет выглядеть маркер списка. Может принимать следующие значения
1. type="disc" - маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.
2. type="circle" - маркер в виде прозрачного кружка
Например:
3. type="square" - маркер в виде квадратика
Например:
А вот как это выглядит на странице:
В CSS тип маркера задается с помощью атрибута list-style-type :
Рассмотрим какие значения может принимать list-style-type :
Примечание 2
Атрибут можно назначить как самому тегу
-
, так и тегам