Emmet là gì?

  • Emmet là một plugin cho các code editor phổ biến như Sublime text, atom, bracket,…
  • Emmet giúp việc code html và css nhanh hơn và đơn giản hơn. Thay vì phải gõ từng tag, mở tag, đóng tag, copy và paste, emmet định nghĩa các cú pháp kiểu viết tắt và sẽ tự động chuyển thành code hmtl/css.

Các cú pháp cơ bản

1. Tạo file html5 mẫu
html:5 + Tab
2. Tạo tag
tag_name + tab
3. Tạo tag có name và id
div.banner#header + tab

Kết quả:

<div class="banner" id="header"></div>
4. Lặp lại
div*3 + tab

Kết quả:

<div></div>
<div></div>
<div></div>
5. Lồng nhau:
div>h1[color='red']{hello}+div>a.link$*3    

> : tạo thẻ nhỏ hơn
+ : tạo thẻ ngang bằng
[] : tạo thuộc tính
{} : tạo nội dung
$ : tự động đánh sốsố

Kết quả:

<div>
    <h1 color="red">hello</h1>
    <div>
        <a href="" class="link1"></a>
        <a href="" class="link2"></a>
        <a href="" class="link3"></a>
    </div>
</div>
6. Tag ngầm :
.container
<div class="container"></div>
p>.item
<p><span class="item"></span></p>
ul>.item$*2
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
</ul>
table>.row>.col
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>
7. Lorem – sinh nội dung tự đông :
lorem + numbers(slượng từ)  + tab

ví dụ

lorem2 + tab 

Kết quả:

Lorem ipsum.

Tham khảo

Trên đây chỉ là 20{a800a251b634c5d11f20a2d07a906847a3b3472666285838eb476f2ac984752d} những thứ cơ bản nhất của Emmet. Nếu bạn nào muốn tìm hiểu thêm thì hãy vào đây:
Trang chủ Emmet :smile: Udemy – Free :wink: