Không còn quá xa lạ đối với dân công nghệ, “Emmet” – bộ phần bổ trợ dành cho trình soạn thảo văn bản được sử dụng cú pháp tương tự như bộ chọn CSS để mô tả vị trí của các phần tử bên trong các thuộc tính.
Các phần tử
Bạn có thể sử dụng tên của các phần tử như div hoặc p để tạo các thẻ HTML. Emmet không có bộ tên thẻ có sẵn được xác định trước, bạn có thể viết bất kỳ từ nào và biến nó thành thẻ:
| div → <div></div>, foo → <foo></foo> |
Toán tử con: >
Bạn có thể sử dụng toán tử > để lồng các phần tử vào nhau:
| div>ul>li |
Kết quả thu được là:
| <div>
<ul> <li></li> </ul> </div> |
Toán tử cùng cấp: +
dụng toán tử + để đặt các phần tử gần nhau, trên cùng một cấp độ:
| div+p+bq |
Kết quả các thẻ sẽ được tạo cùng cấp với nhau:
| <div></div>
<p></p> <blockquote></blockquote> |
Toán tử : ^
| div+div>p>span+em |
Kết quả:
| <div></div>
<div> <p> <span></span> <em></em> </p> </div> |
Bổ sung toán tử ^ sau thẻ em:
| div+div>p>span+em^bq |
Kết quả thẻ blockquote sẽ được di chuyển ra ngoài 1 thẻ từ thẻ <em>
| <div></div>
<div> <p> <span></span> <em></em> </p> <blockquote></blockquote> </div> |
Sử dụng nhiều toán tử ^ để di chuyển ra ngoài nhiều mức hơn
| div+div>p>span+em^^^bq |
Kết quả khi sử dụng 3 toán tử ^ thì thẻ blockquote sẽ di chuyển ra ngoài 3 mức tính từ thẻ <em>
| <div></div>
<div> <p> <span></span> <em></em> </p> </div> <blockquote></blockquote> |
Toán tử nhân: *
Với toán tử * có thể định nghĩa số lần thẻ đó xuất hiện:
| ul>li*5 |
Kết quả thu được:
| <ul>
<li></li> <li></li> <li></li> <li></li> <li></li> </ul> |
Toán tử nhóm: ()
Sử dụng dấu () để nhóm các thẻ có cấu trúc phức tạp và lồng vào nhau
| div>(header>ul>li*2>a)+footer>p |
Kết quả:
| <div>
<header> <ul> <li><a href=””></a></li> <li><a href=””></a></li> </ul> </header> <footer> <p></p> </footer> </div> |
Có thể nhóm các nhóm và kết hợp với phép nhân:
| (div>dl>(dt+dd)*2)+footer>p |
Kết quả:
| <div>
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer> |
Toán tử thuộc tính
ID and CLASS
Trong Emmet bạn có thể định nghĩa các class cho các thẻ trực tiếp như sau với # sử dụng định nghĩa cho id và . để định nghĩa cho class
| div#header+div.page+div#footer.class1.class2.class3 |
Kết quả:
| <div id=”header”></div>
<div class=”page”></div> <div id=”footer” class=”class1 class2 class3″></div> |
Thuộc tính tùy chỉnh
Bạn có thể sử dụng ký hiệu [attr] (như trong CSS) để thêm các thuộc tính tùy chỉnh vào các thẻ:
| td[title=”Hello world!” colspan=3] |
Kết quả:
| <td title=”Hello world!” colspan=”3″></td> |
Đánh số thứ tự cho class bằng toán tử: $
Đặt toán tử $ bên trong tên phần tử, tên thuộc tính hoặc giá trị của thuộc tính để tạo số phần tử lặp lại có thứ tự:
| ul>li.item$*5 |
Kết quả:
| <ul>
<li class=”item1″></li> <li class=”item2″></li> <li class=”item3″></li> <li class=”item4″></li> <li class=”item5″></li> </ul> |
Bạn có thể sử dụng nhiều $ tạo các class tăng dần có số lượng số 0 tương ứng với toán tử $$$ xuất hiện sau tên class và giữa số thứ tự tăng dần của class:
| ul>li.item$$$*5 |
Kết quả:
| <ul>
<li class=”item001″></li> <li class=”item002″></li> <li class=”item003″></li> <li class=”item004″></li> <li class=”item005″></li> </ul> |
Toán tử : {}
Thêm nội dung giữa toán tử {} để tạo nội dung cho văn bản
| a{Click me} |
Kết quả:
| <a href=””>Click me</a> |
Chúng ta có thể kết hợp các toán tử lại với nhau
| p>{Click }+a{here}+{ to continue} |
Kết quả:
| <p>Click <a href=””>here</a> to continue</p> |
Lưu ý:
Không sử dụng khoảng trắng giữa các từ viết tắt
| (header > ul.nav > li*5) + footer |
Với những thông tin hấp dẫn trên, hẳn đã cung cấp thêm kiến thức bổ ích về bộ công cụ cần thiết cho các nhà phát triển Web lẫn các “tín đồ” đam mê Công nghệ. Hy vọng các bạn sẽ tiếp tục nỗ lực trong các kì học sắp tới nhé!
GV Phạm Hồng Tính
Bộ môn Công nghệ thông tin
Cao đẳng FPT Mạng cá cược bóng đá Đà Nẵng
