HTML5属性

HTML5新添加的全局属性

标签 描述
contenteditable 指定元素内容是否可编辑
contextmenu 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单(浏览器暂时不支持)
data-* 用于存储页面的自定义数据
draggable 指定某个元素是否可以拖动
dropzone 指定是否将数据复制,移动,或链接,或删除(浏览器暂时不支持)
hidden 规定对元素进行隐藏
spellcheck 检测元素是否拼写错误
translate 指定是否一个元素的值在页面载入时是否需要翻译(浏览器暂时不支持)
<!DOCTYPE html>
<html>
<head>
	<title>progress</title>
	<meta charset="utf-8">

	<style type="text/css">
	#div1{
		width: 350px;
		height:70px;
		padding: 10px;
		border: 1px solid #aaaaaa;
	}
	</style>
	<script>
	function showDetails(animal){
		var animalType=animal.getAttribute("data-animal-type");
		alert("The"+animal.innerHTML+"is a"+animalType+".");
	}

	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>
</head>
<body>
<body>
<p contenteditable="ture">这是一个可编辑段落</p>

<h1>物种</h1>
<p>点击一个物种,看看它是什么类型</p>
<ul>
	<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
	<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
	<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落.请把该段落拖入上面的矩形.</p>

<p hidden>这是一段隐藏的文字</p>
<p>这是一段显示的文字</p>

<p>spellcheck可以对类型为text的input元素中的值(非密码),textarea元素中的值,可编辑元素中的值进行拼写检查</p>
<p>spellcheck验证拼写不正确的值的底部会出现红色的波浪线</p>
<input type="text" spellcheck="true" placeholder="请输入需要检查的文字">
<textarea spellcheck="true"> QQ is something</textarea>
<p contenteditable="true">这是一段可编辑文字</p>
</body>
</html>

你可能感兴趣的:(html5)