4.4.3 Erstellen einer geordneten Liste
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.
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> 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>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>BLITZ</li> </ul> Web-Backend-Lernen <ol> <li>ASP</li> <li>ASP.net</li> <li>PHP</li> <li>CGI</li> 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
Artikel empfehlen
Prinzipanalyse des UDP-Verbindungsobjekts und Anwendungsbeispiele
Ich habe zuvor zum Einstieg in UDP ein einfaches ...
Detaillierte Erklärung des Unterschieds zwischen MySQL-Normalindex und eindeutigem Index
Inhaltsverzeichnis 1 Begriffliche Abgrenzung 2 Fa...
Detaillierte Installation und Verwendung von RocketMQ in Docker
Um nach RocketMQ-Images zu suchen, können Sie auf...
Welche Funktion ist !-- -- im HTML-Seitenstil?
Hauptsächlich für Browser mit niedriger Version &l...
So installieren Sie eine virtuelle Maschine mit Windows-Diensten auf dem Mac
1. Laden Sie die virtuelle Maschine herunter Offi...
Docker-Container kommunizieren direkt über Routing, um Netzwerkkommunikation zu erreichen
Überblick Was das aktuelle Standardnetzwerk von D...
vue3+ts+EsLint+Prettier Standardcode-Implementierung
Inhaltsverzeichnis verwenden Verwendung von EsLin...
Durch Kombinieren von Einfügen und Auswählen wird die Methode „Einfügen des Maximalwerts eines Felds in der Datenbank + 1“ implementiert.
Dieser Artikel ist MySQL-Datenbank Frage 1 Import...
Drei Netzwerkmethoden und Prinzipien von virtuellen VMware-Maschinen (Zusammenfassung)
1. Brigde——Bridge: VMnet0 wird standardmäßig verw...
Zwei Arten von Tab-Anwendungen im Webdesign
Heutzutage werden Registerkarten häufig im Webdes...
Details zu gängigen Javascript-Funktionen höherer Ordnung
Inhaltsverzeichnis 1. Gemeinsame Funktionen höher...
Der Vue.js-Cloud-Speicher realisiert die Bild-Upload-Funktion
Vorwort Tipp: Das Folgende ist der Hauptinhalt di...
Lösung für die leere Zeile vor der UTF-8-codierten Webseite, wenn sie Dateien enthält
<br />Die Seite verwendet die UTF8-Kodierung...
So installieren Sie MySQL 8.0.13 in Alibaba Cloud CentOS 7
1. Laden Sie das MySQL-Installationspaket herunte...
Lösen Sie das Problem der Verwendung von weniger in Vue
1. Installieren Sie weniger Abhängigkeiten: npm i...