20 mẹo hay nhất để giúp bạn mã hóa HTML / CSS Crazy nhanh

Emmet, trước kia gọi là Zen Coding, là một trong những công cụ tốt nhất bạn nên tăng hiệu suất trong khi mã hóa HTML hoặc CSS. Nó hoạt động giải trí giống như hoàn thành xong mã, nhưng nó can đảm và mạnh mẽ và tuyệt vời hơn. Nó hoàn toàn có thể tự động hóa HTML / CSS của bạn từ một hình thức đơn thuầ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.

Bạn đang đọc: 20 mẹo hay nhất để giúp bạn mã hóa HTML / CSS Crazy nhanh

Mục Chính
Emmet – Thủ thuật hay nhất HTML
1. Làm tổ
2. Anh chị em
3. Leo lên
4. Thêm lớp
5. Thêm ID
6. Thêm văn bản
7. Thêm thuộc tính
8. Phân nhóm
9. Nhân
10. Đánh số tự động
11. Lorem
12. Tài liệu tự động
13. Liên kết
14. Neo
15. Bỏ qua thông minh
Emmet – Thủ thuật CSS tốt nhất
1. Chiều rộng và chiều cao
2. Văn bản
3. Bối cảnh
4. Mặt chữ
5. Linh tinh
Phần kết luận

Emmet – Thủ thuật hay nhất HTML

LÀM THẾ NÀO ĐỂ KẾT NỐI T. ..

Please enable JavaScriptLÀM THẾ NÀO ĐỂ KẾT NỐI TÂM LINH VỚI MỘT NGƯỜI Ở XABạn sẽ quá bất ngờ khi viết HTML bằng Emmet như tôi đã làm. Như đã nêu trước đó, Emmet hoàn toàn có thể viết tắt một HTML đơn thuầ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 lập, Emmet sẽ tự động hóa viết thẻ bạn viết. Xem phim hoạt hình dưới đây để thuận tiện 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 .

Xem thêm: 5 dấu hiệu thai phát triển tốt và 10 dấu hiệu thai yếu bạn cần biết

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 sau cuối tôi sẽ phân phối cho bạn là tính năng bỏ lỡ mưu trí. 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ỉ vận dụng trên một số ít điều kiện kèm theo 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 .

Xem thêm: 7 phương pháp dạy học tiếng việt theo hướng phát triển năng lực hiệu quả – https://thomaygiat.com

Phần kết luận

Emmet là một công cụ tiết kiệm ngân sách và chi phí thời hạn rất lớn để hợp lý hóa quy trình tăng trưởng của bạn. Nếu bạn chỉ biết Emmet, không quá muộn để thử ngay giờ đây. Những mánh khóe đó chỉ là một số ít 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 quan trọng là cho CSS. Chỉ cần đi qua tài liệu Emmet hoặc cheat sheet để liên tục đọc của bạn .