Html как сделать список – HTML списки и виды списков в HTML: маркированный HTML список, нумерованный HTML список, многоуровневые списки в HTML

Содержание

Урок 7. Создание списков в html

Стандартный список html


Стандартный список - это такой список, в котором подпункты выделяются точками, независимо от их количества.
<ul>
  <li>Первый элемент обычного списка</li>
  <li>Второй элемент обычного списка</li>
</ul>

Нумерованный список html


Нумерованный список - это список, в котором подпункты выделяются цифрами по порядку.
<ol>
  <li>Первый элемент нумерованного списка</li>
  <li>Второй элемент нумерованного списка</li>
</ol>

По умолчанию перечисление будет вестись с использованием чисел.
Однако можно изменять параметры нумерации. Для этого используем атрибут type и указываем нужное значение

A - заглавные латинские буквы (A, B, C)
a - прописные латинские буквы (a, b, c)
I - большие римские цифры (I, II, III)
i - маленькие римские цифры (i, ii, iii)
Пример нумерации списка с заглавными латинскими буквами

<html>
<head></head>
<body>

<ol type="A">
  <li>Первый элемент</li>
  <li>Второй элемент</li>
</ol>

</body>
</html>


В итоге браузер выведет

Список с определениями html


Список с определениями - это список, в котором подпункты (термин, слово) выделяются отдельно от самой расшифровки (трактовка, определение) переносом строки и отступом.
<html>
<head></head>
<body>

<!-- ЛОГИКА ЗАПИСИ -->
<dl> 
<dt>Термин 1</dt> 
<dd>Определение 1</dd>
 
<dt>Термин 2</dt> 
<dd>Определение 2</dd> 
</dl>

<!-- ПРИМЕРЫ -->
<dl>
<dt>HTML</dt>
<dd>Язык вёрстки</dd>

<dt>DOM</dt>
<dd>Объектная модель документа</dd>
</dl>

</body>
</html>

Пример готового кода


Привожу пример использования трёх список подряд списков
.
<html>
<head></head>
<body>

<!-- Стандартный список с точками -->
   <ul>
     <li>Первый элемент обычного списка
     <li>Второй элемент обычного списка
   </ul>

<!-- Нумерованный список -->
   <ol>
     <li>Первый элемент нумерованного списка
     <li>Второй элемент нумерованного списка
   </ol>

<!-- Нумерованный список, с прописными латинскими буквами -->
   <ol type="a">
     <li>Первый элемент нумерованного списка
     <li>Второй элемент нумерованного списка
   </ol>

</body>
</html>

В браузере будет выведено

Пример списка с вложенными списками


В итоге урока хочу привести конструкцию из вложенных друг в друга списков списков.
<html>
<head></head>
<body>

<!-- Список с вложенными списками -->
   <ul>
     <li>Первый элемент обычного списка

       <ol>
        <li>Первый элемент нумерованного списка
        <li>Второй элемент нумерованного списка
       </ol>
     <li>Второй элемент обычного списка
     <li>Третий элемент обычного списка
       <ol type="a">
        <li>Первый элемент нумерованного списка
        <li>Второй элемент нумерованного списка
       </ol>
   </ul>

</body>
</html>

Спасибо за внимание!

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

Для приятного оформления текста на страницах сайта рекомендуется по чаще использовать списки. Многие новички пытаются создавать списки с помощью пробелов, переносов и спецсимволы, при этом, категорически избегая html теги списка. Это грубейшая ошибка, т.к. в некоторых браузерах, а также при изменении разрешения экрана, такие списки будут отображаться несколько иначе.

На данном уроке мы научимся создавать списки в html, а также рассмотрим основные html теги списков. Познакомимся с нумерованным списком в html, со списком определений и с маркированным списком в html.


Нумерованный список в HTML

В нумерованным списке каждый перечисляемый пункт помечается арабской или римской цифрой, реже букой латинского алфавита.

  • <ol> ... </ol> - этот парный тег задаёт старт и окончание нумерованного списка в html. Данный тег имеет параметр type, в значении которого нужно указать, с помощью чего будут отмечаться пункты списка:
  • A - английские большие буквы;
  • a - английские маленькие буквы;
  • I - римские большие цифры;
  • i - римские маленькие цифры.

Если значение type не задавать, то в качестве нумерации пунктов, по умолчанию будут задействованы обычные цифры (1,2,3).

  • <li> ... </li> - данный тег служит для отделения пунктов списка друг от друга.

Освоить создание нумерованного списка в html намного проще будет на примере:

Если использовать параметр type со значение А – type="А", то в результате нумерация будет выполнена английскими буквами – A,B,C,D и т.д


Маркированный список HTML

В маркированных списках, каждый отдельный пункт имеет маркер. С помощью CSS можно установить в качестве маркера любое изображение. Если использовать исключительно HTML, то ваши возможности ограничены только тремя видами маркеров.

  • <ul> ... </ul> - тег, задающий начало маркированного списка html. Как и в случае с нумерованными маркерами, каждый пункт отделяется тегами <li>. Также есть возможность воспользоваться параметром type, значения которого и задают внешний вид используемых маркеров в каждом пункте списка. Рассмотрим эти значения поподробнее:
  • square – маленький квадратик, левее расположен пример данного маркера
  • disc – большая точка, левее расположен пример данного маркера
  • circle – кружок, левее расположен пример данного маркера

Частенько возникает нужда создавать списки, которые вложены в другие списки. Для примера сверстаем один из таких маркированных списков html:


Список определений HTML

Сразу нужно заметить, что списки определений используются довольно редко, но лучше всё же с ними познакомиться. HTML теги списков определений значительно отличаются от вышеперечисленных списков.

  • <dl> - парный тег, который объявляет список определений;
  • <dt> - данный тег используется для терминов;
  • <dd> - этот тег служит для определений или описаний терминов;

Пример списка определений:

Вид кода в браузере:

В браузере видно, что термин выносятся выше и левее от текста, который его описывает.

Теперь вы умеете создавать списки в html, более того, знаете html теги списков. Владеете информацией, как создать маркированный и нумерованный списки html.

Дата первой публикации: 02.08.2016
Дата последнего обновления: 02.08.2016

Рекомендовать друзьям:

Как сделать список в HTML: маркированный, нумерованный список

В HTML есть возможность создавать списки. Существует три вида списков - маркированный, нумерованный и список определений. Рассмотрим, как сделать список в HTML

Маркированный список

В маркированном списке каждый пункт помечается специальным маркером. Маркированный список создаётся с помощью тэга <ul>, а каждый пункт списка с помощью тэга <li>. Стандарт HTML5 позволяет не ставить закрывающий тэг у пунктов списка. Но я рекомендую всё же закрывать все парные тэги. Так код будет более универсальным.

Пример маркированного списка:

+

8
9
10
11

<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>

Атрибут type устанавливает внешний вид маркера. Может принмаать следующие значения:

type="disc" - в виде круга (по умолчанию)

type="circle" - в виде окружности

type="square" - в виде квадрата

Установим атрибут type для списка.

Нумерованный список

Нумерованный список удобен тем, что нумерация производится автоматически, и если нужно добавить в середину списка ещё пункты, то не придётся переписывать цифры.

Нумерованный список создаётся с помощью тэга <ol>, а пунткты списка создаются так же как в маркированном, с помощью тэга <li>.

Вот пример нумерованного списка:

12
13
14
15

<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ol>

Нумерация может осуществляться не только арабскими цифрами, но и другими способами. Для этого у тэга <ol> есть атрибут type. Он может принимать следующие значения:

type="1" - арабские цифры (по умолчанию)

type="A" - заглавные латинские буквы

type="a" - строчные латинские буквы

type="I" - большие римские цифры

type="i" - маленькие римские цифры

Тэг <ol> имеет атрибут start. Он устанавливает число,с которого начинается нумерация. Атрибут работает как с арабскими, так и с римскими числами. Значения:

start="целое число"

Для примера зададим тэгу <ol> атрибут type.

Поэкспериментируйте с атрибутами, попробуйте установить им разные значения.

Список определений

Список определений - это список терминов и их описаний. Используется он редко, но знать нужно. Список определений создаётся с помощью тэга <dl>. Тэг <dt> добавляет в список термин, а тег <dd> описание.

Пример списка:

16
17
18
19
20
21
22
23
24
25

<dl>
<dt>Термин 1</dt> <dd>Описание термина, которое может быть достаточно длинным и состоять из некоторого количества строк. В этом случае текст описания отображается с отступом для выделения термина.</dd> <dt>Термин 2</dt> <dd>Описание термина, которое может быть достаточно длинным и состоять из некоторого количества строк. В этом случае текст описанияотображается с отступом для выделения термина.</dd> </dl>

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

создание списков в htmlДля более удобного ознакомления с материалом требуется его должное оформление. Создание маркированных либо нумерованных списков способствует легкому и ненавязчивому чтению. Кроме того данный способ группировки содержимого статьи делает текст более привлекательным в глазах посетителей.

Для отображения списков существуют специальные теги ul, ol, dl. Давайте на деле разберем, что каждый из них приставляет собой по отдельности.

Виды HTML списков

В HTML существует три вида списков:

1. Маркированный список html. За его отображение отвечает тег ul. То есть текст, расположившийся между открывающимся <ul> и закрывающимся </ul> тегом, будет относиться к маркированному списку.

В свою очередь внутри тега <ul> находятся теги <li> к которым и привязан тот или иной пункт. В отличии от тега <ul>, тег <li> закрывать не обязательно.

маркированный список html

Тег <ul> может содержать внутри себя следующие параметры:

<ul

- circle – маркер в виде не закрашенного кружка.

- type= disc – маркер в виде закрашенного кружка.

- square – маркер квадратной формы.

- compact – компактное отображение списка.

>

Указанный параметр type можно использовать для тега <li>, но он будет активен только для конкретного пункта меню.

При желании установить какой-то особый маркер можно вместо привычного тега <li> применять тег <img src…> в результате чего напротив пункта будет отображаться изображение.

2. Нумерованный список html. За отображение и вывод данного HTML списка отвечают парные теги <ol>… </ol>

Для создания каждого пункта списка, так как и в вышеприведенном примере используется элемент <li>

нумерованный html

Тег <ol> может включать в себя следующие атрибуты:

<ol

- type – отвечает за вид маркера, который может отображаться в виде букв или цифр. К нему относятся значения:

1 – маркер по умолчанию (десятичная нумерация).

А – заглавные буквы (A, B, C…).

а – строчные буквы (A, B, C…).

I – римские заглавные буквы (I, II, III…).

i – строчные римские.

- reversed – задает команду отображения списков в обратном отчете (5, 4, 3…).

- start – отвечает за вывод начального значения, от которого начнется естественный отсчет нумерации. К примеру, поставленное в начале списка значение <ol start =”B”, говорит о том, что первому пункту списка будет присвоен порядковый номер «B».

применение атрибута type

При необходимости удаления какого-нибудь пункта из списка, отображение нумерации не нарушится, поскольку браузеры научены в автоматическом режиме задавать правильный порядок указанных атрибутов.

В свою очередь тег <li> в нумерованном списке может в себя вмещать атрибут:

- value – значение позволяющее изменить порядковый номер определенного элемента установленного по умолчанию.

3. Список определений html. Для создания и отображения данного списка используется тег <dl>…</dl>

Для добавления термина применяется тег <dt></dt>, определения <dd></dd>. Данный тег не имеет атрибутов.

список определений html

Думаю на сегодня достаточно, и теперь вы знаете, как сделать список в html. Со следующей статьи вы узнаете, как сделать линию с помощью HTML и CSS.

Спасибо за внимание и до скорого на страницах Stimylrosta.

сообщить об ошибке

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

 

Не ленитесь, поделитесь!

Понравилась статья? Угостите админа кофе.

Как Сделать Список в HTML? Ответ на (100%) Примеры!

Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! Сейчас Вы узнаете, как сделать список в html для сайта. Это будет полезно как для новичков, так и для всех кому нужно узнать все о создании списков в html. Если Вас интересует данная тема, то приступим?! Поехали …

Для начала давайте разберемся в некоторых нюансах, а уже затем только приступим к созданию самих списков в html.

Какие бывают списки в HTML?

Как Вы наверное все знаете, списки бываю разные и их огромное количество. Мы с Вами сегодня разберем самые часто встречающиеся и наиболее востребованные среди вебмастеров. Эти виды списков чаще всего нужны для создания сайтов и построения веб-страниц.

Вы начинающий вебмастер? Тогда Вам просто необходимо знать сервис, который поможет создать и продвинуть сайт с нуля — http://profi-site.info/sozdanie-sajtov-v-adlere.html

Разделяются все списки по классам или видам на:

1. Маркированные списки в html
2. Нумерованные списки в html
3. Выпадающие списки в html
4. Списки определений в html

Теперь давайте разберем каждый в отдельности и научимся создавать их самостоятельно без применения разного рода редакторов, такого как например есть WordPress.

Как делают маркированные списки в html?

Данного вида списки в html создаются при помощи тега ul, который и будет отвечать за маркировку создаваемого списка.

Для того, чтобы создать такой список необходимо заключить его в открывающийся тег <ul> и соответственно, закрывающийся тег </ul>. Например создадим вот такого вида маркированный список:

<ul>
<li>Строка маркированного списка в html первая</li>
<li>Строка маркированного списка в html вторая</li>
<li>Строка маркированного списка в html третья</li>
<li>Строка маркированного списка в html четвертая</li>
</ul>

Теперь давайте посмотрим пример того, что из этого у нас с вами выйдет, когда мы его поместим на сайт:

  • Строка маркированного списка в html первая
  • Строка маркированного списка в html вторая
  • Строка маркированного списка в html третья
  • Строка маркированного списка в html четвертая

Получилось совсем неплохо на мой взгляд. А как Вам кажется?

Как делают нумерованные списки в html?

Для этих списков используется другой тег. За вывод списка отвечает тег ol. Соответственно открывающийся <ol> и закрывающийся </ol>. За каждый отдельный пункт в нумерованном списке в ответе тег li. Как Вы уже наверное сами догадались, также этот тег должен иметь свою пару. Отрывающийся <li> и закрывающийся </li> теги.

Вот пример создания нумерованного списка в html:

<ol>
<li>Строка нумерованного списка в html первая</li>
<li>Строка нумерованного списка в html вторая</li>
<li>Строка нумерованного списка в html третья</li>
<li>Строка нумерованного списка в html четвертая</li>
</ol>

А вот, что из этого получается, когда мы вставляем данный список в html на свой сайт:

  1. Строка нумерованного списка в html первая
  2. Строка нумерованного списка в html вторая
  3. Строка нумерованного списка в html третья
  4. Строка нумерованного списка в html четвертая

Получилась замечательная нумерация!

Теперь узнаем как сделать выпадающий список в html

Как и для остальных списков, чтобы создать выпадающий список нужны специальные теги: select и option. Они нам с вами помогут сделать просто чудо!

Вот пример создания выпадающего списка в html:

Строка выпадающего списка в html перваяСтрока выпадающего списка в html втораяСтрока выпадающего списка в html третьяСтрока выпадающего списка в html четвертая

Правда замечательный выпадающий список получился?! Оказывается все не так уж и сложно!

И теперь последний на сегодня вид из все рассматриваемых списков в html …

Узнаем как сделать список определений в html?

Списки такого типа нужны для того, например, чтобы выделить какой либо термин или класс. В данном случае я выделил автора блога и его посетителей. Какие теги для этого используются, Вы сами видите:

<dl>
<dt>Автор блога:</dt>
<dd>Валерий Бородин</dd>
<dt>Посетители:</dt>
<dd>Друзья</dd>
<dd>Гости</dd>
</dl>

А вот так получилось после вставки на сайт в текстовом режиме:

Автор блога:
Валерий Бородин
Посетители:
Друзья
Гости

Если Вам вдруг потребуется редактор кода html, то посмотрите вот этот материал. Думаю, что он Вам точно пригодится?!

На этом все на сегодня. Всем удачи и благополучия! До новых встреч!

Пишите свои комментарии и делитесь со своими друзьями и знакомыми в социальных сетях ниже по кнопкам! Спасибо за внимание!

Как в HTML создать маркированный список без маркеров

В некоторых случаях может понадобиться создать маркированный список без маркеров. Ниже описано несколько способов реализации этого с помощью HTML. В том числе и с помощь list style none.

Добавление стиля «list-style: none» в тег неупорядоченного (<ul>) или упорядоченного списка (<ol>) уберет любые маркеры или номера:

<ul>
  <li>Элемент списка без маркера</li>
  <li>Второй элемент</li>
</ul>

1

Приведенный выше пример работает почти в любой ситуации. Но лучше размещать CSS во внешнем файле стилей. Ниже приведены CSS и HTML, которые можно использовать для удаления маркеров.

Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков (<ul>). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:

<style type="text/css">
  ul {
    list-style-type: none;
  }
</style>

Но лучше создать класс list style none CSS, который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS:

<style type="text/css">
  .nobull {
    list-style-type: none;
  }
</style>

В приведенном выше коде CSS создается новый класс «nobull». Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:

<ul>
  <li>Элемент списка без маркера</li>
  <li>Второй элемент</li>
</ul>

Подсказка: Этот класс можно применить для любого элемента списка (<li>), чтобы скрыть маркер напротив определенных элементов, но оставить другие маркеры.

Ниже показано, как выводится на экран неупорядоченный список без маркеров с помощью list style type none.

Данная публикация представляет собой перевод статьи «How to create a bullet list with no bullets in HTML» , подготовленной дружной командой проекта Интернет-технологии.ру

Как сделать красивый маркированный список HTML?

Здравствуйте, дорогие посетители!

В одной из прошлых статей я рассказывала, как можно красиво оформить нумерованный список HTML. С этой статьей вы можете ознакомиться по этой ссылке.

А сегодня я расскажу вам, как можно украсить маркированный список HTML, добавив для элементов списка свои уникальные маркеры.

Навигация по статье:

Создание маркера для маркированного списка HTML

В отличие от случая с нумерованным списком HTML, где мы самостоятельно добавляли нумерацию, а затем оформляли цифры при помощи CSS-стилей, с маркированными списками все выглядит немного иначе.

По умолчанию в CSS предусмотрено три варианта оформления, которые можно задать при помощи свойства list-style-type. Которое, в свою очередь может принимать три значения:

  1. 1.circle — кружок
  2. 2.disc — точка
  3. 3.square – квадрат

Пример использования:

.text ul{ list-style-type: square; }

.text ul{

list-style-type: square;

}

В данном случае у элементов будут метки в виде квадратиков.

Если же мы хотим задать свои маркеры, то для начала нам нужно подготовить картинку самостоятельно.

Сделать это можно двумя способами:

  1. 1.Нарисовать, например, в PhotoShop.
  2. 2.В поиске Яндекс сделать запрос «маркер для списка». Яндекс выдаст вам огромное количество всевозможных заготовок: Скачать маркеры для списка

Все, что вам остается сделать, это выбрать понравившееся изображение и в PhotoShop или любом другом редакторе подогнать его размер. В зависимости от размера текста и оформления сайта размер маркера может быть разным, но, как правило, для шрифта размером 14px подходят маркеры с размерами 20х20 или 25х25 пикселей.

После того, как у вас будет готова картинка, вам нужно выгрузить ее на хостинг в папку с изображениями для вашего сайта.

Как задать свой маркер для маркированного списка HTML?

Теперь, когда у нас все готово, мы можем в файле стилей нашего сайта применить наш уникальный маркер. Для этого нужно дописать для ul свойство list-style-image в таком виде:

#opisanie .text ul { list-style-image: url("images/galochka2.png") ; font-size: 16px; }

#opisanie .text ul {

    list-style-image: url("images/galochka2.png") ;

    font-size: 16px;

}

В скобочках указывается относительный путь к файлу с маркером.

В данном случае я использовала маркер в виде галочки размером 20х20 пикселей. Вот что у меня получилось:

маркированный список CSS

Как видите, заменить маркер для маркированного списка HTML совсем не сложно, но в результате ваш список будет оформлен намного красивее и оригинальнее.

Если данная статья вам понравилась и была для вас полезной, обязательно напишите мне об этом в комментариях и не забудьте поделиться ею в социальных сетях.

Я на сегодня у меня все. Успехов вам и вашим проектам! До встречи в следующих статьях!

С уважением Юлия Гусарь

Отправить ответ

avatar
  Подписаться  
Уведомление о