EMMET: Tăng nhanh tốc độ code HMLT/CSS

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

html:5 + Tab

tag_name + tab

div.banner#header + tab

Kết quả:

<div class="banner" id="header"></div>

div*3 + tab

Kết quả:

<div></div>
<div></div>
<div></div>

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>

.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>

lorem + numbers(số lượng từ)  + tab

ví dụ

lorem2 + tab 

Kết quả:

Lorem ipsum.

Tham khảo

Trên đây chỉ là 20% 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
Udemy - Free

Hakisaman: 20-04-2017 at