Html list: Атрибут list | htmlbook.ru

Leave a Comment / Html / By /

Списки HTML — упорядоченные, неупорядоченные списки и списки описаний. Учебное пособие

❮ Пред. Следующий ❯

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

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

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

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

  • .

    Пример тега HTML

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

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

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

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

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

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

    Пример тега HTML

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

  <голова>
    Название документа
  
  <тело>
    
        
      
      • Элемент списка 
        • 
      
      • Элемент списка
        • 
      
      • Элемент списка
        • 
    
      
    
        
      
      • Элемент списка
        • 
      
      • Элемент списка
        • 
      
      • Элемент списка
        •

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

      Результат

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

      Пример тега HTML

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

  <голова>
    Название документа
  
  <тело>
     
        Примеры ненумерованных списков:
         
    <ул>
      
      • Прохладительные напитки
        • 
      
      • Горячие напитки
        • 
      
      • Мороженое
        •
      <ул>
    • Кока-Кола
    • Фанта
    • Чай со льдом
    <ул>
  • Кока-Кола
  • Фанта
  • Чай со льдом

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

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

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

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

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

    Пример тега HTML

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

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

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

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

      .

      Пример тега HTML

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

  <голова>
    Название документа
  
  <тело>
     
        Нумерованный список:
         
    <ол>
      
      1. Персик
        2. 
      
      2. Абрикос
        3. 
      
      3. Банан
        4. 
      
      4. Клубника
        5.

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

      <ол тип="А">
    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">
      
  • Перо
    • 
      
  • Карандаш
    • 
      
  • Тетрадь
    • 
    
    
      
      
    1. Перо
      2. 
      
    2. Карандаш
      3. 
      
    3. Тетрадь
      4.

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

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

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

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

     

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

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

    Базовый HTML: списки в HTML

    Урок 4: списки в HTML

    /en/basic-html/text-elements-in-html/content/

    Добавление списков в HTML

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

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

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

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

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

      Однако, в отличие от того, что вы видели до сих пор, эти теги ничего не делают сами по себе. Чтобы отобразить контент в виде списка, вам нужно два элемента HTML, работающих вместе : сам список, например, элемент

        выше, и элемент списка , который находится внутри:

         <ул>
  
      • Это элемент списка.
         
         
        • 
  
      • Это второй элемент списка.
        • 
  
      • Три элемента списка прямо здесь.
        •

      В таком неупорядоченном списке, как этот, ваш браузер фактически ничего не отобразит для самих тегов

        и
      . Вместо этого он будет рассматривать их как 90 105 инструкций 90 106 о том, как отображать 90 128
    • 90 129 элементов внутри. Неупорядоченный список указывает браузеру отображать каждый элемент списка с маркер по умолчанию. Если бы вы загрузили этот пример в свой браузер, он выглядел бы так:

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

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

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

          является корнем, и любое количество
        1. элементов находится внутри него:

           
            
  
          1.  Это элемент списка.
            2. 
  
          2. Это второй элемент списка. 
            3. 
  
          3. Три элемента списка прямо здесь.
            4.

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

          Попробуйте это!

          Попробуйте добавить каждый из этих списков примеров во входные данные ниже.

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

          Сделай сам!

          Откройте файл index. htm l вашего GCF Programming Tutorials проект в вашем текстовом редакторе, и давайте добавим список. Для лучшего понимания убедитесь, что вы действительно вводите этот код, а не копируете и вставляете его.

          1. Для начала найдите второй 

             элемент, который вы добавили:

             
            От режиссера Вики Флеминг рассказывается трогательная история о мальчике по имени Пит (Трент Дагсон) и его собаке Ровере. (озвучивает Бринсон Ламблбрант). Вам может показаться, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но этот фильм отличает один большой поворот: Ровер играет в баскетбол, и у него это отлично получается.
          2. Чуть ниже этого элемента добавим небольшое введение для списка:
             
            В этом фильме есть все, что вы могли пожелать:
          3. Под введением добавьте ненумерованный список . Обязательно сохраняйте элементы
          4. с отступом внутри элемента
               для удобочитаемости:
               
                
  
              • Баскетбольный мяч
                • 
  
              • Собака
                • 
  
              • Захватывающая саспенс
                •

          После добавления списка ваш полный код должен выглядеть так: 

           
  <тело>
     
          Обзоры киноклассики
           
     
          Обзор: Баскетбольная собака (2018 г.
           ) 
    
          4 звезды из 5
          
    
          Режиссер Вики Флеминг рассказывает трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровере (озвучивает Бринсон Ламблбрант). Вам может показаться, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но этот фильм отличает один важный момент: Ровер играет в баскетбол, и у него это чертовски хорошо получается.
          
    
          В этом фильме есть все, о чем вы могли мечтать:
          
    <ул>
        
        2. Баскетбол
          3. 
        
        3. Собака
          4. 
        
        4. Захватывающая саспенс
          5. 
    
    
          Возможно, нет необходимости включать все 150 минут игры чемпионата Ровера в режиме реального времени, но Basketball Dog будет удерживать ваш интерес на протяжении всех 4 часов, а финал заставит любого любителя собак расплакаться. Если вы любите баскетбол или спортивных питомцев, этот фильм для вас.
          
    
          Полный список актеров можно найти на веб-сайте Basketball Dog.

          Откройте проводник или Finder и перейдите к проекту GCF Programming Tutorials , затем дважды щелкните файл index.

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

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