1. Home
  2. รูปแบบ HTML

บทช่วยสอน รูปแบบ HTML ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่างออนไลน์,รูปแบบเว็บไซต์,เค้าโครง HTML - การใช้ <div>,ตัวอย่าง,รูปแบบ HTML - การใช้ตาราง,ตัวอย่าง,HTML Layout - เคล็ดลับที่เป็นประโยชน์,แท็กรูปแบบ HTML,

รูปแบบ HTML

เค้าโครงหน้าเพื่อปรับปรุงลักษณะของเว็บไซต์ที่มีความสำคัญมาก

โปรดออกแบบรูปแบบหน้าเว็บของคุณ

ตัวอย่าง

ตัวอย่างออนไลน์

เค้าโครงหน้าโดยใช้ <div>
วิธีการใช้ <div> เค้าโครง

รูปแบบการใช้งานหน้า <table> องค์ประกอบ
วิธีการใช้ <table> องค์ประกอบรูปแบบ

รูปแบบเว็บไซต์

เว็บไซต์ส่วนใหญ่จะเนื้อหาลงในส่วนใหญ่ของคอลัมน์ (เช่นนิตยสารหรือหนังสือพิมพ์ที่)

เว็บไซต์ส่วนใหญ่สามารถใช้ <div> หรือ <table> องค์ประกอบในการสร้างหลายคอลัมน์ CSS จะใช้ในการวางตำแหน่งขององค์ประกอบหรือสร้างพื้นหลังที่มีสีสันและลักษณะของหน้า

โคมไฟ แม้ว่าเราจะสามารถใช้แท็ก HTML ตารางในการออกแบบรูปแบบที่สวยงาม แต่แท็กตารางจะไม่แนะนำให้ใช้เป็นเครื่องมือในการจัดวาง - ไม่ได้เป็นเครื่องมือรูปแบบตาราง

เค้าโครง HTML - การใช้ <div>

ส่วน div เป็นองค์ประกอบระดับบล็อกที่ใช้สำหรับการจัดกลุ่มองค์ประกอบ HTML

ตัวอย่างต่อไปนี้ใช้ห้า div องค์ประกอบในการสร้างรูปแบบหลายคอลัมน์:

ตัวอย่าง

<! DOCTYPE html> <html> <head> <Meta charset = "UTF-8"> <title> กวดวิชานี้ (w3write.com) </ title> </ head> <body> <div id = "ตู้คอนเทนเนอร์" style = "width: 500px"> <div id = "หัว" style = "สีพื้นหลัง: # FFA500;"> <h1 style = "margin ล่าง: 0 ;"> ชื่อที่หน้าหลัก </ h1> </ div> <div id = "เมนู" style = "สีพื้นหลัง: # FFD700; ความสูง: 200px; ความกว้าง: 100px; ลอย: ด้านซ้าย;"> <b> เมนู </ b> <br> HTML <br> CSS <br> JavaScript </ div> <div id = "เนื้อหา" style = "สีพื้นหลัง: #EEEEEE ; ความสูง: 200px; ความกว้าง: 400px; ลอย: ด้านซ้าย;"> ข้อความที่นี่ </ div> <div id = "ส่วนท้าย" style = "สีพื้นหลัง: # FFA500; ชัดเจน: ทั้งสอง; text-align: ศูนย์;"> ลิขสิทธิ์© w3write.com </ div> </ div> </ body> </ html>

ลอง»

รหัส HTML ข้างต้นก่อให้เกิดผลลัพธ์ต่อไปนี้:

รูปแบบ HTML - การใช้ตาราง

ใช้ภาษา HTML <table> แท็กคือการสร้างรูปแบบในลักษณะที่ง่าย

เว็บไซต์ส่วนใหญ่สามารถใช้ <div> หรือ <table> องค์ประกอบในการสร้างหลายคอลัมน์ CSS จะใช้ในการวางตำแหน่งขององค์ประกอบหรือสร้างพื้นหลังที่มีสีสันและลักษณะของหน้า

โคมไฟ แม้ว่าคุณจะสามารถใช้ตาราง HTML เพื่อสร้างรูปแบบที่ดี แต่มีวัตถุประสงค์เพื่อนำเสนอตารางการออกแบบตารางข้อมูล - ไม่ตารางเครื่องมือรูปแบบ!

ตัวอย่างต่อไปนี้ใช้สามแถวของตารางที่สอง - เป็นครั้งแรกและบรรทัดสุดท้ายใช้แอตทริบิวต์ colspan จะครอบคลุมที่สอง:

ตัวอย่าง

<! DOCTYPE html> <html> <head> <Meta charset = "UTF-8"> <title> กวดวิชานี้ (w3write.com) </ title> </ head> <body> <table width = "500" border = "0"> <tr> <td colspan = "2" style = "สีพื้นหลัง: # FFA500;"> <h1> ชื่อหน้าหลัก </ h1> </ td> </ tr> <tr> <td style = "สีพื้นหลัง: # FFD700 ความกว้าง: 100px;"> <b> เมนู </ b> <br> HTML <br> CSS <br> JavaScript </ td> <td style = "สีพื้นหลัง: #eeeeee ; ความสูง: 200px; ความกว้าง: 400px;"> ข้อความที่นี่ </ td> </ tr> <tr> <td colspan = "2" style = "สีพื้นหลัง: # FFA500; text-align: ศูนย์;"> ลิขสิทธิ์© w3write.com </ td> </ tr> </ table> </ body> </ html>

ลอง»

รหัส HTML ข้างต้นก่อให้เกิดผลลัพธ์ต่อไปนี้:


HTML Layout - เคล็ดลับที่เป็นประโยชน์

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

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

แท็กรูปแบบ HTML

标签描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。

บทแนะนำยอดนิยม

Contact US

รูปแบบ HTML
10/30