รายการ

bookmark_border จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

รายการต่างๆ พบได้บ่อยกว่าที่คุณคิด หากคุณเคยเรียนวิชาการเขียนโปรแกรม มาก่อน โปรเจ็กต์แรกอาจเป็นการสร้างรายการช็อปปิ้งหรือรายการสิ่งที่ต้องทำ ซึ่งก็คือรายการ โดยทั่วไปแล้วแบบทดสอบแบบปรนัยจะเป็นรายการคำถามที่มีหมายเลข คำตอบที่เป็นไปได้หลายคำตอบสำหรับแต่ละคำถามจะเป็นรายการที่ซ้อนกัน

HTML มีวิธีต่างๆ ในการมาร์กอัปรายการ มีรายการที่เรียงลำดับ (<ol>) รายการที่ไม่เรียงลำดับ (<ul>) และรายการคำอธิบาย (<dl>) รายการย่อย (<li>) จะซ้อนอยู่ภายในรายการที่เรียงลำดับและรายการที่ไม่เรียงลำดับ ในรายการคำอธิบาย คุณจะเห็นคำอธิบาย (<dt>) และ รายละเอียดคำอธิบาย <dd>. เราจะกล่าวถึงทั้งหมดนี้ที่นี่

ในแบบฟอร์ม HTML รายการองค์ประกอบ <option> จะประกอบเป็นเนื้อหาของ <datalist> <select> และ <optgroup> ภายใน <select> ซึ่งจะกล่าวถึงในส่วน แบบฟอร์ม HTML

ในเมนูและรายการที่ไม่มีลำดับ ระบบมักจะแสดงรายการโดยใช้สัญลักษณ์แสดงหัวข้อย่อย ในรายการที่เรียงลำดับ มักจะนำหน้าด้วยตัวนับที่เพิ่มขึ้น เช่น ตัวเลขหรือตัวอักษร คุณควบคุมหรือย้อนกลับลำดับของหัวข้อย่อยและลำดับเลขได้ด้วย HTML หรือ CSS หรือทั้ง 2 อย่าง

โดยค่าเริ่มต้น ระบบจะนำหน้ารายการในรายการแบบเรียงลำดับและไม่เรียงลำดับด้วยตัวเลขหรือสัญลักษณ์แสดงหัวข้อย่อย แต่แม้ว่าคุณจะไม่ต้องการให้รายการดูเหมือนรายการ คุณก็ยังต้องการรายการของรายการต่างๆ เช่น ในแถบนำทาง รายการสิ่งที่ต้องทำที่มีช่องทำเครื่องหมายแทนสัญลักษณ์หัวข้อย่อย หรือคำถามจริงและเท็จ ในการทดสอบแบบปรนัย สำหรับรายการทั้งหมดที่ไม่มีสัญลักษณ์หัวข้อย่อย ควรใช้องค์ประกอบรายการ HTML

รายการที่ไม่เรียงลำดับ

องค์ประกอบ <ul> เป็นองค์ประกอบระดับบนสุดสำหรับรายการสินค้าที่ไม่มีลำดับ องค์ประกอบย่อยของ <ul> มีเพียงองค์ประกอบรายการ <li> อย่างน้อย 1 รายการ มาสร้างรายการอุปกรณ์กัน เราใช้รายการที่ไม่มีลำดับเนื่องจากลำดับไม่สำคัญ (อย่าบอกพวกเขา)

โดยค่าเริ่มต้น รายการในรายการที่ไม่มีลำดับแต่ละรายการจะมีสัญลักษณ์หัวข้อย่อยนำหน้า รายการที่ไม่มีลำดับไม่มีแอตทริบิวต์เฉพาะองค์ประกอบ คุณต้องปิดรายการด้วย </ul>

รายการตามลำดับ

องค์ประกอบ <ol> คือองค์ประกอบระดับบนสุดสำหรับรายการที่มีการจัดลำดับ องค์ประกอบย่อยของ <ol> ต้องเป็นองค์ประกอบ <li> อย่างน้อย 1 รายการหรือรายการในลิสต์ แต่ในกรณีนี้ "หัวข้อย่อย" คือตัวเลขหลายประเภท คุณกำหนดประเภทได้ใน CSS ด้วยพร็อพเพอร์ตี้ list-style-type หรือด้วยแอตทริบิวต์ type

<ol> มีแอตทริบิวต์เฉพาะองค์ประกอบ 3 รายการ ได้แก่ type, reversed และ start

แอตทริบิวต์ type ที่แจงนับจะกำหนดประเภทการกำหนดหมายเลข type มีค่าที่ถูกต้อง 5 ค่า โดยค่าเริ่มต้นคือ 1 สำหรับตัวเลข แต่คุณยังใช้ a, A, i หรือ I สำหรับตัวอักษรพิมพ์เล็กและพิมพ์ใหญ่ หรือเลขโรมันได้ด้วย พร็อพเพอร์ตี้ list-style-type มีค่าอีกมากมาย

แม้ว่าพร็อพเพอร์ตี้ list-style-type จะลบล้างค่าของแอตทริบิวต์ type ตามที่ระบุไว้ใน Codepen แต่เมื่อเขียนเอกสารที่ประเภทตัวเลขมีความสำคัญ เช่น เอกสารทางกฎหมาย คุณจะต้องใส่ type

หากรวมแอตทริบิวต์บูลีน reversed ไว้ ระบบจะกลับลำดับของตัวเลข จากตัวเลขที่ใหญ่ที่สุดไปหาตัวเลขที่เล็กที่สุด แอตทริบิวต์ start จะกำหนด ค่าเริ่มต้น ค่าเริ่มต้นคือ 1

เช่นเดียวกับ </ul> คุณต้องระบุ </ol> ปิด

เราสามารถซ้อนรายการได้ แต่ต้องซ้อนภายในรายการ โปรดทราบว่าองค์ประกอบเดียวที่เป็นองค์ประกอบย่อยของ <ul> หรือ <ol> คือองค์ประกอบ <li> อย่างน้อย 1 รายการ

รายการ

เราได้ใช้องค์ประกอบ <li> แล้ว แต่ยังไม่ได้เปิดตัวอย่างเป็นทางการ องค์ประกอบ <li> อาจเป็นองค์ประกอบย่อยโดยตรงของรายการที่ไม่มีลำดับ (<ul>), รายการที่มีลำดับ (<ol>) หรือเมนู (<menu>) องค์ประกอบ <li> ต้องซ้อนกันเป็นองค์ประกอบย่อยขององค์ประกอบใดองค์ประกอบหนึ่งเหล่านี้ และใช้ที่อื่นไม่ได้

ข้อกำหนดไม่ได้กำหนดให้ปิดรายการเนื่องจากจะปิดโดยนัยเมื่อเบราว์เซอร์พบแท็กเปิด <li> ถัดไปหรือแท็กปิดรายการที่จำเป็น: </ul>, </ol>, </menu> แม้ว่าข้อกำหนดจะไม่บังคับและแนวทางปฏิบัติแนะนำภายในบริษัทบางส่วนจะแนะนำว่าไม่ควรปิดรายการเพื่อประหยัดไบต์ แต่คุณก็ยังควรปิดแท็ก <li> ซึ่งจะช่วยให้อ่านโค้ดได้ง่ายขึ้น และ ตัวคุณในอนาคตจะขอบคุณ การปิดองค์ประกอบทั้งหมดจะง่ายกว่าการจำว่าแท็กใดที่ต้องปิดและแท็กใดที่มีแท็กปิดที่ไม่บังคับ

มีแอตทริบิวต์ <li> ที่เฉพาะเจาะจงองค์ประกอบเพียง 1 รายการ ได้แก่ value ซึ่งเป็นจำนวนเต็ม value มีประโยชน์ใน <li> เท่านั้นเมื่อ <li> ซ้อนอยู่ภายใน รายการที่เรียงลำดับ และไม่มีความหมายสำหรับรายการที่ไม่ได้เรียงลำดับหรือเมนู โดยจะลบล้างค่าของ<ol>'s start หากเกิดความขัดแย้ง

value คือหมายเลขของรายการในรายการที่เรียงลำดับ สำหรับรายการถัดไป ให้ใช้การเรียงลำดับเลขต่อจากค่าที่ตั้งไว้ เว้นแต่รายการนั้นจะมีแอตทริบิวต์ value ตั้งค่าไว้ด้วย ค่าไม่จำเป็นต้องเรียงตามลำดับ แต่หากไม่ได้เรียงตามลำดับ ก็ควรมีเหตุผลที่สมควร

เมื่อรวม reversed ใน <ol> กับแอตทริบิวต์ value ในรายการ เบราว์เซอร์จะตั้งค่า <li> เป็นค่าที่ระบุ จากนั้นจะนับขึ้นสำหรับ <li> ที่อยู่ก่อนหน้า และนับลงสำหรับรายการที่อยู่ถัดไป หากรายการในลิสต์ที่ 2 มีแอตทริบิวต์ค่า เคาน์เตอร์จะรีเซ็ตที่รายการในลิสต์ที่ 2 นั้น และค่าถัดไปจะลดลง 1

คุณยังควบคุมทั้งหมดนี้ได้ด้วยตัวนับ CSS ซึ่งให้เนื้อหาที่สร้างขึ้นสำหรับ::markerองค์ประกอบเสมือน หากตัวเลขเป็นเพียงการนำเสนอ ให้ใช้ CSS หากการกำหนดหมายเลขมีความสำคัญในเชิงความหมายหรือมีความหมายอื่นๆ ให้ใช้แอตทริบิวต์เหล่านี้

ที่ผ่านมา เราได้ดูรายการที่มีเฉพาะโหนดข้อความ รายการสามารถมีเนื้อหาทั้งหมดที่ไหลได้ ซึ่งหมายถึงองค์ประกอบใดก็ตามที่พบในส่วนเนื้อหาที่สามารถซ้อนเป็นองค์ประกอบย่อยโดยตรงของ <body> รวมถึงส่วนหัว ซึ่งจะแบ่งเนื้อหาออกเป็นส่วนๆ

เรามีรายการที่ไม่มีลำดับอยู่ 2-3 รายการใน MLW ครูในส่วนผู้สอนจะอยู่ในรายการเดียวกับเครื่องของนักเรียนในส่วนรีวิว ผู้สอน<ul>มี<li> 2 รายการ โดยมี 1 รายการสำหรับครูแต่ละคน ภายในแต่ละ <li> เรามีรูปภาพและย่อหน้าดังนี้

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

ส่วนรีวิวมีรีวิว 3 รายการ จึงมี <li> 3 รายการ โดยแต่ละรายการจะมีรูปภาพ ข้อความที่ยกมา และย่อหน้า 3 บรรทัดที่มีการขึ้นบรรทัดใหม่ 2 ครั้ง

<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.</blockquote>
    <p>
      --Toasty McToastface,<br/>
      Formerly Half Baked, <br/>
      Aspiring Nuclear Codes Handler
    </p>
  </li>
</ul>

การซ้อนรายการภายในรายการก็เป็นเรื่องปกติเช่นกัน แม้ว่า MLW จะไม่มีรายการที่ซ้อนกัน แต่เว็บไซต์นี้มี ในโมดูลแรกของชุดนี้ ภาพรวมของ HTML ส่วนองค์ประกอบหลักมี 2 ส่วนย่อย ในสารบัญซึ่งเป็นรายการที่ไม่มีลำดับ จะมีรายการที่ไม่มีลำดับแบบซ้อนกันพร้อมลิงก์ไปยัง 2 ส่วนต่อไปนี้

<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> คือ <li> ดังนั้นรายการที่ซ้อนกันจะซ้อนอยู่ใน <li> ไม่ใช่ใน <ol> หรือ <ul> โดยตรง

ในตัวอย่างสุดท้ายนี้ คุณอาจสังเกตเห็นว่า role="list" รวมอยู่ใน <ul> แม้ว่าบทบาทโดยนัยของทั้ง <ul>และ<ol>คือlist การนำลักษณะที่ปรากฏของรายการออกด้วย CSS รวมถึงการตั้งค่าdisplay: gridหรือlist-style-type: none อาจทำให้ VoiceOver (โปรแกรมอ่านหน้าจอของ iOS และ MacOS) นำความหมายโดยนัยใน Safari ออก นี่เป็นฟีเจอร์ ไม่ใช่ข้อบกพร่อง โดยทั่วไป คุณไม่ควรเพิ่มแอตทริบิวต์บทบาทเมื่อใช้องค์ประกอบเชิงความหมาย เนื่องจากไม่จำเป็น และโดยทั่วไปแล้วคุณไม่จำเป็นต้อง เพิ่มรายการลงในรายการด้วย เว้นแต่ผู้ใช้จำเป็นต้องทราบจริงๆ ว่าเป็นรายการ เช่น เมื่อผู้ใช้จะได้รับประโยชน์จากการทราบจำนวนรายการในลิสต์

รายการคำอธิบาย

รายการคำอธิบายคือองค์ประกอบรายการคำอธิบาย (<dl>) ที่มีชุดของคำอธิบาย (<dt>) (ตั้งแต่ 0 รายการขึ้นไป) และรายละเอียดคำอธิบาย (<dd>) ชื่อเดิมขององค์ประกอบทั้ง 3 นี้คือ "รายการคำจำกัดความ" "คำจำกัดความ" และ "คำจำกัดความ" ชื่อเปลี่ยนในมาตรฐานการครองชีพ

โดยสามารถซ้อนรายการได้เช่นเดียวกับรายการที่เรียงลำดับและไม่เรียงลำดับ ซึ่งแตกต่างจากรายการที่เรียงลำดับและรายการที่ไม่ได้เรียงลำดับตรงที่รายการเหล่านี้ประกอบด้วยคู่คีย์/ค่า <dl> เป็นคอนเทนเนอร์ระดับบนสุดเช่นเดียวกับ <ul> และ <ol> องค์ประกอบ <dt> และ <dd> เป็นองค์ประกอบย่อยของ <dl>

เราสามารถสร้างรายการเครื่องจักรพร้อมประวัติการทำงานและความใฝ่ฝันได้ รายการคำอธิบายของนักเรียนซึ่งระบุด้วย <dl> จะล้อมรอบกลุ่มคำที่ ระบุโดยใช้องค์ประกอบ <dt> พร้อมกับคำอธิบายสำหรับแต่ละคำที่ ระบุโดยองค์ประกอบ <dd> ในกรณีนี้ "คำ" คือชื่อนักเรียน และคำอธิบายคือเป้าหมายทางอาชีพของนักเรียนแต่ละคน

รายการคำอธิบายนี้ไม่ได้เป็นส่วนหนึ่งของหน้า MLW จริงๆ รายการคำอธิบาย ไม่ได้มีไว้สำหรับคำศัพท์และคำจำกัดความเท่านั้น ชื่อขององค์ประกอบจึงเป็นชื่อทั่วไปมากขึ้น

เมื่อสร้างรายการคำศัพท์และคำจำกัดความหรือคำอธิบายของคำศัพท์เหล่านั้น หรือรายการคู่คีย์-ค่าที่คล้ายกัน องค์ประกอบรายการคำอธิบายจะให้ความหมายที่เหมาะสม บทบาทโดยนัยของ <dt> คือ term โดย listitem เป็นอีกบทบาทหนึ่งที่อนุญาต บทบาทโดยนัยของ <dd> คือ definition โดยไม่มีบทบาทอื่นๆ ที่ได้รับอนุญาต <dl> ต่างจาก <ul> และ <ol> ตรงที่ไม่มีบทบาท ARIA โดยนัย ซึ่งสมเหตุสมผลเนื่องจาก <dl> ไม่ได้เป็นรายการเสมอไป แต่หากเป็นเช่นนั้น ก็จะยอมรับบทบาทlistและgroup

ส่วนใหญ่แล้วคุณจะเห็นรายการคำอธิบายที่มีองค์ประกอบ <dt> และ <dd> เท่ากัน แต่รายการคำอธิบายไม่จำเป็นต้องจับคู่คำกับคำอธิบายเสมอไป คุณสามารถมีคำอธิบายหลายรายการสำหรับคำเดียว หรือคำอธิบายเดียวสำหรับหลายคำก็ได้ เช่น คำในพจนานุกรม ที่มีคำจำกัดความมากกว่า 1 รายการ

<dt> แต่ละรายการมี <dd> ที่เชื่อมโยงอย่างน้อย 1 รายการ และ <dd> แต่ละรายการมี <dt> ที่เชื่อมโยงอย่างน้อย 1 รายการ แม้ว่าคุณจะใช้ตัวเลือกแบบรวมขององค์ประกอบที่อยู่ติดกันหรือ:has()ตัวเลือกเชิงสัมพันธ์เพื่อกำหนดเป้าหมายองค์ประกอบเหล่านี้จำนวนที่เปลี่ยนแปลงได้ด้วย CSS ได้ แต่หากจำเป็น คุณก็สามารถใส่ <div> เป็นองค์ประกอบย่อยของ <dl> และองค์ประกอบระดับบนสุดขององค์ประกอบ <dt> หรือ <dd> อย่างน้อย 1 รายการ (หรือทั้ง 2 รายการ) ได้ <dl> สามารถมี บุตรหลานคนอื่นๆ ได้ด้วย โดยอนุญาตให้ซ้อน <div>, <template> หรือ <script> องค์ประกอบรายการคำอธิบายไม่มีแอตทริบิวต์เฉพาะองค์ประกอบ

ตอนนี้คุณมีความเข้าใจเกี่ยวกับลิงก์และรายการแล้ว มาใช้ทั้ง 2 อย่างร่วมกันเพื่อสร้างการนำทางกัน

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับรายการ