Indholdsfortegnelse
Nøgle takeaways
- HTML-lister er afgørende for at organisere og præsentere data på en webside. Der er tre hovedtyper: ordnede, uordnede og beskrivelseslister.
- Ordnede lister bruger tal eller andre tegn til at bestille varerne. Type-attributten tillader tilpasning, mens start- og omvendt-attributter ændrer startpositionen og rækkefølgen.
- Uordnede lister grupperer relaterede varer uden en bestemt rækkefølge. Punktstilen kan tilpasses ved hjælp af CSS.
En HTML-liste er et væsentligt strukturelt element for enhver gruppe af relaterede data på en webside. Uanset om du opretter en menu, organiserer varer til salg eller prøver at præsentere komplekse data i en mere læsbar form, vil de følgende lister hjælpe dig med at få arbejdet gjort.
Der er tre hovedtyper af HTML-lister, der hver tjener et specifikt strukturelt formål i webudvikling.
1. Bestilt Liste
Den HTML-ordnede liste giver dig mulighed for at gruppere en liste over relaterede elementer i en bestemt rækkefølge. For at oprette en ny ordnet liste skal du bruge
- -tagget.
- -tags. Hvert listeelement (
- tag) vil indeholde et specifikt element på listen.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Denne kode gengiver følgende visning:
Du skal være opmærksom på, at den bestilte listes standardbestillingstype er tal, men du kan ændre dette ved at bruge type-attributten. Type-attributten giver dig mulighed for at bestemme, hvilket element der skal bestille din liste. Du har mulighed for at bruge alfabetet (store eller små bogstaver), tal eller romertal (store eller små bogstaver).
<ol type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Tilføjelse af type-attributten til
- -tagget gengiver følgende opdaterede visning:
- -tagget for hvert listeelement:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>Denne kode gengiver følgende visning:
Standard punktopstil for en uordnet liste er en disk. Tidligere kunne du bruge en type-attribut til at indstille punktformen for en uordnet liste. Men den uordnede listetypeattribut er nu en forældet attribut. Det anbefalede alternativ til uordnet listestil er egenskaben CSS-listestil-type.
<style>
ul { list-style-type: square; }
</style>Koden ovenfor opdaterer visningen til følgende:
Egenskaben CSS-listestil-type giver dig mulighed for at bruge en samling af forskellige punktopstillinger, herunder cirkler, brugerdefinerede billeder, ikoner eller symboler. Med CSS, der ændrer layoutet af listeelementer, kan du endda bruge uordnede lister til at oprette navigationslinjer.
Indlejrede lister
En indlejret liste er et listeelement, der er en del af en anden liste. Du kan oprette en indlejret liste ved hjælp af en kombination af ordnede og/eller uordnede listeelementer. Disse strukturer kan repræsentere mere komplekse hierarkier.
<H3>Chicken Pasta Insturctions</H3>
<ol>
<li>Boil pasta.</li>
<li>
Season chicken breast.
<ul>
<li>salt and pepper</li>
<li>paprika</li>
<li>garlic powder</li>
<li>Italian seasoning</li>
</ul>
</li>
<li>Heat olive oil in pot over medium-high heat.</li>
<li>Add chicken breast to pan and cook for 5 minutes.</li>
<li>Add heavy cream and parmesan cheese to empty pot.</li>
<li>Add pasta and slice chicken to cream sauce.</li>
</ol>Denne kode gengiver følgende visning:
3. Beskrivelsesliste
Beskrivelseslisteelementet giver dig mulighed for at oprette en liste over termer og deres tilknyttede detaljer. Tagget
- giver dig mulighed for at oprette en ny beskrivelsesliste, som du skal bruge sammen med elementerne
- (beskrivelsesudtryk) og
- (beskrivelsesdetaljer).
<h3>Popular Laptops</h3>
<dl>
<dt>MacBook Pro</dt>
<dd>
Provides up to 22 hours of battery life,
has an advanced camera, and a magic keyboard with touch ID.
</dd><dt>MSI GS76 Stealth</dt>
<dd>
A powerful gaming laptop with supercharged graphics and customized keys.
</dd>
</dl>Ovenstående kode gengiver følgende visning:
Organiser dit indhold med den rigtige HTML-liste
HTML-listen, som du vælger at bruge i dit webudviklingsprojekt, bør afhænge af det indhold, du ønsker at præsentere for dine brugere. For eksempel, hvis du vil oprette en sekventiel liste, såsom trinene til at forberede et måltid eller fuldføre en opgave, så er en bestilt liste din bedste mulighed.
Men hvis du ønsker at gruppere relaterede oplysninger, der ikke kræver en række trin (såsom en tjekliste), så ville en uordnet liste være en mere anvendelig mulighed. Desuden, hvis du ønsker at oprette en ordliste eller en liste over ofte stillede spørgsmål, så er en beskrivelsesliste det bedre valg.
Ud over type-attributten er der to andre attributter, som du kan bruge med
- -tagget: start og reversed.
Start-attributten giver dig mulighed for at begynde at bestille fra enhver position ved hjælp af en heltalsværdi. Hvis du f.eks. tilføjer start=”3″ til
- -tagget uden at angive en type, vil det begynde at bestille listen fra nummer tre. Hvis du tildeler en type=”a” eller en type=”I”, begynder den at bestille fra henholdsvis c eller III.
<ol type="I" start="3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Ovenstående kode gengiver følgende visning:
Den omvendte attribut giver dig mulighed for at vende rækkefølgen af listen. Den accepterer en boolesk værdi, og dens standardværdi er falsk.
<ol reversed="true">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Denne kode producerer følgende output i browseren:
2. Uordnet liste
Den uordnede liste giver dig mulighed for at gruppere relaterede varer, hvis rækkefølge ikke er signifikant. Som standard bruger en browser et punkttegn til at mærke hvert element.
For at oprette en ny uordnet liste skal du bruge
- -tagget som et overordnet element og
- -tagget for hvert listeelement:
- -tagget grupperer og indeholder