Voorbeelddefinitielijstcode:

Definitielijsten Term 1 Definitie van Term 1 Term 2 Definitie van Term 2

Resultaat:

Geneste lijsten

Er zijn situaties waarin u uw eigen lijst in een lijstelement moet opnemen. Dergelijke lijsten worden multi-level of genest genoemd. Hiervoor wordt gebruik gemaakt van een combinatie van reeds bij ons bekende list-tags.

Voorbeeldcode voor een lijst met meerdere niveaus:

Geneste lijsten

• Dieren
  1. katten
  2. honden
• Planten
  1. bomen
  2. bloemen

Met lijsten met opsommingstekens kunt u grote tekst in afzonderlijke blokken opsplitsen, die elk beginnen met een opsommingsteken (meestal een kleine punt). Dit vestigt de aandacht van de lezer op de tekst en vergroot de leesbaarheid ervan.

Met element

De volgende kenmerken zijn geassocieerd:
• op de plaats waar het voorkomt
  , voegt de browser automatisch een regeleinde toe;
  • de lijst heeft streepjes aan de boven- en onderkant;
  • Standaard worden markeringen weergegeven als een gevulde cirkel;
  • Elk lijstelement wordt naar rechts verschoven ten opzichte van de hoofdtekst.

  Figuur 1 toont het resultaat van het voorbeeld en illustreert de bovenstaande kenmerken van de lijst met opsommingen.

  Rijst. 1. Lijstweergave met opsommingstekens

  Type markering

  Markeringen kunnen drie vormen aannemen: gevulde cirkel (standaard), open cirkel en vierkant. Om het markeringstype te selecteren, gebruikt u de eigenschap list-style-type of de universele eigenschap list-style (voorbeeld 1). De volgende waarden zijn van toepassing:

  • schijf - markeringen in de vorm van een gevulde cirkel;
  • cirkel - markeringen in de vorm van een open cirkel;
  • vierkant - vierkante markeringen.

  Voorbeeld 1: Het uiterlijk van een markering wijzigen

  • Sepulki
  • Sepulcarië
  • Sepulatie
  
  
  

  Het voorbeeld laat zien hoe u een lijst met opsommingstekens kunt maken met een klein, effen gekleurd vierkantje als opsommingstekenpictogram. Hoewel het aantal waarden beperkt is tot drie, betekent dit niet dat we slechts drie soorten markers tot onze beschikking hebben. Er zijn veel speciale tekens die met succes als markeringspictogram kunnen fungeren. Schroef ze er rechtstreeks op

• Het werkt niet, dus je zult er omheen moeten werken. Om dit te doen, verbergt u de lijstmarkeringen met behulp van de list-style eigenschap met de waarde none en in de tekst vóór de inhoud
• We voegen ons eigen karakter toe met behulp van het ::before pseudo-element. In voorbeeld 2 fungeert een driehoek als een dergelijke markering.

  Voorbeeld 2: Gebruik::before

  • Sepulki
  • Sepulcarië
  • Sepulatie
  
  
  

  Het resultaat van dit voorbeeld wordt getoond in Fig. 2. Omdat het gebruik van de lijststijleigenschap met de waarde none de markeringen helemaal niet verwijdert, maar ze alleen aan het zicht verbergt, lijkt de lijst naar rechts verschoven. Om van deze functie af te komen, wordt in het voorbeeld de eigenschap text-indent met een negatieve waarde toegevoegd. Zijn taak is om de tekst één teken naar links te verplaatsen.

  

  Rijst. 2. Willekeurige markeringen in de lijst

  Het teken hoeft niet in hexadecimaal formaat te zijn; het kan rechtstreeks in de tekst worden ingevoegd. Het belangrijkste is dat het document in UTF-8-codering wordt opgeslagen en dat de editor dit ondersteunt. De karakters zelf en hun codes kunnen bijvoorbeeld uit LibreOffice Writer worden gehaald (Fig. 3).

  

  Rijst. 3. Een symbool selecteren in LibreOffice

  Lijst met handgetekende markeringen

  Met Stijlen kunt u elke geschikte afbeelding als markering instellen via de eigenschap list-style-image. De waarde is een relatief of absoluut pad naar het grafische bestand, zoals weergegeven in voorbeeld 3.

  Voorbeeld 3: Een afbeelding als markering gebruiken

  • Sepulki
  • Sepulcarië
  • Sepulatie
  
  
  

  Het is het beste om een ​​kleine tekening te kiezen, zodat de lijstelementen niet in bijschriften worden omgezet. In afb. Figuur 4 toont het resultaat van een voorbeeld van het gebruik van kleine afbeeldingen als markeringen.

  

  Rijst. 4. Tekenen als markering

  Het gebruik van list-style-image heeft enkele nadelen:

  • het patroon kan niet omhoog of omlaag worden verplaatst;
  • De positie van de afbeelding ten opzichte van de tekst kan in verschillende browsers verschillen.

  Deze tekortkomingen kunnen worden vermeden met behulp van de achtergrondeigenschap, deze stelt de achtergrondafbeelding in. Voor elk lijstelement

• we verwijderen de originele markeringen en stellen de achtergrondafbeelding in zonder herhaling. En zodat de tekst niet bovenop de afbeelding verschijnt, verschuiven we deze naar rechts met behulp van opvulling-links (voorbeeld 4).

  Voorbeeld 4: Achtergrond gebruiken

  Ul ( marge-links: -1em; ) li ( lijststijl: geen; achtergrond: url(images/bullet.png) no-repeat 0 2px; opvulling-links: 20px; )

  Positie van tekst en opsommingsteken

  Er zijn twee manieren om een ​​markering ten opzichte van de tekst te plaatsen: de markering wordt buiten de rand van de lijstelementen verplaatst of rond de tekst gewikkeld (Afb. 5).

  binnen	buiten

  Rijst. 5. Plaatsing van markeringen ten opzichte van tekst

  Gebruik de eigenschap list-style-position om de positie van markeringen te bepalen. Het heeft twee betekenissen: buiten - opsommingstekens worden buiten het tekstblok geplaatst (dit is de standaardwaarde) en binnen - opsommingstekens maken deel uit van het tekstblok en worden weergegeven in het lijstitem (voorbeeld 5).

  Voorbeeld 5: De positie van markeringen wijzigen

  • Controleer voordat u begint of de apparatuur die bij de 3BM-set is geleverd, is meegeleverd.
  • Indien één of meerdere randapparatuur ontbreekt, dient u direct contact op te nemen met de technische staf van de CC.
  • Nadat u uw werkgebied visueel heeft geïnspecteerd, kunt u voorzichtig de stroom naar de 3BM inschakelen.
  
  
  

  Het resultaat van dit voorbeeld wordt getoond in Fig. 6.

  

  Goededag!

  In dit artikel leert u over alle mogelijkheden van lijsten, begrijpt u hoe u een genummerde lijst maakt en master-tags waarmee u een eenvoudige lijst met opsommingstekens kunt omzetten in een interessantere en opvallendere lijst met willekeurige opsommingstekens. Na voltooiing van de les heeft u inzicht in waar lijsten worden gebruikt en onder welke omstandigheden ze kunnen worden gebruikt.

  Dit artikel is het derde in deze korte cursus over de basisprincipes van HTML. Voordat u deze les leest, raad ik u aan de vorige twee door te nemen:

  Het artikel is net begonnen en je merkt al dat er een standaardlijst met opsommingen wordt gebruikt. Op mijn website ziet het er vrij simpel uit: aan de linkerkant staat een klein streepje met een lijn en een vierkante markering. Verderop in het artikel zullen we in detail bekijken welke soorten markers er zijn, hoe je cijfers kunt maken en ook hoe je je eigen marker kunt maken.

  In elk deel van het artikel gaat het maken van bepaalde lijsten gepaard met gedetailleerde uitleg over het invoegen van een bepaalde lijst.

  1. Lijsten met opsommingstekens in HTML

  Dit type lijst wordt gebruikt om in de tekst een reeks elementen met vergelijkbare betekenissen op te sommen. Dit kan een lijst met links zijn die betrekking hebben op hetzelfde onderwerp, of een gedetailleerde uitleg voor afzonderlijke delen van de tekst. Maar laten we eens kijken hoe lijsten met opsommingstekens er in code uitzien:

  En zo ziet het eruit in de browser:

  Rijst. 1.1.

  Standaardweergave van ongeordende HTML-lijst met opsommingstekens in de browser

  1.1 Standaardopsommingstekens voor lijsten met opsommingstekens

  In de afbeelding hierboven (Figuur 1.1.) zie je cirkels aan het begin van elk menu-item. Dit is de markering. Standaard wordt het weergegeven als een gevulde cirkel in de browser. Er zijn verschillende soorten markeringen in HTML: gevulde cirkel, lege cirkel en vierkant. Ze vereisen geen CSS of afbeeldingen van derden:

  1.2 Lijstmarkering in de vorm van een lege cirkel

  <U kent de attribuutwaarden, maar laten we nu eens kijken hoe u een HTML-lijst met opsommingstekens in code kunt maken. Uit de bovenstaande tabel hebben we de tweede waarde "cirkel" gekozen voor het typekenmerk en deze ingesteld op onze lijst met opsommingstekens: <html> <hoofd > titel ><Voorbeeld van een lijst met opsommingstekens met een lege cirkelmarkering </titel> </hoofd> <lichaam > p><Sterren: </p> <ul type = "cirkel" > li ><Sirius <ul type = "cirkel" >/li><Sirius <ul type = "cirkel" > Arcturus<Sirius <ul type = "cirkel" > Pollux<Sirius <ul type = "cirkel" > Betelgeuze<Sirius <Zon </ul> </lichaam>

  /html>

  Laten we meteen kijken hoe deze code er in de browser uit zal zien:

  Rijst. 1.2.

  Weergave van een lijstmarkering als een cirkel in de browser

  1.3 Lijstmarkering in de vorm van een vierkant

  Rijst. 1.3.

  Weergave van een lijstmarkering als vierkant in de browser Belangrijke opmerking:

  Deze methode wordt niet langer gebruikt om stijlen voor lijsten met opsommingstekens te maken. Er is een duidelijke scheiding tussen CSS (lees wat CSS is) en HTML. HTML is voor opmaak en CSS is voor het creëren van een aantrekkelijk uiterlijk.De code die dit kenmerk bevat bij het opgeven van het huidige documenttype als HTML5 ("

  "), geeft een foutmelding tijdens de validatie. Als je nog niet hebt gehoord wat validatie is, dan is dit de plek voor jou.

  De fout zal als volgt zijn:

  Rijst. 1.4.

  Fout in de validator bij gebruik van het kenmerk 'type' van een lijst

  We hebben de lijsten met opsommingen gesorteerd. Laten we nu verder gaan met genummerde lijsten en dan kijken naar geneste lijsten en verschillende kant-en-klare voorbeelden die het vaakst op echte sites worden gebruikt.

  2. Genummerde lijsten in HTML

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <U kent de attribuutwaarden, maar laten we nu eens kijken hoe u een HTML-lijst met opsommingstekens in code kunt maken. Uit de bovenstaande tabel hebben we de tweede waarde "cirkel" gekozen voor het typekenmerk en deze ingesteld op onze lijst met opsommingstekens: <html> <hoofd > In tegenstelling tot het vorige type lijsten hebben genummerde lijsten één belangrijk kenmerk: ze worden automatisch genummerd. Dit is handig als u een grote lijst moet nummeren. Als u dit handmatig doet, kost dit veel tijd en kunt u nog steeds in de war raken. Met behulp van de tag wordt een genummerde lijst opgegeven. Hoe het er in de praktijk uitziet:<Voorbeeld van een lijst met opsommingstekens met een lege cirkelmarkering </titel> </hoofd> <lichaam > Voorbeeld van een genummerde lijst:<Sterren: <Voorbeeld van een standaard genummerde lijst <ul type = "cirkel" > Van één tot vijf:<Sirius <ul type = "cirkel" > ol ><Sirius <ul type = "cirkel" > Eerst<Sirius <ul type = "cirkel" > Seconde<Sirius <ul type = "cirkel" > Derde<Sirius <Vierde </ul> </lichaam>

  Vijfde

  /ol>

  Zo ziet een genummerde lijst eruit met standaard browserinstellingen:

  Rijst. 2.1.

  Genummerde lijst in browser met standaardinstellingen

  Net als zijn voorganger (lijst met opsommingstekens) heeft het zijn eigen stijlen voor het weergeven van getallen. Normale nummering is niet het enige type opsommingsteken voor een genummerde lijst in HTML.	2.1 Standaardopsommingstekens voor genummerde lijsten	Hier hebben we niet de keuze uit drie soorten markers, maar uit vijf:
  Markernaam	1	attribuutwaarde 'type' Lijstvoorbeeld
  Markeringen in de vorm van Arabische cijfers	Badminton	Honkbal Markeringen in de vorm van kleine Latijnse letters A
  Chomolungma	Chogori	Kanchenjunga Markeringen in de vorm van Latijnse hoofdletters A
  Top keldert	Tantrum steegje	Insano Romeinse cijfermarkeringen in kleine letters i
  Filippijnse Zee	Arabische Zee	koraal zee Markeringen voor Romeinse cijfers in hoofdletters I

  Rood

  Groente

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <U kent de attribuutwaarden, maar laten we nu eens kijken hoe u een HTML-lijst met opsommingstekens in code kunt maken. Uit de bovenstaande tabel hebben we de tweede waarde "cirkel" gekozen voor het typekenmerk en deze ingesteld op onze lijst met opsommingstekens: <html> <hoofd > Blauw<Voorbeeld van een lijst met opsommingstekens met een lege cirkelmarkering </titel> </hoofd> <lichaam > We beginnen met nummeren vanaf twaalf:<Sterren: <ol type = "a" start = "12" > <ul type = "cirkel" > Twaalf<Sirius <ul type = "cirkel" > Dertien<Sirius <ul type = "cirkel" > Veertien<Sirius <ul type = "cirkel" > Vijftien<Sirius <ul type = "cirkel" > Zestien<Sirius <Vierde </ul> </lichaam>

  Zo zal het op de echte site verschijnen:

  Rijst. 2.2.

  Nummering vanaf een willekeurig getal in een genummerde lijst

  In de afbeelding hierboven hebben we de lijst genummerd vanaf twaalf, terwijl we markeringen hebben gemaakt in de vorm van kleine Latijnse letters. Ik denk dat het nu duidelijk is geworden hoe je deze attributen in je projecten kunt gebruiken.

  Laten we nu verder gaan met geneste HTML-lijsten.

  3. Hoe je een (geneste) lijst met meerdere niveaus maakt in HTML

  Op de site worden lijsten met meerdere niveaus gebruikt om menu's samen te stellen. Dit menu lijkt meestal een neerwaartse vervolgkeuzelijst (les over) of een linker- of rechter vervolgkeuzelijst te zijn. Met dergelijke menu's kunt u andere menu-elementen in een compacte vorm opslaan.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  <U kent de attribuutwaarden, maar laten we nu eens kijken hoe u een HTML-lijst met opsommingstekens in code kunt maken. Uit de bovenstaande tabel hebben we de tweede waarde "cirkel" gekozen voor het typekenmerk en deze ingesteld op onze lijst met opsommingstekens: <html> <hoofd > Met automodellen als voorbeeld zullen we een lijst met meerdere niveaus in HTML bouwen:<Voorbeeld van een lijst met opsommingstekens met een lege cirkelmarkering </titel> </hoofd> <Lijst met geneste HTML-opsommingstekens <ul type = "cirkel" > ul><Lijst met geneste HTML-opsommingstekens <ul type = "cirkel" > Citroën<Sirius <ul type = "cirkel" > Berlijngo<Sirius <ul type = "cirkel" > C1<Sirius <ul type = "cirkel" > C2<Sirius <ul type = "cirkel" > C3 Picasso<Sirius <Zon <Sirius <ul type = "cirkel" > C4 Grote Picasso<Sirius <ul type = "cirkel" > KIA<Sirius <ul type = "cirkel" > Toyota<Sirius <ul type = "cirkel" > Audi<Sirius <Zon </ul> </lichaam>

  Lexus

  Merk op hoe de lijst met meerdere niveaus er in de browser uitziet:

  Rijst. 3.1.

  Voorbeeld van een lijst met meerdere niveaus in HTML

  We hebben een lijst met meerdere niveaus gemaakt met behulp van opsommingstekens (tag

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  <U kent de attribuutwaarden, maar laten we nu eens kijken hoe u een HTML-lijst met opsommingstekens in code kunt maken. Uit de bovenstaande tabel hebben we de tweede waarde "cirkel" gekozen voor het typekenmerk en deze ingesteld op onze lijst met opsommingstekens: <html> <hoofd >). Er verscheen een lijst met meerdere niveaus met Citroen-modellen met andere markeringen. De hoofdlijst bevat opsommingstekens en de lijst op het tweede niveau heeft lege cirkels. Maar zoals u zich herinnert, kunnen we met behulp van het attribuut “type” markeringen opnieuw definiëren (het is beter om in te stellen ).<Voorbeeld van een lijst met opsommingstekens met een lege cirkelmarkering </titel> </hoofd> <Lijst met geneste HTML-opsommingstekens <ul type = "cirkel" > Maar we kunnen lijsten met meerdere niveaus combineren met genummerde lijsten en lijsten met opsommingstekens, zoals deze:<Voorbeeld van een standaard genummerde lijst <ul type = "cirkel" > Genummerde lijsten, lijsten met opsommingstekens en lijsten met meerdere niveaus in HTML<Lijst met geneste HTML-opsommingstekens <ul type = "cirkel" > Eerste groep tulpen<Sirius <Zon <Sirius <ul type = "cirkel" > Eerste klas<Lijst met geneste HTML-opsommingstekens <ul type = "cirkel" > Eenvoudige vroege tulpen<Sirius <Zon <Sirius <Vierde <Sirius <Zon </ul> </lichaam>

  Tweede klasse

  Terry tulpen

  In het bovenstaande voorbeeld hebben we dubbele nesting (2 niveaus). Eerst is een lijst van twee soorten tulpen opgenomen; deze hebben we genummerd. Vervolgens bevat elk item in de genummerde lijst een lijst met opsommingstekens.

  Laten we eens kijken hoe het eruit ziet in de browser:

  Rijst. 3.2.

  Voorbeeld van een genummerde lijst met meerdere niveaus tot een lijst met opsommingstekens in de browser

  4. Nuttig materiaal over HTML-lijsten

  Dit is informatie waarvoor inzicht in CSS-eigenschappen vereist is. Om dit te doen, raad ik aan de volgende lessen te bestuderen: . Alle voorbeelden worden direct met de broncode weergegeven en onderverdeeld in de tabbladen HTML (structuur), CSS (stijlen) en Resultaat (resultaat).

  4.1 Hoe maak je van een HTML-lijst een string?

  4.3 Een lijst centreren in HTML

  Het lijstitem is een blokelement en moet dus worden gecentreerd met behulp van opvulling. Maar er is één belangrijk punt: we moeten expliciet de breedte specificeren om de uitlijning te laten werken:

  4.4 Hoe maak je een lijst in HTML met afbeeldingen

  Slechts één CSS-eigenschap, list-style-image , is voldoende. Geef in de URL het adres vóór het pictogram op. Ik wil alleen opmerken dat het beter is om meteen een kleine afbeelding te selecteren, omdat de hoogte van de lijstregel ervan afhangt:

  4.5 Lijst met opsommingstekens HTML uw opsommingsteken

  In dit geval moet u vooraf lettertypepictogrammen aansluiten (bijvoorbeeld FontAwesome ). Vervolgens kunt u elk pictogram maken in plaats van een standaardmarkering:

  4.6 Hoe maak je een lijst in HTML in meerdere kolommen?

  Om een ​​lijst in meerdere kolommen te maken, gebruiken we de eigenschap CSS column-count (de eigenschap wordt alleen ondersteund in de volgende browsers: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). U moet ook de hoogte van de lijst instellen om de opsplitsing in meerdere kolommen te zien:

  5. Oefen met het werken met lijsten

  In onderstaande video zie je al het werk met HTML-lijsten in de praktijk:

  Om de ontvangen informatie te consolideren, raad ik aan om alle stappen handmatig uit te voeren. Probeer verschillende opsommingstekens voor lijsten, maak genummerde lijsten en ga vervolgens verder met (geneste) lijsten met meerdere niveaus en experimenteer ermee.

  Hier eindigen we met de lijsten en gaan we verder met de volgende les over afbeeldingen.

  Oefen meer!

  Les 3. Hoe maak je een lijst in HTML 4.91 /5 (98.26%) 23 stemmen

  HTML ondersteunt drie verschillende soorten lijsten, die elk hun eigen lijsttypen hebben:

  • – een genummerde (met cijfers of letters) lijst, waarvan elk element een serienummer (letter) heeft;
    1. – een lijst met opsommingstekens (niet genummerd), naast elk element waarvan een markering is geplaatst (in plaats van numerieke of alfabetische tekens die een serienummer aangeven);

       • – een definitielijst bestaat uit naam/waarde-paren, inclusief termen en definities.

       Genummerde lijsten

       In een genummerde lijst voegt de browser automatisch elementnummers in, beginnend met een bepaalde waarde (meestal 1). Hierdoor kunt u lijstitems invoegen en verwijderen zonder de nummering te verstoren, aangezien de resterende nummers automatisch opnieuw worden berekend.
       Genummerde lijsten worden gemaakt met behulp van een blokelement

       (uit de Engelse geordende lijst - genummerde lijst). Naast de container
       voor elk lijstitem wordt een element geplaatst
       1. (van het Engelse lijstitem - lijstitem). De standaardinstelling is een genummerde lijst met Arabische cijfers.
          Label
          heeft de volgende syntaxis:
          1. onderdeel 1
          2. onderdeel 2
          3. onderdeel 3

          Genummerde lijstitems moeten meerdere lijstitems bevatten, zoals weergegeven in het volgende voorbeeld:

          Voorbeeld: genummerde lijst

          • Probeer het zelf »

          Stap voor stap instructies

          1. Pak de sleutel
          2. Steek de sleutel in het slot
          3. Draai de sleutel twee slagen
          4. Haal de sleutel uit het slot
          5. Open de deur

          Stap voor stap instructies

          1. Pak de sleutel
          2. Steek de sleutel in het slot
          3. Draai de sleutel twee slagen
          4. Haal de sleutel uit het slot
          5. Open de deur

          Soms kom je dit argument tegen als je naar bestaande HTML-codes kijkt type in elementen

          , die wordt gebruikt om het type nummering aan te geven (letters, Romeinse en Arabische cijfers, enz.). Syntaxis:

          Hier: type – lijst symbolen:

          • A - Latijnse hoofdletters (A, B, C...);
          • a - kleine Latijnse letters (a, b, c...);
          • I - grote Romeinse cijfers (I, II, III...);
          • i - kleine Romeinse cijfers (i, ii, iii...);
          • 1 - Arabische cijfers (1, 2, 3 ...) (standaard gebruikt).

          Als u wilt dat de lijst met een ander getal dan 1 begint, moet u dit opgeven met behulp van het attribuut begin label

          .
          Het volgende voorbeeld toont een genummerde lijst met grote Romeinse cijfers en een startwaarde van XLIX:

          Het nummeren kan ook worden gestart met behulp van het attribuut waarde, die aan het element wordt toegevoegd

          1. als volgt:

          7. In dit geval wordt de doorlopende nummering van de lijst onderbroken en vanaf dit punt begint de nummering opnieuw, in dit geval vanaf zeven.

             Voorbeeld van attribuutgebruik waarde label

          8. , waarmee u het nummer van een bepaald lijstelement kunt wijzigen:

             In dit voorbeeld zou het "Eerste Lijstitem" nummer 1 zijn, het "Tweede Lijstitem" nummer 7 en het "Derde Lijstitem" nummer 8.

             Genummerde lijsten opmaken met CSS

             Om lijstnummers te wijzigen, moet u de eigenschap gebruiken lijst-stijl-type CSS-stijlbladen:

             Genummerde lijststijlen

             Voorbeeld	Betekenis	Beschrijving
             a, b, c	lagere alfa	Kleine letters
             A, B, C	bovenste alfa	Hoofdletters
             ik, ii, iii	lager-romeins	Romeinse cijfers in kleine letters
             Ik, II, III	Opper-Romeins	Romeinse cijfers in hoofdletters

             Voorbeeld: een CSS-eigenschap toepassen lijst-stijl-type

             Lijsten met opsommingstekens

             Lijsten met opsommingstekens zijn in wezen vergelijkbaar met genummerde lijsten, alleen bevatten ze geen opeenvolgende nummering van items. Lijsten met opsommingstekens worden gemaakt met behulp van een blokelement

             (uit de Engelse ongeordende lijst - ongenummerde lijst). Elk lijstelement begint, net als bij genummerde lijsten, met een tag
             • . De browser laat elk lijstitem inspringen en geeft automatisch opsommingstekens weer.
               Label
               heeft de volgende syntaxis:
               • Eerste punt
               • Tweede punt
               • Derde punt

               In het volgende voorbeeld ziet u dat er standaard vóór elk lijstitem een ​​kleine markering in de vorm van een gevulde cirkel wordt toegevoegd:

               Binnen een label

               • Het is niet nodig om alleen tekst te plaatsen; het is acceptabel om elk element van streaming-inhoud (links, paragrafen, afbeeldingen, enz.)

                 Geneste lijsten

                 Elke lijst kan in een andere lijst worden genest. Binnen een element
               • Het is toegestaan ​​om een ​​geneste lijst of een lijst op het tweede niveau te maken. Om een ​​lijst te nesten, beschrijft u de nieuwe lijst binnen het element
               • reeds bestaande lijst. Wanneer u de ene lijst met opsommingstekens in een andere nestt, verandert de browser automatisch de opsommingstekenstijl voor de lijst op het tweede niveau. Elke lijst kan in een andere lijst worden genest. Het volgende voorbeeld demonstreert de structuur van een lijst met opsommingstekens die is genest in het tweede item van een genummerde lijst.

                 Voorbeeld: geneste lijsten

                 • Probeer het zelf »
                 • Maandag
                   1. Stuur e-mail
                   2. Bezoek aan de redactie
                      • Een thema kiezen
                      • Decoratief ontwerp
                      • Eindrapport
                   3. Avond bekijken van berichten
                 • Dinsdag
                   1. Schema herzien
                   2. Afbeeldingen verzenden
                 • Woensdag...
                 • Maandag
                   1. Stuur e-mail
                   2. Bezoek aan de redactie
                      • Een thema kiezen
                      • Decoratief ontwerp
                      • Eindrapport
                   3. Avond bekijken van berichten
                 • Dinsdag
                   1. Schema herzien
                   2. Afbeeldingen verzenden
                 • Woensdag...

                 Lijsten met opsommingstekens opmaken

                 Gebruik de eigenschap om het uiterlijk van de lijstmarkering te wijzigen lijst-stijl-type CSS-stijlbladen:

                 In het volgende voorbeeld ziet u verschillende stijlen van lijsten met opsommingstekens:

                 Voorbeeld: Lijststijlen voor opsommingstekens

                 • Probeer het zelf »
                 • Koffie
                 • Koffie
                 • Koffie
                 • Koffie

                 Schijf:

                 • Koffie
                 • Melk

                 Cirkel:

                 • Koffie
                 • Melk

                 Vierkant:

                 • Koffie
                 • Melk

                 Geen:

                 • Koffie
                 • Melk

                 Grafische markeringen.

                 In HTML is het mogelijk om een ​​lijst met grafische markeringen te maken. Het is één ding als de lijstmarkeringen standaardcirkels of vierkanten zijn, en iets heel anders als de ontwikkelaar zelf de markering selecteert in overeenstemming met het paginaontwerp. Om lijstitems mooi te maken, worden vaak kleine afbeeldingen gebruikt.
                 Om een ​​gewone markering te vervangen door een grafische markering, vervangt u de eigenschap lijst-stijl-type per woning lijst-stijl-afbeelding en geef de URL van de afbeelding aan:

                 Voorbeeld: grafische markeringen

                 • Probeer het zelf »

                 Tekens van de dierenriem

                 • Stier
                 • Tweeling

                 Tekens van de dierenriem

                 • Ram
                 • Stier
                 • Tweeling

                 Lijsten met definities (beschrijvingen)

                 Definitielijsten zijn erg handig voor het maken van bijvoorbeeld uw persoonlijke termenwoordenboek. Elk definitielijstitem bestaat uit twee delen: de term en de definitie ervan.
                 Je plaatst de hele lijst in een element

                 (uit de Engelse definitielijst - lijst met definities). Het bevat tags

                 (van de Engelse definitieterm - een gedefinieerd woord, term) en

                 (uit de Engelse definitiebeschrijving - beschrijving van de term die wordt gedefinieerd).
                 Lijsten met definities worden vaak gebruikt in wetenschappelijke, technische en educatieve publicaties en worden gebruikt om woordenlijsten, woordenboeken, naslagwerken, enz. samen te stellen.

                 De algemene structuur van de lijst met beschrijvingen is als volgt:

                 Eerste termijn

                 Beschrijving van de eerste term

                 Tweede termijn

                 Beschrijving van de tweede term

                 Het volgende voorbeeld toont een mogelijk gebruik van een definitielijst:

                 Voorbeeld: definitielijst

                 • Probeer het zelf »

                 World Wide Web - uit het Engels. Het World Wide Web (WWW) is een gedistribueerd systeem dat toegang biedt tot gerelateerde documenten die zich op verschillende computers bevinden die met internet zijn verbonden.

                 Het internet is een verzameling netwerken die één enkel uitwisselingsprotocol gebruiken om informatie te verzenden.

                 Een website is een verzameling afzonderlijke webpagina's die met elkaar zijn verbonden door links en een uniform ontwerp.

                 Internet

                 Wereld wijde web

                 - uit het Engels Het World Wide Web (WWW) is een gedistribueerd systeem dat toegang biedt tot gerelateerde documenten die zich op verschillende computers bevinden die met internet zijn verbonden.

                 — een reeks netwerken die één enkel uitwisselingsprotocol gebruiken om informatie te verzenden.

                 Website

                 - een reeks individuele webpagina's die met elkaar zijn verbonden door links en een uniform ontwerp.

                 Standaard wordt de tekst van de term tegen de linkerrand van het browservenster gedrukt en de beschrijving van de term bevindt zich hieronder en is naar rechts verschoven.

                 Lijsten zijn een belangrijk onderdeel van de inhoud, omdat ze helpen bij het ordenen van informatie. Tekst in lijsten wordt beter waargenomen en is gemakkelijker te onthouden.

                 De eenvoudigste is dat er voor elk van de elementen een markering staat: een cirkel, vierkant of cirkel. De volgorde van de items in een lijst met opsommingstekens is niet belangrijk.
                 • .
                   Om het te maken, hoeft u slechts twee tags te gebruiken:
                   • .
                     • is een container die een lijst bevat waarvan de elementen worden gespecificeerd door de tag
                     • Lijst met opsommingstekens
                     • Steen
                     
                     
                     

                     Schaar Papier Standaard is de lijstmarkering een zwarte cirkel (

                     schijf type). Door toe te voegen aan de tag attribuut en door er de juiste waarde aan toe te kennen, kan de markering worden gewijzigd in een cirkel ( cirkel).

                     ) of zwart vierkant (

                     vierkant

                     De eenvoudigste is dat er voor elk van de elementen een markering staat: een cirkel, vierkant of cirkel. De volgorde van de items in een lijst met opsommingstekens is niet belangrijk.
                     1. Het verschilt van gemarkeerd doordat de volgorde van de elementen erin belangrijk is, en daarom worden hier in plaats van een markering opeenvolgende cijfers of letters gebruikt. U hoeft zich geen zorgen te maken over de volgorde in de lijst: de browser zorgt voor deze taak. Als u de lijst wijzigt (een item verwijdert of toevoegt dat niet in de juiste volgorde staat), zal de browser deze opnieuw berekenen en correct weergeven.
                        Tags worden gebruikt om genummerde lijsten te maken
                        1. . Houder
                           definieert het begin en einde van de lijst, tag
                           .
                           1. is een container die een lijst bevat waarvan de elementen worden gespecificeerd door de tag
                           2. Lijst met opsommingstekens
                           3. Steen
                           
                           
                           

                           

                           vervangen door

                           Genummerde lijst

                           1. type. Met dit kenmerk kunt u de lijst niet alleen nummeren met Arabisch, maar ook met Romeinse cijfers of Latijnse letters met verschillende hoofdletters. type ondersteunt waarden 1 (standaard), a, A, i, I (probeer er zelf mee te experimenteren).

                           2. begin. Nummering hoeft niet altijd met één te beginnen. Met dit kenmerk kunt u de beginwaarde instellen: het nummer van het eerste element van de lijst. Daarin kunt u opgeven dat de rapportage bijvoorbeeld begint met het cijfer 100 of de letter K.

                           3. teruggedraaid. Als de lijst niet van 1 naar 10 moet gaan, maar van 10 naar 1, dan moet dit attribuut gebruikt worden. Als dit is opgegeven, is de nummering in omgekeerde volgorde.

                           Om een ​​willekeurig nummer toe te kennen aan een element in het midden van de lijst, moet je dit in de tag gebruiken

                           1. schijf :

                           2. Het vijfenveertigste element na het achtendertigste

                           Door het nummer van één element in het midden van de lijst te wijzigen, wijzigt u de nummering van alle daaropvolgende elementen. Het rapport begint met de waarde in het waarde-attribuut. Als u bijvoorbeeld aan element 18 het nummer 35 hebt toegewezen, zullen de daaropvolgende elementen niet de nummers 19, 20, 21 hebben, maar 36, 37, 38.

                           Lijst met definities

                           Niet zo'n bekend type lijst als hierboven besproken. Bestaat uit termen en hun definities. Gemaakt met tags:

                           - een container met daarin een lijst.

                           - termtag.

                           - definitietag

                           Het toepassingsgebied van lijsten met definities zijn woordenlijsten, naslagwerken, tests, woordenboeken en andere ruime lijsten van het type "Term - uitleg".

                           Hier is een voorbeeldlijst met definities:

                           Beschrijving

                           De basiseenheid van de opmaaktaal, bij iedereen bekend als 'Tag'.

                           Attribuut

                           Een eigenschap van een tag die extra opties voor tekstopmaak geeft.

                           Label

                           Eén enkele tag die niet gesloten hoeft te worden.

                           
                           
                           

                           

                           Een lijst bestaande uit in elkaar geneste lijsten. Kan lijsten van verschillende typen bevatten. De moeilijkheid bij het maken ligt in het handhaven van de juiste nesting van tags, omdat het gemakkelijk is om in de war te raken in een structuur met meerdere niveaus.

                           Hier is een voorbeeld van een lijst met meerdere niveaus:

                           Programmeertalen zijn onderverdeeld in:

                           • Structureel
                           1. Pascal
                           2. Oberon
                           1. Voorgeborchte
                           • Object-georiënteerd
                           1. Java
                           • Functioneel
                           1. Lisp
                           2. Python