Thuộc tính "dữ liệu-url" và "khóa dữ liệu" của thẻ <a> là gì?

Question

Tôi đã gặp hai thuộc tính lạ của thẻ html . Chúng là "data-url" và "khóa dữ liệu".

Chúng là gì và chúng có thể được sử dụng như thế nào?

Đối với một số lý do tôi không thể hiển thị ví dụ chính xác của tập tin HTML tôi đã tìm thấy chúng trong, nhưng đây là một số ví dụ từ trang web với các thẻ như:

1. data-key
2. data-key
3. data-url

PS: tôi đã cố gắng để Google, nhưng không có kết quả hữu ích đã được tìm thấy.

Answer 1

Khi tôi nên sử dụng các dữ liệu thuộc tính?

Thuộc tính dữ liệu tùy chỉnh nhằm lưu trữ dữ liệu tùy chỉnh riêng tư cho trang hoặc ứng dụng, không có thuộc tính hoặc yếu tố thích hợp hơn.

---

Lần này thuộc tính dữ liệu được sử dụng để chỉ ra giá trị bong bóng của bong bóng thông báo.

<a href="#" class="pink" data-bubble="2">Profile</a> 

thời gian này được sử dụng để hiển thị các văn bản cho các tooltip.

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a> 

---

Khi tôi không nên sử dụng các dữ liệu thuộc tính?

Chúng tôi không nên sử dụng thuộc tính dữ liệu cho bất kỳ nội dung nào đã có thuộc tính đã được thiết lập hoặc phù hợp hơn. Ví dụ nó sẽ là không thích hợp để sử dụng:

<span data-time="20:00">8pm<span> 

khi chúng ta có thể sử dụng thuộc tính đã được xác định datetime trong một yếu tố thời gian như dưới đây:

<time datetime="20:00">8pm</time> 

---

Sử dụng dữ liệu thuộc tính Với CSS (Attribute selectors)

[data-role="page"] { 
    /* Styles */ 
} 

---

Sử dụng dữ liệu thuộc tính Với jQuery (.attr())

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a> 

-

$('.button').click(function(e) { 
    e.preventDefault(); 
    thisdata = $(this).attr('data-info'); 
    console.log(thisdata); 
}); 

Các ví dụ và thông tin từ here

Answer 2

data-* attributes là để thêm dữ liệu tùy ý vào một phần tử chỉ được sử dụng bởi mã (thường là JavaScript phía máy khách) đang chạy trên trang web lưu trữ HTML.

Để biết ba ví dụ bạn đưa ra là gì, chúng tôi sẽ phải đảo ngược kỹ thuật mã đi kèm với chúng (trừ khi chúng được ghi trên trang web) vì chúng không có ý nghĩa tiêu chuẩn.

Answer 3

Chúng được gọi là HTML5 Custom Data attributes.

Tuỳ chỉnh dữ liệu thuộc tính được dành để lưu trữ dữ liệu tùy chỉnh riêng đến trang hoặc ứng dụng, mà không có thích hợp thuộc tính hoặc các yếu tố hơn. Các thuộc tính này không nhằm mục đích sử dụng bởi phần mềm độc lập với trang web sử dụng các thuộc tính. Mỗi phần tử HTML có thể có bất kỳ số thuộc tính dữ liệu tùy chỉnh nào được chỉ định , với bất kỳ giá trị nào.

Lý do bạn không thể tìm thấy nó trong Google là vì những thuộc tính đó là thuộc tính tùy chỉnh được tạo bởi người dùng để sử dụng riêng.

Từ nhìn thấy mã của bạn có vẻ như:

• Người viết mã này, muốn để lưu trữ một số thông tin bổ sung với các yếu tố. Không chắc chắn anh ấy có thể xử lý điều này trong số Javascript nữa.

• Những gì bạn cần làm là kiểm tra mã Javascript hoàn toàn, cho dù ông là xử lý những dữ liệu thuộc tính hoặc nếu có thể kiểm tra với anh ta.

• Vì mã của bạn đang sử dụng thư viện jQuery, hãy kiểm tra phương thức .data() . Sau khi xem xét mã hoàn chỉnh, nếu bạn thấy nó không sử dụng, thì hãy xóa.

Answer 4

Tính năng mới được giới thiệu trong HTML 5 là việc bổ sung các thuộc tính dữ liệu tùy chỉnh. Đơn giản, đặc tả cho thuộc tính dữ liệu tùy chỉnh nói rằng bất kỳ thuộc tính nào bắt đầu bằng “data-” sẽ được coi là vùng lưu trữ cho dữ liệu cá nhân (riêng theo nghĩa là người dùng cuối không thể nhìn thấy nó - nó không ảnh hưởng đến bố cục hoặc bản trình bày). Điều này cho phép bạn viết đánh dấu HTML hợp lệ (đi qua trình xác thực HTML 5) trong khi, đồng thời, nhúng dữ liệu vào trong trang của bạn. Một ví dụ nhanh:

<li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b> <span>Hello, how are you?</span> </li>