ผู้เขียน:
Monica Porter
วันที่สร้าง:
22 มีนาคม 2021
วันที่อัปเดต:
1 กรกฎาคม 2024
เนื้อหา
ช่องว่างจำนวนมากที่ปกติสร้างขึ้นโดยใช้ช่องว่างแป้นแท็บและแป้น Enter จะถูกละเว้นในภาษาโปรแกรมเว็บ HTML กำหนดทั้งหมดเป็นช่องว่างระหว่างคำและแสดงเพียงช่องว่างเดียว แม้ว่า CSS จะช่วยให้ผู้ใช้ตั้งค่าความละเอียดของช่องว่างและการจัดตำแหน่งได้มากขึ้น แต่ HTML ไม่มีเครื่องมือในตัวเพื่อกำหนดระยะห่างของคุณเอง
ขั้นตอน
วิธีที่ 1 จาก 2: แทรกช่องว่างและแท็บเดียว
ช่องว่างแทรกไม่แตก โดยทั่วไป HTML จะแสดงช่องว่างระหว่างคำเพียงครั้งเดียวไม่ว่าคุณจะกด Spacebar กี่ครั้งก็ตาม หากต้องการแสดงช่องว่างที่ต่อเนื่องกันหลายช่องให้พิมพ์หรือ รหัสนี้จะสร้างอักขระพิเศษที่เรียกว่า "non -break space" และจะแสดงเสมอ
- อักขระด้านบนเรียกว่า "พื้นที่ที่ไม่สามารถทำลายได้" เนื่องจากป้องกันไม่ให้มีการแบ่งบรรทัด หากคุณใช้อักขระนี้มากเกินไปเบราว์เซอร์จะมีปัญหาในการแทรกตัวแบ่งบรรทัดอย่างเป็นระเบียบและแนวตั้ง
แทรกช่องว่างที่มีความกว้างต่างกัน มีอักขระเอนทิตีอื่น ๆ บางตัวที่ต้องการให้เบราว์เซอร์แสดงช่องว่าง วิธีแสดงช่องว่างเหล่านี้ในเบราว์เซอร์ที่แตกต่างกันเล็กน้อยอย่างไรก็ตามรหัสต่อไปนี้จะไม่ส่งผลต่อการแบ่งบรรทัด:- - ตั้งชื่อตามช่องว่าง "N" ของเครื่องพิมพ์ (หน่วยวัด) ช่องว่าง "en" จะกว้างเป็นสองเท่าของพื้นที่ปกติ
- - ช่องว่าง "em" โดยประมาณเท่ากับสี่ช่องว่าง
จำลองแท็บที่มีพื้นที่ว่างมากมายที่ไม่ทำลายล้าง ในการเยื้องย่อหน้าคุณสามารถแทรกช่องว่างที่ทำลายไม่ได้ติดต่อกัน:. นี่เป็นทางออกเดียวหากคุณใช้ HTML เท่านั้น แต่ถ้าคุณใช้ CSS (อธิบายแยกต่างหากในขั้นตอนด้านล่าง) จะทำให้สั้นลง- หากมีการนำเสนอข้อความที่ซับซ้อนให้ใช้แท็กก่อน
จัดย่อหน้าด้วย CSS คุณสมบัติ CSS "margin" และ "padding" จะให้คำแนะนำโดยตรงกับเบราว์เซอร์ดังนั้นผลลัพธ์ที่แสดงจะสอดคล้องกันมากขึ้น วิธีนี้ใช้งานได้ไม่ยากเว้นแต่คุณจะไม่รู้อะไรเลยเกี่ยวกับ CSS และเพจของคุณไม่มีสไตล์ชีต นี่คือตัวอย่างของวิธีการย้ายทั้งย่อหน้าไปยังขอบด้านขวา:- ในส่วน ของเอกสาร HTML ให้ใส่รหัสต่อไปนี้:
โดยที่: "p.indent" กำหนดแอตทริบิวต์ของ text (p tag) name "indent" (คุณสามารถใช้ชื่ออื่นได้) ส่วนที่เหลือของโค้ดจะเพิ่มคุณสมบัติของช่องว่าง "padding" ที่ด้านซ้ายของย่อหน้า - ตอนนี้กลับไปที่เนื้อหาของเอกสาร HTML เมื่อใดก็ตามที่คุณต้องการเยื้องย่อหน้า (ยังคงเป็น "เยื้อง" ในตัวอย่างนี้) ให้ใส่ย่อหน้าในรหัสนี้:
- ในการจัดระยะห่างการเยื้องให้เปลี่ยนตัวเลข "1.8" ในโค้ด CSS เก็บ "em" ไว้ข้างหลังเนื่องจากเป็นหน่วยความยาวที่เกี่ยวข้องกับขนาดตัวอักษร
- ในส่วน ของเอกสาร HTML ให้ใส่รหัสต่อไปนี้:
วิธีที่ 2 จาก 2: ตั้งค่าช่องว่างที่ยาวขึ้น
ใช้แท็กที่จัดรูปแบบไว้ล่วงหน้า คีย์ใดก็ได้ พื้นที่ ดี ↵ Enter ถูกป้อนลงในการ์ด
จะแสดงตรงตามที่คุณพิมพ์ คุณยังสามารถใช้แท็กนี้เพื่อนำเสนอตัวอย่างบทกวีหรือข้อความอื่น ๆ ที่ต้องการความแม่นยำสูงในการนำเสนอการเว้นวรรคและการแบ่งบรรทัด
- ข้อเสียเปรียบหลักของการ์ดที่จัดรูปแบบไว้ล่วงหน้าคือความกว้าง ไม่เหมือนกับ HTML ทั่วไปข้อความที่จัดรูปแบบไว้ล่วงหน้าจะไม่ถูกปรับขนาดให้พอดีกับขนาดหน้าต่างของผู้ใช้
สร้างเส้นแบ่ง การ์ด
จะสิ้นสุดบรรทัดข้อความปัจจุบัน คุณสามารถสร้างบรรทัดว่างโดยใช้แท็กแบ่งบรรทัดหลายแท็ก สำหรับนักเรียนที่เพิ่งเริ่มใช้ HTML นี่เป็นแนวทางที่ดี แต่ถ้าคุณได้เรียนรู้ CSS แล้วไม่แนะนำให้ใช้รูปแบบ HTML ที่จำเป็นนี้
ระบุย่อหน้าด้วยแท็ก "p" แท็กรอบข้อความระบุย่อหน้านั้น เบราว์เซอร์ส่วนใหญ่จะแยกย่อหน้าด้วยบรรทัดว่าง แต่คุณไม่สามารถรับประกันรูปแบบที่สอดคล้องกันสำหรับข้อความได้ โฆษณา
คำแนะนำ
- เมื่อคุณตรวจสอบการแสดงผลบนหน้าเว็บของคุณครั้งสุดท้ายหากคุณเห็นอักขระซ้ำซ้อนในตำแหน่งที่ผิดปกติรอบ ๆ ตัวอย่างข้อมูลให้ตรวจสอบอีกครั้งว่ามีแท็กที่ไม่สมบูรณ์หรือไม่เช่น <> แทน
. - CSS เป็นเครื่องมือเชิงรุกที่มีประสิทธิภาพมากขึ้นสำหรับการนำเสนอหน้าเว็บรวมถึงการเว้นวรรคสำหรับข้อความ
- จำกัด ช่องว่างอย่างกะทันหันหลังแท็กเปิดหรือด้านหน้าแท็กปิด ตัวอย่างเช่นคุณควรเขียน Spaces บทช่วยสอน ไม่ใช่ Spaces บทช่วยสอน .
- พื้นที่ที่ทำลายไม่ได้คือตัวอย่างของอักขระเอนทิตี: รหัสที่แสดงถึงอักขระที่คุณไม่สามารถป้อนได้จากแป้นพิมพ์
คำเตือน
- แอตทริบิวต์ HTML แสดงถึงคีย์ แท็บ↹ จริงๆแล้วไม่ได้ผลอย่างที่คุณคิด เอกสาร HTML มาตรฐานไม่มีการหยุดแท็บดังนั้นอักขระแท็บจึงไม่มีผล
- เขียนภาษา HTML ในโปรแกรมแก้ไขโค้ดหรือไฟล์ข้อความธรรมดาเสมออย่าใช้รูปแบบการจัดการไฟล์ข้อความ หากช่องว่างของคุณกลายเป็นตัวอักษรแปลก ๆ ในเว็บเบราว์เซอร์อาจเกิดจากการเพิ่มข้อมูลส่วนเกินโดยโปรแกรมประมวลผลคำซึ่งไม่ได้มีไว้สำหรับการแสดงผลออนไลน์
