全局属性

1.draggable属性

draggable属性用来定义元素是否可以拖动，该属性有两个值：true和false，默认为false，当值为true时表示元素选中之后可以进行拖动操作，否则不能拖动。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>draggable属性的应用</title>
</head>

<body>
<h3>元素拖动属性</h3>
<article draggable="true">这些文字可以被拖动</article>
可拖动的图片<img src="images/u=336598192,1743945888&fm=73&s=98C27A2396705F86083DF5CB0100E091.jpg" draggable="true">
</body>
</html>

注意：本案例在网页中所实现的效果并不能拖动，如果想要真正实现拖动功能，必须与JavaScript结合使用。

2.hidden属性

在HTM5中，大多数元素都支持hidden属性，该属性有两个属性值：true和false。当hidden属性取值为true时，元素将会被隐藏，反之则会显示。元素中的内容是通过浏览器创建的，页面转载后允许使用JavaScript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也及时显示出来。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hidden属性的应用</title>
</head>

<body>
<h1 hidden="hidden">我被隐藏了</h1>
<p>我没被隐藏</p>
</body>
</html>

3.spellcheck属性

spellcheck属性主要针对于Input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值：true（默认）和false，值为true时检测输入框中的值，反之不检测。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>spellcheck属性的应用</title>
</head>

<body>
<h3>输入框语法检测</h3>
<p>spellcheck属性的值为true<br />
	<textarea spellcheck="true">html5</textarea>
</p>
<p>spellcheck属性的值为false<br />
	<textarea spellcheck="false">html5</textarea>
</p>
</body>
</html>

4.contenteditable属性

contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。在HTML5之前的版本中如果直接在页面上编辑文本需要编写比较复杂的JavaScript代码，但是在HTML5中只要指定该属性的值即可。该属性有两个值，如果为true表示可编辑，为false表示不可编辑。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>contenteditable属性的应用</title>
</head>

<body>
<h3>可编辑列表</h3>
<ul contenteditable="true">
	<li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>
</body>
</html>

猜你喜欢