1.draggable property
The draggable attribute is used to define whether the element can be dragged. This attribute has two values: true and false. The default is false. When the value is true, it means that the element can be dragged after it is selected, otherwise it cannot be dragged.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Application of draggable attribute</title> </head> <body> <h3>Element drag attribute</h3> <article draggable="true">These text can be dragged</article> Draggable image <img src="images/u=336598192,1743945888&fm=73&s=98C27A2396705F86083DF5CB0100E091.jpg" draggable="true"> </body> </html>
Note: The effect achieved in this case in the web page cannot be dragged. If you want to realize the drag function, it must be used in conjunction with JavaScript.
2. hidden attribute
In HTM5, most elements support the hidden attribute, which has two attribute values: true and false. When the hidden attribute is true, the element will be hidden, otherwise it will be displayed. The content in the element is created by the browser. After the page is reprinted, it is allowed to use JavaScript script to cancel the attribute. After the cancellation, the element becomes visible, and the content in the element is also displayed in time.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Application of hidden attribute</title> </head> <body> <h1 hidden="hidden">I am hidden</h1> <p>I am not hidden</p> </body> </html>
3.spellcheck property
The spellcheck attribute is mainly aimed at the Input element and the textarea text input box, and performs spelling and grammar checking on the text content entered by the user. The spellcheck attribute has two values: true (default) and false. When the value is true, the value in the input box is checked, otherwise it is not checked.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Application of the spellcheck attribute</title> </head> <body> <h3>Input box syntax detection</h3> <p>The value of the spellcheck attribute is true<br /> <textarea spellcheck="true">html5</textarea> </p> <p>The value of the spellcheck attribute is false<br /> <textarea spellcheck="false">html5</textarea> </p> </body> </html>
4. contenteditable property
The contenteditable attribute specifies whether the content of an element can be edited, but only if the element has mouse focus and its content is not read-only. In versions before HTML5, if you edit text directly on the page, you need to write more complex JavaScript code, but in HTML5, you only need to specify the value of this attribute. This property has two values, if true means editable, false means not editable.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Application of the contenteditable attribute</title>
</head>
<body>
<h3>Editable list</h3>
<ul contenteditable="true">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
</body>
</html>
