Ý nghĩa của Emmet trong HTML là gì?

Nếu bạn sử dụng phương pháp gõ từng dòng truyền thống, ngay cả khi trình soạn thảo hoàn thành thông minh, nó vẫn sẽ rất chậm

Nếu chúng ta sử dụng Emmet, chúng ta có thể hoàn thành việc gõ rất nhanh

Như được hiển thị trong GIF ở trên, Emmet là một plug-in trình chỉnh sửa cung cấp các quy tắc cú pháp để hoàn thành mã thông minh. Nó cho phép chúng ta viết mã HTML và CSS một cách nhanh chóng

Chúng tôi biết rằng HTML có rất nhiều ký tự rập khuôn, lặp đi lặp lại và Emmet tồn tại để giúp chúng tôi loại bỏ mã dư thừa đó

Cài đặt

Hiện tại các trình soạn thảo code phổ biến như VSCode, WebStorm đều đã cài đặt sẵn plugin Emmet. Bạn không cần tải xuống plugin Emmet, bạn có thể sử dụng nó trực tiếp

Tất cả các GIF sau đều được ghi trong VSCode, nhưng các quy tắc là chung và bạn có thể sử dụng thủ thuật tương tự trong các trình chỉnh sửa khác

Tạo mẫu HTML

Chúng tôi biết rằng mọi tệp HTML5 phải có một khung cố định, đại loại như thế này

Sau khi sử dụng Emmet, bạn không cần phải nhập các ký tự này theo cách thủ công, bạn chỉ cần nhập ! vào tệp HTML và VSCode sẽ nhắc bạn có sử dụng quy tắc Emmet để hoàn thành tự động hay không

Qui định

GIF

Nhập một thẻ

Trong HTML, các thẻ sẽ trông như thế này

Trong loại thẻ này, ngoại trừ

0 và

1 là nội dung cốt lõi, các ký hiệu khác (chẳng hạn như

2 ,

3 ) là các ký tự phụ của khuôn mẫu

Với Emmet, chúng ta không cần gõ những ký tự thừa này

Ngoài ra, bạn có thể sử dụng chữ viết tắt cho các thẻ dài hơn như tiêu đề hoặc blockquote

hdr ==> header
bq  ==> blockquote

Nhập thẻ với lớp

Chúng tôi biết rằng một thẻ HTML thường có các kiểu CSS. Khi sử dụng Emmet ta chỉ cần thêm tên Class vào sau tên tag là nó sẽ tự động thêm vào

Quy tắc

div.container  ==> 
span.red  ==> div.row.blue ==> 

GIF

Nhập một Thẻ có ID

Qui định

________số 8_______

GIF

Nhập một thẻ có nội dung

Nếu chúng tôi muốn thêm một số nội dung vào thẻ, chúng tôi có thể sử dụng cú pháp

4

Qui định

GIF

Nhập nhiều thẻ

Emmet hỗ trợ các hoạt động bổ sung. Nếu chúng tôi sử dụng

5, chúng tôi có thể nhập nhiều thẻ cùng một lúc

Qui định

GIF

Nhập thẻ làm tổ

Trong CSS, ký hiệu cho bộ kết hợp con là

3 và bạn cũng có thể sử dụng ký hiệu này trong Emmet để nhập các thẻ lồng nhau

Qui định

7 =>

GIF

Khi nhập các thẻ lồng nhau, chúng ta cũng có thể nhập cùng với lớp và nội dung

Qui định

Kết quả

GIF

Trèo lên

Giả sử chúng ta muốn sử dụng Emmet để nhập văn bản đó cùng một lúc, thì chúng ta phải làm gì?

Điểm khó chịu nhất của văn bản trên là thẻ p có cả thẻ phụ và thẻ phụ. Chỉ sử dụng

3 và

5 mà chúng tôi đã đề cập trước đó không thể nhập tất cả văn bản cùng một lúc

Nhầm đường

Vấn đề với cách viết ở trên là khi chúng ta nhập

0, nó thực sự tạo ra một thẻ ở cùng cấp độ với

1. Nếu chúng tôi muốn tạo một thẻ ở cùng cấp độ với

1, chúng tôi có thể sử dụng ký hiệu

3. Biểu tượng này là để làm cho thẻ leo lên một cấp độ cao hơn

Qui định

Kết quả

GIF

Nếu muốn

4 và

5 song song thì ta chỉ cần dùng _______1_______3 2 lần, nghĩa là leo tag lên 2 bậc

Qui định

GIF

Phép nhân

Nhiều thẻ cần được lặp lại nhiều lần, chẳng hạn như

7. Để thuận tiện cho việc nhập các thẻ này theo lô, Emmet cho phép chúng tôi sử dụng phép nhân

Qui định

8 có nghĩa là phép nhân và

9 có nghĩa là thẻ trước đó xuất hiện ba lần

Kết quả

GIF

GIF2

đánh số $

Khi sử dụng phép nhân để tạo thẻ theo lô, chúng tôi có thể cần sử dụng số. Ví dụ

  
item 1

  
item 2

  
item 3

  
item 4

  
item 5

  
item 6

Vì vậy, làm thế nào để chúng tôi nhập vào ở trên?

Một biểu tượng đặc biệt được cung cấp trong Emmet. $. Biểu tượng này đại diện cho một biến đặc biệt, giá trị ban đầu mặc định của nó là 1 và nó sẽ tự động tăng lên sau mỗi lần xuất hiện

Qui định

Kết quả

GIF

GIF2

chữ số

Nếu bạn muốn sử dụng số có ba chữ số, bạn chỉ cần sử dụng ký hiệu $ ba lần

Qui định

Kết quả

GIF

Giá trị ban đầu

Nếu bạn muốn đặt giá trị ban đầu của

hdr ==> header
bq  ==> blockquote

0 thành thứ khác, bạn có thể sử dụng dấu

hdr ==> header
bq  ==> blockquote

1

Qui định

Kết quả

GIF

Lorem

Khi chúng tôi viết mã, chúng tôi thường cần điền vào một số chuỗi vô nghĩa để kiểm tra hiệu ứng hiển thị của các trang HTML của chúng tôi. Trước đây bạn có sử dụng bàn phím để nhập các ký tự ngẫu nhiên không?

Emmet cung cấp cho chúng ta một lệnh đặc biệt có thể nhanh chóng tạo ra một loạt các chuỗi vô nghĩa

Qui định

Kết quả

GIF

GIF2

Đây là cách sử dụng cơ bản của Emmet, hi vọng sẽ giúp ích được cho các bạn. Nếu bạn nghĩ rằng những GIF này đã giúp ích cho bạn, vui lòng cho tôi biết và tôi sẽ tiếp tục tạo các bài viết cùng loại

Từ viết tắt Emmet có nghĩa là gì?

Emmet có phải là phần mở rộng không?