การใช้โครงกระดูก HTML
โครงกระดูกเป็นโครงสนับสนุนของสิ่งมีชีวิต
โดยทั่วไปจะทำมาจากบางสิ่งที่แข็ง เพื่อปกป้องร่างกายที่เปราะบางมากขึ้น
สารานุกรม
นักพัฒนาเว็บทุกคนควรมีโครงร่าง HTML
ควรพกติดกระเป๋าไว้ใช้ทุกงาน:
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
คลิกที่ปุ่ม "ลองใช้เอง" เพื่อดูว่ามันทำงานอย่างไร!
ลองเปลี่ยนข้อความ "This is a Heading" เป็น "This is my Wedding"
คุณทำมันได้หรือไม่
ยินดีด้วย! ตอนนี้คุณรู้วิธีแก้ไข HTML แล้ว
โครงกระดูก HTML อธิบาย
ต้องมี DOCTYPE แจ้งเบราว์เซอร์ว่าเอกสารนี้เป็นเอกสาร HTML:
<!DOCTYPE html>
แท็กเริ่มต้น html และแท็กสิ้นสุด html กำหนดจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML
ภาษาเป็นภาษาอังกฤษ:
<html lang="en">
</html>
เมตาแท็กชุดอักขระกำหนดชุดอักขระ (UTF-8):
หน้า HTML ไม่มีแท็กส่วนหัว ไม่จำเป็นต้องใช้แท็กส่วนหัวใน HTML
ใน HTML ทุกอย่างก่อนแท็ก body จะถือว่าเป็นส่วนหนึ่งของส่วนหัว
<meta charset="UTF-8">
มาตรฐาน HTML ต้องการชื่อหน้าที่ถูกต้อง:
<title>Page Title</title>
เมตาแท็กวิวพอร์ตทำให้หน้าเว็บดูดีในทุกขนาดหน้าจอ (แล็ปท็อป มือถือ):
<meta name="viewport" content="width=device-width,initial-scale=1">
แท็กลิงก์จะลิงก์ไปยังสไตล์ชีต:
<link rel="stylesheet" href="name">
แท็กเริ่มและแท็กปิดล้อมรอบการจัดรูปแบบ CSS ในอนาคต:
<style>
</style>
แท็กสคริปต์ลิงก์ไปยังสคริปต์:
<script src="name"></script>
แท็กเริ่มต้นและแท็กปิดท้ายล้อมรอบเนื้อหาที่มองเห็นได้ของเอกสาร HTML:
<body>
</body>
แท็กรูปภาพกำหนดรูปภาพ HTML:
<img src="img_la.jpg" alt="LA" style="width:100%">
ทำให้เป็นนิสัยในการ "แพ็ค" ส่วน HTML ในองค์ประกอบ div
เตรียมตัวสำหรับการตั้งชื่อชั้นเรียนแต่ละส่วน:
<div class="class name">
</div>
แท็กหัวเรื่องกำหนดหัวเรื่อง HTML:
<h1>This is a Heading</h1>
แท็กย่อหน้ากำหนดย่อหน้า HTML:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>