HTML-Webseite: geordnete Liste ol und ungeordnete Liste ul

Listen zum Organisieren von Daten

Nachdem die Leser so viele HTML-Tags gelernt haben, die die Anzeige von Webseiten steuern, können sie mit der Erstellung reiner Artikelseiten beginnen. In diesem Abschnitt lernen wir Listenelemente in HTML kennen. Listen machen einen relativ großen Anteil im Website-Design aus. Sie stellen Informationen sehr übersichtlich und intuitiv dar und sind für Benutzer leicht verständlich. Im anschließenden CSS-Style-Lernen werden die erweiterten Funktionen von Listenelementen ausführlich genutzt.

Textfeld: Abbildung 4.17 Aufbau der Listenelemente

4.4.1 Listenstruktur

Das HTML-Listenelement ist eine von einem Listen-Tag umschlossene Struktur und die enthaltenen Listenelemente bestehen aus <li></li>. Der konkrete Aufbau ist in Abbildung 4.17 dargestellt.

4.4.2 Erstellen einer ungeordneten Liste

Wie der Name schon sagt, ist eine ungeordnete Liste eine Listenstruktur, in der die Listenelemente keine Reihenfolge haben. Die meisten Listen in Webanwendungen verwenden ungeordnete Listen und ihre Listen-Tags verwenden <ul></ul>. Die Schreibweise ist wie folgt:

<ul>

<li>Listenelement 1</li>

<li>Listenelement 2</li>

<li>Listenpunkt Drei</li>

<li>Listenpunkt vier</li>

<li>Listenpunkt fünf</li>

</ul>

4.4.3 Erstellen einer geordneten Liste

Wie der Name schon sagt, handelt es sich bei einer geordneten Liste um eine Listenstruktur, bei der die Listenelemente eine bestimmte Reihenfolge haben. Von oben nach unten können sie verschiedene Ordnungsnummern haben, wie etwa 1, 2, 3 oder a, b, c usw. Erstellen Sie eine Webseitendatei im Verzeichnis D:\web\, nennen Sie sie ul_ol.htm und schreiben Sie den Code wie in Code 4.17 gezeigt.

Listeneinstellungen: ul_ol.htm

<html>

<Kopf>

<title>Listeneinstellungen</title>

</Kopf>

<Text>

<Schriftgröße="5">

Web-Frontend-Technologie

<ul>

<li>JavaScript</li>

<li>BLITZ</li>

</ul>

Web-Backend-Lernen

<ol>

Rubin

Python

</ol>

</font>

</body>

</html>

Geben Sie http://localhost/ul_ol.htm in die Adressleiste des Browsers ein. Der Browsing-Effekt wird in Abbildung 4.18 angezeigt.

Abbildung 4.18 Listeneinstellungen

<<: Implementierungsmethode des Nginx+Tomcat-Lastausgleichsclusters

>>: Eine kurze Erläuterung des CSS-Überlaufmechanismus

CSS-Techniken zum Erreichen eines mehrspaltigen Layouts gleicher Höhe, das das Frontend beherrschen sollte

JS implementiert das Lehrplan-Stundenplan-Applet (imitiert den Super-Lehrplan) und fügt eine benutzerdefinierte Hintergrundfunktion hinzu

Artikel

Vue.js implementiert ein einfaches Faltpanel

HTML-Webseite: geordnete Liste ol und ungeordnete Liste ul

CSS-Techniken zum Erreichen eines mehrspaltigen Layouts gleicher Höhe, das das Frontend beherrschen sollte

Der Unterschied und die Gründe zwischen den MySQL-Abfragebedingungen nicht in und in

JavaScript zum Erreichen eines einfachen Seiten-Countdowns

JS implementiert das Lehrplan-Stundenplan-Applet (imitiert den Super-Lehrplan) und fügt eine benutzerdefinierte Hintergrundfunktion hinzu

Vue.js implementiert ein einfaches Faltpanel

Eine detaillierte Einführung in die Linux-Verzeichnisstruktur

Grafisches Tutorial zur Installation der 64-Bit-Desktopversion von Centos 7

Hilfedokument „MySQL-Lernhinweise“

Zwei Möglichkeiten zum Deklarieren privater Variablen in JavaScript

So öffnen Sie das MySQL-Binlog-Protokoll

Artikel empfehlen

Installations-Tutorial für virtuelle VMware-Maschinen unter Ubuntu 18.04

So installieren Sie Babel mit NPM in VSCode

Vue3+Vite+TS implementiert sekundäre Kapselung von Element-Plus-Geschäftskomponenten sfasga

Stellen Sie in HTML die Bildlaufleiste so ein, dass sie automatisch angezeigt wird, wenn der Inhalt im Div überschreitet

Einführung in lokale Komponenten in Vue

Detaillierte Erklärung zur Verwendung von Rastereigenschaften in CSS

So generieren Sie die MySQL-Primärschlüssel-ID (selbstinktive, eindeutige und unregelmäßige)

Zwei Möglichkeiten zur Lösung des Problems, dass die MySQL-Master-Slave-Datenbank nicht synchronisiert wird

Detaillierte Erklärung der Verwendung und Unterschiede von MySQL-Ansichten und -Indizes

Erfahren Sie in einem Artikel mehr über TypeScript-Datentypen

Zusammenfassung grundlegender SQL-Anweisungen in der MySQL-Datenbank

Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen

Detaillierte Erklärung der Lösung zum Vergessen des Passworts in MySQL 5.7

Detailliertes Tutorial zur Installation von ElasticSearch 6.x im Docker

Detailliertes Tutorial zum Bereitstellen eines Django-Projekts mit Docker auf CentOS8