- Listen sind die übliche Anforderung, um die Daten formatiert zu platzieren. Wenn Sie beispielsweise eine Webseite erstellt haben, auf der Sie den Inhalt der Pizzakarte eines Hotels anzeigen müssen, dann wäre es wahrscheinlich ein HTML-Listenstil, der dies tun soll treten Sie klar und diskret auf.
- In anderen Fällen kann es vorkommen, dass Sie eine Reihe von Schülern haben, die zu den Leistungsstärksten der Klasse gehören; In diesem Zusammenhang besteht die Anforderung darin, den Schüler mit Rang 1 ganz oben und die anderen darunter in aufsteigender Rangfolge zu platzieren. Dafür müssen wir dies in eine sortierte Liste formatieren.
- Ein anderer Typ können benutzerdefinierte Listen sein, die Sie mit Javascript und HTML zusammen erstellen können, wobei auch die Dynamik in den Objekten eingerichtet werden kann und die Listen ein individuelles Aussehen haben können.
Verschiedene Listenstile in HTML
Im Folgenden werden die verschiedenen HTML-Listenstile erläutert.
1) Ungeordnete Listen
Hier müssen wir uns nicht um die Reihenfolge der Anzeige des Inhalts kümmern; Wir müssen die Dinge nur gut platzieren, so dass die HTML-Seite sie gut formatiert und klar vor dem Benutzer platziert.
Es gibt zwei Tags in der HTML-Sprache, die diese Listen verarbeiten, und wahrscheinlich können Sie nur mit diesen Tags eine Navigationsleiste und eine vertikale Seitenleiste erstellen.
: Dies stellt die ungeordnete Liste dar; Wann immer wir etwas nicht bewerten oder in zufälliger Reihenfolge platzieren müssen, wird dieses Tag eingefügt.
- : Dies stellt die Listenelemente dar, die Menge der Elemente, die in der ungeordneten Liste platziert werden sollen, d. h. unter dem
Tag erscheinen innerhalb des - Etikett. Die mit diesen Markierungen markierten Elemente tragen automatisch einige Aufzählungszeichen oder Kreise am Anfang; Dies sind die grundlegenden HTML-Funktionen.
Jetzt sehen wir uns einen Code für
an. und - basierend auf ungeordneten Listen und wie die HTML-Seite aussehen wird; Beachten Sie, dass Sie nach dem Ausführen dieser Datei in einem Editor wie Notepad schreiben und die Datei mit der Erweiterung „.html“ speichern können. Daher kann es mit jedem Browser geöffnet werden.
Beispielausschnitt –
Code:
<html>
<head> HTML Lists </head>
<body>
<h2> list of pizzas <h2>
<ul>
<li style="color:red"> farmhouse </li>
<li style="color:green"> peppy paneer </li>
<li style="color:blue"> onion pizza </li>
</ul>
</body>
</html>
Nach dem Login kopieren
Ausgabe:
2) Geordnete Listen
Jetzt sehen wir einen Fall, in dem wir versuchen, die Schüler basierend auf ihren Rängen in der Klasse geordnet einzuordnen, und dies wird sortiert angezeigt, indem wir das
Tag von HTML, und es enthält mehrere - Tags, diese enthalten die Listenelemente.
: Mit diesem Tag wird eine geordnete Liste erstellt, in der alle Elemente innerhalb von - platziert werden. Tags.
- Tag wurde oben erklärt.
Für diesen Fall sehen wir uns auch ein Beispiel an, und Sie müssen dieses wie oben beschrieben speichern.
Code:
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol>
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>
Nach dem Login kopieren
Ausgabe/HTML-Seite
Sehen wir uns nun einige Varianten davon an, bei denen wir diese Listen anpassen oder gut formatieren können, indem wir einfach einige CSS-Eigenschaften zur HTML-Seite hinzufügen, wodurch das Erscheinungsbild der Seite besser aussieht.
- In den ungeordneten Listen haben wir die folgenden Eigenschaften, die angegeben werden können –
- Listenstiltyp – kann Scheibe, Kreis, Quadrat oder keiner sein. Die Kreise, die Sie in ungeordneten Listenelementen gesehen haben, werden also nicht angezeigt, wenn wir hier „Keine“ auswählen. Machen wir es.
Beispiel –
Code:
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ul style="list-style-type:none">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ul>
</body>
</html>
Nach dem Login kopieren
Ausgabe/HTML-Seite –
Die Kreisgeschosse existieren also nicht mehr; Sie können sie mit den oben angegebenen Optionen anpassen.
Ebenso besteht die Möglichkeit zu wählen, ob die Bestelllistenwerte in den Bestelllisten mit Ziffern, römischen Buchstaben oder Buchstaben angezeigt werden.
Sie können den Eigenschaftstyp in
festlegen. Tag für dasselbe, und der Typ kann die folgenden Werte annehmen.
Typ: „1“, „A“, „a“, „I“, „i“
Sehen wir uns den entsprechenden Beispielcode an –
Code:
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "i">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>
Nach dem Login kopieren
Ausgabe/HTML-Seite –
Ähnlich haben wir auch Beschreibungslisten, in denen wir den Artikel definieren können, für den wir eine Beschreibung platzieren müssen; Nehmen wir an, Sie erstellen eine Seite, auf der Sie einige Definitionen für einige Schlüsselwörter platzieren müssen. Dann können Sie die Beschreibungslisten auswählen.
Tags
Wir haben die folgenden Tags, um dasselbe zu handhaben.
– Dieses Tag definiert die Beschreibungsliste
– dieses Tag gibt den Beschreibungsbegriff an
– this tag carries the description of each term
Example –
Code:
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<dl>
<dt style="color:red"> Docker </dt>
<dd> -: this is used to make environment portable application containers </dd>
<br>
<dt style="color:green"> Kubernetes </dt>
<dd> -: this is an orchestrator for those containers make by docker </dd>
</dl>
</body>
</html>
Nach dem Login kopieren
Output/HTML page –
You can also define the start property in the ordered lists in
tag, which tells from where the count starts. Let’s see an example of the same –
Code:
<html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "1" start="10">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</>
</body>
</html>
Nach dem Login kopieren
Output:
Conclusion
So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.
Das obige ist der detaillierte Inhalt vonHTML-Listenstile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
