Ноу Інти, лекція, списки html

Списки використовуються для об'єднання в групу пов'язаних об'єктів інформації, щоб полегшити їх асоціювання один з одним і читання. У сучасній розробці Web списки є основними елементами, часто використовуваними для навігації, а також звичайного контенту.

Списки добре підходять зі структурної точки зору, так як вони допомагають створити добре структурований, більш доступний, і простий в обслуговуванні документ. Вони корисні також з чисто практичних міркувань - вони надають додаткові елементи для з'єднання зі стилями CSS для чималої кількості стилів оформлення.

  • Три типи списків
    • невпорядковані списки
    • впорядковані списки
      • Розмітка впорядкованого списку
      • Початок упорядкованих списків з числа, відмінного від 1
    • Вибір типу списку
    • Різниця між списками HTML і текстом
    • вкладені списки
    • покроковий приклад
      • Розмітка основної сторінки
      • Додавання деяких стилів
      • сторінка рецептів
      • Розмітка сторінки рецептів
      • Оформлення сторінки рецептів
    • висновок
    • додаткове читання
    • Контрольні питання

    Три типи списків

    У HTML є три типи списків:

    • Невпорядкований список - використовується для об'єднання в групу безлічі пов'язаних об'єктів без певного порядку.
    • Упорядкований список - використовується для об'єднання в групу безлічі пов'язаних об'єктів у певному порядку.
    • Список визначень - використовується для виведення пар ім'я / значення, таких як терміни та їх визначення. або час і події.

    Кожен з них має певне призначення - вони не є взаємозамінними!

    невпорядковані списки

    Невпорядковані списки, або марковані списки, використовуються, коли безліч об'єктів може бути розміщено в будь-якому порядку. Прикладом є список покупок:

    Однак всі ці об'єкти є частиною одного списку, можна розмістити об'єкти в будь-якому порядку і список буде як і раніше мати сенс:

    Можна використовувати CSS для зміни маркера на один з декількох використовуваних за замовчуванням стилів, використовувати своє власне зображення, або навіть вивести список без маркерів - ми подивимося, як зробити це, трохи пізніше в цій лекції, і розширимо трохи далі в майбутньої лекції.

    Розмітка невпорядкованого списку

    Невпорядковані списки використовують одну пару тегів

      . охоплюють безліч пар тегів
    • :

      впорядковані списки

      Впорядковані списки, або нумеровані списки, використовуються для виведення списку об'єктів, які необхідно розмістити в певному порядку. Прикладом можуть бути кулінарні інструкції з приготування, які повинні бути виконані в певному порядку рецепта:

      1. зібрати інгредієнти
      2. змішати інгредієнти
      3. Помістити інгредієнти у форму для випічки
      4. Випікати в духовці протягом години
      5. Вийняти з духовки
      6. Дати постояти десять хвилин
      7. подати

      Якщо список позицій переставити в іншому порядку, то інформація більше не матиме сенс:

      1. зібрати інгредієнти
      2. Випікати в духовці протягом години
      3. Вийняти з духовки
      4. подати
      5. Помістити інгредієнти у форму для випічки
      6. Дати постояти десять хвилин
      7. змішати інгредієнти

      Впорядковані списки можуть виводитися за допомогою однієї з декількох цифрових або алфавітних систем - тобто з буквами або числами. За замовчуванням в більшості браузерів використовуються десяткові числа, але є більша кількість можливостей.

      • букви
        • Букви ascii нижнього регістру (a, b, c ...)
        • Букви ascii верхнього регістру (A, B, C ...)
        • Класичні грецькі літери нижнього регістру: (,, ...)
      • числа
        • Десяткові числа (1, 2, 3 ...)
        • Десяткові числа з ведучим нулем (01, 02, 03 ...)
        • Римські числа в нижньому регістрі (i, ii, iii ...)
        • Римські числа в верхньому регістрі (I, II, III ...)
        • Традиційна грузинська нумерація (an, ban. Gan ...)
        • Традиційна вірменська нумерація (mek, yerku, yerek ...)

        Тут також можна використовувати CSS для зміни стилю списків.

        Розмітка впорядкованого списку

        Впорядковані списки використовують одну пару тегів

          . охоплюють безліч пар тегів
        1. :

          Початок упорядкованих списків з числа, відмінного від 1

          Можна створити упорядкований список, нумерація якого починається з числа відмінного від 1 (або i, або I, і т.д.). Це робиться за допомогою атрибута start. який отримує числове значення, навіть якщо використовується CSS для зміни нумерації списку на алфавітну або римську за допомогою властивості list-style-type. Це буде корисно, якщо є єдиний список об'єктів, але ви хочете розбити список деякими примітками, або деякої іншої підходящої інформацією. Наприклад, можна було б зробити це з попереднім прикладом:

          Це призводить до наступного результату:

          1. зібрати інгредієнти
          2. змішати інгредієнти
          3. Помістити інгредієнти у форму для випічки

          Перш ніж помістити інгредієнти в форму для випічки, нагрійте духовку до 180 градусів за Цельсієм / 350 градусів за Фаренгейтом, щоб бути готовим до наступного кроку

        2. Випікати в духовці протягом години
        3. Вийняти з духовки
        4. Дати постояти десять хвилин
        5. подати

          6. Схожі статті