Lista opisów zapewnia semantyczny sposób strukturyzowania i prezentowania informacji, tworząc związek między terminami a odpowiadającymi im opisami. Sprawia, że dane lub informacje są bardziej dostępne i zrozumiałe. Twórcy mogą wykorzystywać listy opisów w miejscach takich jak glosariusze, słowniki, sekcje FAQ, specyfikacje produktów itp. Ten artykuł przedstawia procedurę korzystania z listy opisów w HTML.
Jak korzystać z listy opisów w HTML?
Lista opisów składa się z „ ”, „ ', I ' ” i służy do reprezentowania zbioru terminów i odpowiadających im definicji. Prezentuje/wyświetla treść w ustrukturyzowanej formie, w której opis wykracza poza prostą listę wypunktowaną. Właściwości CSS można również zastosować do listy opisów, aby stworzyć atrakcyjny wizualnie interfejs.
Odwiedź poniższy fragment kodu, aby utworzyć listę opisów w formacie HTML:
< ciało >
< dz >
< h2 > Udziały w rynku laptopów h2 >
< dl >
< dt > Hp dt >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 30 % dd >
< dt > Dell dt >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 24 % dd >
< dt > Lenovo dt >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 14 % dd >
dl >
dz >
ciało >
Wyjaśnienie powyższego fragmentu kodu:
-
- Najpierw rodzic „ dz ” został utworzony, który działa jak kontener dla elementu listy opisów i innych elementów HTML, takich jak „ ”.
- Następnie lista opisów „
- Następnie nazwa/termin opisu „ Znacznik ” służy do zdefiniowania opisu pozycji, których opis ma zostać dodany.
- Następnie dane opisu „ wstawiany jest znacznik zawierający opis/informacje związane z elementem opisu.
Po zakończeniu fazy kompilacji elementy HTML pojawiają się na stronie w następujący sposób:
Dane wyjściowe pokazują, że lista opisów została wygenerowana.
Przykład 1: Przypisz wiele opisów do jednego terminu
Można utworzyć tabelę opisów, w której istnieje więcej niż jeden opis dla jednego terminu. Może to być szczególnie przydatne, jeśli istnieje więcej niż jedno znaczenie lub metoda, za pomocą której można wyjaśnić termin opisowy.
Kod dla powyższego scenariusza pokazano poniżej:
< dz >< h2 > Udziały w rynku laptopów h2 >
< dl >
< dt > Hp dt >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 30 % W 2018 dd >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 23 % W 2017 dd >
< dt > Dell dt >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 24 % W 2018 dd >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 27 % W 2017 dd >
< dt > Lenovo dt >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 14 % W 2018 I 9 % W 2017 dd >
dl >
dz >
W powyższym kodzie:
-
- Najpierw tworzona jest lista opisów za pomocą „ dl ”, „ dt ' I ' dd ' elementy.
- Następnie wiele „ ” tagi są używane w ramach jednego „ dt ' element. Przypisuje wiele opisów jednemu terminowi.
Po fazie kompilacji:
Dane wyjściowe pokazują, że dla jednego terminu dodano wiele opisów.
Przykład 2: Przypisz wiele terminów do jednego opisu
Deweloperzy mogą również utworzyć listę opisową składającą się z wielu terminów opisowych z pojedynczymi danymi opisowymi. Jest to szczególnie przydatne, gdy wiele terminów jest podobnych lub ma taką samą funkcjonalność. Korzystając z tej techniki, wszystkie te terminy można opisać jednocześnie:
< dz styl = „margines: 20 pikseli” >< h2 > Udziały w rynku laptopów h2 >
< dl >
< dt > Hp dt >
< dt > EliteBook dt >
< dt > proBook dt >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 30 % W 2018 dd >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 23 % W 2017 dd >
< dt > Lenovo dt >
< dd > W kategorii Komputery stacjonarne i laptopy ma udział 14 % W 2018 I 9 % W 2017 dd >
dl >
dz >
W powyższym bloku kodu tworzona jest lista opisów i wiele „ ” tagi są używane z pojedynczym „ ”znacznik.
Po zakończeniu fazy kompilacji:
Powyższa migawka pokazuje, że wiele terminów jest przypisanych do jednego opisu.
Wniosek
Lista opisów jest tworzona przy użyciu listy opisów „ ”, który tworzy kontener dla elementów listy i ich opisu. Ponadto „ Znacznik ” oznacza nazwę elementu, którego opis ma zostać podany. Podczas ' Znacznik ” przechowuje odpowiedni opis. W tym artykule zademonstrowano wykorzystanie listy opisów w HTML.