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
Beispiel für CSS3 zum Erzielen eines Div-Ein- und Ausschiebens von unten nach oben
1. Zuerst müssen Sie den Zielselektor von CSS3 ve...
JavaScript zum Erzielen eines Digitaluhreffekts
In diesem Artikelbeispiel wird der spezifische Ja...
Docker-Installation Tomcat Dubbo-Admin-Instanz-Kenntnisse
1. Laden Sie das Tomcat-Image herunter Docker zie...
CentOS 7.2 erstellt einen Nginx-Webserver zum Bereitstellen des Uniapp-Projekts
Panther begann als Anfänger und ich bin immer noc...
Einfaches Schreiben von gespeicherten MySQL-Prozeduren und -Funktionen
Was ist eine gespeicherte Prozedur? Einfach ausge...
Mehrere Gründe, HTML nicht zu komprimieren
Der Grund ist einfach: In HTML-Dokumenten entsprec...
Installieren Sie die virtuelle CentOS7-Maschine unter Win10
1. Laden Sie die VMware Workstation 64-Version he...
MySQL-Serie 9 MySQL-Abfrage-Cache und -Index
Inhaltsverzeichnis Tutorial-Reihe 1. MySQL-Archit...
MySQL 8.0.20 Window10 kostenlose Installationsversion Konfiguration und Navicat Management Tutorial Grafik detaillierte Erklärung
1. MySQL 8.0.20 herunterladen und dekomprimieren ...
Mounten Sie die Festplatte in einem Verzeichnis unter Ubuntu 18.04
Einführung In diesem Artikel wird beschrieben, wi...
So konfigurieren Sie Anti-Hotlinking für den Nginx-Websitedienst (empfohlen)
1. Prinzip des Hotlinking 1.1 Vorbereitung der We...
Gemessenes Bild - HTTP-Anforderung
Bitte öffnen Sie die Testseite in einem gängigen ...
Installation von CUDA10.0 und Probleme in Ubuntu
Die Entsprechung zwischen der Tensorflow-Version ...
Detaillierte Erläuterung des Installations- und Konfigurationsprozesses von mysql8.018 unter Linux
Installationseinführung unter Windows: Schauen Si...
So stellen Sie einzelne Tabellendaten mithilfe der vollständigen MySQL-Datenbanksicherungsdaten wieder her
Vorwort Beim Sichern der Datenbank wird eine voll...