Listy

Listy są bardziej powszechne, niż Ci się wydaje. Jeśli zdarzyło Ci się brać udział w zajęciach z programowania, pierwszym projektem było utworzenie z listy zakupów lub zadań. To są listy. Testy jednokrotnego wyboru to zwykle ponumerowane listy pytań: wiele możliwych odpowiedzi dla każdego pytania to listy zagnieżdżone.

Kod HTML oferuje kilka różnych sposobów dodawania znaczników do list. Dostępne są listy uporządkowane (<ol>), listy nieuporządkowane (<ul>) i listy opisów (<dl>). Pozycje list (<li>) są zagnieżdżone w listach uporządkowanych i nieuporządkowanych. Na liście opisów znajdziesz warunki opisu (<dt>) i opis szczegóły <dd>. Omówimy je wszystkie.

W postaci HTML listy elementów <option> tworzą zawartość <datalist>, <select> i <optgroup> w elemencie <select>. Są one omawiane w formularzach HTML.

W menu i na listach nieuporządkowanych elementy listy zwykle są wyświetlane w postaci listy punktowanej. W przypadku list uporządkowanych są one zwykle poprzedzone licznikiem rosnącym, np. cyfrą lub literą. Kolejność punktowania i numerację można kontrolować lub odwracać za pomocą kodu HTML lub CSS, lub jedno i drugie.

Domyślnie uporządkowane i nieuporządkowane elementy listy są poprzedzone cyframi lub punktorami. Jeśli jednak nie chcesz, aby listy wyglądały jak listy, nadal potrzebujesz listy elementów, np. na paskach nawigacyjnych, listy zadań z polami wyboru zamiast punktorów lub pytań typu prawda i fałsz. w teście jednokrotnego wyboru. W przypadku wszystkich takich list bez punktorów można użyć elementów listy HTML.

Listy nieuporządkowane

Element <ul> jest elementem nadrzędnym w przypadku nieuporządkowanych list elementów. Jedyne elementy podrzędne elementu <ul> to co najmniej 1 lista <li> elementów elementu. Utwórzmy listę maszyn. Korzystamy z listy nieuporządkowanej, ponieważ kolejność nie ma znaczenia (nie informuj ich o tym):

Domyślnie każdy element listy nieuporządkowanej jest poprzedzony kropką. Lista nieuporządkowana nie ma atrybutów właściwych dla poszczególnych elementów. Musisz zamknąć swoje listy za pomocą funkcji </ul>.

Listy numerowane

Element <ol> jest elementem nadrzędnym w przypadku uporządkowanych list elementów. Jedyne elementy podrzędne elementu <ol> to co najmniej 1 element <li> lub element listy. Punktory w tym przypadku są to jednak liczby różnych typów. Typ można określić w CSS za pomocą właściwości list-style-type lub za pomocą atrybutu type.

Element <ol> ma 3 atrybuty związane z elementami: type, reversed i start.

Wyliczony atrybut type określa typ numerowania. Parametr type ma pięć prawidłowych wartości, a domyślna to 1 dla cyfr, ale możesz też użyć liter A, A, i lub I dla małych i dużych liter oraz cyfr rzymskich. Właściwość list-style-type daje o wiele więcej wartości.

Chociaż, jak wspomniano w kodzie kodu, właściwość list-style-type zastępuje wartość atrybutu type podczas pisania dokumentacja, w której trzeba używać numeru liczbowego, np. w przypadku dokumentów prawnych należy użyć znaku type.

Jeśli zostanie uwzględniony atrybut wartości logicznej reversed, odwróci kolejność liczb, zaczynając od największej do najmniejszej. Atrybut start ustawia wartość początkową. Wartość domyślna to 1.

Podobnie jak w przypadku </ul> wymagany jest zamykający tag </ol>.

Możemy zagnieżdżać listy, ale muszą one być zagnieżdżone w elemencie listy. Pamiętaj, że jedynym elementem, który może być element podrzędny elementu <ul> lub <ol> jest co najmniej jednym elementem <li>.

Pozycje listy

Używaliśmy już elementu <li>, ale nie przedstawiliśmy go jeszcze oficjalnie. Element <li> może być bezpośrednim elementem podrzędnym elementu nieuporządkowanego listę (<ul>), listę uporządkowaną (<ol>) lub menu (<menu>). Element <li> musi być zagnieżdżony jako element podrzędny jednego z tych elementów. nie obowiązuje nigdzie indziej.

Specyfikacja nie wymaga zamknięcia elementu listy, ponieważ zostanie on zamknięty, gdy przeglądarka napotka kolejny element <li> tag otwierający lub wymagany tag zamykający listy: </ul>, </ol>, </menu>. Chociaż specyfikacja tego nie wymaga, a niektóre wewnętrzne firmy sprawdzone metody zalecają, aby nie zamykać elementów listy w celu zaoszczędzenia części bajtów. Zamknij tagi <li>. Sprawia, że kod jest bardziej czytelny twoje przyszłe ja za to Ci podziękuje. Zamykanie wszystkich elementów jest łatwiejsze niż zapamiętanie, które tagi należy zamknąć, a które mają opcjonalny tag zamykający.

Występuje tylko 1 atrybut <li> dotyczący konkretnego elementu: value – liczba całkowita. Pole value jest przydatne w elemencie <li> tylko wtedy, gdy element <li> jest umieszczony wewnątrz jest listą uporządkowaną i nie ma znaczenia dla list ani menu nieuporządkowanych. Zastępuje wartość początku elementu <ol>, jeśli występuje konflikt.

value to numer pozycji na liście uporządkowanej. W przypadku kolejnych pozycji listy kontynuuj numerowanie od ustawiona jest wartość, chyba że produkt ma też ustawiony atrybut value. Wartość nie musi być porządkowa. chociaż jeśli nie wszystko jest w porządku, to musi być dobry powód.

Gdy połączysz atrybut reversed w elemencie <ol> z atrybutami value w przypadku elementów listy, przeglądarka ustawi <li> na wartość i odliczaj pozostałe wartości <li>, które ją poprzedzają. Jeśli drugi element listy ma atrybut value, licznik zostanie zresetowany na drugiej pozycji na liście, a następna wartość będzie się zmniejszać o jeden.

Wszystkim tym możesz sterować za pomocą liczników CSS. dostarcza wygenerowaną treść dla pseudoelementu ::marker. Jeśli liczba ma charakter czysto prezentacyjny, użyj CSS. Użyj tych atrybutów, jeśli numeracja ma znaczenie semantyczne lub ma inne znaczenie.

Do tej pory przyjrzeliśmy się elementom list zawierającym tylko węzły tekstowe. Pozycje list mogą zawierać całą treść przepływu, co oznacza znaleziono w treści element, który (wraz z nagłówkami) może być zagnieżdżony jako bezpośredni element podrzędny elementu <body>, co pozwala dzielić zawartość na sekcje.

W MLW mamy kilka list nieuporządkowanych. W sekcji nauczycieli znajdują się listy nauczycieli, podobnie jak komputery uczniów w opiniach. . Nauczyciel <ul> ma 2 elementy <li>: po jednym dla każdego nauczyciela. Każdy element typu <li> zawiera obraz i akapit:

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal">
    <p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, &lt;NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve">
    <p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
  </li>
</ul>

Sekcja opinii ma 3 opinie, więc 3 elementy <li>. Każdy zawiera obraz, cytat blokowy i 3-wierszowy akapit z dwoma znakami podziału wiersza.

<ul>
  <li>
    <img src="images/blender.svg" alt="Blender">
    <blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
    <p>
      --Blendan Smooth,<br/>
      Former Margarita Maker, <br/>
      Aspiring Load Balancer
    </p>
  </li>
  <li>
    <img src="images/vaccuum.svg" alt="Vaccuum"/>
    <blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
    <p>
      --Hoover Sukhdeep,<br/>
      Former Sucker, <br/>
      Aspiring DDoS Cop
    </p>
  </li>
  <li>
    <img src="images/toaster.svg" alt="Toaster">
    <blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
    <span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ&nbsp;̗̰͓̲̞̀t͙̀o̟̖͖̹̕&nbsp;͓̼͎̝͖̭dó̪̠͕̜&nbsp;͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢&nbsp;̰̳̯̮͇i</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

Często zdarza się też zagnieżdżenie list w obrębie list. W przypadku MLW nie ma żadnych zagnieżdżonych list, ale ta witryna je ma. W pierwszym rozdziale serii Omówienie języka HTML: sekcja z głównymi elementami składa się z 2 podsekcji. W spisie treści, który jest listą nieuporządkowaną, znajduje się zagnieżdżony lista nieuporządkowana z linkami do tych dwóch sekcji:

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Non-replaced elements</a>
      </li>
      <li>
        <a href="#rave">Replaced and void elements</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#a">Attributes</a>
  </li>
  <li>
    <a href="#aoe">Appearance of elements</a>
  </li>
  <li>
    <a href="#e2">Element, attributes, and JavaScript</a>
  </li>
</ul>

Jedynym elementem podrzędnym elementu <ul> jest <li>, więc zagnieżdżona lista znajduje się zagnieżdżona w elemencie <li>, a nie bezpośrednio w elemencie <ol> ani <ul>.

W ostatnim przykładzie udało Ci się zauważyć, że <ul> zawiera tag role="list". Chociaż pośrednia rola <ul> i <ol> mają wartość list, co usuwa wygląd listy w CSS, w tym ustawienia display: grid i list-style-type: none może spowodować usunięcie niejawnej semantyki w Safari, jeśli funkcja VoiceOver (czytnik ekranu w systemach iOS i macOS) zostanie usunięta. To funkcja, a nie błąd. Ogólnie nie należy dodawać atrybutu role, gdy używasz elementów semantycznych, ponieważ nie jest to konieczne. Nie trzeba też dodać element do listy, chyba że użytkownik naprawdę musi wiedzieć, że jest ona na liście – na przykład kiedy użytkownik zyska na podstawie informacji o liczbie pozycji na liście.

Listy opisów

Lista opisów to element listy opisów (<dl>) zawierający seria (0 lub więcej) haseł opisu (<dt>) oraz szczegóły opisu (<dd>). oryginalne nazwy tych 3 elementów, to „lista definicji”, "definicja", i „definicja”. Zmiana nazwy w standardzie mieszkalnym.

Podobnie jak listy uporządkowane i nieuporządkowane, mogą one być zagnieżdżone. W przeciwieństwie do list uporządkowanych i nieuporządkowanych listy te składają się z par klucz-wartość. Podobnie jak <ul> i <ol> kontener nadrzędnym jest <dl>. Elementy <dt> i <dd> są elementami podrzędnymi elementu <dl>.

Możemy utworzyć listę urządzeń z ich historią i aspiracjami. Lista opisów uczniów oznaczonych etykietą <dl>, obejmuje grupę haseł – w tym przypadku są to „warunki” to imiona i nazwiska uczniów – określone za pomocą elementu <dt> wraz z opisem dla każdego semestru – w tym przypadku celów zawodowych każdego ucznia – z określonych za pomocą elementów <dd>.

Ta lista opisów nie jest częścią strony MLW. Listy opisów nie służą tylko do zapisywania terminów i definicji, dlaczego nazwy elementów stały się bardziej ogólne.

Podczas tworzenia listy haseł wraz z ich definicjami lub opisami albo podobnych list par klucz-wartość, w opisie wymienione są elementy określ odpowiednią semantykę. Pośrednia rola roli <dt> to term, gdzie listitem to kolejna dopuszczalna rola. Pośrednia rola Element <dd> ma stan definition, przy czym nie ma innych dozwolonych ról. W przeciwieństwie do elementów <ul> i <ol> element <dl> nie ma domyślnej roli ARIA. Ma to sens, ponieważ <dl> nie zawsze jest listą. ale wtedy, gdy jest dostępny, akceptuje role list i group.

Najczęściej natrafisz na listy opisów z równą liczbą elementów <dt> i <dd>. Listy opisów nie zawsze są jednak dostępne nie muszą do siebie pasować w postaci par hasła i opisu; możesz mieć wiele do jednego lub wiele, tak jak hasło ze słownika które mają więcej niż jedną definicję.

Z każdym elementem <dt> powiązany jest co najmniej 1 element <dd>, a każdy element typu <dd> ma co najmniej 1 powiązany element <dt>. Mimo że można użyj kombinatora równorzędnego lub funkcji relacyjnej :has() , aby kierować zmienne liczbowe tych elementów za pomocą CSS. W razie potrzeby możesz dodać Element <div> jako element podrzędny elementu <dl> oraz element nadrzędny co najmniej jednego elementu <dt> lub <dd> (albo obu) jest dozwolony. <dl> może masz kilkoro innych dzieci: dozwolone jest zagnieżdżenie typu <div>, <template> lub <script>. Żaden z elementów listy opisów nie ma żadnych atrybutów związanych z określonymi elementami.

Wiesz już, czym są linki i listy, więc połączymy je, aby utworzyć nawigację.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o listach.