Erklärung des HTML-Codes der Webseite: geordnete Liste und ungeordnete Liste
|
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. Listen zum Organisieren von Daten <br />Nachdem die Leser so viele HTML-Tags kennengelernt 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 Ungeordnete Liste erstellen <br />Wie der Name schon sagt, ist eine ungeordnete Liste eine Listenstruktur, in der die Listenelemente keine Reihenfolge aufweisen. 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 Eine geordnete Liste erstellen <br />Eine geordnete Liste ist, wie der Name schon sagt, eine Listenstruktur, bei der die Listenelemente eine bestimmte Reihenfolge haben. Dabei können von oben nach unten verschiedene Ordnungszahlen vorkommen, 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 |
<<: Vue macht Div-Höhe verschiebbar
>>: Detailliertes Beispiel für die Verkettung mehrerer Felder in MySQL
Artikel empfehlen
Sieben Möglichkeiten zur Implementierung der Array-Deduplizierung in JS
Inhaltsverzeichnis 1. Verwenden von Set()+Array.f...
Div in HTML ausblenden Tabelle ausblenden TABLE- oder DIV-Inhalt im CSS-Stil
Ich habe heute Abend ein Problem gelöst, das mich...
Implementieren Sie eine MaterialUI-Button-Klickanimation auf Basis von CSS und kapseln Sie sie in eine React-Komponente ein.
Vorwort Als intensiver Benutzer von Front-End-Fra...
Dieser Artikel hilft Ihnen, den Quellcode von PReact10.5.13 zu verstehen
Inhaltsverzeichnis render.js-Teil create-context....
Kalendereffekt basierend auf jQuery
In diesem Artikelbeispiel wird der spezifische Co...
Detailliertes Tutorial zur Installation des Tomcat9-Windows-Dienstes
1. Vorbereitung 1.1 Laden Sie das komprimierte To...
So leiten Sie innerhalb von zwei Sekunden auf andere Seiten einer HTML-Seite um
Code kopieren Der Code lautet wie folgt: <!DOC...
SpringBoot integriert Activiti7-Implementierungscode
Nach der offiziellen Veröffentlichung von Activit...
Detaillierte Schritte zur Installation von RabbitMQ im Docker
Inhaltsverzeichnis 1. Finde den Spiegel 2. Laden ...
Verwenden Sie CSS-Variablen, um coole und erstaunliche Schwebeeffekte zu erzielen
Kürzlich habe ich auf der Grover-Website eine lus...
Automatische Zeilenumbrüche in HTML-Pre-Tags
Zu diesem Zeitpunkt können Sie overflow:auto; verw...
Das Textdesign einer Webseite sollte aussehen wie die Kleidung von intelligenten Mädchen
<br />„Es gibt keine hässlichen Frauen auf d...
So verwenden Sie position:sticky, um das Problem kleiner Programme, die an der Decke haften, perfekt zu lösen
Kürzlich bestand der Kunde eines Projekts darauf,...
Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?
Was sind :is und :where? :is() und :where() sind ...
Was sind Inline-Elemente und Blockelemente?
1. Inline-Elemente nehmen nur die Breite des Inhal...