search

Emmet viết tắt trong HTML là gì

Ngày đăng: 04/02/2023
Trả lời: 0
Lượt xem: 186

Sử dụng Emmet để cải thiện quy trình làm việc bằng cách tăng tốc mã hóa và chỉnh sửa trong các tệp (X)HTML, CSS, XML, XSL và JSP. Emmet tăng tốc độ mã hóa bằng cách chuyển đổi các từ viết tắt thành các khối mã có cấu trúc và cải thiện việc chỉnh sửa với điều hướng và lựa chọn mã tốt hơn.  

Show

Tính năng này có trong MyEclipse, CodeMix và Angular IDE

MyEclipse

Java EE IDE cho nhà phát triển ngăn xếp đầy đủ

CodeMix

Plugin Eclipse cho nhà phát triển web hiện đại

IDE góc cạnh

IDE độc lập cho nhà phát triển góc

Sử dụng Emmet

Để truy cập các lệnh Emmet, nhấp chuột phải vào trình chỉnh sửa, chọn Emmet rồi chọn một lệnh Emmet. Hoặc, sử dụng phím tắt được gán cho lệnh Emmet. Nếu bạn thích các phím tắt khác nhau, bạn có tùy chọn chỉnh sửa các tổ hợp phím trong Window>Preferences>General> Keys

Emmet viết tắt trong HTML là gì

Truy cập các lệnh Emmet

Các từ viết tắt

Một trong những lệnh Emmet mạnh nhất là Expand Abbreviation. Với Emmet, bạn có thể sử dụng các từ viết tắt được phân tích cú pháp trong thời gian chạy để tạo các khối mã có cấu trúc. Các từ viết tắt này dựa trên bộ chọn CSS cho phép bạn thiết lập và chạy trên Emmet ngay lập tức. Mã được tạo bao gồm các điểm dừng tab cho phép bạn duyệt nhanh mã bằng phím Tab. Emmet hoạt động trong các tệp (X)HTML, CSS, XML, XSL và JSP. Nó thậm chí sẽ cung cấp cho bạn các phần mở rộng CSS cụ thể trong các phần CSS trong tệp HTML và hỗ trợ HTML tại các vị trí thích hợp trong tệp JSP

Mẹo. Để xem một cheat sheet với cú pháp Emmet và các ví dụ, hãy nhấp chuột phải vào Trình chỉnh sửa và chọn Emmet>Emmet Cheat Sheet

Xem bản trình diễn sau để biết cách viết tắt Emmet đang hoạt động và sau đó bạn thậm chí có thể tự mình thử

 

Từ viết tắt Ví dụ

Trong tệp HTML, nhập nav>ul>li và nhấn Ctrl+Alt+Enter. Đoạn mã sau được tạo ra

Đối với một ví dụ phức tạp hơn, hãy nhập ul>li. item$*5 và nhấn Ctrl+Alt+Enter. Đoạn mã sau được tạo ra


Dưới đây là một số ví dụ về CSS

  • bd. n mở rộng ra biên giới. không có;
  • ff. v mở rộng sang họ phông chữ. Verdana, Geneva, sans-serif;

Các lệnh Emmet bổ sung

Ngoài lệnh Expand Abbreviations, có một số hành động khác có sẵn từ menu Emmet giúp tăng tốc mã hóa

Manuel Matuzović là nhà phát triển giao diện người dùng đến từ Vienna, người đam mê khả năng tiếp cận, nâng cao tiến bộ, hiệu suất và tiêu chuẩn web. Anh ấy là một trong … Thông tin thêm về Manuel ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

  • Emmet viết tắt trong HTML là gì
    Giao diện người dùng SmashingConf 2023

  • Emmet viết tắt trong HTML là gì
    Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

  • Emmet viết tắt trong HTML là gì
    SmashingConf Freiburg 2023

  • Emmet viết tắt trong HTML là gì
    Quảng cáo trên tạp chí Smashing

  • Emmet viết tắt trong HTML là gì
    Các mẫu thiết kế giao diện Đào tạo UX

Trong bài viết này, Manuel giải thích lý do tại sao Emmet là một trong những công cụ năng suất yêu thích của anh ấy để viết HTML và CSS, đồng thời cách bạn có thể tạo các đoạn mã Emmet tùy chỉnh trong Visual Studio Code để giúp bạn cải thiện quy trình công việc mặt trước của mình hơn nữa

Đầu năm nay, tôi đã chia sẻ bản tóm tắt HTML mà tôi muốn sử dụng khi bắt đầu các dự án web mới với các giải thích từng dòng trên blog của mình. Đó là một bộ sưu tập hầu hết là

{ "html": { "snippets": { "img:l": "img[width height loading='lazy']" } } }
5 thẻ và thuộc tính mà tôi thường sử dụng trên mọi trang web mà tôi xây dựng. Cho đến gần đây, tôi chỉ sao chép và dán bản soạn sẵn bất cứ khi nào tôi cần, nhưng tôi đã quyết định cải thiện quy trình làm việc của mình bằng cách thêm nó dưới dạng một đoạn trích vào Mã VS — trình chỉnh sửa mà tôi chọn

Đây là bản trình diễn nhanh về các đoạn mã tùy chỉnh mà tôi đã tạo

Đoạn mã và chữ viết tắt trong Visual Studio Code

Mã VS được tích hợp sẵn với đoạn mã người dùng tùy chỉnh, đoạn mã HTML và CSS và từ viết tắt do Emmet cung cấp

Ví dụ: nếu bạn nhập

{ "html": { "snippets": { "img:l": "img[width height loading='lazy']" } } }
6 vào tài liệu HTML và nhấn Enter hoặc Tab, Emmet sẽ biến nó thành đánh dấu sau 


Sign Up

Ghi chú. Truy cập tài liệu Emmet để tìm hiểu cách sử dụng cú pháp viết tắt

Nếu chúng tôi cần viết tắt cụ thể này thường xuyên, chúng tôi có thể lưu nó dưới dạng một đoạn trích để cải thiện quy trình làm việc của mình hơn nữa

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }

Bây giờ chúng ta có thể gõ

{ "html": { "snippets": { "img:l": "img[width height loading='lazy']" } } }
7 và nhấn Enter hoặc Tab và chúng ta sẽ nhận được kết quả tương tự. Tôi sẽ giải thích cách tạo đoạn trích trong

Emmet đi kèm với một loạt các đoạn mã HTML theo mặc định. Ví dụ:

{ "html": { "snippets": { "img:l": "img[width height loading='lazy']" } } }
8 tạo cấu trúc cơ bản của tài liệu HTML

________số 8_______

Điều đó thật tuyệt, nhưng nếu chúng tôi muốn điều chỉnh đoạn mã này bằng cách xóa hoặc thêm các thành phần và thuộc tính, chúng tôi phải ghi đè lên đoạn mã đó và tạo đoạn mã của riêng mình

Tạo và ghi đè đoạn mã

Nếu chúng tôi muốn tạo đoạn mã Emmet của riêng mình hoặc ghi đè lên đoạn mã hiện có trong Mã VS, thì cần thực hiện các bước sau

  1. Tạo một đoạn trích. json, hãy thêm cấu trúc JSON cơ bản này và lưu nó ở đâu đó trên đĩa cứng của bạn
    { "html": { "snippets": { } }, "css": { "snippets": { } } }
  2. Mở cài đặt Mã VS (Mã → Tùy chọn → Cài đặt) và tìm kiếm “Đường dẫn tiện ích mở rộng Emmet”
    Emmet viết tắt trong HTML là gì
  3. Nhấp vào "Thêm mục", nhập đường dẫn đến thư mục mà bạn đã lưu các đoạn trích. json mà bạn đã tạo trước đó và nhấn “OK”
    Emmet viết tắt trong HTML là gì

Đó là nó. Bây giờ chúng ta đã sẵn sàng để tạo các đoạn trích bằng cách thêm các thuộc tính vào các đối tượng

{ "html": { "snippets": { "img:l": "img[width height loading='lazy']" } } }
9 và
0 trong đó
1 là tên của đoạn trích và
2 là chữ viết tắt hoặc một chuỗi

Một số đoạn mã HTML tùy chỉnh của tôi

Trước khi chúng ta đi sâu vào việc tạo đoạn trích và tôi sẽ chỉ cho bạn cách tôi tạo một đoạn mã cho bản tóm tắt HTML của mình, trước tiên chúng ta hãy làm nóng với một số đoạn mã nhỏ nhưng hữu ích mà tôi đã tạo.

tải chậm

Ra khỏi hộp, có một chữ viết tắt
3, nhưng không có chữ viết tắt nào dành cho hình ảnh được tải chậm. Chúng ta có thể sử dụng chữ viết tắt mặc định và chỉ cần thêm các thuộc tính và giá trị thuộc tính bổ sung mà chúng ta cần trong ngoặc vuông 

{ "html": { "snippets": { "img:l": "img[width height loading='lazy']" } } }
4 + Enter/Tab hiện tạo đánh dấu sau

Trang

Hầu hết các trang tôi tạo bao gồm các mốc đánh dấu
5,
6 và
7 và một
8. Chữ viết tắt
9 tùy chỉnh cho phép tôi tạo cấu trúc đó một cách nhanh chóng 

"snippets": { "page": "header>h1^main+footer{${0:©}}" }
9 + Enter/Tab tạo đánh dấu sau
©

Chữ viết tắt đó khá dài, vì vậy hãy chia nhỏ nó thành các phần nhỏ hơn

Phá vỡ

Tạo phần tử
5 và phần tử con
8 

header>h1

Di chuyển lên, trở lại mức của
5 và tạo một
7 theo sau
6 

^main+footer

Đặt điểm dừng tab cuối cùng trong
7 và đặt văn bản mặc định thành 
"snippets": { "page": "header>h1^main+footer{${0:©}}" }
7 

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
0

dẫn đường

Chữ viết tắt

"snippets": { "page": "header>h1^main+footer{${0:©}}" }
8 chỉ tạo thẻ bắt đầu và thẻ kết thúc 
"snippets": { "page": "header>h1^main+footer{${0:©}}" }
9 theo mặc định, nhưng những gì tôi thường cần là một 
"snippets": { "page": "header>h1^main+footer{${0:©}}" }
9 với các phần tử và liên kết
©
1,
©
2 lồng nhau (
©
3). Nếu có nhiều phần tử 
"snippets": { "page": "header>h1^main+footer{${0:©}}" }
9 trên một trang, chúng cũng nên được gắn nhãn, ví dụ bằng cách sử dụng
©
5 

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
1

Điều đó có vẻ hoang dã, vì vậy hãy phá vỡ nó một lần nữa

Phá vỡ

Chúng ta bắt đầu với một phần tử

"snippets": { "page": "header>h1^main+footer{${0:©}}" }
9 với thuộc tính
©
5 và một
©
1 lồng nhau.
©
9 điền thuộc tính bằng văn bản “Main” và tạo một điểm dừng tab tại giá trị thuộc tính bằng cách di chuyển con trỏ đến nó và tô sáng nó khi tạo 

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
2

Sau đó, chúng tôi tạo bốn mục danh sách với các liên kết lồng nhau. Mục đầu tiên đặc biệt vì nó đánh dấu trang đang hoạt động bằng cách sử dụng

header>h1
0. Chúng tôi tạo một điểm dừng tab khác và điền vào liên kết bằng văn bản “Trang hiện tại” 

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
3

Cuối cùng, chúng tôi thêm ba mục danh sách khác có liên kết và văn bản liên kết “Trang khác”

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
4

Trước khi điều chỉnh, chúng tôi đã nhận được điều này

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
5

Bây giờ chúng tôi nhận được điều này

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
6

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ “TypeScript trong 50 bài học”, hướng dẫn mới tuyệt vời của chúng tôi về TypeScript. Với các hướng dẫn chi tiết về mã, các ví dụ thực hành và các vấn đề phổ biến — tất cả được chia thành các bài học ngắn, dễ quản lý. Đối với những nhà phát triển biết đủ JavaScript để trở nên nguy hiểm

Chuyển đến mục lục ↬

Emmet viết tắt trong HTML là gì

Phong cách

Chữ viết tắt

header>h1
1 mặc định chỉ tạo thẻ bắt đầu và thẻ kết thúc 
header>h1
2, nhưng thông thường khi tôi sử dụng phần tử 
header>h1
2, tôi làm điều đó vì tôi muốn nhanh chóng kiểm tra hoặc gỡ lỗi điều gì đó

Hãy thêm một số quy tắc mặc định vào thẻ

header>h1
2 

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
7

Phá vỡ

Một số nhân vật (e. g.

header>h1
5, 
header>h1
6, 
header>h1
7 hoặc 
header>h1
8) phải được thoát bằng cách sử dụng 
header>h1
9 

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
8 

^main+footer
0 tạo ngắt dòng và 
^main+footer
1 đặt điểm dừng tab đầu tiên tại bộ chọn 
header>h1
6 

{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
9