พบรายการบ่อยกว่าที่คุณคิด หากคุณเคยเรียนการเขียนโปรแกรม โปรเจ็กต์แรกอาจเป็นการสร้างรายการช็อปปิ้งหรือรายการสิ่งที่ต้องทำ นั่นก็คือลิสต์ โดยทั่วไปแล้ว การทดสอบแบบหลายตัวเลือกจะเป็นรายการคำถามที่มีลำดับเลข คำตอบที่เป็นไปได้สำหรับคำถามแต่ละข้อจะเป็นรายการที่ซ้อนกัน
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 มีค่าอีกมากมาย
ตามที่ระบุไว้ใน Codepen พร็อพเพอร์ตี้ 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> เฉพาะองค์ประกอบเพียงรายการเดียวเท่านั้น คือ value ซึ่งเป็นจำนวนเต็ม value จะมีประโยชน์ใน <li> เท่านั้นเมื่อ <li> ฝังอยู่ในรายการที่เรียงลำดับและไม่มีความหมายสำหรับรายการหรือเมนูที่ไม่เรียงลำดับ โดยจะลบล้างค่าของการเริ่มต้น <ol> หากมีข้อขัดแย้ง
value คือจำนวนของรายการภายในรายการที่เรียงลำดับ เรียงลำดับรายการต่อจากชุดค่าถัดไป เว้นแต่รายการดังกล่าวจะมีแอตทริบิวต์ value ที่ตั้งค่าไว้ด้วย ค่าไม่จำเป็นต้องเรียงตามลำดับ แต่หากเรียงลำดับไม่ถูกต้อง
ก็น่าจะมีเหตุผลที่ดีอยู่แล้ว
เมื่อคุณรวม reversed ใน <ol> กับแอตทริบิวต์ value ในรายการ เบราว์เซอร์จะตั้งค่า <li> นั้นเป็นค่าที่ระบุ จากนั้นนับ <li> ก่อนหน้าและนับถอยหลังสำหรับรายการที่ตามมา หากรายการที่สองมีแอตทริบิวต์มูลค่า ตัวนับจะถูกรีเซ็ตที่รายการที่สองนั้น และค่าที่ตามมาจะลดลง 1 รายการ
การควบคุมทั้งหมดนี้ยังควบคุมได้ด้วยตัวนับ CSS ที่ให้เนื้อหาที่สร้างขึ้นสำหรับองค์ประกอบเทียม ::marker
หากตัวเลขมีไว้สำหรับการนำเสนอเพียงอย่างเดียว ให้ใช้ CSS หากตัวเลขมีความสำคัญในเชิงความหมายหรือมีความหมาย ให้ใช้แอตทริบิวต์เหล่านี้
จนถึงตอนนี้ เราได้ดูรายการที่มีเฉพาะโหนดข้อความเท่านั้น รายการอาจมีเนื้อหาโฟลว์ทั้งหมด ซึ่งหมายถึงองค์ประกอบใดๆ ที่พบในเนื้อหาซึ่งฝังเป็นองค์ประกอบย่อยโดยตรงของ <body> ได้ รวมถึงส่วนหัว จึงช่วยแบ่งส่วนเนื้อหาได้
เรามีลิสต์ 2-3 รายการที่ไม่ได้เรียงลำดับใน MLW ครูภายในส่วนผู้สอนจะแสดงเป็นรายการ เช่นเดียวกับเครื่องของนักเรียนในส่วนรีวิว ผู้สอน <ul> มี <li> 2 รายการ สำหรับครูแต่ละคน ภายใน <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, <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 รายการ แต่ละข้อความจะมีรูปภาพ ข้อความยกข้อความ และย่อหน้าที่มีสามบรรทัดที่มีการแบ่งบรรทัด 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 ส่วน ในสารบัญซึ่งเป็นรายการที่ไม่ได้เรียงลำดับ จะมีรายการที่ซ้อนกันอยู่โดยไม่เรียงลำดับพร้อมลิงก์ไปยังสองส่วนต่อไปนี้
<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 ได้ แต่หากจำเป็น คุณจะใส่ <div> เป็นรายการย่อยของ <dl> และอนุญาตระดับบนสุดขององค์ประกอบ <dt> หรือ <dd> อย่างน้อย 1 รายการ (หรือทั้ง 2 อย่าง) ได้ <dl> อาจมีแท็กย่อยอื่นๆ อีก 2-3 รายการ ซึ่งอนุญาตให้ซ้อน <div>, <template> หรือ <script> องค์ประกอบรายการคำอธิบายไม่มีแอตทริบิวต์เฉพาะองค์ประกอบเลย
ตอนนี้คุณเข้าใจเกี่ยวกับลิงก์และลิสต์แล้ว เรามารวมลิงก์ทั้ง 2 รายการเข้าด้วยกันเพื่อสร้างการนำทางกัน
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับรายการ
ใส่ <h2> ไว้ในรายการได้ไหม
เลือกองค์ประกอบ 3 อย่างที่กำหนดประเภทของรายการ
<il><ol><ul><dl>