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í 15++ 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

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

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...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

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. Các trang web đang trở nên cực kỳ quen thuộc với đời sống có nhiều sinh hoạt trực tuyến như...
    15 giây trước
  2. Sức mạnh thực sự của PHP cũng như các ngôn ngữ lập trình khác xuất phát từ các hàm của...
    25 giây trước
  3. Chúng ta đã biết rằng Google Keyword Planner hay Công Cụ Lập Kế Hoạch Từ Khóa có thể tìm ra các...
    27 giây trước
  4. Mặc dù công cụ Google AdWords có ý nghĩa cho PPC (Chi phí chi trả cho mỗi lần nhấp chuột), nhưng...
    29 giây trước
  5. Như mọi người đã biết, hiện nay đang là thời đại phát triển của các hoạt động trực tuyến nói...
    1 giây trước
  6. Nghiên cứu từ khóa cho thông tin là chủ đề đã và đang được đề cập hàng nghìn lần trên...
    3 giây trước
  7. DaVinci Resolve là một cái tên nổi tiếng trong ngành chỉnh sửa video với khả năng chỉnh sửa phi tuyến...
    11 giây trước
  8. Bạn có biết rằng mỗi người trung bình 1 trong 8 phút trực tuyến là dành trên Facebook? Là một chuyên...
    10 giây trước
  9. Một khi bạn đã có một số kỹ năng trong túi, bước tiếp theo là tìm hiểu cách nuôi dưỡng...
    27 giây trước
  10. Quảng cáo từ Google Adsense có nhiều loại khác nhau, tùy vào nhu cầu quảng cáo của từng đơn vị...
    22 giây trước