ภาษามาร์กอัป - พูดคุยเกี่ยวกับรายการอีกครั้ง

คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน Wulin.com HTML

ด้านบน: ภาษามาร์กอัป - จุดยึด

แหล่งต้นฉบับบทที่ 8 มาพูดคุยเกี่ยวกับรายการอีกครั้ง

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

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

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

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

สมมติว่าคุณวางแผนที่จะทำเครื่องหมายรายการขั้นตอนแต่ละโครงการมีตัวเลขมาก่อนเราจะศึกษาวิธีการที่แตกต่างกันสองวิธีที่สามารถบรรลุเป้าหมายนี้และอธิบายว่าทำไมวิธีการบางอย่างจึงมีผลบังคับใช้มากขึ้น วิธี A: สั่งซื้อในความโกลาหล

<ul>

<li> 1. สับหัวหอม </li>

<li> 2. ผัดหัวหอมเป็นเวลา 3 นาที </li>

<li> 3. เพิ่มกระเทียม 3 clloves </li>

<li> 4. ปรุงอาหารอีก 3 นาที </li>

<li> 5. กิน. </li>

</ul>

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

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

เนื่องจากนี่คือรายการที่มีหมายเลขเราเพิ่มตัวเลขก่อนแต่ละโครงการและตามด้วยระยะเวลาเพื่อระบุลำดับของแต่ละขั้นตอน แต่เราควรทำอย่างไรถ้าเราต้องการเพิ่มขั้นตอนใหม่ระหว่างขั้นตอนที่ 2 และ 3 ตอนนี้เราจำเป็นต้องจัดลำดับรายการทั้งหมดหลังจากขั้นตอนใหม่ (ด้วยตนเอง) รายการนี้ไม่ยุ่งยาก แต่ถ้าคุณกำลังแก้ไขรายการ 100 รายการกระบวนการแก้ไขจะน่าเบื่อมาก สัญลักษณ์จุดเล็ก ๆ ปรากฏขึ้น

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

รูปที่ 8-1 ผลลัพธ์ของเบราว์เซอร์ปิดวิธีการอ่าน CSS

มีวิธีที่ง่ายกว่ามีความหมายและง่ายกว่าในการบำรุงรักษา มาดูวิธี B. วิธี B: รายการสั่งซื้อ

<ol>

<li> สับหัวหอม </li>

<li> saute หัวหอมเป็นเวลา 3 นาที </li>

<li> เพิ่ม 3 clloves ของกระเทียม </li>

<li> ปรุงอาหารอีก 3 นาที </li>

<li> กิน </li>

</ol>

ฉันแน่ใจว่านี่คือสิ่งที่คนส่วนใหญ่เลือกที่จะทำ แต่นี่ไม่ได้หมายความว่าเราไม่ได้ใช้วิธีการ A <ol> ด้วยเหตุผลบางอย่างสำหรับการใช้รายการที่สั่งซื้อดังนั้นความหมายที่เราใช้องค์ประกอบที่ถูกต้องเพื่อแก้ปัญหาในมือของเรา มีอะไรพิเศษเกี่ยวกับวิธี B? การกำหนดหมายเลขอัตโนมัติ

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

หากใช้วิธี A เราต้องแก้ไขตัวเลขทั้งหมดด้วยตนเองเมื่อแทรกแต่ละโครงการ ฉันสามารถนึกถึงงานที่น่าสนใจได้อย่างง่ายดาย ...

รูปที่ 8-2 เอฟเฟกต์ของวิธีการแสดงเบราว์เซอร์รุ่นที่สิบเอ็ดรุ่น B ซึ่งมีหมายเลขโดยอัตโนมัติก่อนแต่ละขั้นตอน

รูปที่ 8-2 เอฟเฟกต์ความสุขของวิธีการแสดงเบราว์เซอร์ B ตอนที่ 2

ข้อดีอีกอย่างของวิธี B คือเมื่อรายการยาวเสียมันจะถูกเยื้องหลังจากหมายเลขที่สร้างขึ้นในขณะที่เมธอด A จะถูกพับด้านล่างหมายเลข (รูปที่ 8-3)

รูปที่ 8-3 การเปรียบเทียบรายการเอฟเฟกต์บรรทัดใหม่ของวิธี A และวิธี B

แม้ว่ารูปแบบการกำหนดหมายเลขที่ตั้งไว้ล่วงหน้าของรายการที่สั่งซื้อมักจะเป็นตัวเลขอาหรับ (1,2,3,4,5 ฯลฯ ) เราสามารถแทนที่สไตล์การกำหนดหมายเลขโดยใช้แอตทริบิวต์ประเภทรายการของ CSS ประเภทของรายการสามารถเลือกได้ในหนึ่งในสิ่งต่อไปนี้: ทศนิยม: 1,2,3,4, ... (โดยปกติค่าที่ตั้งไว้ล่วงหน้า) Upper-alpha: A, B, C, D ... Lower-Alpha: A, B, C, D ... Upper-Roman: I, II, III, IV ...

ตัวอย่างเช่นหากเราต้องการวิธี B ในการสร้างหมายเลขโรมันเมืองหลวงเราสามารถบรรลุ CSS ต่อไปนี้:

ol li {

ประเภทรายการประเภท: ตอนบน-โรมัน;

-

รูปที่ 8-4 คือเอฟเฟกต์การแสดงผลของวิธี B ด้วย CSS นี้ในเบราว์เซอร์ รายการขั้นตอนของเราไม่ใช่ตัวเลขอาหรับที่ตั้งไว้ล่วงหน้าอีกต่อไป แต่ถูกแทนที่ด้วยตัวเลขโรมัน แน่นอนชิ้นส่วนที่ทำเครื่องหมายไว้ยังคงเหมือนเดิม คุณเปลี่ยนใจหรือไม่? เพียงทำการเปลี่ยนแปลงเล็ก ๆ น้อย ๆ และเปลี่ยนรูปแบบอื่น ๆ ที่ระบุไว้ก่อนหน้านี้และคุณสามารถเปลี่ยนวิธีการกำหนดหมายเลขของรายการเป็นสิ่งที่คุณชอบได้ทันที

รูปที่ 8-4 รายการคำสั่งของสวิตช์เป็นตัวเลขโรมัน

แอตทริบิวต์ประเภท HTML: ก่อนหน้านี้บางคนอาจใช้แอตทริบิวต์ประเภทโดยตรงในแท็ก <ol> การเปลี่ยนวิธีการกำหนดหมายเลขของรายการเป็นตัวเลขโรมันตัวอักษรภาษาอังกฤษ ฯลฯ อย่างไรก็ตามเพื่อสนับสนุนกฎ CSS ที่กล่าวถึงก่อนหน้านี้ไม่แนะนำให้ใช้แอตทริบิวต์ประเภทตั้งแต่มาตรฐาน HTML 4.01 ดังนั้นคุณไม่ควรใช้แอตทริบิวต์ประเภทอีกต่อไปคุณควรใช้ CSS แทน

ต่อมาในส่วนขยายปลายเราจะจัดสไตล์รายการที่สั่งซื้อนี้ด้วย CSS แต่ตอนนี้ลองดูตัวอย่างประเภทรายการอื่น

หน้าก่อนหน้า 1 2 3 หน้าถัดไปอ่านข้อความเต็ม