Html ненумерованный список: Списки | htmlbook.ru

HTML-списки

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

• — Ненумерованный или Ненумерованный список
• — Упорядоченный или нумерованный список

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

Каждый элемент в списке должен быть отделен <LI>Вещь</LI> теги. Мы обсудим каждый из этих списков в следующем разделе с примерами.

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

Давайте посмотрим на простую структуру списка HTML и разберемся с каждым элементом.

<h2>My resume</h2>
<HR>
Hi,<BR>
I am an extremely enthusiastic and energetic person and am an expert in the following - <P>
<UL>
<LI>Cutting apples</LI>
<LI>Making paper aeroplanes</LI>
<LI>Turning chairs upside down</LI>
<LI>Walking backwards</LI>
<LI>Folding newspapers</LI>
</UL>
Please consider me for any vacancy that you deem fit.  <P>
Sincerely yours, <BR>
I M Dumb.

Так как это выглядит?

Список атрибутов

Стиль маркера по умолчанию — это стиль диска, но вы можете настроить его с помощью атрибута «type», например

. Допустимые значения атрибута «тип» — «квадрат», «диск» и «круг».Стили маркеров неупорядоченного списка HTML

Упорядоченные или нумерованные списки

Предположим, вы хотите, чтобы в списке были какие-то числа, как показано ниже?

1. Нарезка яблок
2. Изготовление бумажных самолетиков
3. Переворачивая стулья вверх ногами
4. Ходьба назад
5. Складные газеты

Тег упорядоченного списка

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

…

тегами

…

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

<OL>
<LI>Cutting apples</LI>
<LI>Making paper aeroplanes</LI>
<LI>Turning chairs upside down</LI>
<LI>Walking backwards</LI>
<LI>Folding newspapers</LI>
</OL>

Список атрибутов

По умолчанию числа 1, 2, 3… используются в упорядоченном списке, что, если вы хотите использовать маленькие римские цифры или буквы вместо чисел? Просто! Подобно тегу

, тег

может также иметь атрибут, называемый «тип», для настройки чисел. Значение атрибута «type» может быть «I», «i», «A» или «a», а его синтаксис следующий:
…….

Ниже представлена ​​таблица, в которой показаны различные значения атрибута «тип» для упорядоченного списка:

Атрибуты упорядоченного списка HTML

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

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

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

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

<DL>
<DT>Optimist
<DD><ul><li>A person who thinks a gloomy rainy day is a good chance to show off his umbrella</li></ul>
<DT>Pessimist
<DD><ul><li>A person who sees the sun shining brightly and thinks how hot and uncomfortable it is</li></ul>
</DL>

Список определений содержит еще два тега в дополнение к тегу.

• — Это Срок
• — это определение термина

Вложенные списки

Все три тега HTML-списка

,
и

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

 <UL>
<LI>Cutting apples</LI>
<LI>Making paper aeroplanes</LI>
<UL>
<LI>Turning chairs upside down</LI>
<LI>Walking backwards</LI>
</UL>
<LI>Folding newspapers</LI>
</UL>

И результат в браузере должен быть таким, как показано ниже:

• Нарезка яблок
• Изготовление бумажных самолетиков
  • Переворачивая стулья вверх ногами
  • Ходьба назад
• Складная газета

---

Похожие записи

HTML-списки — упорядоченные, неупорядоченные и описательные списки. Учебное пособие

❮ Пред.

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

Мы используем неупорядоченные списки для группировки элементов, не имеющих числового порядка. При изменении порядка пунктов списка смысл не изменится. Чтобы создать неупорядоченный список, мы используем тег

. Этот тег идет парами, содержимое записывается между открывающим тегом
и закрывающим тегом
.

Каждый элемент ненумерованного списка объявляется внутри тега

• .

  Пример тега HTML

  для создания неупорядоченного списка:

    
  
    <голова>
      
    
    <тело>
       
  Ненумерованный список:
   
      <ул>
        
  Это элемент списка
        
  Это еще один элемент списка
        
  Это еще один элемент списка
      

  Попробуй сам »

  Элементы в неупорядоченных списках по умолчанию отмечены маркерами (маленькими черными кружками). Однако стиль маркеров по умолчанию для элементов списка можно изменить с помощью атрибута типа.

  Атрибут type используется для изменения стиля маркеров по умолчанию для элементов списка.

  Пример тега HTML

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

   
  
    <голова>
      
    
    <тело>
      
  
        
  Элемент списка 
        
  Элемент списка
        
  Элемент списка
      
      
  
        
  Элемент списка
        
  Элемент списка
        
  Элемент списка
      
    
   

  Попробуй сам »

  Результат

  Можно также использовать свойство CSS list-style-type или list-style-image, чтобы указать тип элемента элемента списка.

  Пример тега HTML

  , используемого со свойством CSS list-style-type для создания ненумерованного списка:

   
  
    <голова>
      
    
    <тело>
       
  Примеры ненумерованных списков:
   
      <ул>
        
  Прохладительные напитки
        
  Горячие напитки
        
  Мороженое
      

  <ул>
  • Кока-Кола
  • Фанта
  • Чай со льдом
  <ул>
• Кока-Кола
• Фанта
• Чай со льдом

Попробуй сам »

Упорядоченный список HTML используется для перечисления элементов, отмеченных цифрами. Он начинается с тега

. Этот тег идет парами, содержимое записывается между открывающим
и закрывающим
тегами.

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

1. и заканчивается закрывающим тегом
.

Пример тега HTML

для создания упорядоченного списка:

 

  <голова>
    
  
  <тело>
     
Упорядоченный список:
 
    <ол>
 
      
Это элемент списка 1.
      
Это пункт списка 2.
      
Это элемент списка 3.
    

Попробуй сам »

Элементы в упорядоченном списке по умолчанию отмечены цифрами. Если вы хотите создать упорядоченный список с алфавитными или латинскими цифрами, вам просто нужно добавить type=»a» или type=»I» к тегу

.

Пример тега HTML

для создания упорядоченного списка с использованием алфавита и латинских цифр:

 

  <голова>
    
  
  <тело>
     
Нумерованный список:
 
    <ол>
      
Персик
      
Абрикос
      
Банан
      
Клубника
    

Алфавитный список:

<ол тип="А">
1. Персик
2. Абрикос
3. Банан
4. Клубника

Алфавитный список (строчные буквы):

<ол тип="а">
2. Персик
3. Абрикос
4. Банан
5. Клубника

Нумерованный список (римскими цифрами):

1. Персик
2. Абрикос
3. Банан
4. Клубника

Нумерованный список (строчные римские цифры):

1. Персик
2. Абрикос
3. Банан
4. Клубника

Попробуй сам »

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

Чтобы создать список описаний, мы используем тег

. Этот тег идет парами.

В

мы используем теги

для термина/имени в списке описаний и

для описания термина/имени в списке описаний.

Пример тега HTML

для создания списка описаний:

 

  <голова>
    
  
  <тело>
     
Списки описаний:
 
    <дл>
      
Чай
      
- горячий напиток
      
Сок
      
- холодный напиток
    

Попробуй сам »

Результат

Вложенный список содержит список внутри списка.

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

 

  <голова>
    
  
  <тело>
     
Вложенный список HTML
 
    
Вложенный список содержит список внутри списка.
    <ул>
      
Тетради
      

        Книги
        <ул>
          
Детективные книги
          
Римские книги
          
Книги сказок
        
      
    
  
 

Попробуй сам »

По умолчанию нумерация в упорядоченном списке начинается с 1. Используйте атрибут start, чтобы начать отсчет с указанного числа.

Пример списка HTML для подсчета от указанного числа:

 

  <голова>
    
  
  <тело>
     
Управление подсчетом списка
 
    
По умолчанию нумерация в упорядоченном списке начинается с 1. Используйте атрибут start, чтобы начать отсчет с указанного числа.
    <ол start="40">
      
Перо
      
Карандаш
      
Тетрадь
    
    

      
Перо
      
Карандаш
      
Тетрадь
    
  
 

Попробуй сам »

Списки HTML могут быть оформлены различными способами с помощью CSS.

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

Пример горизонтального списка с CSS:

 

  <голова>
    
    <стиль>
      ул {
        тип стиля списка: нет;
        маржа: 0;
        заполнение: 0;
        переполнение: скрыто;
        цвет фона: #F44336;
      }
      ли {
        плыть налево;
      }
      ли а {
        дисплей: блок;
        белый цвет;
        выравнивание текста: по центру;
        отступ: 16px;
        текстовое оформление: нет;
      }
      ли а: наведите {
        цвет фона: #981816;
      }
    
  
  <тело>
     
Пример меню навигации
 
    <р>
      Вы можете стилизовать списки HTML, используя различные свойства CSS.  Например, вы можете создать меню навигации, расположив список горизонтально.
    

    <ул>
      

        Главная
      
      

        Инструменты
      
      

        Фрагменты
      
      

        Викторины
      
      

        Строковые функции
      
    
  
 

Попробуй сам »

Как создать неупорядоченный список в HTML?

В этой статье мы узнаем, как создать неупорядоченный список в HTML. Тег Unordered list

в HTML используется для определения элемента неупорядоченного списка в документе HTML. Он содержит элемент списка элементов
• . Тег
  требует открытия и закрытия тегов.

  Синтаксис:  

   
   Список элементов 
   

  Атрибут: Этот тег содержит два атрибута, перечисленных ниже:

  • compact : Список будет меньше.
  • тип : Указывает, какой тип маркера используется в списке.

  Примечание: Атрибуты

  не поддерживаются HTML 5.

  Пример: В этом примере показано использование неупорядоченного списка с помощью тега

  .

  HTML

  < html >     < head >      < title >Неупорядоченный список title > head > 4  03 < body >      < h3 >Welcome To GeeksforGeeks Learning h3 >      < h5 >List of доступные курсы h5 >      < ul >

  0144 li >Data Structures & Algorithm li >          < li >Web Technology li >          < li >Способности и логическое мышление li >          < li >9 Языки программирования0144 li >      ul > body >     html >

  Вывод:

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

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

  HTML Атрибут типа

  • : Атрибут типа
  • в HTML используется для указания типа элементов списка. Этот атрибут также определяет стиль маркированного списка элементов списка.

    Значения атрибутов: 

    • диск: Это значение по умолчанию. Он создает заполненный круг.
    • круг: Создает незаполненный круг.
    • квадрат: Создает заполненный квадрат.

    Примечание: Атрибут типа

  • не поддерживается HTML 5.

    Пример: В этом примере описывается неупорядоченный список HTML.

    HTML

    < html >     < head >      < title >How to define an unordered list title > head >     < body >      < h2 >GeeksforGeeks h2 >      < h3 >HTML5: How to define an unordered list? h3 >      < p >GeeksforGeeks courses List: p >   < UL > < LI > Geeks LI >> Geeks. 0142          < li >Sudo li >          < li >Gfg li >          < LI > GATE LI > < LI > Placement LI >0143 >      ul > body >     html >

    Вывод:

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

    Неупорядоченный список HTML имеет различные маркеры элементов списка:

    Диск: Используется для установки маркера элемента списка на маркер, т. е. по умолчанию.

    Пример 1: Этот пример иллюстрирует использование ненумерованного списка с маркером диска путем установки для свойства list-style-type значения disk.

    HTML

    < html >     < head >      < название >HTML ul tag title > head >     < body >      < h2 >GeeksforGeeks h2 >      < h3 >Неупорядоченный список с Disc Bullets0144 >      < p >GeeksforGeeks courses List: p >          < ul style = "тип-стиля-списка: диск;" >          < li >Вундеркинды li > 4 4 30143          < li >Sudo li >          < li >Gfg li >          < LI > GATE LI > < LI > ПЛАТНО0144      ul > body >     html >

    Вывод:

    Неупорядоченный список с маркером элемента списка диска

    Круг: Используется для установки маркера элемента списка в виде круга.

    Пример 2: В этом примере мы использовали неупорядоченный список с круглым маркером, установив list-style-type свойство обвести.

    HTML

    < html >     < body >      < h2 >Гики для гиков h2 >      < h3 >Unordered List with Circle Bullets h3 >      < p >GeeksforGeeks courses List: p >          < UL Стиль = »0143 >Geeks li >          < li >Sudo li >          < li >Gfg li >          < li >Gate li >          < li >Placement li >      ul > body >     < / html >

    Вывод:

    Ненумерованный список с маркером элемента списка в виде круга

    Пример 3: В этом примере мы использовали неупорядоченный список с квадратным маркером, задав для свойства list-style-type значение квадрата.

    HTML

    < html >     < body >      < h2 >Гики для гиков h2 >      < h3 >Unordered List with Square Bullets h3 >      < p >GeeksforGeeks courses List:< / P > < UL . 0144 >          < li >Geeks li >          < li >Sudo li > < LI > GFG LI > < LIT < LI < < < < 0144 li >          < li >Placement li >      ul > body >     html >

    Output:

    Unordered list with square list item marker

    нет: Используется для установки маркера элемента списка без отметки.

    Пример 4: В этом примере показано использование ненумерованного списка без маркированного списка путем присвоения свойству list-style-type значения none.

    HTML

    < html >     < body >      < h2 >GeeksforGeeks h2 >      < h3 >Unordered List with No Bullets h3 > < P > Курсы Geeksforgeeks. 0144 < ul style = "list-style-type: none" >          < li >Geeks li > < LI > SUDO LI > < < < < < .0143 >          < li >Gate li >          < li >Placement li > ul > body >     html >

      Вывод:

    Неупорядоченный список без маркера элемента списка

    Он вложен в другой список.

    Пример: В этом примере описывается использование неупорядоченного списка во вложенном формате.

    HTML

    < html >     < body >      < h2 >GeeksforGeeks h2 >      < h3 >Вложенный ненумерованный список h3 >      < p 4 0144 p >          < ul >          < li >DSA li >          < ul >              < li >массив 4 0144              < li >Linked List li >              < li >stack li >              < li >Очередь li >          > ул0144          < li >Web Technologies li >          < ul >              < li >HTML li >             < li >CSS 4 4 0003              < li >JavaScript li >          ul >          < li >Aptitude< / li >          < li >Ворота li > 2          < li >Placement li >      ul > body > HTML >

    Выход:

    NALENTED UNOROURED LISTER

    77777:

    NALENTED UNOROURED

    77777:

    . 0098

    • Google Chrome 94.0 & above
    • Firefox 92.0 & above
    • Microsoft Edge 93.0
    • IE 11.0
    • Safari 14.1
    • Opera 78.0
    
    

    HTML Ordered, Unordered, and Definition Lists

    Advertisements

    In В этом уроке вы узнаете, как создавать различные типы списков в HTML.

    Работа со списками HTML

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

    • Неупорядоченный список — Используется для создания списка связанных элементов в произвольном порядке.
    • Упорядоченный список — Используется для создания списка связанных элементов в определенном порядке.
    • Список описаний — Используется для создания списка терминов и их описаний.

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

    В следующих разделах мы последовательно рассмотрим все три типа списков:

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

    Ненумерованный список, созданный с использованием элемента

    , и каждый элемент списка начинается с
    • элемент.

      Элементы списка в ненумерованных списках отмечены маркерами. Вот пример:

      Пример

      Попробуйте этот код »

       
      
          
      Шоколадный торт
          
      Торт "Черный лес"
          
      Ананасовый торт
       

      — вывод приведенного выше примера будет выглядеть примерно так:

      • Шоколадный торт
      • Торт «Черный лес»
      • Ананасовый торт

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

      Пример

      Попробуйте этот код »

       ul {
          тип стиля списка: квадратный;
      } 

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

      ---

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

      Упорядоченный список, созданный с использованием элемента

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

         Элементы упорядоченного списка отмечены цифрами. Вот пример:

         Пример

         Попробуйте этот код »

          
         
             
         Пристегните ремень безопасности
             
         Запускает двигатель автомобиля
             
         Оглянитесь и идите
          

         — вывод приведенного выше примера будет выглядеть примерно так:

         1. Пристегните ремень безопасности
         2. Запускает двигатель автомобиля
         3. Оглянись и иди

         Нумерация элементов в упорядоченном списке обычно начинается с 1. Однако, если вы хотите изменить это, вы можете использовать атрибут start , как показано в следующем примере:

         Пример

         Попробуйте этот код »

          
         
             
         Смешать ингредиенты
             
         Выпекать в духовке в течение часа.
             
         Оставить на десять минут.
          

         — вывод приведенного выше примера будет выглядеть примерно так:

         10. Смешайте ингредиенты
         11. Запекать в духовке 1 час
         12. Дать постоять десять минут

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

         Пример

         Попробуйте этот код »

          ol {
             тип стиля списка: верхний роман;
         } 

         Совет: Вы также можете использовать атрибут типа , чтобы изменить тип нумерации, например.

         No related posts.