คู่มือสรุป HTML5 & CSS3: แท็ก, คุณสมบัติ และวิธีการแสดงผลหน้า HTML ด้วยโปรแกรมดู HTML ออนไลน์
มีปัญหาในการจำแท็ก HTML หรือคุณสมบัติ CSS ที่เฉพาะเจาะจงอยู่ใช่ไหม? คู่มือนี้เหมาะสำหรับคุณ แผ่นสรุป HTML ฉบับสมบูรณ์นี้ครอบคลุมแท็ก HTML5 และคุณสมบัติ CSS3 ที่จำเป็นที่สุด พร้อมด้วยโค้ดตัวอย่างที่ใช้งานได้จริง สงสัย วิธีแสดงผลหน้า HTML โดยไม่ต้องใช้เซิร์ฟเวอร์ภายในเครื่องใช่หรือไม่? ค้นพบวิธีทดสอบและแสดงภาพตัวอย่างแต่ละอันได้ทันทีโดยใช้ โปรแกรมดู HTML ออนไลน์ ของเราเพื่อเวิร์กโฟลว์ที่รวดเร็วและมีประสิทธิภาพยิ่งขึ้น
รายการแท็ก HTML5 สุดยอด: จัดโครงสร้างเนื้อหาเว็บของคุณ
HTML (HyperText Markup Language) คือกระดูกสันหลังของทุกหน้าเว็บ HTML5 ได้นำเสนอองค์ประกอบเชิงความหมายที่ให้ความหมายที่ชัดเจนยิ่งขึ้นแก่เนื้อหาของคุณ ซึ่งช่วยปรับปรุงทั้งการเข้าถึง (accessibility) และ SEO นี่คือรายละเอียดของแท็กที่คุณจะใช้บ่อยที่สุด
โครงสร้างเอกสารหลัก & เมตาดาตา
แท็กเหล่านี้เป็นโครงสร้างพื้นฐานของเอกสาร HTML ใดๆ ซึ่งให้ข้อมูลที่จำเป็นแก่เบราว์เซอร์และเครื่องมือค้นหา
| แท็ก | คำอธิบาย |
|---|---|
<!DOCTYPE html> | ประกาศประเภทเอกสารว่าเป็น HTML5 |
<html> | องค์ประกอบรากของหน้า HTML |
<head> | มีข้อมูลเมตาเกี่ยวกับเอกสาร |
<title> | ระบุชื่อเรื่องสำหรับแท็บเบราว์เซอร์และผลการค้นหา |
<meta> | ให้ข้อมูลเมตา เช่น ชุดตัวอักษร การตั้งค่าวิวพอร์ต และคำอธิบาย |
<link> | ลิงก์ไปยังทรัพยากรภายนอก ซึ่งส่วนใหญ่เป็นสไตล์ชีท CSS |
<script> | ฝังหรือลิงก์ไปยังโค้ด JavaScript ที่รันได้ |
<body> | มีเนื้อหาที่มองเห็นได้ของหน้า |
องค์ประกอบการแบ่งส่วนและจัดกลุ่มเชิงความหมาย
ใช้แท็กเหล่านี้เพื่อจัดโครงสร้างเนื้อหาของคุณอย่างมีตรรกะ ให้ความหมายกับส่วนต่างๆ ของเค้าโครงหน้าเว็บของคุณ
| แท็ก | คำอธิบาย |
|---|---|
<header> | แสดงถึงเนื้อหานำสำหรับส่วนหนึ่งหรือทั้งหน้า |
<nav> | มีลิงก์นำทาง |
<main> | ระบุเนื้อหาหลักที่เด่นที่สุดของเอกสาร |
<article> | กำหนดองค์ประกอบที่เป็นอิสระ (เช่น บทความบล็อก, โพสต์ฟอรัม) |
<section> | แสดงถึงส่วนที่อยู่โดดๆ ของเอกสาร |
<aside> | กำหนดเนื้อหาที่อยู่ด้านข้างเนื้อหาหลัก (เช่น แถบด้านข้าง) |
<footer> | แสดงถึงส่วนท้ายสำหรับส่วนหนึ่งหรือทั้งหน้า |
<div> | คอนเทนเนอร์ทั่วไปสำหรับเนื้อหาที่ไม่มีความหมายเฉพาะเจาะจง |
ความหมายระดับข้อความ & ไฮเปอร์ลิงก์
แท็กเหล่านี้ใช้เพื่อจัดรูปแบบและให้ความหมายกับข้อความ ตั้งแต่หัวข้อและย่อหน้าไปจนถึงลิงก์
| แท็ก | คำอธิบาย |
|---|---|
<h1> ถึง <h6> | ระดับหัวข้อ โดยที่ <h1> มีความสำคัญที่สุด |
<p> | กำหนดย่อหน้า |
<a> | สร้างไฮเปอร์ลิงก์ คุณสมบัติ href ระบุ URL |
<strong> | บ่งบอกข้อความที่มีความสำคัญอย่างมาก (โดยปกติจะเป็นตัวหนา) |
<em> | บ่งบอกข้อความที่เน้น (โดยปกติจะเป็นตัวเอียง) |
<span> | คอนเทนเนอร์แบบอินไลน์ทั่วไปสำหรับเนื้อหาเชิงวลี |
<br> | แทรกการขึ้นบรรทัดใหม่หนึ่งบรรทัด |
<blockquote> | กำหนดส่วนที่ถูกอ้างอิงจากแหล่งอื่น |
ฟอร์ม, อินพุต & องค์ประกอบเชิงโต้ตอบ
ฟอร์มมีความสำคัญสำหรับการโต้ตอบกับผู้ใช้ แท็กเหล่านี้ช่วยให้คุณรวบรวมข้อมูลจากผู้ใช้ได้
| แท็ก | คำอธิบาย |
|---|---|
<form> | คอนเทนเนอร์สำหรับสร้างฟอร์ม HTML สำหรับข้อมูลจากผู้ใช้ |
<input> | องค์ประกอบฟอร์มที่หลากหลายที่สุด ประเภทถูกกำหนดโดยคุณสมบัติ type (เช่น text, password, checkbox, submit) |
<textarea> | กำหนดตัวควบคุมอินพุตข้อความแบบหลายบรรทัด |
<label> | กำหนดป้ายกำกับสำหรับองค์ประกอบ <input> |
<button> | กำหนดปุ่มที่คลิกได้ |
<select> | สร้างรายการแบบหล่นลง |
<option> | กำหนดตัวเลือกภายในรายการ <select> |
สื่อ, การฝัง & เนื้อหาภายนอก
ทำให้หน้าเว็บของคุณมีชีวิตชีวาด้วยรูปภาพ วิดีโอ และเนื้อหาที่ฝังอื่นๆ
| แท็ก | คำอธิบาย |
|---|---|
<img> | ฝังรูปภาพ ต้องมีคุณสมบัติ src (แหล่งที่มา) และ alt (ข้อความสำรอง) |
<video> | ฝังเครื่องเล่นวิดีโอ |
<audio> | ฝังเครื่องเล่นเนื้อหาเสียง |
<iframe> | ระบุเฟรมแบบอินไลน์เพื่อฝังเอกสารอื่นภายในเอกสาร HTML ปัจจุบัน |
รายการ & ตาราง: จัดระเบียบข้อมูลอย่างมีประสิทธิภาพ
จัดโครงสร้างรายการที่เกี่ยวข้องหรือข้อมูลแบบตารางอย่างชัดเจนด้วยรายการและตาราง
| แท็ก | คำอธิบาย |
|---|---|
<ul> | กำหนดรายการที่ไม่มีลำดับ (แบบมีจุด) |
<ol> | กำหนดรายการที่มีลำดับ (แบบมีตัวเลข) |
<li> | กำหนดรายการใน <ul> หรือ <ol> |
<table> | กำหนดตาราง |
<tr> | กำหนดแถวในตาราง |
<th> | กำหนดเซลล์ส่วนหัวในตาราง |
<td> | กำหนดเซลล์ข้อมูลมาตรฐานในตาราง |
<caption> | กำหนดคำบรรยายตาราง |
รายการคุณสมบัติ CSS3 ที่จำเป็น: จัดแต่งหน้าเว็บของคุณอย่างมืออาชีพ
CSS (Cascading Style Sheets) ทำให้ HTML ของคุณมีชีวิตชีวา โดยควบคุมเค้าโครง สี แบบอักษร และรูปลักษณ์โดยรวม แผ่นสรุป CSS นี้ครอบคลุมคุณสมบัติที่คุณจะต้องเชี่ยวชาญในการออกแบบใดๆ
ตัวเลือก CSS & ความเฉพาะเจาะจง
ตัวเลือกจะกำหนดเป้าหมายองค์ประกอบ HTML ที่คุณต้องการจัดรูปแบบ การทำความเข้าใจตัวเลือกเป็นขั้นตอนแรกในการใช้ CSS อย่างมีประสิทธิภาพ
| ตัวเลือก | ตัวอย่าง | คำอธิบาย |
|---|---|---|
| Type | p | เลือกองค์ประกอบ <p> ทั้งหมด |
| Class | .my-class | เลือกองค์ประกอบทั้งหมดที่มี class="my-class" |
| ID | #my-id | เลือกองค์ประกอบเดี่ยวที่มี id="my-id" |
| Attribute | [href] | เลือกองค์ประกอบทั้งหมดที่มีคุณสมบัติ href |
| Descendant | article p | เลือกองค์ประกอบ <p> ทั้งหมดที่อยู่ภายใน <article> |
| Pseudo-class | a:hover | เลือกลิงก์เมื่อผู้ใช้วางเมาส์เหนือลิงก์นั้น |
โมเดลกล่อง & คุณสมบัติการปรับขนาด
ทุกองค์ประกอบบนหน้าเป็นกล่องสี่เหลี่ยม โมเดลกล่องกำหนดว่าขนาด ระยะห่าง ขอบ และระยะขอบทำงานร่วมกันอย่างไร
| คุณสมบัติ | ค่าตัวอย่าง | คำอธิบาย |
|---|---|---|
width | 100px, 50%, auto | กำหนดความกว้างขององค์ประกอบ |
height | 100px, 50vh, auto | กำหนดความสูงขององค์ประกอบ |
padding | 10px, 5px 10px | กำหนดช่องว่างระหว่างเนื้อหากับขอบ |
border | 1px solid black | คำย่อสำหรับกำหนดความกว้าง รูปแบบ และสีของขอบ |
margin | 10px, 5px 10px | กำหนดช่องว่างภายนอกขอบ ระหว่างองค์ประกอบ |
box-sizing | border-box | เปลี่ยนวิธีการคำนวณ width และ height รวมถึง padding และ border |
การจัดรูปแบบตัวอักษรและข้อความ
ควบคุมลักษณะของข้อความเพื่อสร้างเนื้อหาที่อ่านง่ายและสวยงาม
| คุณสมบัติ | ค่าตัวอย่าง | คำอธิบาย |
|---|---|---|
font-family | "Arial", sans-serif | ระบุฟอนต์สำหรับองค์ประกอบ |
font-size | 16px, 1.2em, 1rem | กำหนดขนาดของข้อความ |
font-weight | normal, bold, 700 | กำหนดความหนาของฟอนต์ |
color | black, #333, rgb(0,0,0) | กำหนดสีของข้อความ |
text-align | left, center, right | จัดตำแหน่งข้อความภายในองค์ประกอบ |
line-height | 1.5 | กำหนดระยะห่างระหว่างบรรทัดของข้อความ |
เค้าโครงที่ยืดหยุ่นด้วย Flexbox
Flexbox เป็นโมเดลเค้าโครงแบบหนึ่งมิติสำหรับการจัดเรียงรายการในแถวหรือคอลัมน์ ช่วยให้การสร้างเค้าโครงที่ตอบสนองเป็นไปอย่างง่ายดาย
| คุณสมบัติ (คอนเทนเนอร์) | ค่าตัวอย่าง | คำอธิบาย |
|---|---|---|
display | flex | เปิดใช้งานโมเดลเค้าโครง Flexbox |
flex-direction | row, column | กำหนดทิศทางของแกนหลัก |
justify-content | center, space-between | จัดตำแหน่งรายการตามแกนหลัก |
align-items | center, stretch | จัดตำแหน่งรายการตามแกนรอง |
flex-wrap | nowrap, wrap | อนุญาตให้รายการขึ้นบรรทัดใหม่ได้หลายบรรทัด |
เค้าโครงแบบ Grid ด้วย CSS Grid
CSS Grid เป็นระบบเค้าโครงสองมิติที่มีประสิทธิภาพ ช่วยให้คุณควบคุมทั้งคอลัมน์และแถวพร้อมกันได้
| คุณสมบัติ (คอนเทนเนอร์) | ค่าตัวอย่าง | คำอธิบาย |
|---|---|---|
display | grid | เปิดใช้งานโมเดลเค้าโครง Grid |
grid-template-columns | 1fr 1fr 100px, repeat(3, 1fr) | กำหนดคอลัมน์ของ Grid |
grid-template-rows | auto 100px | กำหนดแถวของ Grid |
gap | 10px | กำหนดขนาดของช่องว่างระหว่างเซลล์ Grid |
พื้นหลัง, ขอบ & เงา
เพิ่มความลึกและสไตล์ให้กับองค์ประกอบของคุณด้วยคุณสมบัติการตกแต่งเหล่านี้
| คุณสมบัติ | ค่าตัวอย่าง | คำอธิบาย |
|---|---|---|
background-color | lightblue, #f0f0f0 | กำหนดสีพื้นหลังขององค์ประกอบ |
background-image | url('image.jpg') | กำหนดรูปภาพพื้นหลัง |
border-radius | 5px, 50% | ทำให้มุมของขอบองค์ประกอบโค้งมน |
box-shadow | 10px 5px 5px black | เพิ่มเอฟเฟกต์เงารอบกรอบขององค์ประกอบ |
การเปลี่ยนภาพ, การแปลง & แอนิเมชัน
สร้างส่วนต่อประสานผู้ใช้แบบไดนามิกและโต้ตอบได้ด้วยเอฟเฟกต์ภาพที่ราบรื่น
| คุณสมบัติ | ค่าตัวอย่าง | คำอธิบาย |
|---|---|---|
transition | all 0.3s ease-in-out | เปิดใช้งานการเปลี่ยนแปลงคุณสมบัติที่ราบรื่นในช่วงเวลาที่กำหนด |
transform | rotate(45deg), scale(1.2) | ใช้การแปลง 2D หรือ 3D กับองค์ประกอบ |
animation | slide-in 1s forwards | คำย่อสำหรับการใช้แอนิเมชันที่มีชื่อ |
ทำไม Html Viewer คือโปรแกรมแก้ไขและดู HTML ออนไลน์ที่คุณต้องมี
การมีแผ่นสรุปที่ดีเป็นเรื่องหนึ่ง แต่การสามารถนำไปใช้และเห็นผลลัพธ์ได้ทันทีคือสิ่งที่เร่งการเรียนรู้และการพัฒนาอย่างแท้จริง นั่นคือจุดที่ โปรแกรมแก้ไข HTML ออนไลน์ เช่น Html Viewer กลายเป็นพันธมิตรที่ทรงพลังที่สุดของคุณ
แสดงผลสดทันทีเพื่อการทดลองที่รวดเร็ว
คัดลอกโค้ดใดๆ จากคู่มือนี้ วางลงในโปรแกรมแก้ไขของเรา และดูมันแสดงผลแบบเรียลไทม์ ไม่จำเป็นต้องบันทึกไฟล์ สลับหน้าต่าง หรือรีเฟรชเบราว์เซอร์ ลูปการตอบกลับทันทีนี้เหมาะอย่างยิ่งสำหรับการปรับแต่งคุณสมบัติ CSS ให้สมบูรณ์แบบ หรือทำความเข้าใจว่าแท็ก HTML ใหม่จัดโครงสร้างเนื้อหาของคุณอย่างไร คุณสามารถ ทดสอบโค้ดตัวอย่างเหล่านี้ ได้ทันทีและเห็นความมหัศจรรย์ด้วยตัวคุณเอง
แก้ไข, จัดรูปแบบ และย่อขนาดโค้ดได้อย่างง่ายดาย
เครื่องมือของเราเป็นมากกว่าแค่โปรแกรมดู มันเป็นโซลูชันเวิร์กโฟลว์ที่สมบูรณ์ หากคุณรวบรวมโค้ดจากแหล่งต่างๆ การคลิกปุ่ม "Beautify" (จัดรูปแบบโค้ดให้อ่านง่าย) ของเราเพียงครั้งเดียวจะจัดรูปแบบให้เป็นโครงสร้างที่สะอาดตา อ่านง่าย เมื่อคุณพร้อมที่จะนำไปใช้งาน ฟังก์ชัน "Minify" จะบีบอัดโค้ดของคุณ ทำให้เหมาะสำหรับการโหลดหน้าที่เร็วขึ้น ฟังก์ชันการทำงานแบบ All-in-one นี้ช่วยให้กระบวนการเขียนโค้ดทั้งหมดของคุณมีประสิทธิภาพ
เข้าถึงได้ทุกที่ทุกเวลา: ไม่ต้องตั้งค่าใดๆ
ลืมเรื่องการติดตั้ง IDE ที่หนักหน่วง หรือการกำหนดค่าสภาพแวดล้อมภายในเครื่องที่ซับซ้อนไปได้เลย โปรแกรมแก้ไข HTML ออนไลน์นี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณ ไม่ว่าคุณจะใช้แล็ปท็อปที่ร้านกาแฟ หรือคอมพิวเตอร์ที่ใช้ร่วมกันในห้องแล็บ แซนด์บ็อกซ์ HTML และ CSS ที่ทรงพลังของคุณก็พร้อมใช้งานเสมอ เพียงแค่พิมพ์ URL เมื่อใดก็ตามที่เกิดแรงบันดาลใจ
เชี่ยวชาญการพัฒนาเว็บได้เร็วขึ้น: คู่มือสรุป HTML & CSS ที่จำเป็นของคุณ
บุ๊กมาร์กหน้านี้ไว้เป็นคู่มือฉบับสมบูรณ์สำหรับพื้นฐานของ HTML5 และ CSS3 ใช้เพื่อค้นหาแท็กหรือคุณสมบัติที่ถูกต้องได้อย่างรวดเร็ว เข้าใจไวยากรณ์ และสร้างโครงการของคุณด้วยความมั่นใจ ที่สำคัญกว่านั้นคือการรวมความรู้นี้เข้ากับพลังการใช้งานจริงของเครื่องมือของเรา ทุกโค้ดตัวอย่างในที่นี้คือโอกาสในการทดลองและเรียนรู้ ไปที่ โปรแกรมแก้ไข HtmlViewer.cc เพื่อทำให้แผ่นสรุปนี้มีชีวิตชีวา และเปลี่ยนเวิร์กโฟลว์การเขียนโค้ดของคุณในวันนี้
คำถามที่พบบ่อยเกี่ยวกับแผ่นสรุป HTML & CSS
ฉันจะดูโค้ด HTML จากเว็บไซต์หรือไฟล์ในเครื่องได้อย่างรวดเร็วได้อย่างไร?
วิธีที่ง่ายที่สุดคือการใช้โปรแกรมดู HTML ออนไลน์ ด้วยเครื่องมือของเรา คุณสามารถวางโค้ดโดยตรง อัปโหลดไฟล์ HTML หรือแม้แต่ป้อน URL เพื่อดึงและ ดูซอร์สโค้ด HTML จากเว็บไซต์จริง เมื่อโหลดแล้ว คุณสามารถดูโค้ดและการแสดงตัวอย่างภาพได้พร้อมกัน ทำให้เหมาะสำหรับการเรียนรู้และการแก้ไขข้อผิดพลาด
แผ่นสรุป HTML & CSS คืออะไร และมีประโยชน์อย่างไร?
แผ่นสรุป HTML & CSS คือคู่มืออ้างอิงที่กระชับซึ่งแสดงรายการแท็ก คุณสมบัติ ไวยากรณ์ และแนวคิดที่ใช้บ่อย เป็นประโยชน์อย่างยิ่งสำหรับนักพัฒนาทุกระดับ เพราะช่วยประหยัดเวลา ลดความจำเป็นในการจดจำรายละเอียดทุกอย่าง และทำหน้าที่เป็นแหล่งข้อมูลที่รวดเร็วและเชื่อถือได้สำหรับการแก้ไขปัญหาและสร้างหน้าเว็บได้อย่างมีประสิทธิภาพ
ฉันสามารถทดสอบโค้ด HTML5 & CSS3 เหล่านี้ได้ทันทีทางออนไลน์หรือไม่?
แน่นอน! นั่นคือสิ่งที่แพลตฟอร์มของเราออกแบบมาเพื่อทำ คุณสามารถคัดลอกตัวอย่างใดๆ จากคู่มือนี้ วางลงในโปรแกรมแก้ไขบน หน้าแรกของเรา และเห็นผลลัพธ์ได้ทันทีในแผงแสดงผลสด ทดลองได้อย่างอิสระและเข้าใจอย่างถ่องแท้ว่าการผสมผสานโค้ดต่างๆ มีชีวิตชีวาขึ้นมาได้อย่างไร
ฉันจะแน่ใจได้อย่างไรว่า HTML และ CSS ของฉันสามารถเข้าถึงได้และมีโครงสร้างที่ดี?
เริ่มต้นด้วยการใช้แท็ก HTML5 เชิงความหมาย (<main>, <nav>, <article>) อย่างถูกต้อง เนื่องจากแท็กเหล่านี้ให้ความหมายที่แท้จริง สำหรับ CSS ให้แน่ใจว่ามีความคมชัดของสีที่เพียงพอ และใช้หน่วยที่ตอบสนอง เช่น rem สำหรับขนาดตัวอักษร แนวปฏิบัติที่ดีคือการวางโค้ดของคุณลงในโปรแกรมแก้ไขของเราแล้วใช้คุณสมบัติ "Beautify" ซึ่งจะจัดรูปแบบโค้ดของคุณด้วยการเยื้องที่เหมาะสม ทำให้ง่ายต่อการตรวจสอบโครงสร้างและค้นหาปัญหาที่อาจเกิดขึ้น