HTML первые шаги - урок 3 - теги списков ul, ol. Атрибуты HTML тегов.
Очень часто на сайтах используются списки: в меню, в тексте для перечисления чего-нибудь. Давайте начнем с самого популярного вида списка ненумерованного <UL></UL> (unordered list - ненумерованный список).
Список UL
Список UL используется для меню, для маркерованных списков, причем через HTML можно задать вид маркера.
Давайте изменим наш HTML-код:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ul>
</ul>
</body>
</html>
В документе будет отображать только заголовок, потому что наш список пустой, давайте добавим в него пункты. Для пунктов мы будем использовать теги <LI></LI> (list item - пункт списка).
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
Теперь у нас будет отображаться маркированный список. Вид маркера можно изменить через атрибуты тега <UL>.
Атрибуты HTML тегов
У тега UL, как я писал выше, есть атрибуты. Атрибуты есть у всех HTML тегов, позже мы рассмотрим все атрибуты, а пока давайте определимся что такое атрибут. Атрибут позволяет управлять отображением HTML тега: цветов, размером, формой и т.д. Для тега UL мы можем задать вид маркера: круг, окружность, квадрат.
Атрибуты имеют следующий вид:
<тег атрибут="значение атрибута">
Таким образом мы прямо в теге пишем как отображать этот тег. Для тега UL атрибут будет называться type:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ul type="square">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
Если вы обновите страницу в браузере, то увидите, что список маркерован квадратами (square - квадрат). Также мы можем маркировать окружностями:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ul type="circle">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
Вы можете использовать различные маркеры в списке, но тогда нужно еще прописать атрибут type и для тега li:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ul type="circle">
<li>Первый пункт</li>
<li type="square">Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
По умолчанию в тегах UL, LI используется type круга disc:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ul type="disc">
<li>Первый пункт</li>
<li type="square">Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
А теперь уберем атрибут type у тега UL и посмотрим что случится.
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ul>
<li>Первый пункт</li>
<li type="square">Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
Теперь давайте сделаем все три пункта разными маркерами:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ul>
<li type="disc">Первый пункт</li>
<li type="square">Второй пункт</li>
<li type="circle">Третий пункт</li>
</ul>
</body>
</html>
Думаю теперь вы знаете куда писать атрибуты тегов, дальше мы будем разбирать еще много различных атрибутов.
Списки OL
Тег OL (ordered list - нумерованный список) не такой распространенный как UL, но используется тоже очень часто, когда нужно вывести последовательность действий, хронологию событий, нумерацию объектов и т.д. Везде где нужно нумеровать строки, можно использовать тег OL.
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
</body>
</html>
Как и у тега UL у OL есть атрибут type, только значения у этого атрибута для ul другие:
- type="A" - заглавные латинские буквы (большая английская A "эй");
- type="a" - строчные латинские буквы (маленькая английская a "эй");
- type="I" - заглавные римские цифры (большая английская I "ай");
- type="i" - строчные римские цифры (маленькая английская i "ай");
- type="1" - арабские цифры, используются по умолчанию.
Можете попробовать различные варианты атрибута type для тега UL. Приведу лишь один пример:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<ol type="i">
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
<li>Четвертый пункт</li>
</ol>
</body>
</html>