這篇文章主要介紹了HTML5新增了哪些全局屬性，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)平輿免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

屬性：1、contenteditable屬性；2、contextmenu屬性；3、“data-*”屬性；4、draggable屬性；5、dropzone屬性；6、hidden屬性；7、spellcheck屬性；8、translate屬性。

本教程操作環(huán)境：windows10系統(tǒng)、HTML5版、Dell G3電腦。

在html中，全局屬性是可與所有 HTML 元素一起使用的屬性。

在html5中，共有八個新增的全局屬性，下面我們就分別來看一下。

1、contenteditable屬性

contenteditable 屬性指定元素內(nèi)容是否可編輯。

注意： 當(dāng)元素中沒有設(shè)置 contenteditable 屬性時，元素將從父元素繼承。

語法為：

示例如下：

 
 
 


這是一個段落。是可編輯的。嘗試修改文本。

輸出結(jié)果：

2、contextmenu屬性

目前只有 Firefox 瀏覽器支持 contextmenu 屬性。

contextmenu 屬性規(guī)定了元素的上下文菜單。當(dāng)用戶右擊元素時將顯示上下文菜單。/p>

contextmenu 屬性的值是需要打開的

本段落擁有一個名為 "supermenu" 的上下文菜單。這個菜單會在用戶右鍵單擊該段落時出現(xiàn)。
  

  
  

注意：目前的主流瀏覽器都不支持 contextmenu 屬性。

3、“data-*”屬性

所有主流瀏覽器都支持 data-* 屬性。

data-* 屬性用于存儲私有頁面后應(yīng)用的自定義數(shù)據(jù)。

data-* 屬性可以在所有的 HTML 元素中嵌入數(shù)據(jù)。

自定義的數(shù)據(jù)可以讓頁面擁有更好的交互體驗(yàn)（不需要使用 Ajax 或去服務(wù)端查詢數(shù)據(jù)）。

data-* 屬性由以下兩部分組成：

屬性名不要包含大寫字母，在 data- 后必須至少有一個字符。該屬性可以是任何字符串

注意： 自定義屬性前綴 "data-" 會被客戶端忽略。

語法為：

示例如下：

物種
點(diǎn)擊一個物種，看看它是什么類型：

  Owl
  Salmon  
  Tarantula  

4、draggable屬性

draggable 屬性規(guī)定元素是否可拖動。

提示： 鏈接和圖像默認(rèn)是可拖動的。

語法為：

示例如下：

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}


function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}