HTML5是一種用于創建網頁的標記語言，它提供了許多新的特性和功能，其中之一就是data屬性。data屬性可以用于存儲自定義數據，這些數據可以被CSS和JavaScript使用。

<div data-role="container" data-text="hello world"></div>

在上面的示例中，我們定義了一個div標簽，并使用data-role和data-text屬性來存儲自定義數據。這些數據可以在CSS中使用，也可以在JavaScript中使用。

div[data-role="container"] {
background-color: #f2f2f2;
}
var myDiv = document.querySelector('div[data-role="container"]');
var text = myDiv.dataset.text;
console.log(text); // 輸出 "hello world"

在以上代碼中，我們使用CSS選擇器來選擇所有帶有data-role屬性為“container”的div元素，并設置這些元素的背景顏色。在JavaScript中，我們使用dataset屬性來獲取存儲在data屬性中的值。

除了使用data屬性，我們還可以使用data-*屬性來存儲自定義數據。在這種情況下，'*'可以替換為任何自定義名稱。

<div data-role="container" data-text="hello world" data-custom-data="1234"></div>

在上面的示例中，我們使用data-custom-data屬性來存儲自定義數據。這些數據可以在CSS中使用，也可以在JavaScript中使用，方法與使用data屬性存儲自定義數據相同。

總之，HTML5的data屬性為我們提供了一個方便的方式來存儲自定義數據，并能夠輕松地在CSS和JavaScript中使用它們。使用data屬性，我們可以為網頁和網頁元素添加更多的信息和功能。