ROLE HTML LÀ GÌ

     
post-promotion-placement#checkSidebarAdDisplayCondition" data-controller="scroll-position sticky-ad post-promotion-placement ">
*
Aaron Lumsden Nov 29, 2012
Read Time: 10 mins url-selector#selectionChanged"> English Español Bahasa Indonesia Português giờ Việt

Thuộc tính data vào HTML5 chất nhận được bạn gán dữ liệu tuỳ trở thành cho một trong những phần tử. Nội dung bài viết này sẽ để ý cách áp dụng nó và cung cấp các lấy ví dụ như về ngôi trường hợp sử dụng lý tưởng nhất.

Bạn đang xem: Role html là gì

Giới thiệu

Trước HTML5, bọn họ đã phải nhờ vào việc sử dụng những thuộc tính "class" hoặc "rel" nhằm lưu trữ những đoạn dữ liệu nhỏ tuổi mà bạn có thể sử dụng trong số trang web của bọn chúng ta. Điều này đôi lúc dẫn đến những vấn đề và có thể gây ra xung bỗng giữa phong thái và tác dụng của trang web. Sự xuất hiện của HTML5 đã reviews một trực thuộc tính bắt đầu được call là "data". Trong bài viết này, tôi đã xem xét một số trong những ví dụ về phong thái sử dụng ở trong tính này cũng giống như nó nên được sử dụng ra làm sao cho hòa hợp lý.

Vì các trang web đang cất dữ liệu nhiều hơn nữa và giống một áp dụng hơn, buộc phải chúng ban đầu nắm giữ dữ liệu nhiều hơn thế nữa về các thành phần cụ thể. Mang ví dụ, nếu bọn họ đang tạo nên một ứng dụng về âm thanh. Bạn cũng có thể có mã tiến công dấu chuẩn chỉnh như sau:

những mã lưu lại ở bên trên là hoàn toàn đồng ý được, cơ mà đôi khi chúng ta cũng có thể muốn lưu lại trữ những thông tin thêm về từng phiên bản nhạc thay vì chỉ nguồn. Ví dụ, chúng ta cũng có thể muốn chỉ định các thông tin ví dụ khác về phiên bản nhạc như thời lượng, nhiệp điệu với nghệ sĩ. Chúng ta có thể làm điều này bằng phương pháp gán những thuộc tính data tuỳ trở thành vào mỗi nguồn âm thanh chẳng hạn như:

bằng cách cung cấp các thuộc tính data tuỳ biến, bạn có thể sau đó thực hiện các tác vụ như tìm kiếm kiếm, lọc tốt nhóm chúng trong vận dụng của họ theo thời gian, nhịp độ hoặc nghệ sĩ bằng cách sử dụng các giá trị liên quan của chúng.

Cách sử dụng thuộc tính Data

Tên của một nằm trong tính data phải bắt đầu với chuỗi "data-" và phải có tối thiểu một ký kết tự sau vệt gạch nối sử dụng bất kỳ quy ước đặt thương hiệu của HTML.

Đặc tả của W3C mang đến thuộc tính data tuyên bố rằng:

Thuộc tính data tuỳ biến nhằm mục tiêu mục đích tàng trữ dữ liệu tùy phát triển thành riêng cho trang web hoặc ứng dụng, mà đối với chúng không có thuộc tính hay bộ phận nào phù hợp hơn.

Điều này còn có nghĩa rằng chúng ta chỉ yêu cầu sử dụng tài liệu đó trong nội bộ vận dụng của chúng ta và nó tránh việc được áp dụng để hiển thị các thông tin cho tất cả những người dùng. Điều đặc biệt cũng đề xuất phải xem xét là chúng ta cũng có thể chỉ định bất kỳ số lượng các thuộc tính tuỳ trở thành nào cho một trong những phần tử với ngẫu nhiên giá trị như thế nào mà bạn muốn.

Khi làm sao tôi nên sử dụng thuộc tính Data?

Chúng ta đã để ý cách chúng ta cũng có thể sử dụng thuộc tính data, cơ mà không vày vậy mà chúng ta đã thật sự hiểu rõ về nó, hãy xem một vài lấy ví dụ khác.

May mắn núm giaynamdavinci.comtuts+ đã khái quát một trong những hướng dẫn cụ thể trong một số trong những trường hợp thực hiện tốt. Giữa những hướng dẫn xem xét cách bạn có thể sử dụng bọn chúng để định phong cách và hiển thị những menu thông báo bằng phương pháp gán thành phần thông báo trong một thẻ liên kết. Lần này, nằm trong tính data được sử dụng để chỉ ra giá trị bong bóng ở trong sạn bong bóng thông báo.

Profile trong một hướng dẫn nhanh khác bọn họ cũng có thể thấy giải pháp nó được thực hiện như 1 phần của mã đánh dấu cho một tooltip

This is the liên kết Lần này được sử dụng để hiển thị văn phiên bản cho tooltip.

Khi nào tôi không nên sử dụng thuộc tính Data?

Chúng ta tránh việc sử dụng nằm trong tính data cho bất kể điều gì mà lại đã gồm sẵn một trực thuộc tính được xác lập hoặc phù hợp hơn. Ví dụ: nó đã không cân xứng để sử dụng:

8pm Khi bạn cũng có thể sử dụng thuộc tính datetime vẫn được xác định trong 1 phần tử time như bên dưới đây:

8pm ở trong tính data không nên được thực hiện như là 1 sự thay thế sửa chữa cho meta data hoặc những định dạng vi mô. Những định dạng vi mô được thiết kế chủ yếu cho con fan và được ra mắt để hỗ trợ cho họ ngữ cảnh của mã tiến công dấu. Ví dụ: nếu như bạn có một Vcard báo tin liên lạc về một cá thể hoặc tổ chức triển khai thì bạn sẽ cung cấp cho cho nó một tờ "vcard" làm cho máy tính hiểu rằng đây là thông tin liên lạc.

Sử dụng format vi mô các bạn nên sử dụng mã tấn công dấu của bạn như sau


Để tham khảo thêm về những định dạng vi mô bạn có thể ghé thăm trang Mircorformats.org.

Sử dụng nằm trong tính Data cùng với CSS

Một khi bọn họ đã setup các nằm trong tính data phía bên trong mã khắc ghi HTML, thì bạn cũng có thể chọn chúng bằng phương pháp sử dụng CSS. Điều quan trọng đặc biệt cần lưu ý là bạn tránh việc sử dụng các thuộc tính data thẳng cho việc định phong cách, tuy vậy trong một số trong những trường hợp, nó hoàn toàn có thể thích hợp. Lựa chọn theo trực thuộc tính data vào CSS giống như như lựa chọn theo những thuộc tính khác, bạn cũng có thể sử dụng chúng chỉ dễ dàng và đơn giản như nỗ lực này:

/* Styles */ trường hợp ví dụ nhiều người đang tạo một website hoặc vận dụng đa nền tảng thì chúng ta có thể muốn lựa chọn 1 số nội dung cụ thể mà bạn nên làm xem trên điện thoại di động. Mang ví dụ mã lưu lại sau đây


bằng cách sử dụng CSS sau đó chúng ta có thể ẩn toàn bộ các trang chỉ giành riêng cho điện thoại di động cầm tay khi được xem như trên một laptop để bàn.

div display:none; tuy vậy nó không nên ẩn nội dung dựa trên thiết bị sẽ xem, nhưng rất có thể có một số trường vừa lòng nó là phù hợp. Chúng ta nên dựa trên từng hoàn cảnh và các trường hợp riêng.

Cũng hoàn toàn có thể sử dụng tài liệu từ nằm trong tính với hiển thị nó qua CSS. Mặc dù đặc tả nghệ thuật nói rằng bạn không nên sử dụng dữ liệu từ những thuộc tính tùy phát triển thành để hiển thị cho những người dùng của chúng ta nhưng nó rất có thể được thực hiện, cùng trong một trong những trường hợp gồm thể chứng minh là phương pháp tốt nhất. Đây là phương pháp để đạt được điều này.


​ vào CSS các bạn sẽ sử dụng thành phần giả ":after " (hoặc một trong những nội dung khác được sinh sản ra) và thực hiện thuộc tính như là một trong những phần content của "after" như sau:

.test display: inline-block;.test:after content: attr(data-content); Điều này kế tiếp sẽ hiển thị "This is the div content" trong div ".text".

Sử dụng ở trong tính Data cùng với jQuery

Bây giờ họ đã lưu ý cách bạn cũng có thể chọn các thành phần với trực thuộc tính data bằng cách sử dụng CSS, hãy xem cách bạn cũng có thể có sở hữu dữ liệu đó bằng phương pháp sử dụng jQuery.

Xem thêm: New Liên Quân Mùa 20 - Tổng Hợp Những Cái Nhất Trong Liên Quân Mùa 20

Lưu ý: Xử lý tài liệu vượt thoát ra khỏi phạm vi của giải đáp này, vì hướng dẫn này đặc biệt nhắm vào các nhà cải cách và phát triển và nhà xây đắp front-end.

Có một số trong những cách để bạn cũng có thể lấy được dữ liệu từ những phần tử bằng phương pháp sử dụng jQuery. Hãy xem xét một số trong những cách.

Google Nếu họ có một thẻ liên kết, hệt như ở trên, mà bao gồm một thuộc tính data là data-info, thì chúng ta có thể truy cập dữ liệu đó theo thuộc một bí quyết mà bọn họ sẽ lấy được giá trị từ ngẫu nhiên thuộc tính khác.

$(".button").click(function(e) e.preventDefault(); thisdata = $(this).attr("data-info"); console.log(thisdata); );Bạn có thể kiểm tra điều này bằng cách mở giao diện điều khiển và tinh chỉnh js vào Web Inspector của bạn, tiếp nối chọn liên kết...

Điều hoàn hảo về nằm trong tính data đó là chúng ta cũng hoàn toàn có thể sử dụng nó để cung cấp dữ liệu json như thế này.

bằng cách sử dụng jQuery, bạn cũng có thể lấy được tài liệu này sử dụng phương thức data của đối tượng người tiêu dùng jQuery.

$(".button").click(function(e) e.preventDefault(); thisdata = $("div").data("info").foo; console.log(thisdata); ); lấy ví dụ trên thì đang xuất "bar" lên console.

Trình để mắt tới hỗ trợ

Tôi biết rằng trước khi chúng ta trở đề nghị quá ham mong mỏi về việc sử dụng thuộc tính new này, thì các bạn sẽ muốn biết các trình duyệt cung cấp nó cùng khi nào chúng ta cũng có thể bắt đầu sử dụng nó. À, tin giỏi là nó cũng được hỗ trợ bởi tất cả các trình chú tâm hiện đại. Bất kể thứ gì có cung cấp HTML sẽ rất có thể truy cập nằm trong tính data. Nếu như khách hàng đang sử dụng thuộc tính cho mục đích định phong cách cũng tương tự truy cập tài liệu (sử dụng thận trọng) thì trình chú tâm sẽ đề nghị phải hỗ trợ CSS3 Selectors.

Tin tốt hơn là toàn bộ các trình thông qua (ngay cả IE7) cho phép bạn sử dụng thuộc tính data-* trên các phần tử và nếu bạn đang thực hiện jQuery 1.4 hoặc bắt đầu hơn thì bạn cũng có thể truy cập dữ liệu bằng cách sử dụng data của đối tượng người tiêu dùng jQuery. Mặc dù nhiên, nếu như khách hàng chỉ đang sử dụng JavaScript thì các bạn sẽ phải truy cập dữ liệu bằng cách sử dụng cách làm "getAttribute" của JavaScript.

Để dành được danh sách không thiếu thốn về trình coi sóc hỗ trợ chúng ta có thể truy cập canIuse.com.

Kết luận

Các trang và áp dụng web trở nên phức tạp hơn và bước đầu nắm giữ lại thêm tin tức và dữ liệu, ở trong tính new này chắc chắn rằng là một bổ sung đáng giá cho bộ lao lý của bạn. Tôi đã thực hiện nó trong một số trong những ví dụ thực tế và thấy nó là một trong những cách rất bổ ích để hỗ trợ một website (nhanh hơn) thỏa mãn nhu cầu tốt hơn, khi dữ liệu thay do kéo về từ các máy chủ thì bây giờ có thể được tạo thành trong các mã khắc ghi và được áp dụng khi nên thiết.

Tóm lại, nếu như khách hàng dính vào tía quy tắc sau, thì chúng ta có thể đảm bảo rằng bạn đang áp dụng thuộc tính mới theo cách hiệu quả nhất và ngữ nghĩa nhất.

Chỉ sử dụng nó cho nội bộ trên trang web/ứng dụng của bạn. Nó ko nên, ví dụ, được thực hiện một XML/RSS feed mang lại việc thực hiện trên những trang website hoặc vận dụng bên ngoài. Không áp dụng nó chỉ cho bài toán định phong cách CSS. Không áp dụng nó để sửa chữa thay thế một trực thuộc tính hiện có hoặc bộ phận mà đang thêm ngữ nghĩa hoặc là mê thích hợp.

Bây giờ thì chúng ta có một sự hiểu biết sâu rộng về nằm trong tính data trong HTML5 với làm cố nào nó có thể được sử dụng, tôi khích lệ bạn ban đầu thực hiện nay nó trong các dự án của khách hàng ngay hôm nay.

Xem thêm: " Go Through Nghĩa Là Gì - Go Through, Go Over, Go Ahead, Go Off Là Gì

Bạn đã sử dụng nó trong bất kỳ ví dụ thực tiễn nào chưa? chúng ta đã thực hiện nó trong những trường hòa hợp nào? Nó có giúp đỡ bạn tiết kiệm thời gian, hay những có bất kể điều gì mà bạn muốn nhìn thấy được không ngừng mở rộng trên thuộc tính này không? Hãy mang lại tôi biết trong phần phản hồi dưới phía trên nhé.