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
Vue integriert Tencent TIM Instant Messaging
In diesem Artikel wird hauptsächlich die Integrat...
Drei Möglichkeiten zum Teilen der Komponentenlogik in React
Ohne weitere Umschweife sind dies diese drei Meth...
Vergleich mehrerer Beispiele zur Einfügungseffizienz in MySQL
Vorwort Aus beruflichen Gründen musste ich kürzli...
MySQL lösen: FEHLER 1045 (28000): Zugriff verweigert für Benutzer ‚root‘@‚localhost‘ (mit Passwort: NEIN/JA)
1. Problem Manchmal, wenn wir uns bei Mysql anmel...
Sechs mit CSS3 implementierte Randübergangseffekte
Sechs EffekteImplementierungscode html <h1>...
Tutorial-Diagramm zur Konfiguration der Tomcat-Umgebungsvariablen unter Win10
Vor der Konfiguration müssen wir Folgendes tun: 1...
Verwendung der MySQL-Zeitdifferenzfunktionen TIMESTAMPDIFF und DATEDIFF
Verwendung der Zeitdifferenzfunktionen TIMESTAMPD...
Welche versteckten Attribute im Formular können mit dem Formular übermittelt werden?
Die Formularelemente mit Sichtbarkeit=versteckt un...
C# implementiert MySQL-Befehlszeilensicherung und -wiederherstellung
Es gibt viele Tools zum Sichern von MySQL-Datenba...
Detaillierte Schritte zum Bereitstellen von lnmp unter Docker
Inhaltsverzeichnis Ziehen Sie ein CentOS-Image Ge...
MySQL-Lösung zur Datenpaging-Abfrageoptimierung auf Millionenebene
Wenn die Tabelle Zehntausende Datensätze enthält,...
Detaillierte Erläuterung des Prozesses zum Verpacken der Python-Umgebung durch Docker
Die Schritte zum Verpacken einer Python-Umgebung ...
Das CSS3-Diamantpuzzle realisiert die Funktion, nur das Div zu drehen und das Hintergrundbild nicht zu drehen
Nachfragehintergrund Das Projekt wurde mit Vue er...
So konvertieren Sie Chinesisch in HTML in UTF-8
In HTML kann die chinesische Phrase „學好好學“ als „學...
Beispiel einer MySQL-Implementierung einer Volltextsuche und einer Methode zur Bewertung von Schlüsselwörtern
1. Einleitung Heute hat mich ein Kollege gefragt,...