Mã hiển thị trong html

Emmet là một trong những tính năng được tích hợp sẵn sở thích của mình với trình soạn thảo văn bản VS Code, và nó cũng là tiện ích mở rộng có sẵn trên các trình soạn thảo mã nền tảng khác. Với Emmet, bạn có thể tăng tốc độ làm việc của HTML & CSS, thậm chí còn bị coi là cheat-code

  Bỏ túi Cheatsheet React cho năm 2022 [kèm ví dụ thực tế]

  Tất tần tật các bảng tính Frontend tốt nhất

Sử dụng Emmet trong HTML

Với Emmet, việc tạo một bản soạn sẵn HTML diễn ra trong nháy mắt. Với tệp HTML, chỉ cần gõ

19 bạn sẽ thấy Emmet hiển thị các gợi ý, sau đó chỉ việc

20 đã có sẵn trang HTML trống cơ bản. Đây mình mới chỉ đang demo khả năng vài tính năng của VS Code và Emmet nên nếu chưa hiểu thì không sao, cứ đọc tiếp nhé

Xem thêm Tạo React Boilerplate – Từ a tới z

Các thẻ cơ bản

Để tạo thẻ – thẻ HTML, chỉ cần nhập tên thẻ và

20. Emmet sẽ đặt con trỏ chuột trong thẻ đó, lúc này có thể tiếp tục gõ bên trong thẻ rồi

• Thử gõ
  0 sau đó
  20, hoặc
  2, hoặc
  3
• Ngoài ra thì còn có.
  4 cho
  5, 
  6 cho
  7, 
  8 cho
  9, 
  0 cho
  1, và
  2 cho phần

Các lớp học

Nếu bạn đã quen với CSS, Emmet cũng sử dụng cách tương tự, dấu. để tham khảo lớp học. Todefine class with the tag, only need more as this thế

• 3 —> 
  4

• 5 —> 
  6

ID

Làm với ID thì cũng tương tự

• 7 —> 
  8

  CSS cơ bản toàn tập dành cho người mới phần 1

ghép chuỗi

Ghép 2 cái trên thì ta có

• 9 —> 
  90

Attributes – thuộc tính

Ta cũng có thể chỉ định thuộc tính cho thẻ

• 91 —> 
  92

Nội dung – nội dung

Để “bọc” nội dung trong thẻ, chỉ cần bỏ chúng giữa 2 dấu trích dẫn

93

• 94 —> 
  95

  Bootstrap là gì?

Anh chị em và con cái

Tương tự với anh chị em ruột và con cái thì dùng các ký tự dấu cộng

96 và dấu lớn hơn

97

• 98 —> 
  99

• 90 —> 
  91

Đang treo lên

Hình dung những gì đang xây dựng trong đầu vì lúc này bạn đang gõ tốc ký Emmet. Ví dụ này thì mình đang leo cây với

92

93

Kết quả

3

Ở đây mình muốn blockquote nó xuất hiện ngang hàng – cùng cấp với đoạn văn. Vì thế mới phải leo lên, nếu không thì blockquote sẽ chen vào trong đoạn văn

Nhóm

Nếu cấu trúc phức tạp thì bạn có thể nhóm thẻ – thẻ nhóm thay vì sử dụng leo lên. Ví dụ này mình tạo đầu trang và chân trang [không leo lên] sử dụng trích đơn

94 .

95

Kết quả

Character and symbol $

Bạn có thể tạo thẻ theo cấp số nhân bằng [

96] và đánh số các mục theo thứ tự với ký hiệu đô la [

97]

• 98 —> 
  99

• 10 —> 
  11

Thậm chí bạn có thể tùy chỉnh luôn thứ tự đánh số bao gồm chữ số 0, bắt đầu với số xác định và có thể đảo ngược

Pad number 0.

12

Kết quả

Bắt đầu bằng một số xác định.

13

Kết quả

9

Island direction.

14

Kết quả

9

Đảo hướng từ một số xác định.

15

Kết quả

1

  Giới thiệu về Micronaut

Tag stop

Có một số thẻ tag không cần gõ ra mà có thể hiểu được

• Một lớp lúc đầu không có thẻ thì sẽ được hiểu là
  16

17 —> 

4

• Lớp với thẻ nhấn mạnh sẽ được hiểu là
  19

50 —> 

51

• Lớp xác định bên trong danh sách sẽ được hiểu là mục danh sách

52 —> 

53

• Lớp xác định trong bảng được hiểu là
  54 còn trong hàng thì là
  55

56 —> 

57

Thẻ “Kẹp”

Có lúc bạn muốn kết nối thẻ tag vào các đoạn mã có sẵn, Emmet có thể dễ dàng thực hiện việc này. Đầu tiên, đánh dấu đoạn mã bạn cần thêm thẻ và mở bảng lệnh [

58] lên, tìm kiếm

59. Sau đó sẽ có hộp thoại để nhập phần tử vào

________ 1190 —> ________ 1191

Ngoài cách này, bạn cũng có thể sử dụng cú pháp Emmet tiêu chuẩn trong hộp thoại này, ngắt đoạn văn bản với

192. Chức năng này không được gán vào phím tắt. Nên nếu bạn sử dụng tính năng này thường xuyên thì nên thêm phím tắt cho nó

Lorem Ipsum

“Lorem Ipsum” là đoạn văn bản giả mạo biến rất phổ biến được sử dụng để hiển thị các giá trị dữ liệu ngẫu nhiên trên trang. Chỉ cần nhập và

193 nhấn

20. Emmet sẽ tạo ra 30 từ ngẫu nhiên có thể sử dụng để dàn nội dung trong dự án

You can also select the number of the character theo nhu cầu

• 195 sẽ cho bạn 10 từ ngẫu nhiên

Gop chung lại

Attempt to the general section at on back.

196

Kết quả

5

Dùng Emmet trong CSS

Với CSS, thì Emmet có từng cái viết tắt cho từng thuộc tính, mình sẽ không liệt kê chúng ra hết mà sẽ đưa ra những trường hợp được sử dụng nhiều nhất. Bạn có thể xem danh sách đầy đủ tại đây

  Tìm hiểu về thuộc tính Chế độ viết trong CSS

Chức vụ

• 197 —> 
  198 [mặc định tương đối]

• 199 —> 
  200
• ________ 1201 —> ________ 1202

• 203 —> 
  198

• 205 —> 
  206

Xem thêm Tất tần tật về vị trí thuộc tính trong CSS

Shows

• 207 —> 
  208 [default block]

• 209 —> 
  200

• 201 —> 
  208

• 203 —> 
  204

• 205 —> 
  206

• 207 —> 
  208

• 209 —> 
  00

con trỏ

• 01 —> 
  02

Color

• 03 —> 
  04

• 05 —> 
  06

• 07 —> 
  08

• 09 —> 
  10

Đệm lề. pad lề

• 11 —> 
  12

• 13 —> 
  14

• 15 —> 
  16

• 17 —> 
  18

• 19 —> 
  20

• 21 —> 
  22

• 23 —> 
  24

• 25 —> 
  26

• 27 —> 
  28

• 29 —> 
  30

• 31 —> 
  32

Kích thước hộp

• 33 —> 
  34

Xem thêm CSS Box Model – Các cách hiển thị phần tử với thuộc tính hiển thị

Chiều rộng

• 35 —> 
  36

• 37 —> 
  38

• 39 —> 
  40

• 41 —> 
  42

• 43 —> 
  44

• 45 —> 
  46

Canh lề

• 47 —> 
  48

• 49 —> 
  50

• 51 —> 
  52

Kết luận

Với Emmet, bạn có thể tạo nên cấu trúc HTML phức tạp chỉ với một dòng, với CSS cũng làm được những điều tương tự. Tóm lại, Emmet khá đỉnh, sử dụng Emmet có thể giúp nâng cao hiệu suất và tốc độ viết HTML và CSS