Có thể tạo tất cả mã HTML của một trang web trong vài phút, nếu không phải là vài giây? Điều đó hoàn toàn có thể nếu bạn đang sử dụng Emmet! Cách tiếp cận mới này cho phép phát triển mã nhanh chóng trong HTML, XML và các định dạng mã có cấu trúc khác.
Emmet là một plugin cho nhiều trình soạn thảo văn bản phổ biến. Với Emmet, bạn tạo khung cho trang của mình theo một cú pháp hợp lý nhưng rất nén và sau đó mở rộng nó thành mã HTML thích hợp, đầy đủ. Kết quả giống như một phép thuật:một dòng văn bản mở rộng đến hàng trăm dòng cú pháp và bạn có một trang tĩnh hoặc thậm chí là cấu trúc trang web đầy đủ, sẵn sàng trong vài phút.
Bạn sẽ tìm hiểu ở đây cách sử dụng Emmet để tạo một trang web tĩnh đầy đủ. Visual Studio Code được sử dụng cho hướng dẫn này vì nó đi kèm với hỗ trợ tích hợp cho Emmet. Bạn có thể sử dụng Emmet trong các trình chỉnh sửa khác, như Sublime Text và Atom, nhưng bạn sẽ phải thêm hỗ trợ cho nó thông qua một tiện ích mở rộng.
Tạo tệp trang web của bạn
Để bắt đầu, hãy mở Visual Studio Code.
Chọn “Tệp -> Tệp mới” để tạo một tài liệu trống mới.
Chọn “Tệp -> Lưu dưới dạng” để lưu tệp của bạn, tạo cho nó một phần mở rộng là “html”.
Cấu trúc cơ bản
Các phần tử của mỗi trang web được tổ chức thành các nhóm và nhóm con. Khi mã hóa với Emmet, bạn sẽ phải luôn ghi nhớ cách mỗi nhóm chứa các mục mà bản thân chúng có thể là nhóm của nhiều phần tử hơn.
Lưu ý :mặc dù chúng tôi sẽ giải thích những điều cơ bản, nhưng sẽ tốt hơn nếu bạn đã quen với những điều cơ bản về cú pháp HTML trước khi tiếp tục.
Ở cấp độ rất cơ bản, cao nhất, hầu hết các trang web đều chứa ba nhóm / phần như vậy:đầu trang, phần chính cho nội dung cốt lõi và chân trang. Để tạo những thứ đó bằng Emmet, hãy nhập:
#header+#mainsite+#footer
“#” Ở trước mỗi từ có nghĩa là mỗi nhóm là một div có ID. Nhấn Enter ở cuối dòng để xem Emmet đang hoạt động, biến cụm từ nhỏ này thành ba dòng HTML có cấu trúc.
Cấu trúc tiêu đề
Tiêu đề của một trang web điển hình chứa biểu trưng của nó và một hoặc hai menu. Để thêm chúng vào trang của bạn, bạn có thể giữ HTML mở rộng từ bước trước đó và nhập trực tiếp vào Header Div. Sau đó, bạn có thể nhập một cái gì đó như:
#logo+#menu_top+#menu_main
Nhấn Enter để mở rộng phần này và bạn sẽ có thêm ba phần cho biểu trưng của trang web và hai menu bên trong Tiêu đề của bạn.
Phân nhóm trong Emmet
Với Emmet, bạn nhóm các phần tử bằng cách đặt chúng trong dấu ngoặc đơn. Điều này cho phép bạn tạo các cấu trúc phức tạp cho các trang của mình. Vì vậy, hoàn tác mọi thứ cho đến nay và chỉ giữ lại #header+#mainsite+footer cơ bản của bạn mã từ trước đó.
Thay thế #header trong mã của bạn với những điều sau:
(#header>.logo+.menu.top+.menu.main^)
Trong Emmet, bạn có thể giảm một cấp độ bằng cách sử dụng > và có thể tăng cấp bằng cách sử dụng ^ tính cách. Điều này cho phép bạn vào một phần tử, thêm những phần tử khác vào đó, rồi quay lại.
Kết quả sẽ giống như sau:
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
Ở trên sẽ dịch thành:“Thêm Div (nhóm) với ID #header. Bên trong nó, thêm ba Div với các lớp “.logo”, “.menu.top” và “.menu.main.” Trở lại một cấp, bên ngoài nhóm và thêm hai Div khác bên cạnh với ID “#mainsite” và “#footer.”
Cấu trúc bài đăng
Một bài đăng cơ bản trên một trang web điển hình thường chứa các yếu tố sau:
- Tiêu đề
- Hình ảnh
- Đoạn trích (dưới dạng một đoạn văn bản)
Nó cũng phải cung cấp một liên kết cho phép khách truy cập đọc bài đăng thực sự và có thể liên kết đến các danh mục, thẻ của nó, v.v. Tuy nhiên, vì mục đích đơn giản, hiện tại chúng tôi sẽ chỉ sử dụng ba yếu tố đó.
Đây là mã mà chúng tôi sẽ thêm:
(.post>h3{Post Title $}+img+p{Post Excerpt})*5 Điều này yêu cầu Emmet “Tạo một Div với lớp .post. Bên trong nó, đặt tiêu đề của đề mục H3, một hình ảnh và một đoạn văn cho đoạn trích.
Với “{TEXT}” được đính kèm sau một phần tử, bạn xác định nội dung của nó. Vì vậy, với “{Tiêu đề bài đăng},” điều đó cho Emmet biết rằng nội dung của mỗi tiêu đề H3 sẽ là văn bản giữ chỗ “Tiêu đề bài đăng”. Bạn có thể thay đổi “Tiêu đề bài đăng” thành tên của mình hoặc bất kỳ chuỗi văn bản nào bạn yêu thích và nó sẽ được sử dụng làm nội dung của tiêu đề bài đăng của bạn khi mã được mở rộng.
$ bên cạnh “Tiêu đề bài đăng” là một biến số hoạt động cùng với “5” mà bạn có thể nhìn thấy bên ngoài dấu ngoặc đơn. *5 sau dấu ngoặc đơn yêu cầu Emmet lặp lại nội dung của dấu ngoặc năm lần. $ được thay thế bằng số lần lặp lại của mỗi bài đăng. Thay thế số này bằng số lượng bài đăng bạn muốn trên trang của mình.
Thêm điều này vào mã thực tế. Nó sẽ giống như sau:
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5) 
Cấu trúc chân trang
Đối với Footer, chúng tôi đang thêm hai nhóm - hai Divs với các lớp “.design” và “.copyright.”
Mã như sau:
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})) 
Điều này sẽ tạo một div với lớp “.design.” Bên trong nó là một liên kết với lớp “.designerslink.” Được thêm vào bên cạnh nó là một div thứ hai với lớp “.copyright.” Bên trong div này là một đoạn văn bản thuần túy với nội dung “Copyright 2020 My Name.”
Kết quả sẽ là:
(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))) Bây giờ, chỉ cần nhấn Enter và trang web của bạn đã sẵn sàng!
Với một lần nhấn phím, mọi thứ chúng ta thấy cho đến bây giờ, và nhóm ký tự cực kỳ cô đọng này, sẽ biến thành hàng chục dòng cú pháp HTML thích hợp cho một trang đầy đủ!
Lưu các thay đổi vào tệp bằng cách nhấn Ctrl + S hoặc truy cập “Tệp -> Lưu”. Để xem tác phẩm của bạn, hãy khởi động trình duyệt của bạn. Sau đó, sử dụng “Tệp -> Mở” hoặc trình quản lý tệp bên ngoài, tìm tệp HTML của bạn và mở tệp đó theo cách thủ công trong trình duyệt.
Kết thúc
Bạn đã học những kiến thức cơ bản về cách sử dụng Emmet để tạo tệp HTML của mình. Tất nhiên, bạn có thể quay lại mã của mình bất kỳ lúc nào để chỉnh sửa hoặc mở rộng mã với nhiều nội dung khác.
Bạn đã biết về Emmet? Bạn có đang sử dụng một số phím tắt khác giúp ích khi tạo trang web không? Hãy cho chúng tôi biết trong phần bình luận bên dưới.