ความแตกต่างระหว่างองค์ประกอบบล็อกและอินไลน์

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

ความแตกต่างที่สำคัญ – บล็อกเทียบกับองค์ประกอบอินไลน์

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

และ

พวกเขาเรียกว่าแท็กเป็นโมฆะ องค์ประกอบ HTML เป็นส่วนประกอบของเอกสาร HTML หรือหน้าเว็บหลังจากที่แยกวิเคราะห์เป็น Document Object Model (DOM) DOM คือการแสดงข้อมูลภายในเว็บเบราว์เซอร์ มันแสดงถึงแต่ละเอกสารในโครงสร้างแบบต้นไม้ ในเบราว์เซอร์ องค์ประกอบที่แสดงได้อาจเป็นองค์ประกอบบล็อกหรือองค์ประกอบแบบอินไลน์ องค์ประกอบบล็อกมีโครงสร้างสี่เหลี่ยม องค์ประกอบแบบอินไลน์สามารถฝังอยู่ในองค์ประกอบบล็อก ความแตกต่างที่สำคัญระหว่างองค์ประกอบบล็อกและองค์ประกอบอินไลน์คือองค์ประกอบบล็อกใช้ความกว้างเต็มที่มีอยู่ ในขณะที่องค์ประกอบแบบอินไลน์ใช้ความกว้างที่ต้องการเพื่อแสดงเนื้อหาขององค์ประกอบ

องค์ประกอบที่ถูกบล็อกคืออะไร

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

ใช้เพื่อกำหนดย่อหน้า เช่น

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

. มีหกแท็กเพื่อกำหนดส่วนหัว พวกเขาคือ

,

,

…

. โปรแกรมเมอร์สามารถใช้ส่วนหัวได้ตามนั้น

รายการเรียงลำดับถูกกำหนดโดย

ในขณะที่รายการที่ไม่เรียงลำดับถูกกำหนดโดย

. ใช้เพื่อแสดงเส้นแนวนอนผ่านหน้าเว็บ ที่

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

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

องค์ประกอบอินไลน์ใช้ความกว้างตามที่กำหนดเท่านั้น องค์ประกอบเหล่านั้นไม่ได้ขึ้นบรรทัดใหม่ ตัวอย่างขององค์ประกอบแบบอินไลน์มีดังนี้ ใช้ในการสร้างลิงค์จากหน้าหนึ่งไปยังอีกหน้าหนึ่ง ไฮเปอร์ลิงก์เป็นหนึ่งในองค์ประกอบสำคัญใน HTMLสามารถมีแอตทริบิวต์ href เพื่อสร้างลิงก์ไปยังปลายทาง เช่น. เยี่ยมชม Google แอตทริบิวต์เป้าหมายว่างเปล่า ดังนั้น เอกสารใหม่จะเปิดขึ้นในหน้าต่างใหม่ หากแอตทริบิวต์เป้าหมายคือ “_self” เอกสารที่เชื่อมโยงจะเปิดขึ้นในหน้าต่างเดียวกัน

รูปที่ 01: ตัวอย่างขององค์ประกอบบล็อกและอินไลน์

ใช้เพื่อเป็นตัวหนาในส่วนของข้อความ แท็กคือข้อความตัวเอียง หน้าเว็บควรจะนำเสนอได้ ดังนั้น หน้าเว็บใด ๆ ที่ประกอบด้วยหลายภาพ ที่

ใช้เพื่อแสดงภาพบนหน้า แท็กนี้ต้องมีแอตทริบิวต์สองรายการ พวกมันคือ src และ alt 'src' อธิบายตำแหน่งของรูปภาพ และ ' alt' อธิบายว่ารูปภาพนั้นเกี่ยวกับอะไร เช่น.. นี่คือตัวอย่างบางส่วนขององค์ประกอบแบบอินไลน์

ความคล้ายคลึงกันระหว่างองค์ประกอบบล็อกและอินไลน์คืออะไร

องค์ประกอบบล็อกและอินไลน์ถูกใช้เป็นคอนเทนเนอร์ใน HTML

องค์ประกอบบล็อกและอินไลน์ต่างกันอย่างไร

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

สรุป – บล็อกเทียบกับองค์ประกอบอินไลน์

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

ดาวน์โหลดเวอร์ชัน PDF ของ Block vs Inline Elements

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