แบบแผน HTML <div> แทรก

  • หน้าก่อนหน้า <dir>
  • หน้าต่อไป <dl>

การนิยามและวิธีใช้

<div> แทรกหมายนี้นิยามว่าเป็นแบ่งหน้าหรือส่วนในเอกสาร HTML (เช่นหนึ่งหน่วยเลขหรือหนึ่งหน่วยหน้าที่แยกหรือหนึ่งหน่วยเซกชัน/เซ็กชัน)

<div> แทรกหมายแบบที่สามารถแบ่งเอกสารให้เป็นส่วนที่แยกต่างกันได้ มันสามารถใช้เป็นเครื่องมือจัดเรียงที่แข็งแกร่ง และไม่มีการเชื่อมโยงกับรูปแบบใดๆ

เนื้อหาทุกชนิดสามารถใส่ได้ <div> ในองค์ประกอบ!<div> องค์ประกอบ

หากใช้ id หรือ class เพื่อที่จะ <div>หากใช้ class หรือ id สามารถตั้งสไตล์ <div> แบบแบบแถว

แนะนำ:โดยเรื่องทั่วไป บราวเซอร์จะมีการตั้งสไตล์ในแบบแบบแถวที่ <div> ใช้เครื่องหมายช่องว่างหลังหน้าและหน้าขององค์ประกอบ

การใช้งาน

<div> เป็นองค์ประกอบของแบบแบบบล็อค หมายความว่าเนื้อหาของมันจะเริ่มต้นแบบใหม่ในแถวใหม่ ในความเป็นจริง การเรียกแถวเป็นเรื่องที่ <div> รูปแบบที่มีความเด่นที่สุด <div> ของ class หรือ id สไตล์เพิ่มเติม

ไม่จำเป็นต้องใช้ <div> ทั้งคู่เพื่อเพิ่มความหมาย

สามารถใช้ <div> การใช้องค์ประกอบ class หรือ id มีตัวแปรที่เรียกว่า class ใช้สำหรับกลุ่มองค์ประกอบ (องค์ประกอบที่คล้ายกัน หรืออาจเข้าใจว่าเป็นองค์ประกอบหนึ่งประเภท) และ id ใช้สำหรับองค์ประกอบที่เด่นที่สุด

ดูเพิ่มเติมที่

เรื่อง HTMLHTML องค์ประกอบบล็อค และองค์ประกอบแถว

เรื่อง HTMLHTML การจัดเรียง

คู่มืออ้างอิง HTML DOMDiv องค์ประกอบ

ตัวอย่าง

ส่วนของ div ที่ใช้ CSS ที่ตั้งสไตล์ในเอกสาร

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>นี่คือหัวข้อใน div องค์ประกอบ</h2>
  <p>นี่คือข้อความบางอย่างใน div องค์ประกอบ</p>
</div>
</body>
</html>

ทดสอบด้วยตัวเอง

กรณีที่เป็นตัวอย่าง

<body>
 <h1>เว็บไซต์ใหม่</h2>
  <p>ข้อความบางอย่าง ข้อความบางอย่าง ข้อความบางอย่าง...</p>
  ...
 <div class="news">
  <h2>หัวข้อข่าว 1</h2>
  <p>ข้อความบางอย่าง ข้อความบางอย่าง ข้อความบางอย่าง...</p>
  ...
</div>
 <div class="news">
  <h2>หัวข้อข่าว 2</h2>
  <p>ข้อความบางอย่าง ข้อความบางอย่าง ข้อความบางอย่าง...</p>
  ...
 </div>
 ...
</body>

ตัวอย่างชี้แจง

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

คำเตือน：สำหรับการเรียนรู้การใช้ class และ id ให้ลึกเข้าไปดูบทที่ W3school ว่า 'องค์ประกอบแบบออกแบบ' ภาค 'div, id และช่วยเหลือที่มีติดตาม'

คุณสมบัติโลก

<div> แบบของตารางยังสนับสนุน คุณสมบัติโลกใน HTML。

คุณสมบัติเหตุการณ์

<div> แบบของตารางยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML。

การตั้งค่า CSS ปริยาย

โดยทั่วไป บราวเซอร์จะใช้ค่าปริยายต่อไปนี้แสดง <div> องค์ประกอบ：

div {
  display: block;
}

ทดสอบด้วยตัวเอง

การสนับสนุนโดยเบราเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อนหน้า <dir>
  • หน้าต่อไป <dl>