Emmet, trước đây gọi là Zen Coding, là một trong những công cụ tốt nhất bạn nên tăng năng suất trong khi mã hóa HTML hoặc CSS. Nó hoạt động giống như hoàn thành mã, nhưng nó mạnh mẽ và tuyệt vời hơn. Nó có thể tự động hóa HTML / CSS của bạn từ một hình thức đơn giản sang dạng phức tạp.
Emmet cung cấp hỗ trợ tốt cho trình soạn thảo văn bản hoặc IDE (Môi trường phát triển tích hợp) như Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm và nhiều hơn nữa. Nó cũng hỗ trợ công cụ chỉnh sửa trực tuyến như JSFiddle, JSBin, CodePen, IceCoder và Codio .
Cách thức hoạt động của Emmet là bằng cách gõ phím bàn phím tab khi viết xong cú pháp. Sau đây là những biểu tượng Emmet phổ biến nhất mà bạn có thể sử dụng. Để xem chúng trong hành động, xin vui lòng tiếp tục đọc.
Emmet - Thủ thuật hay nhất HTML
Bạn sẽ ngạc nhiên khi viết HTML bằng Emmet như tôi đã làm. Như đã nêu trước đó, Emmet có thể viết tắt một HTML đơn giản thành rất phức tạp. Và chúng chỉ được viết trên một dòng mã. Theo mặc định, nếu bạn viết tắt tên thẻ không xác định, Emmet sẽ tự động viết thẻ bạn viết. Xem hoạt hình dưới đây để dễ dàng hiểu nó.
1. Làm tổ
Để lồng một số phần tử, bạn chỉ cần thêm dấu lớn hơn > sau mỗi thẻ bạn muốn sử dụng. Chẳng hạn, khi tôi muốn có một header với nav, div, ul và li bên trong, tôi chỉ cần gõ header>nav>div>ul>li và phím tab nhấn.
2. Anh chị em
Nếu bạn không muốn lồng các phần tử của mình, bạn chỉ cần sử dụng dấu cộng + theo sau là các thẻ bạn muốn thêm. Ví dụ, header+section+article+footer sẽ cung cấp một vị trí khác cho header, section, article và footer .
3. Leo lên
Khi bạn ở trong một phần tử con và muốn có một phần tử khác bên ngoài phần tử con đó, bạn có thể dễ dàng trèo lên một phần tử với dấu ^ . Nếu bạn gõ nó hai lần, sau đó bạn sẽ leo lên yếu tố kép và cứ thế. Ví dụ: nếu bạn nhập header>div>h1>nav bạn sẽ vẫn còn phần tử điều hướng bên trong h1. Để lấy nó ra, chỉ cần thay thế dấu > cuối bằng ^ .
4. Thêm lớp
Emmet cũng có thể bao gồm tên lớp ưa thích của bạn trong thẻ. Dấu hiệu bạn sẽ sử dụng giống như bộ chọn lớp trong CSS là dấu chấm . ký tên. Ví dụ: nếu tôi muốn có div với lớp .container, h1 với .title và nav với .fixed, thì tôi chỉ cần viết div.container>header>h1.title+nav.fixed .
Nếu bạn muốn có nhiều hơn một lớp bên trong, sau đó nhập lớp bổ sung của bạn sau lớp đầu tiên cùng với dấu chấm . ký tên. Ví dụ: div.container.center sẽ sản xuất .
5. Thêm ID
Ngoài lớp, bạn cũng có thể thêm ID bên trong thẻ của mình bằng dấu # . Việc sử dụng giống như thêm lớp nhưng bạn không thể nhập ID kép bên trong. Nếu bạn cố gắng làm như vậy, Emmet sẽ chỉ đọc ID cuối cùng bạn nhập.
6. Thêm văn bản
Emmet không chỉ đơn giản như chỉ viết tắt một số thẻ, thậm chí bạn có thể thêm dòng văn bản bên trong. Để thêm một số văn bản, bạn chỉ cần bọc văn bản bằng dấu ngoặc nhọn {} . Bạn không cần thêm dấu lớn hơn vì văn bản sẽ tự động được thêm vào bên trong thẻ.
7. Thêm thuộc tính
Nếu bạn muốn thêm một thuộc tính khác ngoài lớp và id, chỉ cần đặt thuộc tính bạn muốn thêm vào dấu ngoặc vuông [] . Chẳng hạn, tôi muốn có một hình ảnh có nguồn logo.png với logo alt, vì vậy tôi chỉ cần nhập img[src="logo.png"] .
8. Phân nhóm
Khi bạn muốn có một phần tử có nhiều phần lồng nhau bên trong, thì việc nhóm chúng bằng dấu () sẽ giúp bạn đạt được điều này một cách dễ dàng. Ví dụ, tôi muốn có một thùng chứa có tiêu đề với h1 và nav bên trong và một phần khác bên ngoài tiêu đề, tôi sẽ chỉ cần viết: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Nhân
Tính năng này có thể trở thành một trong những mục yêu thích của bạn từ Emmet. Cũng như phép nhân, chúng ta có thể nhân bất kỳ phần tử nào nhiều như chúng ta muốn. Để sử dụng, chỉ cần thêm dấu sao * sau phần tử bạn muốn nhân và thêm số phần tử. Chẳng hạn, tôi muốn viết năm mục li trong ul, thì cú pháp đúng là ul>li*5 .
10. Đánh số tự động
Đánh số tự động sẽ giúp bạn dễ dàng viết tên khác nhau với số lượng ngày càng tăng. Cú pháp đúng cho tính năng này là ký hiệu đô la $ . Đánh số tự động được sử dụng tốt nhất với phép nhân. Ví dụ, tôi muốn thêm mục li trước đó của mình với một lớp từ item1 đến item5 . Vì vậy, tôi chỉ cần thêm tên lớp bổ sung bằng ký hiệu đô la: ul>li.item$*5 .
11. Lorem
Nếu bạn đã từng viết một số văn bản giả bằng cách mở trình tạo lipum như Lipum.com, với Emmet bạn không cần phải làm điều đó nữa. Emmet cũng hỗ trợ trình tạo văn bản giả với cú pháp lorem hoặc lipsum . Bạn cũng có thể chỉ định thời gian văn bản của bạn sẽ trở thành. Chẳng hạn, tôi muốn có một số văn bản dài 10 từ, sau đó tôi sẽ gõ lorem10 .
12. Tài liệu tự động
Khi bạn đang bắt đầu một dự án mới, thay vì viết cấu trúc html bằng tay hoặc sao chép dán từ các tài nguyên khác, Emmet có thể làm điều đó cho bạn tốt hơn. Tất cả bạn cần làm là gõ một câu cảm thán ! ký, nhấn tab và điều kỳ diệu xảy ra. Điều đó sẽ tạo ra cấu trúc tài liệu HTML5 cho bạn, nếu bạn muốn sử dụng HTML4 thay vào đó, thì chỉ cần nhập html:4t .
13. Liên kết
Nếu bạn có tệp favicon, rss hoặc tệp CSS bên ngoài mà bạn muốn thêm vào tài liệu của mình, bạn có thể sử dụng các thủ thuật liên kết để viết chúng nhanh hơn. Để bao gồm một favicon, hãy gõ link:favicon sau đó nó sẽ tạo cho bạn một liên kết favicon với tên tệp favicon.ico mặc định bên trong. Và đối với css, link:css sẽ tạo cho bạn một liên kết CSS với tên kiểu style.css mặc định bên trong. Và RSS sẽ là rss.xml làm tên mặc định.
Bạn có thể kết hợp chúng với dấu cộng + để tạo tài nguyên nhanh hơn.
14. Neo
Theo mặc định, khi bạn nhập thẻ rồi nhấn tab, bạn sẽ nhận được a thẻ hoàn chỉnh với thuộc tính href bên trong. Nhưng bạn có thể thêm giá trị // nếu bạn kết hợp nó với liên kết, ví dụ a:link . Và nếu bạn muốn có một liên kết thư thay thế, thì hãy sử dụng a:mail .
15. Bỏ qua thông minh
Thủ thuật HTML cuối cùng tôi sẽ cung cấp cho bạn là tính năng bỏ qua thông minh. Về cơ bản, bạn không có viết tên thẻ khi bạn muốn có lớp hoặc id bên trong nó. Điều này chỉ áp dụng trên một số điều kiện nhất định.
Đầu tiên, nếu bạn muốn có một div có ID hoặc lớp bên trong, bạn không cần phải viết tên thẻ, chỉ cần viết trực tiếp id hoặc ký hiệu lớp cùng với tên của nó.
Thứ hai, khi bạn ở trong thẻ ul, bạn bỏ qua việc viết thẻ li nếu nó có một lớp hoặc id.
Và cuối cùng được áp dụng trong thẻ table . Bạn có thể bỏ qua việc viết thẻ tr và td nếu họ có lớp hoặc id và Emmet sẽ tự động thêm chúng cho bạn.
Emmet - Thủ thuật CSS tốt nhất
Sau khi bạn tìm hiểu một số thủ thuật HTML, giờ là lúc cho CSS. Một số biểu tượng phổ biến được hiển thị trong hình ảnh trên cùng sẽ không hoạt động với CSS. Chúng lớn hơn > và leo lên ^ biểu tượng. Nếu bạn sử dụng chúng, chúng sẽ tạo ra giống như biểu tượng dấu cộng + . Vì vậy, hãy đi.
1. Chiều rộng và chiều cao
Xác định width và height với Emmet rất dễ dàng. Bạn chỉ cần viết từ đầu tiên của chúng theo sau là kích thước bạn muốn thêm. Theo mặc định, nếu bạn không chỉ định đơn vị, Emmet sẽ tạo chúng với đơn vị px . Biểu tượng đơn vị có sẵn là phần trăm % và em .
2. Văn bản
Có một số biểu tượng thuộc tính văn bản dễ sử dụng và sẽ được tạo với giá trị mặc định. ta sẽ tạo text-align với giá trị left, td sẽ là text-decoration none giá trị và tt sẽ trở thành text-transform với giá trị uppercase .
3. Bối cảnh
Để thêm nền, chỉ cần sử dụng viết tắt bg . Bạn có thể kết hợp nó với bgi để có được background-image, bgc cho background-color và bgr cho background-repeat . Bạn cũng có thể viết bg+ để có danh sách đầy đủ thuộc tính nền.
4. Mặt chữ
Dấu cộng không chỉ áp dụng cho nền. Đối với @font-face, bạn chỉ cần viết @f+ cho danh sách đầy đủ thuộc tính @font-face . Nếu bạn gõ @f mà không có dấu cộng thì bạn sẽ chỉ nhận được một @font-face cơ bản.
5. Linh tinh
Thủ thuật tuyệt vời khác là bạn có thể viết tắt bằng văn bản animation với văn bản animation . Nếu bạn thêm một dấu trừ, bạn sẽ nhận được thuộc tính hoạt hình với giá trị đầy đủ. Ngoài ra còn có văn bản @kf sẽ tạo danh sách đầy đủ của @keyframe .
Phần kết luận
Emmet là một công cụ tiết kiệm thời gian rất lớn để hợp lý hóa quá trình phát triển của bạn. Nếu bạn chỉ biết Emmet, không quá muộn để thử ngay bây giờ. Những mánh khóe đó chỉ là một số tính năng của Emmet. Có rất nhiều ký hiệu và cú pháp khác trong Emmet, đặc biệt là cho CSS. Chỉ cần đi qua tài liệu Emmet hoặc cheat sheet để tiếp tục đọc của bạn.
