HTML
listor

Introduktion

Syntax

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

Anmärkningar

Oordnad lista

En oordnad lista kan skapas med <ul> -taggen och varje listobjekt kan skapas med <li> -taggen som visas i exemplet nedan:

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

Detta kommer att skapa en punktlista (som är standardformatet):

• Artikel
• En annan artikel
• Ännu en artikel

Du bör använda ul att visa en lista med objekt, där ordning på objekten inte är viktig. Om du ändrar ordning på objekten gör listan fel, bör du använda <ol> .

Beställd lista

En ordnad lista kan skapas med <ol> -taggen och varje listobjekt kan skapas med <li> -taggen som i exemplet nedan:

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

Detta ger en numrerad lista (som är standardformatet):

1. Artikel
2. En annan artikel
3. Ännu en artikel

Manuellt ändra siffrorna

Det finns ett par sätt du kan spela med vilka nummer som visas på listobjekten i en ordnad lista. Det första sättet är att sätta ett startnummer, med hjälp av start attribut. Listan startar vid detta definierade nummer och fortsätter att öka med en som vanligt.

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

Detta ger en numrerad lista (som är standardformatet):

3. Artikel
4. Några andra artiklar
5. Ännu en artikel

Du kan också uttryckligen ställa ett visst listobjekt till ett specifikt nummer. Ytterligare listobjekt efter en med ett angivet värde fortsätter att öka med en från listans objektets värde, och ignorerar var överordnadslistan var.

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

Det är också värt att notera att genom att använda value attribut direkt på ett listobjekt kan du åsidosätta en ordnad listas befintliga numreringssystem genom att starta om numreringen till ett lägre värde. Så om överordnade listan redan var upp till värdet 7 och stötte på ett listobjekt på värdet 4, så skulle det listobjektet fortfarande visas som 4 och fortsätta räkna från den punkten igen.

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

Så exemplet ovan kommer att producera en lista som följer numreringsmönstret 5, 6, 4, 5, 6 - börjar igen med ett nummer lägre än föregående och duplicerar siffran 6 i listan.

Obs: Attributen för start och value accepterar endast ett nummer - även om den ordnade listan är inställd på att visas som romerska siffror eller bokstäver.

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

Ändra typ av siffra

Du kan enkelt ändra vilken typ av siffran som visas i listobjektet markör med hjälp av type attribut

<ol type="1|a|A|i|I">

Du bör använda ol att visa en lista med artiklar, där artiklarna har beställts med avsikt och beställning bör betonas. Om du ändrar ordning på objekten INTE gör listan fel, bör du använda <ul> .

Beskrivningslista

En beskrivningslista (eller definitionslista , som den kallades innan HTML5) kan skapas med dl elementet. Det består av namnvärdegrupper, där namnet ges i dt elementet och värdet ges i dd elementet.

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

Live-demo

En namnvärdesgrupp kan ha mer än ett namn och / eller mer än ett värde (som representerar alternativ):

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

Live-demo

Kapslade listor

Du kan häcka listor för att representera underobjekt i en listobjekt.

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

• punkt 1
• punkt 2
  • underpost 2.1
  • underpunkt 2.2
• punkt 3

Den kapslade listan måste vara ett barn av li elementet.

Du kan även bo olika typer av lista:

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