Szukaj…


Wprowadzenie

HTML oferuje trzy sposoby określania list: listy uporządkowane, listy nieuporządkowane i listy opisowe. Listy uporządkowane wykorzystują sekwencje porządkowe, aby wskazać kolejność elementów listy, listy nieuporządkowane używają zdefiniowanego symbolu, takiego jak wypunktowanie, aby wyświetlić elementy listy bez określonej kolejności, a listy opisowe używają wcięć do wyświetlenia listy elementów potomnych. W tym temacie wyjaśniono implementację i kombinację tych list w znacznikach HTML.

Składnia

  • <ol> ordered list items </ol>
  • <ul> unordered list items </ul>
  • <li> list item (ordered and not) </li>
  • <dl> description list items </dl>
  • <dt> description list title </dt>
  • <dd> description list description </dd>

Uwagi

Zobacz też

Możesz dodać właściwość CSS typu stylu listy do znacznika <ul> , aby zmienić rodzaj ikony używanej do oznaczania każdego elementu listy, na przykład <ul style="list-style-type:disc"> . Dozwolone są następujące typy stylów list:

  • „list-style-type: disc” jest domyślną kropką.
  • „list-style-type: circle” jest niewypełnionym okręgiem.
  • „list-style-type: square” to wypełniony kwadrat.
  • „type-style-type: none” w ogóle nie używa znaku.

Możesz także dodać atrybut type do znacznika <ol> , aby zmienić sposób numerowania, na przykład <ol type="1"> . Dozwolone są następujące typy:

  • typ = „1” jest domyślną formą.
  • type = „A” używa wielkich liter w kolejności alfabetycznej
  • type = "a" używa małych liter w kolejności alfabetycznej
  • type = „I” używa cyfr rzymskich z dużymi literami
  • type = „i” używa cyfr rzymskich z małymi literami

Lista nieuporządkowana

Nieuporządkowaną listę można utworzyć za pomocą <ul> a każdy element listy można utworzyć za pomocą <li> jak pokazano w poniższym przykładzie:

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

Spowoduje to utworzenie listy wypunktowanej (która jest stylem domyślnym):

  • Pozycja
  • Kolejny przedmiot
  • Jeszcze inny przedmiot

Powinieneś użyć ul aby wyświetlić listę przedmiotów, w których kolejność przedmiotów nie jest ważna. Jeśli zmiana kolejności elementów powoduje, że lista jest niepoprawna, należy użyć <ol> .

Uporządkowana lista

Listę uporządkowaną można utworzyć za pomocą <ol> a każdy element listy można utworzyć za pomocą <li> jak w poniższym przykładzie:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Spowoduje to utworzenie listy numerowanej (która jest stylem domyślnym):

  1. Pozycja
  2. Kolejny przedmiot
  3. Jeszcze inny przedmiot

Ręczna zmiana liczb

Istnieje kilka sposobów grania, w jaki sposób numery pojawiają się na elementach listy na liście uporządkowanej. Pierwszym sposobem jest ustawienie numeru początkowego za pomocą atrybutu start . Lista rozpocznie się od tego zdefiniowanego numeru i będzie kontynuowała zwiększanie o jeden, jak zwykle.

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

Spowoduje to utworzenie listy numerowanej (która jest stylem domyślnym):

  1. Pozycja
  2. Niektóre inne przedmioty
  3. Jeszcze inny przedmiot

Możesz także jawnie ustawić określony element listy na określony numer. Kolejne pozycje listy po jednej o określonej wartości będą kontynuowały zwiększanie o jedną z wartości tej pozycji listy, ignorując, gdzie znajdowała się lista nadrzędna.

<li value="7"></li>

Warto również zauważyć, że przy użyciu atrybutu value bezpośrednio w elemencie listy można zastąpić istniejący system numeracji listy uporządkowanej, ponownie uruchamiając numerację przy niższej wartości. Jeśli więc lista nadrzędna osiągnęła już wartość 7 i napotkała element listy o wartości 4, wówczas ten element listy nadal byłby wyświetlany jako 4 i kontynuowałby liczenie od tego momentu.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Tak więc powyższy przykład utworzy listę zgodną ze wzorem numeracji 5, 6, 4, 5, 6 - zaczynając od liczby mniejszej niż poprzednia i powielając liczbę 6 na liście.

Uwaga: Atrybuty start i value akceptują tylko cyfry - nawet jeśli uporządkowana lista jest ustawiona na wyświetlanie cyfr rzymskich lub liter.

5

Możesz odwrócić numerację, dodając reversed element ol :

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Odwrotna numeracja jest pomocna, jeśli ciągle dodajesz do listy, na przykład z nowymi odcinkami lub prezentacjami podcastów, i chcesz, aby najnowsze elementy pojawiały się jako pierwsze.


Zmiana rodzaju cyfry

Za pomocą atrybutu type można łatwo zmienić typ cyfr wyświetlanych na znaczniku elementu listy

<ol type="1|a|A|i|I">
Rodzaj Opis Przykłady
1 Wartość domyślna - liczby dziesiętne 1,2,3,4
a Uporządkowane alfabetycznie (małe litery) a, b, c, d
A Porządek alfabetyczny (wielkie litery) A, B, C, D
i Cyfry rzymskie (małe litery) i, ii, iii, iv
I Cyfry rzymskie (wielkie litery) I, II, III, IV

Powinieneś użyć ol aby wyświetlić listę przedmiotów, w których przedmioty zostały celowo zamówione i należy podkreślić kolejność. Jeśli zmiana kolejności elementów NIE spowoduje, że lista będzie niepoprawna, należy użyć <ul> .

Lista opisów

Za pomocą elementu dl można utworzyć listę opisów (lub listę definicji , jak nazywano ją przed HTML5). Składa się z grup nazwa-wartość, gdzie nazwa jest podana w elemencie dt , a wartość jest podana w elemencie dd .

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

Demo na żywo

Grupa nazwa-wartość może mieć więcej niż jedną nazwę i / lub więcej niż jedną wartość (które reprezentują alternatywy):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

Demo na żywo

Listy zagnieżdżone

Możesz zagnieżdżać listy, aby reprezentować podelementy elementu listy.

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>
  • przedmiot 1
  • pozycja 2
    • podpunkt 2.1
    • podpunkt 2.2
  • pozycja 3

Zagnieżdżona lista musi być dzieckiem elementu li .

Możesz także zagnieżdżać różne typy list:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow