HTML5文档中的全局属性(draggable、hidden、spellcheck、contentditable)

HTML5文档中的全局属性(draggable、hidden、spellcheck、contentditable)

全局属性是指在任何元素中都可以使用的属性。在HTML5中常用的全局属性有draggable、hidden、spellcheck、contentditable。我们来分别看一下各自的解释和使用方法。

全局属性draggable

graggable属性用来定义元素是否可以拖动,属性值有true和false。当值为true时表示元素选中之后可以进行拖动操作,否则不能拖动。我们先来看一下简单的使用:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>draggable属性</title>
</head>
<body>
<strong>元素拖动演示</strong>
<article draggable="true"> 这些文字可以被拖动</article>
</body>
</html>

全局属性hidden

hide属性的属性值有true和false。当hide属性取值为true时,元素将会被隐藏,反之则会显示。

全局属性spellcheck

spellcheck属性主要针对于input元素和textarea文本输入框,对用户输入的文本内容进行拼写和语法检查。spellcheck属性的属性值有true和false,值为true时检测输入框中的值,反之不检测。我么来看一下简单的使用,只有在谷歌浏览器会看到效果:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>spellcheck属性</title>
</head>
<body>
<strong>输入框语法检测</strong>
<p>spellcheck属性值为true<br>
<textarea spellcheck="true">html5</textarea>
</p>
<p>spellcheck属性值为false<br>
<textarea spellcheck="false">html5</textarea></p>
</body>
</html>

全局属性contentditable

contentditable属性规定是否可编辑元素的内容,前提是该元素必须可以获得鼠标的焦点并且其内容不是只读的。我们来看一下使用方法:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>contenteditable属性</title>
</head>
<body>
<strong>可编辑列表</strong>
<ul contenteditable="true">
	<li>列表1</li>
	<li>列表2</li>
</ul>
</body>
</html>
分享到 :

发表评论

登录... 后才能评论