HTML
Listy

Wprowadzenie

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

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):

3. Pozycja
4. Niektóre inne przedmioty
5. 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.

<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>

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">

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>