EMMET: Tăng nhanh tốc độ code HMLT/CSS
HTML
30
CSS
49
EMMET
1
White

lotus viết ngày 20/04/2017

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(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 :smile:
Udemy - Free :wink:

Hakisaman: 20-04-2017 at :clock5:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

lotus

7 bài viết.
3 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
9 3
Toán tử 3 ngôi Longhand const x = 20; let big; if (x 10) { big = true; } else { big = false; } Shorthand
lotus viết hơn 3 năm trước
9 3
White
3 1
Tôi bắt đầu tự hỏi, rằng có tồn tại không, một kỹ năng giúp ta đối mặt với mọi thứ trong cuộc sống. Nếu có thì nó là gì và làm sao để phát triển?...
lotus viết hơn 3 năm trước
3 1
White
2 0
Typescript: anh là ai? Được phát triển bởi Microsoft nên syntax có nét giống C. Mục đích là giúp lập trình viên có thể viết javascript theo phong ...
lotus viết hơn 3 năm trước
2 0
Bài viết liên quan
Male avatar
0 2
Chào mọi người, trong bài viết này chúng ta sẽ tìm hiểu cách (Link) 1 cách đơn giản dễ làm với HTML và Google Charts. Đầu tiên các bạn tạo 1 file ...
TungVuong viết hơn 2 năm trước
0 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
3 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!