Ý 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 đặtHiệ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 Qui định GIF 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 ==> headerNhậ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 Qui định ________số 8_______GIF 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 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 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 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 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 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ụ
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 đầuNếu bạn muốn đặt giá trị ban đầu của hdr ==> header0 thành thứ khác, bạn có thể sử dụng dấu
hdr ==> header1
Qui định Kết quả GIF 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ì?
Nếu bạn truy cập trang web của họ, định nghĩa là. “Emmet là một plug-in cho nhiều trình soạn thảo văn bản phổ biến giúp cải thiện đáng kể quy trình làm việc HTML & CSS. ” Và Emmet thực hiện đúng những gì họ hứa, bạn có thể sử dụng các biểu thức ngắn để tạo đánh dấu HTML, CSS
Emmet có phải là phần mở rộng không?
Hỗ trợ cho đoạn mã Emmet và mở rộng được tích hợp ngay trong Visual Studio Code, không yêu cầu tiện ích mở rộng . Emmet 2. 0 có hỗ trợ cho phần lớn các Hành động Emmet bao gồm mở rộng các từ viết tắt và đoạn trích Emmet.
Bài Viết Liên Quan
Bản quyền © 2021 Học Tốt Inc.
 |
