Coding Gun

เขียน html ไวขึ้นแค่เข้าใจ emmet

ทำไมต้องเป็น emmet

  1. เป็น plugin ยอดนิยมที่ติดตั้งได้ในหลายๆ editor
  2. vs code นั้นติดตั้งมาให้อยู่แล้ว(ไม่ต้องติดตั้งให้เหนื่อย)

หลักการทำงานกับ emmet มีอยู่ 2 ส่วนคือ html กับ css

shortcut ต่างๆ ที่ใช้กับ html มีดังนี้

  1. เริ่มต้นสร้างเอกสารที่เป็น html5
พิมพิ์ html:5 [แล้วกด Tab]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  1. สร้าง tag link สำหรับ load css
พิมพิ์ link:css [แล้วกด Tab]

1
2
3
4
5
6
7

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
  1. สร้าง tag script
พิมพิ์ script:src [แล้วกด Tab]

1
2
3
4
5
6
7
8

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src=""></script>
</head>
  1. สร้าง dummy text(ข้อความจำลองตอนทำ web design จะได้รู้ว่าหน้า web ออกมาแบบไหน)
พิมพิ์ lorem [แล้วกด Tab]

1
2
3

<body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odit temporibus dignissimos ab? Consequuntur soluta suscipit voluptates, accusamus nostrum nemo fugit in, ipsam optio fugiat laboriosam? Perferendis excepturi pariatur mollitia?
</body>
  1. สร้าง dummy text เหมือนกันแต่สั้นกว่า มีแค่ 10 คำ
พิมพิ์ lorem10 [แล้วกด Tab]

1
2
3
4
5

<body>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis odit temporibus dignissimos ab? Consequuntur soluta suscipit voluptates, accusamus nostrum nemo fugit in, ipsam optio fugiat laboriosam? Perferendis excepturi pariatur mollitia?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, voluptatibus.
</body>
  1. สร้าง input type=email
พิมพิ์ input:email [แล้วกด Tab]

1

<input type="email" name="" id="">
  1. สร้าง div ที่มี class = container
พิมพิ์ div.container [แล้วกด Tab]

1

<div class="container"></div>
  1. สร้าง div ที่มี id = main
พิมพิ์ div#main [แล้วกด Tab]

1

<div id="main"></div>
  1. สร้าง ul ที่มี tag li 4 elements และใน li แต่ละ element จะมีข้อความ Item001, Item002, Item003, Item004 ไล่ไปเรื่อยๆ
พิมพิ์ ul>li{Item$$$}*4 [แล้วกด Tab]

1
2
3
4
5
6

<ul>
    <li>Item001</li>
    <li>Item002</li>
    <li>Item003</li>
    <li>Item004</li>
</ul>
  1. สร้าง table ที่มี 4 columns โดยใน 4 column นั้นจะมีข้อความว่า Column1, Column2, Column3, Column4 และใน body จะมีแถวว่างๆ อยู่ 5 แถว (เป็นตาราง 4x5 - 4 columns และ 5 แถว)
พิมพิ์ table>(thead>tr>th{Column$}*4)tbody>(tr>td*4)*5 [แล้วกด Tab]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
  1. สร้าง tag button type ต่างๆ
พิมพิ์ btn:s, btn:r, btn:d [แล้วกด Tab]

1
2
3

<button type="submit"></button> //btn:s
<button type="reset"></button> //btn:r
<button disabled="disabled"></button> //btn:d

ใน CSS เราก็สามารถใช้ Emmet ได้เช่นเดียวกัน

  1. สร้าง margin-top: 10px
พิมพิ์ bmt10 [แล้วกด Tab]

1
2
3
4
5

    <style>
        body{
            margin-top: 10px;
        }
    </style>
  1. สร้าง margin-top: 10em;
พิมพิ์ mt10em [แล้วกด Tab]

1
2
3
4
5

    <style>
        body{
            margin-top: 10em;
        }
    </style>
  1. สร้าง float:left
พิมพิ์ fl:l [แล้วกด Tab]

1
2
3
4
5

    <style>
        body{
            float: left;margin-top: 10em;
        }
    </style>
  1. สร้าง position: absolute
พิมพิ์ po:a [แล้วกด Tab]

1
2
3
4
5

    <style>
        body{
            position: absolute;
        }
    </style>
Phanupong Permpimol
Follow me