TAG |
MEANING |
ATTRIBUTES |
|---|---|---|
|
<h1></h1> - <h6></h6> |
หัวข้อใหญ่ไปเล็ก |
style="" |
|
<p></p> |
ใส่ text |
style="" |
|
<div></div> |
box content |
style="" |
|
<a></a> |
ใส่ link ไปหน้าต่างๆ |
style="" href="" traget="" |
|
<img> |
ใส่ที่อยู่รูปภาพที่ src |
src="" alt="" width="" height="" |
|
<span></span> |
ตกแต่ง หรือ จัดข้อความบางส่วนให้แตกต่าง |
style="" |
|
<br> |
เว้นบรรทัด |
|
|
<hr> |
ขีดเส้นใต้ |
|
|
<pre></pre> |
พิมพ์ text หรือ text ที่จัดรูปแบบมาแล้ว |
style="" |
|
HTML Formatting Elements |
||
|
<b></b> |
text หนา |
|
|
<strong></strong> |
text หนา |
|
|
<i></i> |
text เอียง |
|
|
<em></em> |
text เอียง |
|
|
<small></small> |
text เล็ก |
|
|
<mark></mark> |
text ถูก mark มี
|
|
|
<del></del> |
text จะถูกขีดเส้นตัด |
|
|
<ins></ins> |
แทรก text text ที่ถูกแทรกจะถูกขีดเส้นใต้ |
|
|
<sub></sub> |
text จะห้อยอยู่ด้านล่าง
|
|
|
<sup></sup> |
text จะห้อยอยู่ด้านบน
|
|
|
HTML Quotation and Citation Elements |
||
|
<blockquote></blockquote> |
กำหนดส่วนที่อ้างอิงจากแหล่งอื่น tag นี้จะเยื้อง text |
style="" cite="" |
|
<q></q> |
tag นี้ จะใส่เครื่องหมาย "" ให้ text |
|
|
<abbr></abbr> |
ใช้ text ย่อ และเเสดงข้อมูลเมื่อถูก hover |
title="" |
|
<bdo></bdo> |
เปลี่ยนทิศทาง text |
dir="rtl" |
|
HTML Table |
||
|
<table></table> |
กำหนดพื้นที่ table |
style="" |
|
<tr></tr> |
กำหนดแถวใน table |
style="" |
|
<th></th> |
กำหนดหัวข้อใน tr |
style="" colspan="" rowspan="" |
|
<td></td> |
กำหนดเนื้อหาย่อยใน tr |
style="" colspan="" rowspan="" |
|
HTML-list |
||
|
<ul></ul> |
list ข้างในไม่เรียงลำดับจะมี bullet ข้างหน้า list |
style="" |
|
<ol></ol> |
list ข้างในเรียงลำดับจ่ะมี 123 ข้างหน้า list |
style="" sype="1" start="1" |
|
<li></li> |
list |
style="" |
|
HTML Iframes |
||
|
<iframe></iframe> |
web ซ้อน web |
style="" src="" title="" name="" |
|
HTML Layout Elements and Techniques |
||
|
<header></header> |
กำหนดส่วนหัวใน website |
style="" |
|
<nav></nav> |
กำหนดชุดลิงค์ menu |
style="" |
|
<section></section> |
กำหนดส่วนใน website |
style="" |
|
<article></article> |
กำหนดเนื้อหาที่เป็นอิสระ |
style="" |
|
<aside></aside> |
กำหนดแถบด้านข้างใน website |
style="" |
|
<figure></figure> |
กำหนดส่วนที่เป็นรูปใน website |
style="" |
|
<figcaption></figcaption> |
ความหมายรูป |
style="" |
|
<footer></footer> |
กำหนดส่วนท้ายใน website |
style="" |
|
HTML form |
||
|
<form></form> |
ใช้เพื่อสร้างแบบฟอร์ม html สำหรับการป้อนข้อมูลของผู้ใช้ |
style="" action="" target="" method=" 'get','post' " autocomplete=" 'on','off' " novalidate |
|
<label></label> |
ป้ายข้อความใช้กับ input |
style="" for="" |
|
<progress></progress> |
แถบโหลด |
value="" max="" |
|
<input> |
user input data |
style="" type="" id="" name="" value="" leadonly disabled size="" maxlength="" min="",max="" multiple pattern="" placeholder="" required step="" autofocus autocomplete=" 'on','off' " |
INPUT TYPE |
SAMPLE |
|---|---|
|
type="text" |
|
|
type="checkbox" |
|
|
type="radio" |
|
|
type="button" |
|
|
type="submit" |
|
|
type="password" |
|
|
type="reset" |
"reset data is default" |
|
type="color" |
|
|
type="date" |
|
|
type="datetime-colal" |
|
|
type="email" |
|
|
type="file" |
|
|
type="hidden" |
"ซ่อนข้อมูล input ที่ต้องการเปลี่ยนแปลงไม่ให้ user เห็น" |
|
type="month" |
|
|
type="number" |
|
|
type="range" |
|
|
type="search" |
|
|
type="tel" |
|
|
type="time" |
|
|
type="url" |
|
|
type="week" |
TAG |
MEANING |
ATTRIBUTES |
|---|---|---|
|
HTML svg |
||
|
<svg></svg> |
ต้องกำหนดขนาดก่อนใช้เป็น container สมาชิก svg |
|
|
<rect/> |
พื้นที่สี่เหลี่ยม |
width="" height="" x="" y="" |
|
<circle/> |
พื้นที่วงกลม |
cx="" cy="" r="" |
|
<ellipse/> |
วงรี |
cx="" cy="" rx="" ry="" |
|
<line/> |
เส้น |
x1="" y1="" x2="" y2="" |
|
<polygon/> |
สามเหลี่ยม |
"กำหนดมุม x,y" points={ 150,10 100,100 200,100 } |
|
HTML media |
||
|
<video></video> |
กำหนดกล่อง video |
style="" controls autoplay muted |
|
<audio></audio> |
กำหนดกล่องเสียง |
style="" controls autoplay muted |
|
HTML plug-ins |
||
|
<object></object> |
กำหนดวัตถุฝังตัวภายในเอกสาร HTML |
data="" width="" height="" |
|
<embed> |
กำหนดวัตถุฝังตัวภายในเอกสาร HTML |
src="" width="" height="" |