Emmet สุดยอด Extension สำหรับ Programmer

ช่วย Auto Complete HTML/CSS/JS Tag ให้เรา
พิมพ์ตัวย่อแล้วขึ้น TAG เต็มๆมาให้เรา
ใส่ Class / ID / Name / Attribute / Text ก็ยังได้

```
!
```
จะได้โครงการ HTML5 ออกมาเลยทั้งยวง ตามข้างล่างนี้เลยครับ
```
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>
    
```
```
p
```
จะได้ TAG ออกมาตามนี้ครับ
```
<P></P>
```
เป็นการทำ Auto Complete TAG ให้ครับ
```
ul>li
```
จะได้ผลลัพธ์ตามนี้ครับ
```
<ul>
 <li></li>
</ul>
     
```
เป็นการสร้าง TAG ul และ li ให้ตามลำดับ
```
ul>li{number $}*4
```
ผลลัพธ์ที่ได้
```
<ul>
 <li>number 1</li>
 <li>number 2</li>
 <li>number 3</li>
 <li>number 4</li>
</ul>
     
```
เป็นการสร้าง TAG ul และ li ให้ li มีข้อความว่า number ตามด้วยตัวเลข 1 หลัก หากต้องการ 2 หลักให้เปลี่ยนจาก $ เป็น $$ และมี li ทั้งหมด 4 คู่ด้วยกัน หากต้องการให้มี 10 คู่ ให้เปลี่ยนจาก *4 เป็น *10
```
.className
```
จะได้
```
<div class="className"></div>
```
เป็นการสร้าง TAG div ขึ้นมา โดยให้มี class="className" ชื่อ class จะตามหลัง . (จุดเสมอ)
```
span.className#idName
```
จะได้เป็น
```
<span class="className" id="idName"></span>
```
จะสร้าง tag span ขึ้นมาโดยมี class="className" id="idName"ชื่อของ id จะตามหลัง # เสมอครับ

* ผมขอออกตัวก่อนนะครับ ว่าผมไม่ได้เก่งกาจอะไร เพียงแต่ขอนำเสนอเท่านั้นเอง

eCommerce Business and IT

Emmet สุดยอด Extension ที่ขาดไม่ได้

Emmet สุดยอด Extension สำหรับ Programmer

No comments:

Post a Comment