Làm cách nào để lấy mã emmet so với html?
Emmet trong Mã Visual Studio. Emmet là một tính năng tích hợp trong Visual Studio Code. Bạn không phải cài đặt bất kỳ tiện ích mở rộng nào để được hỗ trợ emmet. Emmet ngăn bạn tự viết toàn bộ mã bằng cách cung cấp chữ viết tắt Emmet. Emmet được bật theo mặc định trong các tệp html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less và stylus, cũng như trong các ngôn ngữ kế thừa từ bất kỳ ngôn ngữ nào ở trên như tay lái và PHP https. //phương tiện truyền thông. chuyên viên máy tính. org/wp-content/uploads/20200813112257/GeekForGeek. css---GeekForGeeks---Visual-Studio-Code-2020-08-13-11-19-12. mp4 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 0 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ôngQui đị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à ký tự phụ của khuôn mẫuVớ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 Nhập thẻ với lớpChú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ó IDQui định ________số 8GIF Nhập một thẻ có nội dungNế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 4Qui đị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úcQui đị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 nhauQui định 7 =>3 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ênGiả 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ì? 4 Đ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úcNhầ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 ta muốn tạo một thẻ cùng cấp với 1, chúng ta 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 2 lần 3 nghĩa là leo tag lên 2 bậc Qui định GIF Phép nhânNhiề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ụ 7Vì 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 ==> header 0 thành giá trị khác, bạn có thể sử dụng ký hiệu hdr ==> header 1Qui định Kết quả GIF LoremKhi 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 |