รายการสัญลักษณ์แสดงหัวข้อย่อยและลำดับเลขของ HTML

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

รายการเหล่านี้สามารถแปลงได้ตามที่คุณต้องการ ทุกอย่างขึ้นอยู่กับจินตนาการของคุณ ขั้นแรกเราจะดูที่รายการมาตรฐานเช่นเดียวกับในโปรแกรมแก้ไข Word และจากนั้นเราจะปรับปรุงให้ดีขึ้นและทำให้เกินกว่าที่จะยอมรับ

รายการ HTML ที่เรียงลำดับไว้

สามารถสร้าง รายการ HTML ตามปกติได้โดยใช้แท็กต่อไปนี้:

1. รายการแรกในรายการ

2. รายการที่สองในรายการ

3. รายการที่สามในรายการ

   รายการแบบง่ายมีลักษณะเช่นนี้

   ตามมาตรฐานแต่ละรายการในรายการจะต้องอยู่ในแท็ก li เปิดและปิด แต่ถ้าคุณไม่ใส่แท็กปิดผลจะเหมือนกัน โปรเซสเซอร์เป็นสมาร์ทมาก ระหว่างการแปลงรายการจะวิเคราะห์แท็กเปิด ถ้าเขาเห็น

4. ใหม่เขาจะวาง ไว้ให้เขาก่อน

   ดังนั้นรายการสามารถทำได้ตามที่แสดงด้านล่าง

   แต่จากมุมมองของผู้เชี่ยวชาญด้านนี้ไม่ถูกต้อง

   รายการหัวข้อย่อย

   รายการที่ไม่เรียงลำดับ (หรือเครื่องหมาย) จะถูกสร้างขึ้นเช่นเดียวกับแท็ก ol เท่านั้น

   ใน รายการสัญลักษณ์แสดงหัวข้อย่อย ไม่มีตัวเลขหรือตัวอักษร - เฉพาะสัญลักษณ์ที่แตกต่างกันซึ่งเรียกว่าเครื่องหมาย

   รายการ HTML ที่มีหมายเลขหลายระดับ

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

   ในการสร้างรายการที่ระบุในตัวอย่างข้างต้นคุณต้องเขียนข้อมูลต่อไปนี้

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

   สำหรับตัวเลขที่เราระบุตัวอักษรหรือประเภทของตัวเลขและสำหรับกรณีอื่น ๆ - ประเภทเครื่องหมาย

   ตัวเลือกการจัดเรียงรายการ

   หากคุณใช้แท็ก HTML พิเศษรายการที่เรียงลำดับเลขสามารถเป็นอะไรก็ได้ที่คุณต้องการ

   คุณสามารถระบุแอตทริบิวต์ type ที่มีค่าจากตาราง หรือในสไตล์สไตล์ css ระบุ list-style-type ด้วยประเภทการจัดเรียงที่ต้องการ

   การแปลค่าต่างง่ายมาก มีความรู้พื้นฐานภาษาอังกฤษพอสมควร แต่แม้ว่าคุณจะไม่สามารถแปลคำว่า "วงกลม", "สแควร์" เป็นต้นคุณก็สามารถเข้าใจได้ว่าผลลัพธ์จะเป็นอย่างไรเมื่อคุณระบุค่าเหล่านี้ในแอตทริบิวต์ type

   สำหรับรายการที่เรียงลำดับคุณต้องใช้ตัวเลือกต่อไปนี้:

   • 1 - เลขอารบิค;
   • A - อักษรละติน ทุน;
   • A - อักษรตัวพิมพ์เล็ก
   • I - ตัวเลขโรมันทุน;
   • I - เลขโรมันตัวพิมพ์เล็ก

   โดยค่าเริ่มต้นจะมีรายการที่มี เลขอารบิคอยู่ เสมอ นั่นคือถ้าคุณไม่ได้ระบุอะไรสิ่งนี้เทียบเท่ากับ type = "1"

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

   นอกจากนี้สามารถอนุมานได้ในลำดับที่ย้อนกลับ เมื่อต้องการทำเช่นนี้ให้เขียนย้อนกลับ

   การลงทะเบียนรายการ

   รายการหมายเลขของ HTML สามารถออกแบบให้สวยงามที่คุณไม่สามารถเดาทันทีว่านี่เป็นรายการสามัญและไม่ภาพที่ทำใน Photoshop

   นี่คือตัวอย่างของรายการที่สวยงาม

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

   คุณสามารถสร้างรายการสามัญเช่นนี้ได้

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

   ก่อนพิจารณาตัวเลือกด้วยการออกแบบวงกลมของรายการ กลับไปที่รหัสรายการ มีคลาสที่ปัดเศษ นั่นคือเรื่องนี้กับชั้นนี้คุณต้องปรับแต่งให้สวยงาม คุณสามารถตั้งชื่อคลาสตามต้องการ

   ตอนนี้พิจารณาการออกแบบสแควร์

   ลักษณะคล้ายกันมาก ความแตกต่างคือในกรณีแรกองค์ประกอบถูกปัดเศษขึ้นโดยใช้ความสามารถของ css

   การสนับสนุนเบราว์เซอร์

   สิ่งสำคัญคือต้องเข้าใจว่าเบราว์เซอร์บางประเภทไม่สนับสนุนคุณลักษณะ CSS ทั้งหมด

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

   เช่นเดียวกับการลงทะเบียนหมายเลข

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

   นักออกแบบเว็บไซต์มืออาชีพควรคาดหวังและเข้าใจว่าไม่ใช่ผู้ใช้ทั้งหมดใช้คอมพิวเตอร์สมัยใหม่ ไม่ใช่ทุกคนมี Windows 7, 8, 10. มีเปอร์เซ็นต์ของผู้ใช้ที่ยังคงนั่งอยู่บน Windows XP และใช้เบราว์เซอร์ Internet Explorer รุ่นเก่ากว่า

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

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

   ทำสิ่งที่เหมาะสำหรับทุกคนหรือพิจารณาตัวแปรทั้งหมดของเบราว์เซอร์