ลิสต์พบได้บ่อยกว่าที่คุณคิด หากคุณเคยเรียนการเขียนโปรแกรม โครงการแรกอาจเป็นการสร้าง รายการช็อปปิ้งหรือสิ่งที่ต้องทำ ทั้งหมดนี้คือรายการ การทดสอบแบบปรนัยมักเป็นรายการคำถามที่มีตัวเลขกำกับ ซึ่งก็คือคำตอบที่เป็นไปได้ สำหรับแต่ละคำถามเป็นรายการที่ซ้อนกันอยู่
HTML มอบวิธีต่างๆ ในการมาร์กอัปรายการให้กับเรา มีรายการตามลำดับ (<ol>) รายการที่ไม่เรียงลำดับ (<ul>) และรายการคำอธิบาย (<dl>)
รายการย่อย (<li>) ฝังอยู่ในรายการตามลำดับและรายการที่ไม่เรียงลำดับ ในรายการคำอธิบาย คุณจะพบคำที่เป็นคำอธิบาย (<dt>) และคำอธิบาย
รายละเอียด <dd>. เราจะอธิบายเรื่องทั้งหมดนี้ในที่นี้
ในรูปแบบ HTML รายการขององค์ประกอบ <option> จะประกอบด้วยเนื้อหาของ <datalist>, <select> และ <optgroup> ภายใน <select> ซึ่งกล่าวถึงในแบบฟอร์ม HTML
รายการในเมนูและรายการที่ไม่ได้เรียงลำดับมักจะแสดงโดยใช้สัญลักษณ์หัวข้อย่อย รายการที่เรียงตามลำดับ มักจะอยู่ก่อนหน้า โดยตัวนับจากน้อยไปมาก เช่น ตัวเลขหรือตัวอักษร คุณสามารถควบคุมหรือกลับลำดับสัญลักษณ์แสดงหัวข้อย่อยและลำดับตัวเลขได้ด้วย HTML หรือ CSS หรือทั้งสองอย่าง
โดยค่าเริ่มต้น รายการรายการที่เรียงลำดับและไม่เรียงลำดับจะมีตัวเลขหรือสัญลักษณ์หัวข้อย่อยนำหน้า แต่แม้คุณจะไม่ต้องการให้รายการดูเหมือนลิสต์ คุณยังคงต้องการรายการ เช่น ในแถบนำทาง รายการสิ่งที่ต้องทำที่มีช่องทำเครื่องหมายแทนที่จะเป็นหัวข้อย่อย หรือคำถามที่เป็นจริงและเท็จ ในการทดสอบแบบหลายตัวเลือก สำหรับรายการเหล่านี้ทั้งหมดที่ไม่มีสัญลักษณ์หัวข้อย่อย คุณสามารถใช้เอลิเมนต์รายการ HTML ได้
รายการที่ไม่เรียงลำดับ
องค์ประกอบ <ul> เป็นองค์ประกอบระดับบนสำหรับรายการที่ไม่เรียงลำดับ รายการย่อยเท่านั้นของ <ul> คือรายการ <li> อย่างน้อย 1 รายการ
เอลิเมนต์ของรายการ มาสร้างรายการเครื่องกัน เราใช้รายการที่ไม่เรียงลำดับเนื่องจากลำดับไม่มีความสำคัญ (อย่าบอกข้อมูลเหล่านั้น):
โดยค่าเริ่มต้น แต่ละรายการที่ไม่ได้เรียงลำดับจะมีสัญลักษณ์หัวข้อย่อยนำหน้า รายการที่ไม่ได้เรียงลำดับไม่มีแอตทริบิวต์เฉพาะขององค์ประกอบ
คุณต้องปิดรายการด้วย </ul>
รายการตามลำดับ
องค์ประกอบ <ol> เป็นองค์ประกอบระดับบนของรายการตามลำดับ องค์ประกอบย่อยๆ ของ <ol> คือองค์ประกอบ <li> อย่างน้อย 1 รายการ หรือแสดงรายการ
"หัวข้อย่อย" แต่ในกรณีนี้ เป็นจำนวนที่มีหลายประเภท คุณกําหนดประเภทได้ใน CSS ที่มีพร็อพเพอร์ตี้ list-style-type
หรือผ่านแอตทริบิวต์ type
<ol> มีแอตทริบิวต์เฉพาะองค์ประกอบ 3 รายการ ได้แก่ type, reversed และ start
แอตทริบิวต์ type แบบแจกแจงจะกำหนดประเภทของตัวเลข ค่าที่ถูกต้องมี 5 ค่าสำหรับ type ค่าเริ่มต้นคือ 1 สำหรับ
ตัวเลข แต่คุณสามารถใช้ a, A, i หรือ I สำหรับตัวอักษรตัวพิมพ์เล็กและตัวพิมพ์ใหญ่หรือเลขโรมันได้ด้วย พร็อพเพอร์ตี้ list-style-type
ให้ค่าเพิ่มเติมมากมาย
แม้ว่าพร็อพเพอร์ตี้ list-style-type จะลบล้างค่าของแอตทริบิวต์ type ขณะเขียน ตามที่ระบุไว้ในโค้ดปากกา
เอกสารที่ประเภทตัวเลขมีความสำคัญ เช่น เอกสารทางกฎหมาย คุณจะต้องใส่type
แอตทริบิวต์ reversed แบบบูลีน (หากมี) จะกลับลำดับของตัวเลขโดยเรียงจากมากไปน้อย
แอตทริบิวต์ start กำหนดค่าเริ่มต้น โดยมีค่าเริ่มต้นเป็น 1
และต้องมีการปิด </ol> เช่นเดียวกับ </ul>
เราซ้อนรายการได้ แต่รายการจะต้องซ้อนกันภายในรายการ อย่าลืมว่าองค์ประกอบเดียวที่สามารถเป็นองค์ประกอบย่อยของ <ul> หรือ <ol> ได้
เป็นองค์ประกอบ <li> อย่างน้อย 1 รายการ
รายการ
เราใช้องค์ประกอบ <li> แต่ยังไม่ได้เปิดตัวอย่างเป็นทางการ องค์ประกอบ <li> อาจเป็นรายการย่อยโดยตรงของรายการที่ไม่เรียงลำดับได้
รายการ (<ul>), รายการตามลำดับ (<ol>) หรือเมนู (<menu>) <li> จะต้องฝังเป็นลูกของหนึ่งในองค์ประกอบเหล่านี้ และ
ไม่สามารถใช้ได้ที่อื่น
ข้อกำหนดนี้ไม่จำเป็นต้องใช้การปิดรายการในลิสต์ เนื่องจากรายการจะถูกปิดโดยปริยายเมื่อเบราว์เซอร์พบกับ <li> ถัดไป
แท็กเปิดหรือแท็กปิดรายการที่จำเป็น: </ul>, </ol>, </menu> แม้ว่าข้อกำหนดเพียงอย่างเดียวจะไม่ได้จําเป็น แต่บริษัทภายในบางแห่ง
แนวทางปฏิบัติแนะนำคือคุณไม่ควรปิดรายการเพื่อประหยัดไบต์บางส่วน คุณควรปิดแท็ก <li> เพราะจะทำให้โค้ดอ่านง่ายขึ้น
ตัวตนในอนาคตของคุณจะขอบคุณจริงๆ การปิดองค์ประกอบทั้งหมดทำได้ง่ายกว่าการจำได้ว่าต้องปิดแท็กใดและแท็กใดมีแท็กปิดที่ไม่บังคับ
แอตทริบิวต์ <li> เฉพาะองค์ประกอบมีเพียง 1 รายการเท่านั้น ซึ่งก็คือ value ซึ่งเป็นจำนวนเต็ม value มีประโยชน์เฉพาะใน <li> เมื่อ <li> ซ้อนอยู่ใน
รายการที่เรียงลำดับแล้วและไม่มีความหมายสำหรับรายการหรือเมนูที่ไม่เรียงลำดับ จะลบล้างค่าการเริ่มต้นของ <ol> หากมีข้อขัดแย้ง
value คือหมายเลขของรายการภายในรายการที่เรียงลำดับแล้ว เมื่อใช้รายการต่อๆ ไป ให้ใช้ลำดับตัวเลขจาก
ตั้งค่าแล้ว เว้นแต่รายการดังกล่าวจะมีชุดแอตทริบิวต์ value ด้วย มูลค่าไม่จำเป็นต้องเรียงตามลำดับ แต่ถ้าไม่ได้เรียงตามลำดับ
ก็น่าจะมีเหตุผลที่ดี
เมื่อรวม reversed ใน <ol> เข้ากับแอตทริบิวต์ value ในรายการ เบราว์เซอร์จะตั้ง <li> นั้นเป็น
ที่ระบุ จากนั้นนับบวกสำหรับ <li> ที่นำหน้าอยู่ และนับถอยหลังสำหรับค่าที่ตามมา หากรายการที่สองมีแอตทริบิวต์ค่า
ตัวนับจะรีเซ็ตที่รายการที่สอง และค่าที่ตามมาจะลดลง 1 รายการ
นอกจากนี้ การควบคุมทั้งหมดนี้ยังควบคุมได้ด้วยตัวนับ CSS
ให้เนื้อหาที่สร้างสำหรับ::marker Pseudo-element
หากตัวเลขมีไว้สำหรับการนำเสนอเท่านั้น ให้ใช้ CSS หากตัวเลขมีความสำคัญในเชิงความหมายหรือมีความหมาย ให้ใช้แอตทริบิวต์เหล่านี้
ถึงตอนนี้ เราได้ตรวจสอบรายการที่มีเฉพาะโหนดข้อความแล้ว รายการต่างๆ อาจมีเนื้อหาสำหรับขั้นตอนทั้งหมด ซึ่งหมายความว่า
ที่พบในส่วนเนื้อหา ซึ่งสามารถซ้อนเป็นระดับย่อยของ <body> โดยตรงได้ รวมถึงส่วนหัว จึงเป็นการแบ่งส่วนเนื้อหา
เรามีรายการที่ไม่ได้เรียงลำดับใน MLW รายชื่อครูในส่วนผู้สอนประกอบด้วยรายชื่อ และอุปกรณ์ของนักเรียนในรีวิว
ผู้สอน <ul> มี <li> 2 รายการ แต่ละรายการสำหรับครูแต่ละคน ภายใน <li> แต่ละรายการ เรามีรูปภาพและย่อหน้า 1 ย่อหน้า
<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, <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. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇i</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>) (ศูนย์คำขึ้นไป) และ
รายละเอียดคำอธิบาย (<dd>) ชื่อเดิมขององค์ประกอบ 3 อย่างนี้
เป็น "รายการคำจำกัดความ" "คำจำกัดความ" และ "คำนิยาม"
ชื่อมีการเปลี่ยนแปลงในมาตรฐานการใช้งานจริง
โดยรายการเหล่านี้จะซ้อนกันได้เช่นเดียวกับรายการที่เรียงลำดับแล้วและไม่เรียงลำดับ โดยจะประกอบด้วยคู่คีย์/ค่า ซึ่งต่างจากรายการที่เรียงลำดับและไม่เรียงลำดับ
<dl> คือคอนเทนเนอร์ระดับบนสุด ซึ่งคล้ายกับ <ul> และ <ol> องค์ประกอบ <dt> และ <dd> คือองค์ประกอบย่อยของ <dl>
เราสามารถสร้างรายชื่อแมชชีนที่มีประวัติการทำงานและปณิธานของพวกเขาได้ รายชื่อนักเรียนและคำอธิบายซึ่งระบุโดย <dl>
ประกอบด้วยกลุ่มคำ ซึ่งในกรณีนี้คือ "ข้อกำหนด" เป็นชื่อนักเรียน ซึ่งระบุโดยใช้องค์ประกอบ <dt> พร้อมคำอธิบาย
สำหรับแต่ละภาคการศึกษา ซึ่งในกรณีนี้คือเป้าหมายด้านอาชีพของนักเรียนแต่ละคน ซึ่งระบุโดยองค์ประกอบ <dd>
รายการคำอธิบายนี้ไม่ได้เป็นส่วนหนึ่งของหน้า MLW รายการคำอธิบายไม่ได้มีไว้ สำหรับคำศัพท์และคำจำกัดความเท่านั้น เหตุผลที่ทำให้ชื่อองค์ประกอบต่างๆ เป็นคำทั่วๆ ไป
เมื่อสร้างรายการคำและคำจำกัดความหรือคำอธิบาย หรือรายการคู่คีย์-ค่าที่คล้ายกัน คำอธิบายจะแสดงรายการองค์ประกอบ
ให้ความหมายที่เหมาะสม บทบาทโดยนัยของ <dt> คือ term โดยที่ listitem เป็นอีกบทบาทหนึ่งที่อนุญาต บทบาทโดยนัยของ
<dd> คือ definition ที่ไม่มีบทบาทอื่นๆ ที่ได้รับอนุญาต <dl> ไม่มีบทบาท ARIA แบบโดยนัย ซึ่งต่างจาก <ul> และ <ol>
สมเหตุสมผลเพราะ <dl> อาจไม่ใช่ลิสต์เสมอไป แต่เมื่อใช่ ระบบจะยอมรับบทบาท list และ group
โดยส่วนใหญ่คุณจะพบรายการคำอธิบายที่มีจำนวนองค์ประกอบ <dt> และ <dd> เท่ากัน แต่รายการคำอธิบายอาจไม่ได้เป็นเช่นนั้นเสมอไป
ไม่จำเป็นต้องเป็นคู่คำต่อคำอธิบายที่ตรงกัน สามารถมีหลายรายการต่อ 1 หรือ 1 ต่อหลายรายการ เช่น คำศัพท์ในพจนานุกรม
ที่มีคำจำกัดความมากกว่า 1 รายการ
<dt> แต่ละรายการมี <dd> ที่เชื่อมโยงอย่างน้อย 1 รายการ และ <dd> แต่ละรายการมี <dt> ที่เชื่อมโยงอย่างน้อย 1 รายการ แม้ว่าจะสามารถ
ใช้ ชุดค่าผสมระดับเดียวกันที่อยู่ติดกันหรือ :has() เชิงสัมพันธ์
ตัวเลือกเพื่อกำหนดเป้าหมายจำนวนตัวแปรขององค์ประกอบเหล่านี้ด้วย CSS คุณสามารถใส่ CSS ได้หากต้องการ
<div> เป็นองค์ประกอบย่อยของ <dl> และองค์ประกอบหลักของ <dt> หรือ <dd> อย่างน้อย 1 รายการ (หรือทั้ง 2 อย่าง) ได้ <dl> สามารถ
มีบุตรหลานคนอื่นๆ อีก 2-3 คน: อนุญาตให้ซ้อน <div>, <template> หรือ <script> ไม่มีองค์ประกอบรายการคำอธิบายใดที่มีแอตทริบิวต์เฉพาะขององค์ประกอบ
เมื่อคุณเข้าใจลิงก์และรายการแล้ว ให้นำทั้ง 2 อย่างนี้มารวมกันเพื่อสร้างการนำทาง
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับรายการ
ใส่ <h2> ไว้ในรายการได้ไหม
เลือกองค์ประกอบ 3 อย่างที่กำหนดประเภทรายการ
<il><ol><ul><dl>