Listeler

Listeler düşündüğünüzden daha yaygındır. Daha önce bir programlama dersi aldıysanız ilk projeniz bir programlama ya da yapılacaklar listesidir. Bunlar listeler. Çoktan seçmeli testler, genellikle soru listeleridir: birden çok olası yanıt iç içe yerleştirilmiş listelerdir.

HTML, listeleri işaretlemek için bize birkaç farklı yol sağlar. Sıralı listeler (<ol>), sıralanmamış listeler (<ul>) ve açıklama listeleri (<dl>) bulunur. Liste öğeleri (<li>), sıralı ve sırasız listelerin içine yerleştirilir. Açıklama listesinde açıklama terimlerini (<dt>) ve açıklamayı görürsünüz ayrıntılar <dd>. Tüm bunları burada ele alacağız.

HTML biçimlerinde, <option> öğelerinden oluşan listeler <select> içindeki <datalist>, <select> ve <optgroup> içeriklerini oluşturur. Bunlar, HTML formlarında ele alınır.

Menülerde ve sıralanmamış listelerde, liste öğeleri genellikle madde işaretleri kullanılarak görüntülenir. Sıralı listelerde, bu listeler genellikle artan bir sayaçla (ör. sayı veya harf) ekleyin. Madde işaretleri ve numaralandırma sırası HTML veya CSS ile kontrol edilebilir veya tersine çevrilebilir. ya da her ikisi de olabilir.

Varsayılan olarak, sıralı ve sırasız liste öğelerinin önünde sayılar veya madde işaretleri bulunur. Ancak listelerin liste gibi görünmesini istemseniz bile gezinme çubukları, madde işaretleri yerine onay kutuları olan bir yapılacaklar listesi veya doğru ve yanlış soruları gibi bir öğe listesi de istiyorsanız çoktan seçmeli bir teste katılacaksınız. Madde işareti içermeyen bu listelerin tümü için HTML listesi öğelerinin kullanılması uygundur.

Sırasız listeler

<ul> öğesi, sıralanmamış öğe listeleri için üst öğedir. Bir <ul> öğesinin yalnızca alt öğeleri bir veya daha fazla <li> listesidir öğe öğelerinden yararlanabilirsiniz. Makine listesi oluşturalım. Sıra önemli olmadığı için sıralanmamış bir liste kullanırız (bunu söylemeyin):

Varsayılan olarak, sıralanmamış her liste öğesinin başında bir madde işareti bulunur. Sıralanmamış listede öğeye özgü özellikler yok. Listelerinizi bir </ul> ile kapatmanız gerekiyor.

Sıralı listeler

<ol> öğesi, sıralı öğe listelerinin üst öğesidir. Bir <ol> öğesinin yalnızca alt öğeleri bir veya daha fazla <li> öğesi ya da liste öğesidir. "Madde işaretleri" Ancak burada çok çeşitli türlerde sayılar vardır. Tür, CSS'de list-style-type özelliğiyle tanımlanabilir veya type özelliği ile devreye giriyor.

<ol> öğesinin öğeye özgü üç özelliği vardır: type, reversed ve start.

Numaralanmış type özelliği, numaralandırma türünü ayarlar. type için beş geçerli değer vardır. Varsayılan değer şunun için: 1 ancak küçük ve büyük harfler ya da romen rakamları için a, A, i veya I kullanabilirsiniz. list-style-type mülkü çok daha fazla değer sunar.

Codepen'de belirtildiği gibi, list-style-type özelliği yazı yazarken type özelliğinin değerini geçersiz kılar sayısal türün önemli olduğu dokümanlara (örneğin, yasal dokümanlarda olduğu gibi) type eklemeniz gerekir.

Boole reversed özelliği (dahil), sayıların sırasını en büyük sayıdan en düşüğe doğru tersine çevirir. start özelliği, başlangıç değerini belirler. Varsayılan değer: 1.

</ul> işlevine benzer şekilde, </ol> kapanışı gereklidir.

Listeleri iç içe yerleştirebiliriz, ancak bunların bir liste öğesi içine yerleştirilmiş olması gerekir. Unutmayın, <ul> veya <ol> alt öğesi olabilecek tek öğe bir veya daha fazla <li> öğesidir.

Liste öğeleri

<li> öğesini kullandık, ancak henüz resmi olarak tanıtmadık. <li> öğesi, sıralanmamış bir öğenin doğrudan alt öğesi olabilir liste (<ul>), sıralı liste (<ol>) veya menü (<menu>). <li>, bu öğelerden birinin alt öğesi olarak iç içe yerleştirilmelidir ve başka hiçbir yerde geçerli değildir.

Tarayıcı bir sonraki <li> ile karşılaştığında liste öğesinin kapatılması dolaylı olarak kapatılacağından, spesifikasyonda bir liste öğesinin kapatılması gerekmez açılış etiketi veya gerekli liste kapanış etiketi: </ul>, </ol>, </menu>. Her ne kadar spesifikasyon gerekmese de, bazı dahili şirketler En iyi uygulamalara göre birkaç bayt tasarruf etmek için liste öğelerini kapatmamanız önerilir, <li> etiketlerinizi kapatın. Daha kolay okunmasını sağlar ve gelecekteki çabalarınız size teşekkür eder. Hangi etiketlerin kapatılması gerektiğini ve hangilerinin isteğe bağlı bir kapanış etiketine sahip olduğunu hatırlamaktansa tüm öğeleri kapatmak daha kolaydır.

Öğeye özel yalnızca bir <li> özelliği vardır: value, bir tam sayı. value yalnızca <li> <li> iç içe yerleştirilmişse sıralı bir liste değildir ve sırasız listeler ya da menüler için hiçbir anlamı yoktur. Bir çakışma olması durumunda <ol> öğesinin başlangıç değerini geçersiz kılar.

value, sıralı bir listedeki liste öğesinin numarasıdır. Sonraki liste öğeleriyle, numaralandırmaya değer ayarlanmamış olmalıdır (bu öğede value özelliği ayarlanmamışsa). Değerin sıralı olması gerekmez. ama sıralı değilse bunun geçerli bir nedeni olmalıdır.

<ol> öğesindeki reversed öğesini liste öğelerindeki value özellikleriyle birleştirdiğinizde, tarayıcı bu <li> öğesini değer girilir, ardından önündeki <li>'ler için geri sayım yapılır ve sonrakiler için geri sayım yapılır. İkinci bir liste öğesinin değer özelliği varsa sayaç, bu ikinci liste öğesinde sıfırlanır ve sonraki değer bir birim azalır.

Bunların tümü CSS sayaçlarıyla da kontrol edilebilir ::marker sözde öğe için üretilmiş içerik sağlama. Sayı tamamen sunum amaçlıysa CSS kullanın. Numaralandırma anlam açısından önemliyse veya başka bir şekilde anlamı varsa bu özellikleri kullanın.

Şu ana kadar yalnızca metin düğümleri içeren liste öğelerini inceledik. Liste öğeleri tüm akış içeriğini, yani öğede bulunan ve başlıklar dahil olmak üzere <body> öğesinin doğrudan alt öğesi olarak iç içe yerleştirilebilecek öğedir.

MLW'de birkaç sıralanmamış listemiz var. Eğitmenler bölümündeki öğretmenler ve incelemelerdeki öğrenci makineleri bir listedir. bölümüne bakın. <ul> adlı öğretmenin her öğretmen için bir tane olmak üzere iki <li>'sı var. Her <li> içinde bir resim ve bir paragraf bulunur:

<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>

Yorumlar bölümünde üç yorum var, yani üç <li>. Bunların her birinde bir resim, bir blok alıntı ve iki satır sonu bulunan üç satırlık bir paragraf bulunur.

<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>

Listeleri listelerde iç içe yerleştirmek de çok yaygın bir uygulamadır. MLW'de iç içe yerleştirilmiş liste olmasa da bu sitede mevcut. Bu serinin ilk bölümünde HTML'ye genel bakış olan ana öğeler bölümü iki alt bölümden oluşur. Sıralanmamış bir liste olan içindekiler tablosunda, iç içe yerleştirilmiş bir şu iki bölüme bağlantılar içeren sırasız liste:

<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>

<ul> öğesinin tek alt öğesi <li> olduğundan iç içe yerleştirilmiş liste, doğrudan bir <ol> veya <ul> içinde değil, <li> içine iç içe yerleştirilmiş olarak bulunur.

Bu son örnekte, role="list" öğesinin <ul> uzantısına dahil edildiğini fark etmiş olabilirsiniz. Her iki tarafın da dolaylı rolü <ul> ve <ol> değeri list. display: grid veya list-style-type: none ayarı da dahil olmak üzere CSS ile liste görünümünü kaldırıyor VoiceOver'ın (iOS ve MacOS ekran okuyucu) Safari'deki örtülü anlamları kaldırmasına neden olabilir. Bu hata değil bir özelliktir. Genel olarak, semantik öğeleri kullanırken gerekli olmadığı için rol özelliğini eklememeniz gerekir. Genellikle bir projeye Kullanıcı bunun bir liste olduğunu gerçekten bilmesi gerekmiyorsa (örneğin, listede kaç öğe olduğunu öğrenmekten ne zaman yararlanacağı gibi) bunu listeye eklememelisiniz.

Açıklama listeleri

Açıklama listesi, şunları içeren bir açıklama listesi (<dl>) öğesidir: bir dizi (sıfır veya daha fazla) açıklama terimi (<dt>) ve açıklama ayrıntıları (<dd>). Bu üç öğenin orijinal adları "tanım listesi", "tanım terimi" ve "tanım tanımı". Yaşam standardında ad değişti.

Sıralı ve sırasız listelere benzer şekilde, iç içe yerleştirilebilirler. Sıralı ve sırasız listelerin aksine, bu listeler anahtar/değer çiftlerinden oluşur. <ul> ve <ol>'ye benzer şekilde <dl>, üst kapsayıcıdır. <dt> ve <dd> öğeleri, <dl> öğesinin alt öğeleridir.

Kariyer geçmişlerini ve hedeflerini içeren bir makine listesi oluşturabiliriz. <dl> ile gösterilen bir öğrenci açıklama listesi, bir terim grubu (bu örnekte "terimler" bir açıklamayla birlikte <dt> öğesi kullanılarak belirtilen öğrenci adlarıdır (bu örnekte her öğrencinin kariyer hedefleri) <dd> öğeleriyle belirtilir.

Bu açıklama listesi aslında MLW sayfasının bir parçası değildir. Açıklama listeleri yalnızca terimler ve tanımlar için değildir. öğe adlarının neden daha genel hale getirildiği.

Terimler ve tanımları veya açıklamaları ya da benzer anahtar/değer çiftleri listesi oluştururken açıklamada öğeler listelenir. uygun anlamları sağlayın. <dt> öğesinin dolaylı rolü term, listitem izin verilen başka bir roldür. Dolaylı rol <dd> için definition verilir ve başka rollere izin verilmez. <ul> ve <ol> öğelerinin aksine, <dl> örtülü bir ARIA rolüne sahip değildir. <dl> her zaman bir liste olmadığından bu normaldir. Ancak böyle bir durumda list ve group rolleri kabul edilir.

Çoğunlukla eşit sayıda <dt> ve <dd> öğesine sahip açıklama listeleriyle karşılaşırsınız. Ancak açıklama listeleri her zaman terim-açıklama çiftleri arasında eşleşme olması gerekmez; sözlük terimi gibi, bire bir veya bire birden olabilirsiniz. birden fazla tanımı olan bir şablondur.

Her <dt>, en az bir ilişkilendirilmiş <dd> özelliğine ve her <dd> ile en az bir ilişkilendirilmiş <dt> var. Her ne kadar eşdüzey kardeş birleştirici veya :has() ilişkiselini kullanın seçici (gerekirse CSS ile bu öğelerin değişken numaralarını hedeflemek için) bir <dl> alt öğesi olarak bir <div> ve bir veya daha fazla <dt> ya da <dd> öğesinin (ya da her ikisinin) üst öğesine izin verilir. <dl> aslında birkaç alt öğesi daha var: <div>, <template> veya <script> öğesinin iç içe yerleştirilmesine izin verilir. Açıklama listesi öğelerinin hiçbirinde öğeye özgü özellik yok.

Artık bağlantıları ve listeleri anladığınıza göre gezinme oluşturmak için bunları bir araya getirelim.

Öğrendiklerinizi sınayın

Listelerle ilgili bilginizi test edin.