HTML5全局属性
所谓的全局属性即是可用在H5的任何HTML元素的属性，有以下几个
1、contenEditable
contenEditable主要是允许用户可以在线编辑元素中的内容，值为布尔值 false/true,并且具有继承状态。当contenEditable="true"时，允许编辑;当contenEditable="false"时，不允许编辑;当未指定false/true时，则contenEditable的值是由父node继承过来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<h2>可编辑列表</h2>
<ul contenteditable="true">
<li>第一例</li>
<li>第二例</li>
<li>第三例</li>
</ul>
<body>
</body>
</html>
2、contexmenu
contexmenu用于定义上下文菜单，即用户右键时出现的菜单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div contextmenu="zzMenu">上下文菜单demo
<menu type="context" id="zzMenu">
<menuitem label="截图"></menuitem>
<menuitem label="转为ie"></menuitem>
</menu>
</div>
</body>
</html>
3、data-*
data-*可以自定义用户数据。如：存储于页面或web应用的私有自定义数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li data-abkrs-type="a1">人事范围1</li>
<li data-abkrs-type="a2">人事范围2</li>
<li data-abkrs-type="a3">人事范围3</li>
</ul>
</body>
<script>
var list = document.getElementsByTagName("li");
for(var i =0;i<list.length;i++){
console.log(list[i].dataset.abkrsType);
}
</script>
</html>
4、draggable
draggable属性定义元素是否可以被拖动,值:true/false/auto.
true:可以被拖动
false:不可以被拖动
auto:浏览器的默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div draggable="true" dropzone="copy">
<ul>
<li>第一例</li>
<li>第二例</li>
<li>第三例</li>
</ul>
</div>
</body>
</html>
4、dropzone
规定在拖动被拖动数据时是否进行复制、移动或链接。
copy:拖动数据会产生被拖动数据的副本。
move:拖动数据会导致被拖动数据被移动到新位置。
link:拖动数据会产生指向原始数据的链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div draggable="true" dropzone="move">
<ul>
<li>第一例</li>
<li>第二例</li>
<li>第三例</li>
</ul>
</div>
</body>
</html>
5、hidden
规定元素仍未或不再相关。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div hidden draggable="true" dropzone="move">
<ul>
<li>第一例</li>
<li>第二例</li>
<li>第三例</li>
</ul>
</div>
</body>
</html>
5、id
元素的唯一的 id,在一个页面内id不允许重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="ul" draggable="true" dropzone="move">
<ul>
<li>第一例</li>
<li>第二例</li>
<li>第三例</li>
</ul>
</div>
</body>
</html>
5、lang
规定元素内容的语言
注意：lang 属性在以下标签中无效：,
, , ,
, , 以及
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="ul" draggable="true" dropzone="move">
<ul>
<li lang="ZH">第一例</li>
<li>第二例</li>
<li>第三例</li>
</ul>
</div>
</body>
</html>
