home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML div คืออะไรและใช้งานอย่างไร

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       * {
           box-sizing: border-box;
       }
       body {
           font-family: Arial, Helvetica, sans-serif;
           font-size: large;
       }
       .first {
           width: 500px;
           border: 1px solid black;
           padding: 20px
       }
       .square {
           width: 100%;
           height: 250px;
           color: white;
           border: none;
 
       }
       .blue {
           background-color: royalblue;
           border: none;
       }
       .purple {
           background-color: purple;
           border: none;
       }
   </style>
</head>
<body>
       <div class="first">
           <h4>I'm a div that is holding two smaller divs.</h4>
           <div class="square blue">1</div>
           <div class="square purple">2</div>
 
       </div>
</body>
</html>

สิ่งสำคัญที่สุดที่ควรทราบเกี่ยวกับ <div> แท็กก็คือ ไม่ องค์ประกอบ HTML ที่มีความหมาย นั่นหมายความว่าไม่ชัดเจนว่า <div> . คืออะไร ทำได้โดยดูที่แท็ก (ต่างจาก ,

,
เป็นต้น)

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

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

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

,

เป็นต้น) ตามที่ดูเหมือน <h1> ชนะและ <div> ถูกละเลย

คุณสมบัติ

HTML <div> องค์ประกอบสามารถเข้าถึงเหตุการณ์ของ HTML และแอตทริบิวต์ทั่วโลก แอตทริบิวต์ของเหตุการณ์คือสิ่งที่ใช้เมื่อผู้ใช้โต้ตอบกับหน้าเว็บของคุณในทางใดทางหนึ่ง เช่น onclick เมื่อผู้ใช้คลิกที่รูปภาพ หรือ onmouseover เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ แอตทริบิวต์ส่วนกลางคือแอตทริบิวต์ที่มีให้สำหรับองค์ประกอบ HTML ทั้งหมด

รายการแอตทริบิวต์ HTML ทั้งหมดมีอยู่ในเว็บไซต์ Mozilla Developer Network

วิธีการจัดสไตล์

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Inline Styling</title>
<body>
       <div style="width:500px;border: 3px solid black; padding: 20px;">
           <h4>I'm a div that is holding two smaller divs.</h4>
           <div style="background-color: royalblue; border: none;">1</div>
           <div style="background-color: purple; border: none;">2</div>
       </div>
</body>
</html>

จัดแต่งทรงผมสามารถทำได้ใน <style> แท็กใน <head> ของเอกสาร HTML หรือบนสไตล์ชีตภายนอก นี่คือที่ที่ <div> แอตทริบิวต์ class หรือ id จะเข้ามาเล่น

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       * {
           box-sizing: border-box;
       }
       body {
           font-family: Arial, Helvetica, sans-serif;
           font-size: large;
       }
       .first {
           width: 500px;
           border: 3px solid black;
           padding: 20px
       }
       .square {
           width: 100%;
           height: 250px;
           color: white;
           border: none;
 
       }
       #blue {
           background-color: royalblue;
           border: none;
       }
       #purple {
           background-color: purple;
           border: none;
       }
   </style>
</head>
<body>
       <div class="first">
           <h4>I'm a div that is holding two smaller divs.</h4>
           <div id="blue" class="square">1</div>
           <div id="purple" class="square">2</div>
       </div>
</body>
</html>

สามารถใช้แอตทริบิวต์ class และแอตทริบิวต์ id พร้อมกันได้ใน <div> . รหัสจะถือว่าเฉพาะเจาะจงมากกว่าแอตทริบิวต์ของคลาส ดังนั้นการกำหนดสไตล์ใดๆ ที่เฉพาะเจาะจงสำหรับ <div> นั้น สามารถใช้แอตทริบิวต์ id เพื่อแทนที่การจัดสไตล์คลาสใดๆ



บทสรุป

วันนี้เราได้เรียนรู้ว่า <div> . คืออะไร คือคุณลักษณะของมันคืออะไรและองค์ประกอบมีรูปแบบอย่างไร สำหรับข้อมูลเพิ่มเติมเกี่ยวกับผลกระทบของคุณสมบัติการแสดงผล <div> คอนเทนเนอร์ ดูบทความของ CareerKarma เกี่ยวกับโมเดลกล่องและโมเดลเฟล็กซ์บ็อกซ์