Mã HTML

Các ký hiệu tài liệu cũng có sẵn cho HTML, cho phép bạn nhanh chóng điều hướng đến các nút DOM theo id và tên lớp

Bạn cũng có thể làm việc với CSS và JavaScript nhúng. Tuy nhiên, lưu ý rằng tập lệnh và kiểu bao gồm từ các tệp khác không được tuân theo, hỗ trợ ngôn ngữ chỉ xem nội dung của tệp HTML

Bạn có thể kích hoạt đề xuất bất kỳ lúc nào bằng cách nhấn ⌃Dấu cách (Windows, Linux Ctrl+Dấu cách . ).

Bạn cũng có thể kiểm soát nhà cung cấp dịch vụ hoàn thành mã tích hợp nào đang hoạt động. Ghi đè những điều này trong cài đặt người dùng hoặc không gian làm việc của bạn nếu bạn không muốn xem các đề xuất tương ứng

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true

Đóng thẻ

Các phần tử của thẻ tự động đóng khi ________ 39 _______ của thẻ mở được gõ

Thẻ đóng phù hợp được chèn khi / của thẻ đóng được nhập

Bạn có thể tắt thẻ tự động đóng bằng cài đặt sau

"html.autoClosingTags": false

Tự động cập nhật thẻ

Khi sửa đổi thẻ, tính năng chỉnh sửa được liên kết sẽ tự động cập nhật thẻ đóng phù hợp. Tính năng này là tùy chọn và có thể được kích hoạt bằng cách cài đặt

"editor.linkedEditing": true

Bộ chọn màu

Giao diện người dùng bộ chọn màu Mã VS hiện có sẵn trong các phần kiểu HTML

Nó hỗ trợ cấu hình màu sắc, độ bão hòa và độ mờ cho màu được chọn từ trình chỉnh sửa. Nó cũng cung cấp khả năng kích hoạt giữa các chế độ màu khác nhau bằng cách nhấp vào chuỗi màu ở đầu bộ chọn. Bộ chọn xuất hiện khi bạn di chuột qua một định nghĩa màu

Bay lượn

Di chuột qua các thẻ HTML hoặc các kiểu được nhúng và JavaScript để có thêm thông tin về biểu tượng bên dưới con trỏ

Thẩm định

Hỗ trợ ngôn ngữ HTML thực hiện xác thực trên tất cả JavaScript và CSS được nhúng

Bạn có thể tắt xác thực đó bằng các cài đặt sau

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

gấp

Bạn có thể gấp các vùng của mã nguồn bằng cách sử dụng các biểu tượng gấp trên rãnh giữa số dòng và bắt đầu dòng. Vùng gấp có sẵn cho tất cả các thành phần HTML cho nhận xét nhiều dòng trong mã nguồn

Ngoài ra, bạn có thể sử dụng các điểm đánh dấu vùng sau để xác định vùng gấp. và

"html.autoClosingTags": false

Nếu bạn muốn chuyển sang chế độ gấp dựa trên thụt đầu dòng để sử dụng HTML

"[html]": {
    "editor.foldingStrategy": "indentation"
},

định dạng

Để cải thiện định dạng mã nguồn HTML của bạn, bạn có thể sử dụng lệnh Định dạng tài liệu ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I) to format the entire file or Format Selection ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F) to just format the selected text.

Trình định dạng HTML dựa trên js-beautify. Các tùy chọn định dạng do thư viện đó cung cấp được hiển thị trong cài đặt Mã VS

• "html.autoClosingTags": false
  

  1. Số ký tự tối đa trên mỗi dòng

• "html.autoClosingTags": false
  

  2. Danh sách các thẻ không nên định dạng lại

• "html.autoClosingTags": false
  

  3. Danh sách các thẻ, được phân tách bằng dấu phẩy, không nên định dạng lại nội dung

• "html.autoClosingTags": false
  

  4. Danh sách các thẻ nên có thêm một dòng mới trước chúng

• "html.autoClosingTags": false
  

  5. Có nên giữ nguyên các ngắt dòng hiện có trước các phần tử hay không

• "html.autoClosingTags": false
  

  6. Số lượng ngắt dòng tối đa được giữ nguyên trong một đoạn

• "html.autoClosingTags": false
  

  7. Thụt lề các phần

  "html.autoClosingTags": false
  

  8 và

  "html.autoClosingTags": false
  

  9

• "editor.linkedEditing": true
  

  0. Chiến lược gói cho các thuộc tính

  • "editor.linkedEditing": true
    

    1. Quấn khi vượt quá chiều dài dòng

  • "editor.linkedEditing": true
    

    2. Bọc tất cả các thuộc tính, ngoại trừ đầu tiên

  • "editor.linkedEditing": true
    

    3. Bọc tất cả các thuộc tính, ngoại trừ thuộc tính đầu tiên và căn chỉnh các thuộc tính

  • "editor.linkedEditing": true
    

    4. Bọc tất cả các thuộc tính

  • "editor.linkedEditing": true
    

    5. Ngắt dòng khi vượt quá độ dài dòng, căn chỉnh thuộc tính theo chiều dọc

  • "editor.linkedEditing": true
    

    6. Giữ nguyên gói thuộc tính

  • "editor.linkedEditing": true
    

    7. Giữ nguyên gói thuộc tính nhưng căn chỉnh

• "editor.linkedEditing": true
  

  8. Kích thước căn chỉnh khi sử dụng

  "editor.linkedEditing": true
  

  9 và

  // Configures if the built-in HTML language support validates embedded scripts.
  "html.validate.scripts": true,
  
  // Configures if the built-in HTML language support validates embedded styles.
  "html.validate.styles": true
  

  0 trong

  "editor.linkedEditing": true
  

  0 hoặc

  // Configures if the built-in HTML language support validates embedded scripts.
  "html.validate.scripts": true,
  
  // Configures if the built-in HTML language support validates embedded styles.
  "html.validate.styles": true
  

  2 để sử dụng kích thước thụt lề mặc định

• // Configures if the built-in HTML language support validates embedded scripts.
  "html.validate.scripts": true,
  
  // Configures if the built-in HTML language support validates embedded styles.
  "html.validate.styles": true
  

  3. Tôn vinh các thẻ ngôn ngữ tạo khuôn mẫu django, erb, tay lái và php

• // Configures if the built-in HTML language support validates embedded scripts.
  "html.validate.scripts": true,
  
  // Configures if the built-in HTML language support validates embedded styles.
  "html.validate.styles": true
  

  4. Giữ nội dung văn bản với nhau giữa chuỗi này

Mẹo. Trình định dạng không định dạng các thẻ được liệt kê trong cài đặt

"html.autoClosingTags": false

2 và

"html.autoClosingTags": false

3. JavaScript nhúng được định dạng trừ khi thẻ 'script' bị loại trừ

Thị trường có một số trình định dạng thay thế để lựa chọn. Nếu bạn muốn sử dụng một trình định dạng khác, hãy xác định

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

đoạn trích Emmet

Mã VS hỗ trợ mở rộng đoạn mã Emmet. Các từ viết tắt của Emmet được liệt kê cùng với các đề xuất và đoạn trích khác trong danh sách tự động hoàn thành của trình chỉnh sửa

Mẹo. Xem phần HTML của bảng cheat Emmet để biết các từ viết tắt hợp lệ

Nếu bạn muốn sử dụng các từ viết tắt HTML Emmet với các ngôn ngữ khác, bạn có thể kết hợp một trong các chế độ Emmet (chẳng hạn như

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

"[html]": {
    "editor.foldingStrategy": "indentation"
},

Ví dụ: để sử dụng các từ viết tắt Emmet HTML bên trong JavaScript

{
  "emmet.includeLanguages": {
    "javascript": "html"
  }
}

Chúng tôi cũng hỗ trợ Đoạn mã do người dùng xác định

Dữ liệu tùy chỉnh HTML

Bạn có thể mở rộng hỗ trợ HTML của VS Code thông qua định dạng dữ liệu tùy chỉnh khai báo. Bằng cách đặt

"[html]": {
    "editor.foldingStrategy": "indentation"
},

Bạn có thể đọc thêm về cách sử dụng dữ liệu tùy chỉnh trong kho vscode-custom-data

tiện ích mở rộng HTML

Cài đặt tiện ích mở rộng để thêm nhiều chức năng hơn. Chuyển đến chế độ xem Tiện ích mở rộng ( ⇧⌘X (Windows, Linux Ctrl+Shift+X)) and type 'html' to see a list of relevant extensions to help with creating and editing HTML.

Mẹo. Nhấp vào ô tiện ích mở rộng ở trên để đọc mô tả và đánh giá để quyết định tiện ích mở rộng nào phù hợp nhất với bạn. Xem thêm trên Marketplace

Mã hóa HTML là gì?

HTML ( Ngôn ngữ đánh dấu siêu văn bản ) là mã được sử dụng để cấu trúc trang web và nội dung của trang web. Ví dụ: nội dung có thể được cấu trúc trong một tập hợp các đoạn văn, danh sách các dấu đầu dòng hoặc sử dụng hình ảnh và bảng dữ liệu.

Làm thế nào để viết mã ví dụ trong HTML?

Bạn có thể bao gồm các ví dụ về mã trong HTML của mình bằng cách sử dụng thẻ . Điều này tự động sử dụng một phông chữ đơn cách và cũng gắn nhãn ngữ nghĩa cho mã của chúng tôi như nó là.

Mã HTML được viết như thế nào?

Thẻ HTML được viết bên trong dấu ngoặc nhọn và có xu hướng đi theo cặp —vì vậy, chúng bao gồm cả thẻ mở và thẻ đóng. Ví dụ: thẻ

Các mã cơ bản của HTML là gì?

HTML cơ bản