這篇文章將為大家詳細(xì)講解有關(guān)如何理解HTML5中的標(biāo)準(zhǔn)屬性與自定義屬性，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
創(chuàng)新互聯(lián)公司專注于焉耆網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供焉耆營(yíng)銷型網(wǎng)站建設(shè)，焉耆網(wǎng)站制作、焉耆網(wǎng)頁(yè)設(shè)計(jì)、焉耆網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造焉耆網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供焉耆網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
正如 HTML5 語(yǔ)法中所闡述的，元素可以包含屬性（attributes）給一個(gè)元素設(shè)置各種屬性（properties）。
有些屬性被定義為全局的，可以用在任何元素上，而其他的被定義為元素特有的。所有的屬性都有一個(gè)名稱和一個(gè)值，看起來(lái)如下面的示例所示。
下面是一個(gè)使用 HTML5 屬性的例子，演示了如何用名為 class 的屬性和值 “example” 標(biāo)記一個(gè) div 元素：
HTML5 屬性不區(qū)分大小寫，可以全部大寫或者混合使用，盡管最常見的約定是始終使用小寫。
標(biāo)準(zhǔn)屬性
下面列出的屬性幾乎所有的 HTML5 標(biāo)簽都支持。
| 屬性 | 選項(xiàng) | 功能 |
| accesskey | 用戶自定義 | 定義訪問元素的鍵盤快捷鍵。 |
| align | right, left, center | 水平對(duì)齊標(biāo)簽。 |
| background | URL | 在元素后面設(shè)置一個(gè)背景圖像。 |
| bgcolor | 數(shù)值，十六進(jìn)制值，RGB值 | 在元素后面設(shè)置一個(gè)背景顏色。 |
| class | 用戶定義。 | 分類一個(gè)元素，便于使用級(jí)聯(lián)樣式表。 |
| contenteditable | true, false | 定義用戶是否可以編輯元素的內(nèi)容。 |
| contextmenu | Menu id | 為元素定義上下文菜單。 |
| data-XXXX | 用戶定義。 | 自定義屬性。 HTML 文檔的作者可以定義自己的屬性。 自定義屬性必須以 "data-" 開頭。 |
| draggable | true,false, auto | 定義用戶是否可以拖動(dòng)元素。 |
| height | 數(shù)字值 | 定義表格，圖像或表格單元的高度。 |
| hidden | hidden | 定義元素是否應(yīng)該可見。 |
| id | 用戶定義。 | 命名元素，便于使用級(jí)聯(lián)樣式表。 |
| item | 元素列表。 | 用于組合元素。 |
| itemprop | 條目列表。 | 用于組合條目。 |
| spellcheck | true, false | 定義元素是否必須有拼寫或錯(cuò)誤檢查。 |
| style | CSS 樣式表。 | 給元素定義內(nèi)聯(lián)樣式。 |
| subject | 用戶定義 id。 | 定義元素關(guān)聯(lián)的條目。 |
| tabindex | Tab number | 定于元素的 tab 鍵順序。 |
| title | 用戶定義。 | 元素的“彈出”標(biāo)題。 |
| valign | top, middle, bottom | HTML 元素內(nèi)標(biāo)簽的垂直對(duì)齊方式。 |
| width | 數(shù)字值。 | 定義表格，圖像和表格單元的寬度。 |
自定義屬性
HTML5 還引入了一個(gè)新特性，就是可以添加自定義的數(shù)據(jù)屬性。
自定義數(shù)據(jù)屬性以 data- 開頭，基于我們的需求命名。下面是一個(gè)簡(jiǎn)單的例子：
在HTML元素中添加自定義屬性，通過JavaScript進(jìn)行訪問，如果你之前有嘗試過，你會(huì)發(fā)現(xiàn)，容易忽略標(biāo)記驗(yàn)證，而HTML5可以為你提供在有效的網(wǎng)頁(yè)內(nèi)創(chuàng)建并使用自己的元素屬性的功能。
創(chuàng)建HTML5文件：
如果你還沒想好要使用哪一個(gè)，可以復(fù)制下面的代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
>
<
html
>
<
head
>
<
script
>
/*functions here*/
script
>
head
>
<
body
>
body
>
html
>
在body中設(shè)置自定義元素，在head部分腳本區(qū)域利用JavaScript元素進(jìn)行訪問。
創(chuàng)建元素：
首先，添加一些簡(jiǎn)單的內(nèi)容和自定義屬性以及ID等元素，以便我們能夠識(shí)別JavaScript示例。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<
div id="product1" data-product-category="clothing"
>
Cotton Shirt
div
>
正如你所看到的那樣，自定義屬性的形式為：“data-*”，在“data-”部分設(shè)定名稱或者你選定的名稱。在HTML5中使用自定義屬性，這是唯一有效的方法。因此，如果你想驗(yàn)證網(wǎng)頁(yè)是否有效可才采用這種方法。
當(dāng)然，項(xiàng)目細(xì)節(jié)部分決定了自定義屬性對(duì)你是否有用，以及該將其如何命名。這個(gè)示例可適用于不同產(chǎn)品類別的零售網(wǎng)站。
自定義屬性允許你以一種特殊的方式利用頁(yè)面內(nèi)的JavaScript代碼來(lái)設(shè)置元素，例如，動(dòng)畫顯示功能。如果沒有標(biāo)準(zhǔn)的HTML元素，我們建議使用自定義屬性。
添加測(cè)試按鈕
在頁(yè)面上利用自身的JavaScript元素即可執(zhí)行事件，前提是將下面的代碼添加到頁(yè)面中：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<
input type="button" value="get attribute" onclick="getElementAttribute('product1')"
/>
獲取屬性：
在JavaScript中訪問屬性最常用的方法是使用“getAttributes”，這也是我們要做的第一步。在頁(yè)面的head腳本區(qū)域添加以下函數(shù)：
JavaScript Code復(fù)制內(nèi)容到剪貼板
function getElementAttribute(elemID) {
var theElement = document.getElementById(elemID);
var theAttribute = theElement.getAttribute('data-product-category');
alert(theAttribute);
}
這里，我們?yōu)槭纠黾恿薬lert 值，當(dāng)然你也可以根據(jù)自身需求在腳本中添加。
獲取數(shù)據(jù)：
你可以使用元素?cái)?shù)據(jù)集來(lái)替代DOM “getAttributes”，這或許更有效，尤其是在某種情況下，代碼通過多種屬性進(jìn)行迭代，然而，瀏覽器對(duì)數(shù)據(jù)集的支持依然非常低，所以牢記這一點(diǎn)，此代碼與//后面的方法一樣可執(zhí)行相同的進(jìn)程。
//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;
從屬性名稱開始在數(shù)據(jù)集中刪除“data-”，它仍然包含在HTML中。
請(qǐng)注意，如果你的自定義屬性名稱中有一個(gè)連字符，當(dāng)通過數(shù)據(jù)訪問時(shí)這會(huì)呈現(xiàn)出camel-case形式，即（“data-product-category” 變成“productCategory”)。
其他模塊、函數(shù)
我們已經(jīng)獲取該屬性，腳本仍然可以設(shè)置和刪除。下面的代碼演示了如何使用標(biāo)準(zhǔn)的JavaScript模塊和數(shù)據(jù)集來(lái)設(shè)置屬性。
JavaScript Code復(fù)制內(nèi)容到剪貼板
//DOM method
theElement.setAttribute('data-product-category', 'sale');
//dataset version
theElement.dataset.productCategory = "sale";
你也可以使用DOM方法或者數(shù)據(jù)集來(lái)刪除某個(gè)屬性：
//DOM method
theElement.removeAttribute('data-product-category');
//dataset version
theElement.dataset.productCategory = null;
在HTML5中實(shí)現(xiàn)自定義屬性技術(shù)上并不是很復(fù)雜，真正困難的是選擇使用的方法是否適用于你的項(xiàng)目；如果適用，該如何使其更有效？請(qǐng)記住，現(xiàn)在啟用數(shù)據(jù)集方法作為頁(yè)面功能還為時(shí)尚早，畢竟很多瀏覽器暫不支持此功能。
關(guān)于如何理解HTML5中的標(biāo)準(zhǔn)屬性與自定義屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
