บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

บล็อก HTML และองค์ประกอบอินไลน์


องค์ประกอบ HTML ทุกรายการมีค่าแสดงเริ่มต้น ขึ้นอยู่กับประเภทขององค์ประกอบ

มีสองค่าที่แสดง: บล็อกและอินไลน์


องค์ประกอบระดับบล็อก

องค์ประกอบระดับบล็อกจะเริ่มต้นในบรรทัดใหม่เสมอ

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

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

<div> องค์ประกอบเป็นองค์ประกอบระดับบล็อก

ตัวอย่าง

<div>Hello World</div>

นี่คือองค์ประกอบระดับบล็อกใน HTML:


องค์ประกอบแบบอินไลน์

องค์ประกอบแบบอินไลน์ไม่ขึ้นบรรทัดใหม่

องค์ประกอบแบบอินไลน์ใช้ความกว้างเท่าที่จำเป็นเท่านั้น

นี่คือองค์ประกอบ <span> ภายในย่อหน้า

ตัวอย่าง

<span>Hello World</span>

นี่คือองค์ประกอบแบบอินไลน์ใน HTML:

หมายเหตุ:องค์ประกอบแบบอินไลน์ไม่สามารถมีองค์ประกอบระดับบล็อกได้!


<div> องค์ประกอบ

องค์ประกอบ<div>นี้มักใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบ HTML อื่นๆ

องค์ประกอบ<div>ไม่มีแอตทริบิวต์ที่จำเป็น แต่style, classและidเป็นเรื่องธรรมดา

เมื่อใช้ร่วมกับ CSS <div>สามารถใช้องค์ประกอบเพื่อจัดรูปแบบบล็อกของเนื้อหาได้:

ตัวอย่าง

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<span> องค์ประกอบ

องค์ประกอบ<span>นี้เป็นคอนเทนเนอร์แบบอินไลน์ที่ใช้ทำเครื่องหมายส่วนของข้อความหรือส่วนหนึ่งของเอกสาร

องค์ประกอบ<span>ไม่มีแอตทริบิวต์ที่จำเป็น แต่style, classและidเป็นเรื่องธรรมดา

เมื่อใช้ร่วมกับ CSS คุณ<span>สามารถใช้องค์ประกอบเพื่อจัดรูปแบบส่วนต่างๆ ของข้อความได้:

ตัวอย่าง

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

สรุปบท

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

แท็ก HTML

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา