programming html

Làm thế nào để bạn làm emmet trong html?

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ề giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

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
```
  
  
  
  Document


  
```
Đ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 đ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.
  ______7
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”
  Sign Up
  1
  9 + Enter/Tab tạo đánh dấu sau
```
Sign Up
```
  3
  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
```
Sign Up
```
  6
  Di chuyển lên, trở lại mức của
  5 và tạo một
  7 theo sau
  6
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  0
  Đặt điểm dừng tab cuối cùng trong
  7 và đặt văn bản mặc định thành
```
Sign Up
```
  17
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  0
  dẫn đường
  Chữ viết tắt
```
Sign Up

  
```
  18 chỉ tạo thẻ bắt đầu và thẻ kết thúc
```
Sign Up
```
  19 theo mặc định, nhưng những gì tôi thường cần là một
```
Sign Up
```
  19 với các phần tử và liên kết
```
Sign Up
```
  31,
```
Sign Up
```
  32 lồng nhau [
```
Sign Up
```
  33]. Nếu có nhiều phần tử
```
Sign Up
```
  19 trên một trang, chúng cũng phải được gắn nhãn, ví dụ bằng cách sử dụng
```
Sign Up
```
  35
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  1
  Điều đó có vẻ hoang đường, vì vậy hãy phá vỡ nó một lần nữa
  Phá vỡ
  Chúng tôi bắt đầu với một phần tử
```
Sign Up
```
  19 với một thuộc tính
```
Sign Up
```
  35 và một
```
Sign Up
```
  31 lồng nhau.
```
Sign Up
```
  39 đ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
```
Sign Up
```
  60. 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 chuyển thể, 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 ↬
  
  Sign Up
  61 mặc định chỉ tạo thẻ bắt đầu và thẻ kết thúc
```
Sign Up
```
  62, nhưng thông thường khi tôi sử dụng phần tử
```
Sign Up
```
  62, tôi làm điều đó vì tôi muốn nhanh chóng kiểm tra hoặc gỡ lỗi thứ gì đó
  Hãy thêm một số quy tắc mặc định vào thẻ
```
Sign Up
```
  62
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  7
  Phá vỡ
  Một số nhân vật [e. g.
```
Sign Up
```
  65,
```
Sign Up
```
  66,
```
Sign Up
```
  67 hoặc
```
Sign Up
```
  68] phải được thoát bằng cách sử dụng
```
Sign Up
```
  69
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  8
  ________ 300 tạo ngắt dòng và
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  01 đặt điểm dừng tab đầu tiên tại bộ chọn
```
Sign Up
```
  66
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  9
  - Trước.
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    03
  - Sau.
    ______60
  Được rồi, khởi động thế đủ rồi. Hãy tạo các đoạn mã phức tạp. Lúc đầu, tôi muốn tạo một đoạn mã duy nhất cho bản soạn sẵn của mình, nhưng tôi đã tạo ba từ viết tắt phục vụ các nhu cầu khác nhau
  nồi hơi nhỏ
  Đây là một bản soạn sẵn cho các bản trình diễn nhanh, nó tạo ra những điều sau đây
  - Cấu trúc trang web cơ bản,
  - Thẻ meta
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    04,
  - Tiêu đề trang,
  - phần tử
```
Sign Up
```
    62,
  - Một
    8
```
  
  
  
  Document


  
```
  1
  Phá vỡ
  Một chuỗi với loại tài liệu
```
  
  
  
  Document


  
```
  2
  Phần tử
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  07 với thuộc tính
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  08. Giá trị của thuộc tính
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  08 là một biến bạn có thể thay đổi trong cài đặt mã VS [Mã → Tùy chọn → Cài đặt]
```
  
  
  
  Document


  
```
  3
  Bạn có thể thay đổi ngôn ngữ tự nhiên mặc định của trang bằng cách tìm kiếm “biến emmet” trong cài đặt Mã VS và thay đổi biến
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  08. Bạn cũng có thể thêm các biến tùy chỉnh của mình tại đây
  Sign Up
  
  62.
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  06 tạo một dòng mới
```
  
  
  
  Document


  
```
  4
  Hãy có một cái nhìn nhanh đầu tiên về những gì điều này mang lại cho chúng ta
```
  
  
  
  Document


  
```
  5
  Có vẻ ổn, nhưng chữ viết tắt
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  07 tạo ra cách cũ trong HTML để xác định
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  02 và
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  09 tạo ra hai điểm dừng tab mà tôi không cần vì tôi không bao giờ sử dụng cài đặt khác cho
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  04
  Hãy ghi đè lên những đoạn trích này trước khi chúng ta tiếp tục
```
  
  
  
  Document


  
```
  6
  Cuối cùng nhưng không kém phần quan trọng, phần tử
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  11, một
  8 với văn bản mặc định, theo sau là dấu tab cuối cùng
```
  
  
  
  Document


  
```
  7
  Bản mẫu cuối cùng
```
  
  
  
  Document


  
```
  8
  Đối với tôi, đó là thiết lập sửa lỗi tối thiểu hoàn hảo
  nồi hơi trung bình
  Mặc dù tôi chỉ sử dụng bản soạn sẵn đầu tiên cho các bản trình diễn nhanh, nhưng bản soạn sẵn thứ hai có thể được sử dụng cho các trang phức tạp. Đoạn mã tạo ra như sau
  - Cấu trúc trang web cơ bản,
  - Thẻ meta
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    04,
  - Tiêu đề trang,
  - Lớp học
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    14/
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    15,
  - Màn hình bên ngoài và biểu định kiểu in,
  - Thẻ meta
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    16 và
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    17,
  - cấu trúc trang
```
  
  
  
  Document


  
```
  9
  Vâng, tôi biết, điều đó có vẻ vô nghĩa. Hãy mổ xẻ nó
  Phá vỡ
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  18 và phần tử gốc giống như trong ví dụ đầu tiên, nhưng có thêm lớp
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  19 và nhận xét nhắc tôi thay đổi thuộc tính
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  08, nếu cần
```
{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}
```
  0
  Tiện ích TODO Highlight làm cho nhận xét thực sự nổi bật
```
{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}
```
  5 bao gồm thẻ meta
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  02, thẻ meta
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  04,
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  04.
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  06 tạo một dòng mới
```
{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}
```
  1
  Một tập lệnh có một dòng JavaScript. Tôi đang cắt mù tạt ở phần hỗ trợ mô-đun JS. Nếu một trình duyệt hỗ trợ các mô-đun JavaScript, điều đó có nghĩa là trình duyệt đó hỗ trợ JavaScript hiện đại [e. g. mô-đun, cú pháp ES 6, tìm nạp, v.v.]. Tôi chỉ gửi hầu hết JS cho các trình duyệt này và tôi sử dụng lớp
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  26 trong CSS, nếu kiểu dáng của một thành phần khác, khi JavaScript đang hoạt động
```
{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}
```
  2
  Hai phần tử
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  27;
```
{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}
```
  3
  Mô tả trang
```
{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}
```
  4
  Thẻ meta
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
  17
```
{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}
```
  5
  Phần tử nội dung và cấu trúc trang cơ bản
```
{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}
```
  6
  Bản tóm tắt cuối cùng trông như thế này
```
{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}
```
  7
  đầy đủ nồi hơi
  Bản mẫu đầy đủ tương tự như bản mẫu thứ hai;
  Đoạn mã tạo ra như sau
  - Cấu trúc trang web cơ bản,
  - Thẻ meta
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    04,
  - Tiêu đề trang,
  - Lớp học
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    26/
```
{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}
```
    19,
  - Màn hình bên ngoài và biểu định kiểu in,
  - ```
  {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
```
  16 và mở các thẻ meta biểu đồ,
- Thẻ meta
```
  {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
```
  17,
- thẻ
```
  {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
```
  27 chuẩn,
- thẻ yêu thích,
- Cấu trúc trang,
- Bảng lệnh

Chọn Cài đặt gói bằng cách tìm kiếm "cài đặt"

Một lần nữa cửa sổ mới mở ra gõ "Emmet" và chọn cái đầu tiên

Thế là xong Mã hóa Zen mới [ Emmet ] được kích hoạt trong Sublime Text 3 của bạn

Toplist mới

Top 6 bản thân em phải làm gì để phòng chống hiv/aids 2023

7 tháng trước

Top 7 số 20 gồm 2 và 0 đúng hay sai 2023

7 tháng trước

Top 7 địa lý lớp 6 bài 19: lớp đất và các nhân tố hình thành đất một số nhóm đất điển hình trang 178 2023

7 tháng trước

Top 7 h thực hiện chủ trương đường lối chính sách của đảng pháp luật của nhà nước 2023

7 tháng trước

Top 6 on tập tiếng việt lớp 7 học kĩ 2 violet 2023

7 tháng trước

Bản tin email

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

Phá vỡ

dẫn đường

Phá vỡ

Phá vỡ

nồi hơi nhỏ

Phá vỡ

nồi hơi trung bình

Phá vỡ

đầy đủ nồi hơi

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề