ช่องว่างของแท็บแทนที่จะเป็นช่องว่างหลายช่อง (“ ”)?

Chxng Wang Khxng Thaeb Thaenthi Ca Pen Chxng Wang Hlay Chxng Nbsp



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

เพื่อจัดการกับปัญหาเหล่านี้ มีวิธีอื่นๆ อีกหลายวิธีในการรวมช่องว่างที่ไม่แบ่งหลายช่องในเอกสาร HTML เช่น “ <ก่อน> ”, “ ” องค์ประกอบ, CSS “ ขอบซ้าย ”, “ ช่องว่างภายในซ้าย ” คุณสมบัติ และอื่นๆ อีกมากมาย

การศึกษานี้จะสอนคุณ:







อันดับแรก เราจะอธิบายถึงตัวอย่างที่ใช้ “   ” เพื่อเพิ่มช่องว่างในเอกสาร HTML จากนั้น ค่อยๆ ดูภาพประกอบเพื่อสาธิตวิธีต่างๆ ในการเพิ่มพื้นที่แท็บ



วิธีเพิ่มช่องว่างโดยใช้ “ ” รหัสเอนทิตีใน HTML?

ในการเพิ่มช่องว่างโดยใช้ “   ” บนหน้า HTML ให้ทำตามขั้นตอนที่ให้ไว้:



  • เพิ่มองค์ประกอบ div และกำหนดเป็นคลาส “ บทความ '.
  • หลังจากนั้นให้วาง “

    ” องค์ประกอบสำหรับหัวข้อ

  • จากนั้นเพิ่ม “

    ” องค์ประกอบเพื่อเพิ่มย่อหน้า ในตอนต้นของย่อหน้า ช่องว่างจะถูกเพิ่มโดยระบุรหัสเอนทิตี “   ”:

< แผนก ระดับ = 'บทความ' >
< ชั่วโมง2 > ความรู้คือพลัง < / ชั่วโมง2 >
< หน้า >     ความรู้คือพลังหมายความว่าผู้มีการศึกษาสามารถควบคุมชีวิตของตนได้อย่างสมบูรณ์ผ่านความแข็งแกร่งของความรู้ < / หน้า >
< / แผนก >

จะเห็นได้ว่ามีการเพิ่มช่องว่างที่จุดเริ่มต้นของย่อหน้าเรียบร้อยแล้ว:





วิธีเพิ่มพื้นที่แท็บโดยใช้องค์ประกอบ HTML “

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



< แผนก ระดับ = 'บทความ' >
< ชั่วโมง2 >ความรู้คือพลัง< / ชั่วโมง2 >
< หน้า >< ช่วง รหัส = 'แท็บ' >< / ช่วง > ความรู้คืออำนาจหมายความว่าผู้มีการศึกษาสามารถควบคุมชีวิตของตนได้อย่างสมบูรณ์ผ่านความรู้ ความแข็งแกร่ง


รูปแบบ 'บทความ' div

.บทความ {
ขอบ: อัตโนมัติ;
ความกว้าง : 400px;
ช่องว่างภายใน: 10px;
}

.บทความ ” ใช้เพื่อเข้าถึง “

” แท็ก ซึ่งจะใช้กับคุณสมบัติต่อไปนี้:

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

รหัสสไตล์ 'แท็บ'

#แท็บ {
ช่องว่างภายในซ้าย: 8px;
}

#แท็บ ” เข้าถึง “ แท็บ ” id ขององค์ประกอบ และใช้ “ ช่องว่างภายในซ้าย ” คุณสมบัติของมัน

เอาต์พุต

วิธีเพิ่มพื้นที่แท็บโดยใช้องค์ประกอบ HTML “

<ก่อน> ” องค์ประกอบกำหนดข้อความที่จัดรูปแบบไว้ล่วงหน้า ข้อความภายในองค์ประกอบ

 จะแสดงบนหน้าเว็บตามที่เป็นอยู่

ภาพรวมตัวอย่างโดยการสร้างหน้า HTML ก่อน:

  • เพิ่ม '

    ” องค์ประกอบเพื่อตั้งค่าหัวเรื่องระดับสองให้กับเอกสาร

  • จากนั้นเพิ่ม “ <ก่อน> ” แท็ก และระบุเนื้อหาด้วยรูปแบบที่ต้องการ:
< ชั่วโมง2 >HTML ก่อนแท็ก< / ชั่วโมง2 >
< ก่อน >
ฟังก์ชั่นสินค้าฟังก์ชั่น ( พี1, พี2 ) {
ส่งคืน p1 * p2;
}
< / ก่อน >

เอาต์พุต

วิธีเพิ่มพื้นที่แท็บโดยใช้คุณสมบัติ CSS “margin-left”

ในการเพิ่มพื้นที่แท็บโดยใช้ CSS “ ขอบซ้าย ” ทรัพย์สิน ให้ทำตามขั้นตอนที่ให้ไว้:

  • ขั้นแรก ให้ใส่องค์ประกอบ div ลงในเอกสารและกำหนดเป็นคลาส “ ภาพ '.
  • ภายในองค์ประกอบ div นี้ เพิ่มองค์ประกอบ div อีกสององค์ประกอบพร้อมกับคลาส “ img-1 ' และ ' img-2 ” ตามลำดับ
  • แต่ละองค์ประกอบ div ทั้งสองนี้มีรูปภาพที่ระบุโดยใช้ ' ” แท็ก
  • เหล่านี้ ' ” แท็กเชื่อมโยงกับ “ src ' และ ' ความกว้าง ' คุณลักษณะ. แอตทริบิวต์ 'src' ระบุ URL ของรูปภาพ และแอตทริบิวต์ 'ความกว้าง' จะปรับความกว้างของรูปภาพ

นี่คือรหัส HTML ของสถานการณ์ที่กล่าวถึงข้างต้น:

< แผนก ระดับ = 'ภาพ' >
< แผนก ระดับ = 'img-1' >
< img src = '/spring-images/marguerite-flower.jpg' ความกว้าง = '250' >
< / แผนก >
< แผนก ระดับ = 'อิมเมจ-2' >
< img src = '/spring-images/flower-ga8f105f1d_1920.jpg' ความกว้าง = '250' >
< / แผนก >
< / แผนก >

หน้า HTML จะมีลักษณะดังนี้:

ไปที่ส่วน CSS เพื่อเพิ่มช่องว่างหลายช่องให้กับ ' img-2 ” คลาสโดยไม่ใช้ช่องว่างที่ไม่แบ่งหลายช่อง

สไตล์ div 'รูปภาพ'

.ภาพ {
ความกว้าง : 500px;
ขอบ: อัตโนมัติ;
}

.ภาพ ” ใช้เพื่อเข้าถึง div HTML ที่มี “ ภาพ ' ระดับ. คำอธิบายคุณสมบัติดังกล่าวมีดังนี้

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

สไตล์ 'img-2' div
เข้าถึงองค์ประกอบ div โดยใช้ ' .img-2 ”:

.img- 2 {
ขอบซ้าย: 30px;
}

ขอบซ้าย ” คุณสมบัติด้วย “ 30px ” ค่าถูกนำไปใช้กับองค์ประกอบ div HTML ที่มีคลาส “ img-2 '. คุณสมบัตินี้จะเพิ่มพื้นที่ 30px ทางด้านซ้ายขององค์ประกอบ

ที่นี่ ผลลัพธ์แสดงให้เห็นว่ารูปภาพที่สองถูกนำไปใช้โดยเว้นวรรคตอนเริ่มต้น:

เราได้อธิบายเพิ่มเติมเกี่ยวกับการเพิ่มช่องว่างของแท็บแทนการใช้ช่องว่างที่ไม่แบ่งหลายช่อง '   '.

บทสรุป

ใน HTML คำว่า “   ” รหัสเอนทิตีมักใช้เพื่อเพิ่มพื้นที่ว่างในเอกสาร เมื่อต้องการหลีกเลี่ยงการใช้รหัสเอนทิตีนี้หลายครั้ง มีวิธีอื่นในการเพิ่มพื้นที่แท็บในเอกสาร วิธีการเหล่านี้รวมถึงการใช้ HTML “ <ก่อน> ”, “ ” องค์ประกอบ “ ขอบซ้าย ” ทรัพย์สินและอื่น ๆ อีกมากมาย บล็อกนี้ได้กล่าวถึงหลายวิธีที่ช่วยเพิ่มพื้นที่แท็บในเอกสาร HTML แทนการเพิ่ม “ ” หลายรายการ รหัสเอนทิตี