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

Thu, 05 Aug 2021

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

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

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

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

เริ่มต้นสร้างเอกสารที่เป็น 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>

สร้าง 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>

สร้าง 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>

สร้าง 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>

สร้าง 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>

สร้าง input type=email

พิมพิ์ input:email [แล้วกด Tab]

1

<input type="email" name="" id="">

สร้าง div ที่มี class = container

พิมพิ์ div.container [แล้วกด Tab]

1

<div class="container"></div>

สร้าง div ที่มี id = main

พิมพิ์ div#main [แล้วกด Tab]

1

<div id="main"></div>

สร้าง 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>

สร้าง 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>

สร้าง 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 ได้เช่นเดียวกัน

สร้าง margin-top: 10px

พิมพิ์ bmt10 [แล้วกด Tab]

1
2
3
4
5


    <style>
        body{
            margin-top: 10px;
        }
    </style>

สร้าง margin-top: 10em;

พิมพิ์ mt10em [แล้วกด Tab]

1
2
3
4
5


    <style>
        body{
            margin-top: 10em;
        }
    </style>

สร้าง float:left

พิมพิ์ fl:l [แล้วกด Tab]

1
2
3
4
5


    <style>
        body{
            float: left;margin-top: 10em;
        }
    </style>

สร้าง position: absolute

พิมพิ์ po:a [แล้วกด Tab]

1
2
3
4
5


    <style>
        body{
            position: absolute;
        }
    </style>