การแบ่งบรรทัดและการแบ่งบรรทัดใน HTML ตัวแบ่งบรรทัดใน HTML: ใช้แท็ก br ตัดไปยังบรรทัดอื่น

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

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

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

ช่องว่างและอักขระช่องว่างใน HTML

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

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

ถึง ตัดบรรทัดภายในย่อหน้า Pคุณต้องใช้แท็ก BR เดียว ซึ่งคุณสามารถทำได้ สมมติว่าเราจำเป็นต้องแทรกบางบรรทัดจากบทกวีที่เราเขียนในโปรแกรมแก้ไขข้อความ:

แม้ว่าบรรทัดของกลอนจะอยู่อย่างถูกต้องและมีเครื่องหมายยัติภังค์อยู่ในตำแหน่งที่ถูกต้อง แต่ทุกอย่างจะดูแตกต่างออกไปในเบราว์เซอร์:

เพื่อให้แสดงผลแบบเดียวกันในหน้าต่างเว็บเบราว์เซอร์ คุณต้องเขียน BR ในแต่ละบรรทัด:

ตอนนี้เราทำภารกิจสำเร็จแล้วและบรรทัดบทกวีจะแสดงอย่างถูกต้องสมบูรณ์ในเบราว์เซอร์:

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

ช่องว่าง แท็บ และตัวแบ่งบรรทัด

โดยพื้นฐานแล้วด้วยสิ่งเหล่านี้ อักขระช่องว่างเรารู้จักกันทันทีที่เราเริ่มทำงานกับข้อความในตัวแก้ไขและจัดรูปแบบตามแบบฟอร์มที่ต้องการ ในการดำเนินงานดังกล่าวจะมีปุ่มพิเศษซึ่งแต่ละปุ่มจะสอดคล้องกับอักขระช่องว่างของตัวเอง:

• Spacebar เป็นคีย์ที่กว้างที่สุดบนแป้นพิมพ์คอมพิวเตอร์ (ไม่มีป้ายกำกับ)
• Tab - ปุ่มทางด้านซ้ายพร้อมคำว่า "Tab" และลูกศรสองลูกชี้ไปในทิศทางที่ต่างกัน
• ตัวแบ่งบรรทัด - ปุ่ม "Enter"

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

เราได้รับโค้ดที่อ่านและเข้าใจง่ายด้วยการเว้นวรรค ลูกศรสีส้มบ่งบอกถึงการเยื้องที่สร้างขึ้นโดยใช้ปุ่ม Tab และสัญลักษณ์ CR และ LF บ่งชี้ถึงการแบ่งบรรทัดที่สร้างขึ้นโดยใช้ปุ่ม Enter

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

ในทำนองเดียวกัน เมื่อใช้อักขระช่องว่าง คุณสามารถเขียนกฎ CSS ที่จะดูชัดเจนและเข้าใจง่าย:

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

อักขระพิเศษ (หรือตัวช่วยจำ) ในโค้ด HTML

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

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

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

เพื่อขจัดปัญหานี้จึงมีการนำระบบสัญลักษณ์พิเศษมาใช้ซึ่งรวมถึงตัวช่วยจำที่แตกต่างกันจำนวนมาก พวกเขาทั้งหมดเริ่มต้นด้วยเครื่องหมาย & "&" และมักจะลงท้ายด้วยเครื่องหมายอัฒภาค ";" ในตอนแรก ตัวละครพิเศษแต่ละตัวจะมีรหัสดิจิทัลของตัวเอง ตัวอย่างเช่น สำหรับช่องว่างที่ไม่แยก ซึ่งเราจะพิจารณาโดยละเอียดด้านล่าง รายการต่อไปนี้จะถูกต้อง:

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

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

เครื่องหมาย	รหัส	ช่วยในการจำ	คำอธิบาย
			พื้นที่ไม่ทำลาย
			พื้นที่แคบ (en-width เป็นตัวอักษร n)
			พื้นที่กว้าง (ความกว้าง em เป็นตัวอักษร m)
–	-	–	en dash (en-dash)
-	—	—	em ประ (em ประ)
­	-	­	โอนอ่อน
ก		́	ความเครียดจะอยู่หลังตัวอักษร "stress"
©		©	ลิขสิทธิ์
®	®	®	เครื่องหมายการค้าจดทะเบียน
™	™	™	เครื่องหมายการค้า
º	º	º	หอกของดาวอังคาร
ª	ª	ª	กระจกเงาของวีนัส
‰	‰	‰	ppm
π	π	π	pi (ใช้ไทม์นิวโรมัน)
¦	¦	¦	เส้นประแนวตั้ง
§	§	§	ย่อหน้า
°	°	°	ระดับ
µ	µ	µ	เครื่องหมายไมโคร
¶	¶	¶	เครื่องหมายย่อหน้า
…	…	…	วงรี
‾	‾	‾	ซ้อนทับ
´	´	´	เครื่องหมายเน้นเสียง
№		№	เครื่องหมายหมายเลข
🔍		🔍	แว่นขยาย (เอียงไปทางซ้าย)
🔎		🔎	แว่นขยาย (เอียงไปทางขวา)
สัญญาณของการคำนวณทางคณิตศาสตร์และการดำเนินการทางคณิตศาสตร์
×	×	×	คูณ
÷	÷	÷	แบ่ง
<	<		น้อย
>	>	>	มากกว่า
±	±	±	บวก/ลบ
¹	¹	¹	ระดับ 1
²	²	²	ระดับ 2
³	³	³	ระดับ 3
¬	¬	¬	การปฏิเสธ
¼	¼	¼	หนึ่งในสี่
½	½	½	ครึ่งหนึ่ง
¾	¾	¾	สามส่วน
⁄	⁄	⁄	จุดทศนิยม
−	−	−	ลบ
≤	≤	≤	น้อยกว่าหรือเท่ากัน
≥	≥	≥	มากกว่าหรือเท่ากัน
≈	≈	≈	ประมาณ (เกือบ) เท่ากัน
≠	≠	≠	ไม่เท่ากับ
≡	≡	≡	เหมือนกัน
√	√	√	รากที่สอง (ราก)
∞	∞	∞	อนันต์
∑	∑	∑	เครื่องหมายผลรวม
∏	∏	∏	เครื่องหมายการทำงาน
∂	∂	∂	ส่วนต่างบางส่วน
∫	∫	∫	บูรณาการ
∀	∀	∀	สำหรับทุกคน (มองเห็นได้เฉพาะในกรณีที่เป็นตัวหนา)
∃	∃	∃	มีอยู่จริง
∅	∅	∅	ชุดเปล่า
Ø	Ø	Ø	เส้นผ่านศูนย์กลาง
∈	∈	∈	เป็นของ
∉	∉	∉	ไม่ได้อยู่ใน
∋	∋	∗	ประกอบด้วย
⊂	⊂	⊂	เป็นเซตย่อย
⊃	⊃	⊃	เป็นซุปเปอร์เซ็ต
⊄	⊄	⊄	ไม่ใช่เซตย่อย
⊆	⊆	⊆	เป็นสับเซตหรือเท่ากับ
⊇	⊇	⊇	เป็นซุปเปอร์เซตหรือเท่ากับ
⊕	⊕	⊕	บวกเป็นวงกลม
⊗	⊗	⊗	เครื่องหมายคูณในวงกลม
⊥	⊥	⊥	ตั้งฉาก
∠	∠	∠	มุม
∧	∧	∧	ตรรกะและ
∨	∨	∨	ตรรกะหรือ
∩	∩	∩	จุดตัด
∪	∪	∪	ยูเนี่ยน
สัญญาณสกุลเงิน
€	€	€	ยูโร
¢	¢	¢	เซ็นต์
£	£	£	ปอนด์
¤	¤t;	¤	สัญลักษณ์สกุลเงิน
¥	¥	¥	สัญลักษณ์เยนและหยวน
ƒ	ƒ	ƒ	สัญญาณฟลอริน
เครื่องหมาย
	.		เครื่องหมายง่ายๆ
○		○	วงกลม
·	·	·	จุดกึ่งกลาง
†		†	ข้าม
‡		‡	ข้ามสองครั้ง
♠	♠	♠	ยอดเขา
♣	♣	♣	สโมสร
			หัวใจ
♦	♦	♦	เพชร
◊	◊	◊	รูปสี่เหลี่ยมขนมเปียกปูน
✏		✏	ดินสอ
✎		✎	ดินสอ
✐		✐	ดินสอ
✍		✍	มือ
คำพูด
"	"	"	เครื่องหมายคำพูดคู่
&	&	&	เครื่องหมายแอมเพอร์แซนด์
«	«	«	เครื่องหมายคำพูดพิมพ์ด้านซ้าย (เครื่องหมายคำพูดรูปแฉกแนวตั้ง)
»	»	»	เครื่องหมายคำพูดพิมพ์ขวา (เครื่องหมายคำพูดก้างปลา)
‹		‹	การเปิดใบเสนอราคามุมเดียว
›		›	การปิดใบเสนอราคามุมเดียว
′	′	′	นายกรัฐมนตรี (นาที ฟุต)
″	″	″	นายกคู่ (วินาที นิ้ว)
‘	‘	‘	เครื่องหมายคำพูดเดี่ยวบนซ้าย
’	’	’	เครื่องหมายคำพูดเดี่ยวด้านบนขวา
‚	‚	‚	เครื่องหมายคำพูดเดี่ยวด้านขวาล่าง
“	“	“	ตีนซ้าย
”	”	”	อ้างเท้าขวาบน
„	„	„	อ้างอิงเท้าล่างขวา
❛		❛	เครื่องหมายคำพูดเปิดภาษาอังกฤษเดี่ยว
❜		❜	เครื่องหมายคำพูดปิดภาษาอังกฤษเดี่ยว
❝		❝	เปิดเครื่องหมายคำพูดคู่
❞		❞	ปิดเครื่องหมายคำพูดคู่
ลูกศร
←	←	←	ลูกศรซ้าย
			ลูกศรขึ้น
→	→	→	ลูกศรขวา
↓	↓	↓	ลูกศรลง
↔	↔	↔	ลูกศรซ้ายและขวา
↕		↕	ลูกศรขึ้นและลง
↵	↵	↵	การคืนรถ
⇐	⇐	⇐	ลูกศรซ้ายคู่
⇑	⇑	⇑	ลูกศรขึ้นสองเท่า
⇒	⇒	⇒	ลูกศรขวาคู่
⇓	⇓	⇓	ลูกศรลงสองครั้ง
⇔	⇔	⇔	ลูกศรคู่ซ้ายและขวา
⇕		⇕	ลูกศรขึ้นและลงสองเท่า
▲		▲	ลูกศรขึ้นสามเหลี่ยม
▼		▼	ลูกศรลงรูปสามเหลี่ยม
			ลูกศรขวารูปสามเหลี่ยม
◄		◄	ลูกศรซ้ายรูปสามเหลี่ยม
ดวงดาว เกล็ดหิมะ
☃		☃	สโนว์แมน
❄		❄	เกล็ดหิมะ
❅		❅	เกล็ดหิมะที่ประกบด้วยแชมร็อก
❆		❆	เกล็ดหิมะที่มีมุมแหลมคม
★		★	ดาวสีเทา
☆		☆	ดาวว่าง
✪		✪	ดาวที่ยังไม่เต็มในวงกลมที่เต็มไป
✫		✫	เต็มไปด้วยดาวที่มีวงกลมเปิดอยู่ข้างใน
✯		✯	ดาวหมุน
⚝		⚝	วาดดาวสีขาว
⚪		⚪	วงกลมเปิดตรงกลาง
⚫		⚫	วงกลมที่เต็มไปด้วยตรงกลาง
⚹		⚹	Sextile (แบบเกล็ดหิมะ)
✵		✵	ดาวหมุนแปดแฉก
❉		❉	ดาวที่มีปลายเป็นทรงกลม
❋		❋	ใบพัดรูปดาวทรงหยดแปดแฉกอันหนา
✺		✺	เครื่องหมายดอกจันสิบหกแฉก
✹		✹	ดาวสิบสองแฉก
✸		✸	ดาวเต็มแปดแฉกตัวหนา
✶		✶	ดาวเต็มหกแฉก
✷		✷	ดาวเต็มแปดแฉก
✴		✴	ดาวแปดแฉก
✳		✳	ดาวแปดแฉก
✲		✲	ดาวที่มีจุดศูนย์กลางว่างเปล่า
✱		✱	ดาวอ้วน
✧		✧	ดาวเปิดสี่แฉก
✦		✦	ดาวเต็มสี่แฉก
⍟		⍟	ติดดาวเป็นวงกลม
⊛		⊛	เกล็ดหิมะเป็นวงกลม
นาฬิกาเวลา
⏰		⏰	ดู
⌚		⌚	ดู
⌛		⌛	นาฬิกาทราย
⏳		⏳	นาฬิกาทราย

กรณีการใช้อักขระพิเศษบางตัว รวมถึงการเว้นวรรคแบบไม่แยกและเครื่องหมายยัติภังค์แบบอ่อน

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

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