Các phần tử dữ liệu trong HTML là gì?

Thẻ HTML được sử dụng để cung cấp phiên bản nội dung của chính nó có thể đọc được bằng máy. Điều này có thể hữu ích trong trường hợp dữ liệu của bạn cần ở một định dạng nhất định vì nó có thể được xử lý bởi một tập lệnh, nhưng đây có thể không phải là định dạng mà bạn muốn người dùng của mình nhìn thấy

Ví dụ: bạn có thể muốn hiển thị số cho người dùng của mình được viết bằng chữ cái (ví dụ: Một, Hai, Ba. v.v.), nhưng bạn cũng có thể có một tập lệnh sắp xếp các số theo thứ tự tăng dần hoặc giảm dần. Tập lệnh như vậy có thể yêu cầu các số được cung cấp dưới dạng số (ví dụ: 1, 2, 3. v.v.) thay vào đó. Thẻ cho phép bạn khắc phục điều này bằng cách cung cấp hai số - một cho người dùng (được cung cấp trong các thẻ ) và một cho tập lệnh (được cung cấp trong thuộc tính value). Điều này có thể trông giống như. One

Sử dụng một ví dụ khác, bạn có thể muốn hiển thị danh sách các sản phẩm để người dùng của mình lựa chọn. Mỗi sản phẩm có một ID sản phẩm duy nhất. Vì ID sản phẩm là một số dài nên nó không thân thiện với người dùng (tôi. e. người dùng có thể sẽ không biết sản phẩm là gì chỉ bằng cách nhìn vào ID của nó). Do đó, bạn đặt ID sản phẩm vào thuộc tính value của phần tử . Sau đó, bạn hiển thị tiêu đề sản phẩm cho người dùng

Lưu ý rằng nếu giá trị liên quan đến ngày hoặc giờ, hãy sử dụng thẻ để thay thế

Thí dụ

Ví dụ này hiển thị danh sách sách. Người dùng nhìn thấy tên sách thực tế (được cung cấp giữa các thẻ ). ID sản phẩm được cung cấp bởi thuộc tính value

Mặc dù ví dụ này không xử lý dữ liệu được cung cấp trong thẻ , nhưng nó minh họa cách thẻ có thể được sử dụng trong tài liệu HTML5

Chạy

Xem trước trình chỉnh sửa

Thuộc tính

Các thẻ HTML có thể chứa một hoặc nhiều thuộc tính. Các thuộc tính được thêm vào thẻ để cung cấp cho trình duyệt thêm thông tin về cách thẻ sẽ xuất hiện hoặc hoạt động. Các thuộc tính bao gồm tên và giá trị được phân tách bằng dấu bằng (=), với giá trị được bao quanh bởi dấu ngoặc kép. Đây là một ví dụ, 2

Có 3 loại thuộc tính mà bạn có thể thêm vào thẻ HTML của mình. Thuộc tính nội dung trình xử lý sự kiện, toàn cầu và phần tử cụ thể

Các thuộc tính mà bạn có thể thêm vào thẻ này được liệt kê bên dưới

Thuộc tính cụ thể của phần tử

Bảng sau đây hiển thị các thuộc tính dành riêng cho thẻ/phần tử này

AttributeDescriptionvalueCung cấp phiên bản nội dung của phần tử mà máy có thể đọc được. Thuộc tính bắt buộc

Thuộc tính toàn cầu

Các thuộc tính sau là tiêu chuẩn trên tất cả các thẻ HTML 5 (mặc dù thuộc tính 3 không áp dụng cho các phần tử 4)

• 5
• 6
• 7
• 8
• 9
• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• value0
• value1
• value2
• value3
• value4
• value5
• 3
• value7
• value8

Để có giải thích đầy đủ về các thuộc tính này, hãy xem thuộc tính toàn cầu HTML 5

Thuộc tính nội dung xử lý sự kiện

Các thuộc tính nội dung của trình xử lý sự kiện cho phép bạn gọi một tập lệnh từ bên trong HTML của mình. Tập lệnh được gọi khi một "sự kiện" nhất định xảy ra. Mỗi thuộc tính nội dung xử lý sự kiện xử lý một sự kiện khác nhau

Dữ liệu này không hiển thị với người dùng nhưng thường được JavaScript sử dụng để cải thiện trải nghiệm người dùng của trang web

Ba mặt hàng trong danh sách (trái cây) có đính kèm dữ liệu data-id và data-price tùy chỉnh

  
Bananas
  
Oranges
  
Apples

Hãy thử trực tiếp

Ghi chú. Các thuộc tính data-* không hiển thị với người dùng

---

Thuộc tính data-* thêm các giá trị tùy chỉnh vào phần tử HTML

Phần * được thay thế bằng một chuỗi chữ thường, chẳng hạn như data-id,

1 hoặc

2

Một phần tử có thể có bất kỳ số lượng thuộc tính data-* nào, mỗi thuộc tính có tên riêng

Các thuộc tính này lưu trữ dữ liệu bổ sung về một phần tử (e. g. id, bán theo ngày, biến thể, v.v. )

Dữ liệu thường được JavaScript sử dụng để cải thiện trải nghiệm người dùng của trang web

Mẹo. Thuộc tính data-* là thuộc tính toàn cầu có thể được áp dụng cho bất kỳ phần tử HTML nào

Mẹo. Mặc dù người dùng không thể nhìn thấy các thuộc tính data-* nhưng giá trị của chúng vẫn có trong tài liệu
Vì lý do này, không bao gồm các giá trị dữ liệu nhạy cảm

---

ValueDescription*Một chuỗi chữ thường dài ít nhất 1 ký tự, chẳng hạn như id, parent, cost, status, v.v. valueString đại diện cho giá trị của thuộc tính dữ liệu tùy chỉnh. Có thể là bất kỳ chuỗi chữ và số nào, bao gồm JSON hoặc HTML

---

Bốn thẻ có thuộc tính

6 tùy chỉnh
Nhấp vào một thành phố sẽ hiển thị quốc gia của nó

  Amsterdam 

  Brussels 

  Paris 

  Madrid 

Hãy thử trực tiếp

giải thích mã

Bốn liên kết được tạo bằng thẻ

Mỗi người có một thuộc tính

6 tùy chỉnh với tên quốc gia

Nhấp chuột được xử lý bởi sự kiện

8

Onclick gọi một hàm JavaScript trích xuất và hiển thị quốc gia

---

Truy cập các thuộc tính data-* bằng JavaScript

JavaScript có thể truy cập các giá trị thuộc tính data-* theo hai cách

1. với phương pháp
   9
2. với thuộc tính

   
     Amsterdam 
   
     Brussels 
   
     Paris 
   
     Madrid 
   
   
   
   
   

   0 (là một DOMStringMap)

Trong ví dụ bên dưới, nhấp vào hai liên kết đầu tiên sẽ gọi phương thức

9
Và nhấp vào hai liên kết cuối cùng sử dụng thuộc tính

  Amsterdam 

  Brussels 

  Paris 

  Madrid 

0 đơn giản hơn

  1. Amsterdam 

  1. Brussels 

  2. Paris 

  2. Madrid 

Hãy thử trực tiếp

Khi truy cập vào một

  Amsterdam 

  Brussels 

  Paris 

  Madrid 

0, bạn bỏ tiền tố data-
Trong ví dụ trên, thuộc tính là

6 và thuộc tính là

  Amsterdam 

  Brussels 

  Paris 

  Madrid 

5

Tên thuộc tính trên

  Amsterdam 

  Brussels 

  Paris 

  Madrid 

0 là tên lạc đà không có dấu gạch ngang
Ví dụ,

  Amsterdam 

  Brussels 

  Paris 

  Madrid 

7 được truy vấn là

  Amsterdam 

  Brussels 

  Paris 

  Madrid 

8

---

Thuộc tính data-* chấp nhận mọi giá trị chuỗi

Thuộc tính data-* chấp nhận chuỗi, số, boolean, số thập phân -- tất cả được coi là giá trị chuỗi

Thuộc tính data-* cũng chấp nhận JSON miễn là dấu ngoặc kép và ký tự đặc biệt được xử lý chính xác

Ví dụ về phần tử dữ liệu là gì?

Làm cách nào để sử dụng phần tử dữ liệu trong HTML?

Các yếu tố dữ liệu trong mã hóa là gì?

Các kiểu dữ liệu trong HTML là gì?