Listen

Listen sind häufiger, als Sie vielleicht denken. Wenn Sie schon einmal an einem Programmierkurs teilgenommen haben, war das erste Projekt möglicherweise die Erstellung eines Einkaufsliste oder eine To-do-Liste. Das sind Listen. Multiple-Choice-Tests sind in der Regel nummerierte Fragenlisten: die Multiple-Choice-Antworten sind verschachtelte Listen.

HTML bietet uns verschiedene Möglichkeiten, Listen auszuzeichnen. Es gibt sortierte Listen (<ol>), ungeordnete Listen (<ul>) und Beschreibungslisten (<dl>). Listenelemente (<li>) sind in geordneten und unsortierten Listen verschachtelt. In einer Beschreibungsliste findest du Beschreibungen (<dt>) und eine Beschreibung Details <dd>. Alle diese Punkte werden wir hier behandeln.

In HTML-Formularen bestehen Listen mit <option>-Elementen aus den Inhalten von <datalist>, <select> und <optgroup> innerhalb einer <select>. Diese werden im Abschnitt HTML-Formulare erläutert.

In Menüs und unsortierten Listen werden Listenelemente normalerweise in Form von Aufzählungspunkten angezeigt. In geordneten Listen werden sie durch einen aufsteigenden Zähler wie eine Zahl oder einen Buchstaben. Die Aufzählungszeichen und Nummerierungsreihenfolge können mit HTML oder CSS gesteuert oder umgekehrt werden. oder beides.

Sortierten und unsortierten Listeneinträgen werden standardmäßig Zahlen oder Aufzählungszeichen vorangestellt. Aber auch wenn Listen nicht wie Listen aussehen sollen, Sie möchten immer noch eine Liste mit Elementen wie Navigationsleisten, eine To-do-Liste mit Kästchen statt Aufzählungspunkten oder Richtig-und-Falsch-Fragen. in einem Multiple-Choice-Test. Für alle Listen ohne Aufzählungszeichen empfiehlt es sich, HTML-Listenelemente zu verwenden.

Unsortierte Listen

Das Element <ul> ist das übergeordnete Element für ungeordnete Elementlisten. Die einzigen untergeordneten Elemente einer <ul> sind eine oder mehrere <li>-Listen item. Erstellen wir eine Liste der Maschinen. Wir verwenden eine ungeordnete Liste, weil die Reihenfolge keine Rolle spielt (geben Sie das nicht an):

Standardmäßig wird jedem ungeordneten Listenelement ein Aufzählungszeichen vorangestellt. Die unsortierte Liste hat keine elementspezifischen Attribute. Sie müssen Ihre Listen mit einem </ul> schließen.

Nummerierte Listen

Das Element <ol> ist das übergeordnete Element für geordnete Elementlisten. Die einzigen untergeordneten Elemente einer <ol> sind ein oder mehrere <li>-Elemente oder Listenelemente. Die „Aufzählungspunkte“ in diesem Fall handelt es sich jedoch um Zahlen mit einer Vielzahl von Typen. Der Typ kann in CSS mit dem Attribut list-style-type definiert werden oder über das Attribut type.

<ol> hat drei elementspezifische Attribute: type, reversed und start.

Das Attribut type legt den Nummerierungstyp fest. Es gibt fünf gültige Werte für type. Der Standardwert ist 1 für Ziffern, aber Sie können auch a, A, i oder I für Klein- und Großbuchstaben oder römische Ziffern verwenden. Das Attribut list-style-type liefert viel mehr Werte.

Wie im Codepen erwähnt, überschreibt das Attribut list-style-type beim Schreiben den Wert des Attributs type Dokumente, bei denen der numerische Typ wichtig ist, wie z. B. bei Rechtsdokumenten, müssen die type enthalten sein.

Wenn das boolesche Attribut reversed enthalten ist, wird die Reihenfolge der Zahlen umgekehrt, d. h. von der größten zur niedrigsten Zahl. Das Attribut start legt den Startwert fest. Der Standardwert ist 1.

Ähnlich wie bei </ul> ist das schließende </ol> erforderlich.

Wir können Listen verschachteln, aber sie müssen in einem Listenelement verschachtelt sein. Denken Sie daran, dass das einzige Element, das ein untergeordnetes Element von <ul> oder <ol> sein kann, ist mindestens ein <li>-Element.

Listeneinträge

Wir haben das <li>-Element verwendet, müssen es aber noch nicht offiziell einführen. Das <li>-Element kann ein direktes untergeordnetes Element eines ungeordneten Elements sein Liste (<ul>), sortierte Liste (<ol>) oder Menü (<menu>) enthalten. Das <li>-Element muss als untergeordnetes Element eines dieser Elemente verschachtelt sein. nirgendwo sonst gültig ist.

Das Schließen eines Listenelements ist gemäß der Spezifikation nicht erforderlich, da es implizit geschlossen wird, wenn der Browser das nächste <li>-Element erkennt. öffnendes Tag oder das erforderliche schließende Tag für die Liste: </ul>, </ol>, </menu>. Auch wenn die Spezifikation dies nicht erfordert, und einige interne Unternehmen Best Practices empfehlen Ihnen, Listenelemente nicht zu schließen, um Byte zu sparen. Schließen Sie die <li>-Tags. So ist Ihr Code leichter zu lesen wird Ihr zukünftiges Ich Ihnen danken. Es ist einfacher, alle Elemente zu schließen, als sich zu merken, welche Tags geschlossen werden müssen und welche ein optionales schließendes Tag haben.

Es gibt nur ein elementspezifisches <li>-Attribut: value, eine Ganzzahl. Die value ist bei einem <li> nur dann nützlich, wenn das <li> in sortierte Liste und hat für unsortierte Listen oder Menüs keine Bedeutung. Bei einem Konflikt wird der Wert des <ol>-Starts überschrieben.

value ist die Nummer des Listenelements in einer sortierten Liste. Fahren Sie mit den nachfolgenden Listenelementen fort, festgelegt ist, es sei denn, für dieses Element wurde auch das Attribut value festgelegt. Der Wert muss nicht in einer bestimmten Reihenfolge sein. aber wenn sie nicht in der richtigen Reihenfolge ist, sollte es einen guten Grund geben.

Wenn Sie reversed auf den <ol>-Attributen mit value-Attributen für Listenelemente kombinieren, setzt der Browser diese <li> auf das angegebenen Wert ein und zählen Sie dann für die vorangehenden <li>s und für die folgenden herunter. Wenn ein zweites Listenelement ein Wertattribut hat, wird der Zähler beim zweiten Listenelement zurückgesetzt und der nachfolgende Wert verringert sich um eins.

All dies kann auch mit CSS-Zählern gesteuert werden. Bereitstellung generierter Inhalte für das ::marker-Pseudoelement Wenn es sich bei der Zahl nur um eine Präsentation handelt, verwenden Sie CSS. Verwenden Sie diese Attribute, wenn die Nummerierung semantisch wichtig ist oder anderweitig eine Bedeutung hat.

Bisher haben wir uns Listenelemente angesehen, die nur Textknoten enthalten. Listenelemente können den gesamten Ablaufinhalt enthalten, d. h. -Element im Textkörper gefunden, das als direktes untergeordnetes Element von <body> verschachtelt werden kann, einschließlich Überschriften, wodurch der Inhalt in Abschnitte unterteilt wird.

Wir haben einige ungeordnete Listen in MLW. Die Lehrkräfte im Abschnitt „Lehrkräfte“ und die Geräte der Schüler/Studenten in den Rezensionen sind eine Liste. . Die Lehrkraft <ul> hat zwei <li>s: eine für jede Lehrkraft. Jede <li> enthält ein Bild und einen Absatz:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

Der Abschnitt mit Rezensionen enthält drei Rezensionen, also drei <li>. Jede enthält ein Bild, ein Blockzitat und einen dreizeiligen Absatz mit zwei Zeilenumbrüchen.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Es ist ebenfalls üblich, Listen innerhalb von Listen zu verschachteln. MLW hat zwar keine verschachtelten Listen, auf dieser Website jedoch schon. Im ersten Kapitel dieser Reihe Übersicht über HTML. Der Abschnitt mit den Hauptelementen ist in zwei Unterabschnitte unterteilt. Das ungeordnete Inhaltsverzeichnis enthält ein verschachteltes unsortierte Liste mit Links zu diesen beiden Abschnitten:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Da das einzige untergeordnete Element von <ul> ein <li> ist, wird eine verschachtelte Liste verschachtelt in einem <li> und nie direkt in einem <ol> oder <ul> gefunden.

In diesem letzten Beispiel hast du vielleicht bemerkt, dass role="list" in <ul> enthalten ist. Die implizite Rolle sowohl des <ul> und <ol> sind list, wodurch die Listendarstellung mit CSS entfernt wird, einschließlich der Einstellung display: grid oder list-style-type: none kann VoiceOver (den iOS- und MacOS-Screenreader) dazu veranlassen, die implizite Semantik in Safari zu entfernen. Diese Funktion ist kein Programmfehler. Im Allgemeinen sollten Sie das Rollenattribut nicht hinzufügen, wenn Sie semantische Elemente verwenden, da dies nicht erforderlich ist. In der Regel benötigen Sie um ein Element zu einer Liste hinzuzufügen, es sei denn, die Nutzenden müssen wirklich wissen, dass es sich um eine Liste handelt, z. B. wenn die Nutzenden davon profitieren würden, zu wissen, wie viele Elemente sich in der Liste befinden.

Beschreibungslisten

Eine Beschreibungsliste ist ein Beschreibungsliste-Element (<dl>), das folgendes Element enthält: eine Reihe von (null oder mehr) Beschreibungsbegriffen (<dt>) und die zugehörigen Details in der Beschreibung (<dd>) enthalten. Die ursprünglichen Namen für diese drei Elemente „Definitionsliste“, einen Begriff aus und „Definition Definition“. Im Live-Standard wurde der Name geändert.

Ähnlich wie geordnete und ungeordnete Listen können sie verschachtelt sein. Im Gegensatz zu geordneten und ungeordneten Listen bestehen sie aus Schlüssel/Wert-Paaren. Ähnlich wie bei <ul> und <ol> ist <dl> der übergeordnete Container. Die Elemente <dt> und <dd> sind die untergeordneten Elemente von <dl>.

Wir können eine Liste von Maschinen mit ihrer Karriere und ihren Zielen erstellen. Eine Beschreibungsliste der Schüler/Studenten, gekennzeichnet durch <dl>, eine Gruppe von Begriffen – in diesem Fall die "Begriffe", sind Schülernamen. Sie werden mit dem <dt>-Element zusammen mit einer Beschreibung angegeben. für jeden Programmabschnitt – in diesem Fall die Karriereziele jedes Schülers –, angegeben durch die <dd>-Elemente.

Diese Beschreibungsliste ist nicht Teil der MLW-Seite. Beschreibungslisten sind nicht nur für Begriffe und Definitionen gedacht. warum die Namen der Elemente allgemeiner formuliert wurden.

Wenn Sie eine Liste von Begriffen und deren Definitionen oder Beschreibungen oder ähnliche Listen von Schlüssel/Wert-Paaren erstellen, listet die Beschreibung Elemente auf. die entsprechende Semantik bereitstellen. Die implizite Rolle einer <dt> ist term, wobei listitem eine weitere zulässige Rolle ist. Die implizite Rolle <dd> ist definition und es sind keine anderen Rollen zulässig. Im Gegensatz zu <ul> und <ol> hat <dl> keine implizite ARIA-Rolle. Das ist sinnvoll, da <dl> nicht immer eine Liste ist. Ist dies der Fall, werden die Rollen list und group akzeptiert.

Meistens gibt es Beschreibungslisten mit der gleichen Anzahl von <dt>- und <dd>-Elementen. Aber Beschreibungslisten sind nicht immer müssen nicht mit den Paaren aus Begriff und Beschreibung übereinstimmen, Sie können mehrere zu eins oder eins zu mehreren haben, z. B. einen Begriff aus dem Wörterbuch. mit mehr als einer Definition.

Jeder <dt> ist mindestens eine <dd> zugeordnet und jeder <dd> ist mindestens ein <dt> zugeordnet. Auch wenn es möglich ist, einen relationalen gleichgeordneten Kombinator oder den relationalen :has() verwenden Selektor für das Targeting auf Variablennummern dieser Elemente mit CSS. Bei Bedarf können Sie <div> als untergeordnetes Element von <dl> und das übergeordnete Element von einem oder mehreren <dt>- oder <dd>-Elementen (oder beidem) ist zulässig. Der <dl> kann tatsächlich haben einige andere untergeordnete Elemente: Das Verschachteln von <div>, <template> oder <script> ist zulässig. Keines der Beschreibungslistenelemente hat elementspezifische Attribute.

Da Sie nun mit Links und Listen vertraut sind, lassen Sie uns beide zum Erstellen der Navigation kombinieren.

Wissen testen

Testen Sie Ihr Wissen über Listen.