ความแตกต่างระหว่าง div และ span

2024 ผู้เขียน: Alex Aldridge | [email protected]. แก้ไขล่าสุด: 2023-12-17 13:51

ความแตกต่างที่สำคัญ – div vs span

HTML เป็นภาษาที่ใช้กันอย่างแพร่หลายในการพัฒนาหน้าเว็บ ย่อมาจาก Hyper Text Markup Language คำว่า Hyper หมายถึงการเชื่อมโยงไปยังแหล่งข้อมูลบนเว็บอื่นๆ บนอินเทอร์เน็ต คำว่ามาร์กอัปหมายถึงความสามารถในการสร้างข้อความที่จัดรูปแบบด้วยรูปภาพและทรัพยากรมัลติมีเดียอื่นๆ ไฮเปอร์ลิงก์เป็นองค์ประกอบหลักใน HTML ที่ทำให้ทรัพยากรบนเว็บทั้งหมดเชื่อมต่อกัน HTML มีหลายเวอร์ชัน ได้แก่ HTML 2.0, 3.2, 4.01 และ HTML5 โดยทั่วไป HTML เป็นเอกสารข้อความที่มีแท็ก มันบอกเว็บเบราว์เซอร์ถึงวิธีการจัดโครงสร้างหน้าเว็บเพื่อแสดง div และ span เป็นแท็กสองแท็กใน HTMLองค์ประกอบ HTML แต่ละรายการมีค่าแสดงเริ่มต้นขึ้นอยู่กับประเภทขององค์ประกอบ ดังนั้นพวกเขาสามารถเป็นองค์ประกอบบล็อกหรืออินไลน์ บทความนี้กล่าวถึงความแตกต่างระหว่าง div และ span ความแตกต่างที่สำคัญระหว่าง div และ span คือ div เป็นองค์ประกอบระดับบล็อกในขณะที่ span เป็นองค์ประกอบแบบอินไลน์

div คืออะไร

เอกสาร html ทั้งหมดเริ่มต้นด้วยการประกาศประเภทเอกสาร ปัจจุบัน HTML เวอร์ชันที่พบบ่อยที่สุดคือ HTML5 ดังนั้นการประกาศประเภทคือ แท็ก html ทั้งหมดควรรวมอยู่ในแท็ก and รายละเอียดที่จำเป็นของหน้าเว็บจะรวมอยู่ในแท็ก หน้าเว็บที่มองเห็นได้เขียนอยู่ภายในแท็ก มีแท็กสำหรับแต่ละวัตถุประสงค์ ที่

tag ใช้สำหรับย่อหน้า ที่

,

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

นี่คือย่อหน้า

รูปที่ 01: HTML5

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

แท็ก div ยังเป็นองค์ประกอบระดับบล็อกใน HTML ไวยากรณ์มีดังนี้

สวัสดีชาวโลก!

องค์ประกอบ div เป็นคอนเทนเนอร์สำหรับองค์ประกอบอื่นๆ ดังนั้น ชุดขององค์ประกอบสามารถบรรจุลงในองค์ประกอบ div ได้ เมื่อใช้กับ Cascading Style Sheet (CSS) แท็ก div สามารถใช้เพื่อจัดรูปแบบบล็อกของเนื้อหาได้ อ้างอิงโค้ดด้านล่าง

สองย่อหน้าอยู่ในแท็ก div เนื้อหาทั้งหมดภายในแท็ก div มีสีพื้นหลังเป็นสีดำและสีแบบอักษรสีขาว

สแปนคืออะไร

ไม่เหมือนกับองค์ประกอบระดับบล็อก องค์ประกอบแบบอินไลน์จะไม่ขึ้นบรรทัดใหม่ ใช้ความกว้างที่ต้องการเท่านั้น ตัวอย่างขององค์ประกอบแบบอินไลน์ ได้แก่,, และ

แท็ก span ยังเป็นองค์ประกอบแบบอินไลน์ใน HTML ไวยากรณ์มีดังนี้

สวัสดีชาวโลก!

รูปที่ 02: แท็ก div และ span

แท็ก span ใช้เป็นที่เก็บข้อความ แท็กนี้ใช้กับ CSS ได้เช่นกัน ดังนั้น ส่วนหนึ่งของข้อความจึงสามารถจัดรูปแบบได้ ดูตัวอย่างด้านล่าง 'paragraph1' อยู่ในแท็ก span เพิ่มสีโดยใช้แอตทริบิวต์สไตล์ CSS

นี่คือย่อหน้าที่1

ความคล้ายคลึงกันระหว่าง div และ span คืออะไร

• ทั้ง div และ span กำลังจัดกลุ่มแท็กใน HTML
• ทั้ง div และ span มีแท็กเริ่มต้นและแท็กปิดท้าย
• ทั้ง div และ span สามารถมีแอตทริบิวต์ของรูปแบบได้

ความแตกต่างระหว่าง div และ span คืออะไร

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

สรุป – div vs span

HTML ย่อมาจาก Hyper Text Markup Language ใช้สำหรับพัฒนาเว็บไซต์ ภาษานี้ประกอบด้วยแท็ก แท็กการจัดกลุ่ม div และ span ใน HTML ใช้เพื่อกำหนดส่วนในเอกสาร บทความนี้อธิบายความแตกต่างระหว่างแท็ก div และ span ความแตกต่างระหว่าง div และ span คือ div เป็นองค์ประกอบระดับบล็อก ในขณะที่ span เป็นองค์ประกอบแบบอินไลน์

ดาวน์โหลดไฟล์ PDF ของ div vs span

คุณสามารถดาวน์โหลดไฟล์ PDF ของบทความนี้และใช้เพื่อวัตถุประสงค์ออฟไลน์ตามหมายเหตุอ้างอิง โปรดดาวน์โหลดไฟล์ PDF ที่นี่: ความแตกต่างระหว่าง div และ span