Chữ viết tắt là trung tâm của bộ công cụ Emmet: các biểu thức đặc biệt này được phân tích cú pháp trong thời gian chạy và được chuyển thành khối mã có cấu trúc, ví dụ HTML. Cú pháp viết tắt có vẻ như các bộ chọn CSS với một vài phần mở rộng cụ thể để tạo mã. Vì vậy, mọi nhà phát triển web đã biết cách sử dụng nó.
Đây là một ví dụ: Viết tắt này
#page>div.logo+ul#navigation>li*5>a{Item $}
... có thể biến thành
Item 1
Item 2
Item 3
Item 4
Item 5
... chỉ với một cú đánh chính. Trong nhiều trình chỉnh sửa [như Eclipse, Sublime Text 2, Espresso, v.v.] cũng sẽ tạo ra các dấu hiệu tabstop thích hợp để bạn có thể nhanh chóng đi qua giữa các vị trí quan trọng của mã được tạo với phím Tab.
Chữ viết tắt được tối ưu hóa, nhưng không giới hạn ở thế hệ HTML và XML và làm cho việc viết mã đánh dấu tẻ nhạt trở nên dễ dàng. Bạn có thể bắt đầu học cú pháp để giải phóng toàn bộ sức mạnh của các chữ viết tắt Emmet.
Nhận xét được cung cấp bởiEmmet sử dụng cú pháp tương tự như các bộ chọn CSS để mô tả các vị trí của các phần tử bên trong các thuộc tính của cây và phần tử được tạo ra.
Các yếu tố
Bạn có thể sử dụng các phần tử tên của các phần tử như
div+p+bq
0 hoặc div+p+bq
1 để tạo thẻ HTML. Emmet doesn có một tập hợp các 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 một thẻ: div+p+bq
0 → div+p+bq
3, div+p+bq
4 → div+p+bq
5, v.v.Các nhà khai thác làm tổ
Các toán tử làm tổ được sử dụng để định vị các phần tử viết tắt bên trong cây được tạo: cho dù nó nên được đặt bên trong hay gần phần tử bối cảnh.
Trẻ em: div+p+bq
6
div+p+bq
Bạn có thể sử dụng toán tử
div+p+bq
6 để làm tổ trong các phần tử bên trong nhau:div>ul>li
...sẽ sản xuất
Lưu ý rằng
8 được sử dụng và phân tích cú pháp như một yếu tố riêng biệt [như, div+p+bq
0, div+p+bq
1, v.v.] nhưng có một ý nghĩa đặc biệt khi được viết ngay sau phần tử. Ví dụ: div+div>p>span+em^bq
1 và div+div>p>span+em^bq
2 sẽ tạo ra cùng một đầu ra, nhưng div+div>p>span+em^bq
3 và div+div>p>span+em^bq
4 won
div+p+bq
div+p+bq
div+div>p>span+em^bq
div+div>p>span+em^bq
div+div>p>span+em^bq
div+div>p>span+em^bq
Trong ví dụ thứ hai, phần tử
div+div>p>span+em^bq
5 được đặt bên trong phần tử div+div>p>span+em^bq
6. Và đó là sự khác biệt: Khi
8 được viết ngay sau phần tử, nó không thay đổi bối cảnh phụ huynh. Ở đây, ví dụ phức tạp hơn cho thấy lý do tại sao nó quan trọng:div+p+bq
Trong ví dụ này, để viết
div+div>p>span+em^bq
8 bên trong phần tử div+div>p>span+em^bq
9, chúng tôi đã di chuyển rõ ràng xuống cây với toán tử div+p+bq
6 sau div+p+bq
1, nhưng trong trường hợp phần tử
2, chúng tôi không cần phải .
Để so sánh, ở đây, cùng một chữ viết tắt được viết mà không có nhà điều hành trẻ em div+p+bq
6:
div+p+bq
Ghi chú về định dạng viết tắt
div+div>p>span+em
Khi bạn quen thuộc với cú pháp viết tắt Emmet, bạn có thể muốn sử dụng một số định dạng để làm cho chữ viết tắt của bạn dễ đọc hơn. Ví dụ: sử dụng khoảng trắng giữa các phần tử và toán tử, như thế này:
Nhưng nó đã giành được công việc của người Viking, bởi vì không gian là một biểu tượng dừng trong đó Emmet dừng phân tích chữ viết tắt.
div+div>p>span+em^bq
Nhiều người dùng đã nhầm lẫn rằng mỗi chữ viết tắt nên được viết trong một dòng mới, nhưng họ đã sai: bạn có thể gõ và mở rộng viết tắt ở bất cứ đâu trong văn bản:
Đây là lý do tại sao Emmet cần một số chỉ số [như không gian] trong đó nó nên dừng phân tích cú pháp để không mở rộng bất cứ thứ gì mà bạn không cần. Nếu bạn vẫn nghĩ rằng định dạng như vậy là cần thiết cho các chữ viết tắt phức tạp để làm cho chúng dễ đọc hơn:
Item 1
Item 2
Item 3
Item 4
Item 5
0Chữ viết tắt không phải là một ngôn ngữ mẫu, họ không phải là người có thể đọc được, họ phải là người nhanh chóng có thể mở rộng và có thể tháo rời.
Item 1
Item 2
Item 3
Item 4
Item 5
1Bạn không thực sự cần phải viết các chữ viết tắt phức tạp. Ngừng nghĩ rằng, gõ gõ là một quá trình chậm nhất trong phát triển web. Bạn sẽ nhanh chóng phát hiện ra rằng việc xây dựng một chữ viết tắt phức tạp duy nhất chậm hơn và dễ bị lỗi hơn nhiều so với việc xây dựng và gõ một vài cái ngắn.
Nhận xét được cung cấp bởi
Item 1
Item 2
Item 3
Item 4
Item 5
2Nhiều người dùng đã nhầm lẫn rằng mỗi chữ viết tắt nên được viết trong một dòng mới, nhưng họ đã sai: bạn có thể gõ và mở rộng viết tắt ở bất cứ đâu trong văn bản:
Item 1
Item 2
Item 3
Item 4
Item 5
3Đây là lý do tại sao Emmet cần một số chỉ số [như không gian] trong đó nó nên dừng phân tích cú pháp để không mở rộng bất cứ thứ gì mà bạn không cần. Nếu bạn vẫn nghĩ rằng định dạng như vậy là cần thiết cho các chữ viết tắt phức tạp để làm cho chúng dễ đọc hơn:
Chữ viết tắt không phải là một ngôn ngữ mẫu, họ không phải là người có thể đọc được, họ phải là người nhanh chóng có thể mở rộng và có thể tháo rời.
Item 1
Item 2
Item 3
Item 4
Item 5
4... Mở rộng sang
Item 1
Item 2
Item 3
Item 4
Item 5
5Nếu bạn làm việc với trình duyệt DOM DOM, bạn có thể nghĩ về các nhóm là các đoạn tài liệu: mỗi nhóm chứa Subtree viết tắt và tất cả các yếu tố sau được chèn ở cùng cấp độ với phần tử đầu tiên của nhóm.
Bạn có thể làm tổ các nhóm bên trong nhau và kết hợp chúng với toán tử nhân
4:
Item 1
Item 2
Item 3
Item 4
Item 5
6...produces
Item 1
Item 2
Item 3
Item 4
Item 5
7Với các nhóm, bạn thực sự có thể viết đánh dấu trang đầy đủ với một chữ viết tắt duy nhất, nhưng xin vui lòng làm điều đó.
Toán tử thuộc tính
Các toán tử thuộc tính được sử dụng để sửa đổi các thuộc tính của các phần tử xuất hiện. Ví dụ: trong HTML và XML, bạn có thể nhanh chóng thêm thuộc tính
8 vào phần tử được tạo.ID và lớp học
Trong CSS, bạn sử dụng ký hiệu
9 và div+div>p>span+em
0 để đạt được các phần tử với các thuộc tính div+div>p>span+em
1 hoặc
8 được chỉ định. Trong Emmet, bạn có thể sử dụng cùng một cú pháp để thêm các thuộc tính này vào phần tử được chỉ định:
Item 1
Item 2
Item 3
Item 4
Item 5
8... sẽ xuất ra
Item 1
Item 2
Item 3
Item 4
Item 5
9Thuộc tính tùy chỉnh
Bạn có thể sử dụng ký hiệu
div+div>p>span+em
3 [như trong CSS] để thêm các thuộc tính tùy chỉnh vào phần tử của bạn:div>ul>li
0...outputs
div>ul>li
1- Bạn có thể đặt bao nhiêu thuộc tính như bạn muốn bên trong dấu ngoặc vuông.
- Bạn không phải chỉ định các giá trị thuộc tính:
4 sẽ tạodiv+div>p>span+em
5 với các tabstops bên trong mỗi thuộc tính trống [nếu trình soạn thảo của bạn hỗ trợ chúng].div+div>p>span+em
- Bạn có thể sử dụng trích dẫn đơn hoặc đôi để trích dẫn các giá trị thuộc tính.
- Bạn không cần phải trích dẫn các giá trị nếu chúng không chứa khoảng trống:
6 sẽ hoạt động.div+div>p>span+em
Đánh số mục: div+div>p>span+em
7
div+div>p>span+em
Với toán tử nhân
4, bạn có thể lặp lại các yếu tố, nhưng với div+div>p>span+em
7, bạn có thể đánh số chúng. Đặt toán tử div+div>p>span+em
7 bên trong phần tử tên, tên thuộc tính hoặc giá trị thuộc tính của LỚN vào số đầu ra của phần tử lặp lại hiện tại:div>ul>li
2... đầu ra đến
div>ul>li
3Bạn có thể sử dụng nhiều
div+div>p>span+em
7 liên tiếp đến số pad với số 0:div>ul>li
4... đầu ra đến
div>ul>li
5Bạn có thể sử dụng nhiều div+div>p>span+em
7 liên tiếp đến số pad với số 0:
div+div>p>span+em
Thay đổi cơ sở và hướng đánh số
Với công cụ sửa đổi
2, bạn có thể thay đổi hướng đánh số [tăng dần hoặc giảm dần] và cơ sở [ví dụ: giá trị bắt đầu].div>ul>li
6Ví dụ: để thay đổi hướng, thêm
3 sau div+div>p>span+em
7:div>ul>li
7Đầu ra vào
div>ul>li
8Để thay đổi giá trị cơ sở bộ đếm, hãy thêm công cụ sửa đổi
5 thành div+div>p>span+em
7:div>ul>li
9Biến đổi thành
0Bạn có thể sử dụng các sửa đổi này cùng nhau:
1… Được chuyển đổi thành
Văn bản:
7
2Bạn có thể sử dụng niềng răng xoăn để thêm văn bản vào phần tử:
3...sẽ sản xuất
4Lưu ý rằng
8 được sử dụng và phân tích cú pháp như một yếu tố riêng biệt [như, div+p+bq
0, div+p+bq
1, v.v.] nhưng có một ý nghĩa đặc biệt khi được viết ngay sau phần tử. Ví dụ: div+div>p>span+em^bq
1 và div+div>p>span+em^bq
2 sẽ tạo ra cùng một đầu ra, nhưng div+div>p>span+em^bq
3 và div+div>p>span+em^bq
4 won
5...produces
6Trong ví dụ thứ hai, phần tử
div+div>p>span+em^bq
5 được đặt bên trong phần tử div+div>p>span+em^bq
6. Và đó là sự khác biệt: Khi
8 được viết ngay sau phần tử, nó không thay đổi bối cảnh phụ huynh. Ở đây, ví dụ phức tạp hơn cho thấy lý do tại sao nó quan trọng:Trong ví dụ này, để viết
div+div>p>span+em^bq
8 bên trong phần tử div+div>p>span+em^bq
9, chúng tôi đã di chuyển rõ ràng xuống cây với toán tử div+p+bq
6 sau div+p+bq
1, nhưng trong trường hợp phần tử
2, chúng tôi không cần phải .
7...produces
8Để so sánh, ở đây, cùng một chữ viết tắt được viết mà không có nhà điều hành trẻ em div+p+bq
6:
div+p+bq
Ghi chú về định dạng viết tắt
9Khi bạn quen thuộc với cú pháp viết tắt Emmet, bạn có thể muốn sử dụng một số định dạng để làm cho chữ viết tắt của bạn dễ đọc hơn. Ví dụ: sử dụng khoảng trắng giữa các phần tử và toán tử, như thế này:
Nhưng nó đã giành được công việc của người Viking, bởi vì không gian là một biểu tượng dừng trong đó Emmet dừng phân tích chữ viết tắt.
Nhiều người dùng đã nhầm lẫn rằng mỗi chữ viết tắt nên được viết trong một dòng mới, nhưng họ đã sai: bạn có thể gõ và mở rộng viết tắt ở bất cứ đâu trong văn bản:
- Đây là lý do tại sao Emmet cần một số chỉ số [như không gian] trong đó nó nên dừng phân tích cú pháp để không mở rộng bất cứ thứ gì mà bạn không cần. Nếu bạn vẫn nghĩ rằng định dạng như vậy là cần thiết cho các chữ viết tắt phức tạp để làm cho chúng dễ đọc hơn:
- Chữ viết tắt không phải là một ngôn ngữ mẫu, họ không phải là người có thể đọc được, họ phải là người nhanh chóng có thể mở rộng và có thể tháo rời.