Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3

5/5 - (11 bình chọn)

Hầu hết các công cụ soạn thảo văn bản cho phép chúng ta lưu trữ và sử dụng lại các khối mã thường được sử dụng, được gọi là snippets. Snippets là một cách để tăng năng suất làm việc tuy nhiên cũng có nhược điểm: bạn phải định nghĩakhông thể mở rộng trong khi chạy.

Emmet ra đời đưa snippets lên một cấp độ mới: sinh ra snippets dựa vào những từ viết tắt. Emmet được phát triển và tối ưu cho các lập trình viên web – những người làm việc thường xuyên với HTML/XML và CSS cũng như các ngôn ngữ lập trình. Trong bài viết hôm nay chúng ta sẽ cùng nhau tìm hiểu về công cụ Emmet trên trình soạn thảo Sublime Text 3.

Xem thêm:Sublime Text là gì?

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 feature_image

Contents

Cài đặt Emmet

Trước tiên bạn cần mở phần mềm Sublime Text, sau đó bấm Ctrl + Shift + P để hiện ra bảng điều khiển, tiếp đến gõ Install Package Control rồi gõ tiếp Emmet để cài đặt Emmet cho Sublime Text.

Các từ viết tắt

Các từ viết tắt là trái tim của công cụ Emmet: những biểu thức này được phân tích cú pháp trong thời gian chạy và chuyển thành khối mã có cấu trúc, ví dụ như HTML. Các cú pháp viết tắt giống như bộ chọn CSS với một vài phần mở rộng cụ thể để sinh ra mã. Vì vậy các lập trình viên Web cần phải biết cách sử dụng nó.

Đây là ví dụ minh họa:

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 abbrevitation…sẽ sinh ra mã như sau:

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 generate_code… chỉ với một phím tắt duy nhất. Trong nhiều trình soạn thảo (ví dụ như Notepad++, Sublime Text 2) đoạn mã trên được sinh ra bằng sử dụng phím Tab.

Cú pháp viết tắt

Emmet sử dụng cú pháp tương tự như bộ chọn CSS để mô tả vị trí các phần tử bên của cây DOM và các thuộc tính được tạo ra.

Các phần tử

Bạn có thể sử dụng tên các phần tử như div hoặc p để tạo ra các thẻ HTML. Emmet không có một tập hợp các tên thẻ định nghĩa trước, bạn có thể viết bất kỳ từ nào và biến đổi nó thành một thẻ HTML: div -> <div></div>, p -> <p></p>.

Toán tử lồng nhau

Các toán tử lồng nhau được sử dụng để định vị các phần tử viết tắt bên trong cây được tạo ra.

Toán tử con

Bạn có thể sử dụng toán tử > để sinh ra các phần tử lồng nhau.

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 nest_element…sẽ sinh ra mã như sau:

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 generate_nested_element

Toán tử anh em +

Sử dụng toán tử + để đặt các phần tử gần nhau, cùng một cấp độ:

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 sibling_element…sẽ sinh ra

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 generate_nested_element-1

Toán tử ^

Toán tử ^ tạo ra cây và vị trí của tất cả các yếu tố anh em và các phần tử con của nó.

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 climbup_operator…sẽ sinh ra

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 generate_climbup

Toán tử *

Với toán tử * bạn có thể xác định bao nhiêu lần phần tử được sinh ra

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 multiplication_operator…sẽ sinh ra

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 generate_multiplication

Toán tử thuộc tính

Các toán tử thuộc tính được sử dụng để sửa đổi các thuộc tính của các phần tử đầu ra. Ví dụ, trong HTML bạn có thể nhanh chóng thêm thuộc tính class để tạo ra phần tử.

ID và class

Trong CSS, bạn có thể sử dụng ký hiệu elem#idelem.class để tiếp cận với phần tử có thuộc tính id hoặc class.

Trong Emmet, bạn có thể sử dụng cú pháp như vậy để thêm các thuộc tính này vào phần tử cụ thể:

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 attribute_operator…sẽ sinh ra

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 generate_attribute

Đánh số mục: $

Với toán tử * bạn có thể lặp lại các phần tử, nhưng với $ bạn có thể đánh số chúng. Đặt toán tử $ bên trong tên của phần tử, tên của thuộc tính hoặc giá trị của thuộc tính cho số phần tử lặp lại:

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 item_number…sẽ sinh ra

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 generate_item_number

Văn bản: {}

Bạn có thể sử dụng dấu ngoặc nhọn để thêm văn bản vào một phần tử:

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 text…sẽ sinh ra

Hướng dẫn sử dụng Emmet cho Webdeveloper Sublime Text 3 generate_text-1Kết luận

Như vậy thông qua bài viết này mình đã chia sẻ với các bạn các thủ thuật cơ bản với Emmet trong Sublime Text. Hẹn gặp lại các bạn ở bài viết tiếp theo. Chúc các bạn thành công!

Xem thêm: Dịch vụ thiết kế website

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. 5 bước hiệu quả của marketing trong thời đại Net. Chỉ có khi nào bạn đang sống ẩn mình trên...
    22 giây trước
  2. SSL (Secure Sockets Layer) là một giao thức bảo mật chuẩn để thiết lập các liên kết mật mã giữa...
    23 giây trước
  3. Trong cuộc sống tất bật hiện nay, mọi việc đều được đơn giản và tối ưu hóa thời gian thông...
    1 giây trước
  4. Thiết kế Landing Page Trung tâm đào tạo lái xe ô tô Sao Bắc Việt phải thật sang trọng, đẹp...
    23 giây trước
  5. Cải thiện tốc độ tải trang web Hiện nay có nhiều người sử dụng điện thoại để đọc và tìm...
    21 giây trước
  6. Nội dung thường được coi là huyết mạch của bài viết SEO. Nội dung của bạn cần phải thu hút...
    12 giây trước
  7. “Đơn giản mà không tầm thường”. Điều này hoàn toàn đúng khi miêu tả về những chiếc nút kêu gọi...
    30 giây trước
  8. Cho dù bạn tập trung vào nỗ lực B2B hay B2C, tạo ra nhiều lưu lượng truy cập web hơn...
    18 giây trước
  9. Ngày nay, đi đôi với sự phát triển khoa học công nghệ hiện đại, vấn đề tiết kiệm năng lượng...
    2 giây trước
  10. GoDaddy là một trong những thương hiệu nổi tiếng trong thị trường miền và web-hosting. GoDaddy phổ biến vì những lý do...
    18 giây trước