Zamówiono listy w HTML

Zamówiono listy w HTML
Uporządkowane listy w HTML to te, w których wszystkie elementy listy są umieszczane we właściwej sekwencji liczb, alfabetów lub cyfr rzymskich. Te listy są bardzo pomocne, gdy chcesz wymienić wiele elementów, które powinny wystąpić w określonej kolejności. W tym przewodniku podzielimy się z Tobą różnymi przykładami, które będą przedstawiać wykorzystanie uporządkowanych list w HTML.

Korzystanie z uporządkowanych list w HTML

Uporządkowane listy w HTML mogą być używane na wiele sposobów. Poniższe cztery przykłady pokażą niektóre z ich scenariuszy użytkowania:

Przykład nr 1: Proste użycie uporządkowanych list

W tym przykładzie nauczymy się tworzyć prostą listę uporządkowaną w HTML. W tym celu będziesz musiał przejść przez skrypt HTML pokazany na następujący obraz:

Uporządkowane listy w HTML można utworzyć za pomocą znacznika „OL”. Po zastosowaniu tego znacznika wspomniałeś o wszystkich elementach tej uporządkowanej listy, otaczając je w znaczniku „Li”. W tym przykładzie tworzymy uporządkowaną listę trzech kursów. Dlatego używamy znacznika „ol”, a następnie trzech tagów „Li” w tym skrypcie.

Następnie, po zapisaniu tego skryptu i wykonaniu go w naszej przeglądarce, na naszym ekranie pojawia się następująca strona internetowa. Możesz zobaczyć, że nasze określone kursy są wyświetlane w formie uporządkowanej listy na tej stronie internetowej.

Przykład nr 2: uporządkowane listy z wielkimi literami

Nie jest konieczne posiadanie tylko uporządkowanej listy liczb. Możemy również mieć uporządkowane listy alfabetów. Skrypt HTML pokazany na poniższym obrazie pokaże, jak utworzyć uporządkowaną listę z górnymi literami w HTML.

W tym skrypcie HTML wyświetlamy trzy różne kierunki w formie uporządkowanej listy. Jednak tym razem chcemy uporządkowanej listy liter górnych. Dlatego używamy dodatkowego atrybutu „typu” z znacznikiem „ol”, aby wymienić dokładny typ listy uporządkowanej. Wyrównujemy ten atrybut do „A” do utworzenia uporządkowanej listy z alfabetami z górnej sprawy. Następnie po prostu wspominamy o wszystkich elementach tej uporządkowanej listy za pomocą znacznika „Li”.

Nasza uporządkowana lista z alfabetami z górnej skrzynki jest pokazana na poniższym obrazku:

Notatka: Jeśli zastąpisz „A” w poprzednim skrypcie „A”, „I”, „I” lub „1”, nasza uporządkowana lista będzie miała małe litery, cyfry rzymskie, cyfry rzymskie dolne, lub dolne cyfry rzymskie lub odpowiednio liczby. Jednak domyślnie uporządkowana lista w HTML zawiera liczby. Dlatego w tym przypadku nie musisz konkretnie wspominać typu „1”.

Przykład nr 3: uporządkowane listy z losowym punktem początkowym

Czasami nie chcesz, aby Twoja lista zamówiona zaczęła się od „1”. Chcesz raczej mieć do tego przypadkowy punkt wyjścia. Aby to zrobić, możesz użyć skryptu HTML pokazanego na poniższym obrazie:

W tym skrypcie chcemy, aby nasza lista uporządkowana zaczęła się od numeru „10”. Dlatego używamy atrybutu „Start” z znacznikiem „ol” i wyrównujemy go do „10”. Następnie wspominamy o trzech różnych elementach z tagiem „Li”.

Nasza uporządkowana lista z wybranym punktem wyjścia innego niż „1” jest pokazana na poniższym obrazku:

Przykład nr 4: zagnieżdżone listy uporządkowane

W tym przykładzie nauczymy się tworzyć zagnieżdżone listy uporządkowane, i.mi. Zamówiono listy na liście uporządkowanej w HTML. Skrypt HTML w tym celu pokazano na poniższym obrazku:

W tym przykładzie chcemy mieć zewnętrzną listę różnych napojów. W każdej kategorii chcieliśmy, aby wewnętrzne listy uporządkowane wspomnieć o różnych napojach należących do każdej z tych kategorii. Dlatego zagnieżdżyliśmy odpowiednio znaczniki „OL” i „Li” w skrypcie HTML pokazanym na poprzednim obrazie.

Poniższa strona internetowa pokazuje naszą zagnieżdżoną listę uporządkowaną w HTML:

Wniosek

Ten samouczek ma omówić użycie uporządkowanych list w HTML. Daliśmy ci krótkie wprowadzenie uporządkowanych list w HTML, a następnie kilka przykładów, które miały wnieść większą jasność tej koncepcji. Po dobrze zrozumieniu tych przykładów, będziesz mógł dość skutecznie korzystać z uporządkowanych list w HTML.