HTML/CSS | Sử dụng Emmet

Học HTML, CSS từ Zero Tới Hero

• Cách dùng đã được học
• Cách dùng Emmet mới

Cách dùng đã được học

Trước đây, mình đã chia sẻ cách tạo nhanh một thẻ bằng cách gõ tag + tab. Khi tạo một danh sách, cách này có vẻ vẫn khá chậm.

Ví dụ:

Bạn cũng có thể copy & pate lại thẻ <li> nhiều lần để nhanh hơn. Tuy nhiên, khi cần tạo một danh sách nhiều mục thì vẫn mất khá nhiều thời gian.

Cách dùng Emmet mới

Bạn có thể tạo nhanh các thẻ lồng nhau bằng cú pháp: ul>li + tab.

Ví dụ:

Khi muốn tạo nhiều thẻ con cùng lúc: ul>li*3 + tab (3 là số lượng thẻ muốn tạo).

Ví dụ:

Trường hợp muốn thêm nhanh nội dung cho các thẻ <li> mình có nói trong video bài học ở trên nhé.

Ngoài ra, trong khóa học này có riêng một chương để tìm hiểu về Emmet, sẽ còn có nhiều cách sử dụng Emmet “hay ho” khác nữa. Chúng ta cùng chờ đón nhé!

Tóm tắt

• Tạo nhanh danh sách có nhiều mục ul>li*3, trong đó 3 là số lượng thẻ <li> muốn tạo. Áp dụng tương tự cho các trường hợp muốn tạo thẻ lồng nhau khác, ví dụ với danh sách <ol>.
• Tạo nhanh danh sách với nhiều mục đi kèm nội dung có chứa số thứ tự ul>li*3{Item $}, trong đó $ đại diện cho kí tự số thứ tự.
• Trong khóa học này có chương riêng về Emmet, vì vậy trong các bài học chỉ giới thiệu Emmet liên quan tới bài học đó.