<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h5全局属性</title>
</head>
<body>
<p>accesskey属性规定元素的快捷键</p>
<a href="http://baidu.com/" accesskey="w">百度</a><br />
<a href="http://www.w3cshool.com.cn/" accesskey="g">w3c</a>
<p>注释：请使用Alt+<i>accessKey</i>来访问带有快捷键的元素</p>
<hr />
<p>contenteditable 属性规定是否可编辑元素的内容</p>
<p contenteditable="true">这是一段可以编辑的段落。请试着编辑该文本</p>
<hr />
<!--contextmenu 属性为元素规定上下文菜单 这个菜单会在用户右键元素时出现-->
<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>
<menu id="supermenu">
<command label="step 1:write Tutorial" onclick="doSomething()" />
<command label="step 2:Edit Tutorial" onclick="doSomethingElse()" />
</menu>
<p><b>注释：</b>目前只有 Firefox 支持 contextmenu 属性。不是的、、、、</p>
<hr />
<p>data—* 属性用于存储页面或应用程序的私有自定义数据 （自定义）数据能够被页面的js中利用，以创建更好的用户体验
</p>
<ul>
<li data-animal="bird" onclick="alert(dataset.animal)">owl</li>
<li data-animal="fish" onclick="alert(dataset.animal)">salmon</li>
<li data-animal="spider" onclick="alert(dataset.animal)">tarantula</li>
</ul>
<p>获取值、 dataset.animal</p>
<hr />
<p>draggable 属性</p>
<style>
#div1{
height: 70px;
350px;
border: 1px solid;
}
</style>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一个可以拖动的段落 ,请将该段脱落在上面的矩形</p>
<script>
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();
}
</script>
<br />
<p>hidden 属性</p>
<p hidden>看见了吗</p>
<br />
<p>lang 规定元素内容的语言 </p>
<p lang="fr">Ceci est un paragraphe.</p>
</body>
</html>