1.1 contenteditable attribute
The main function of the contentEditable attribute is to allow users to edit the content in the element online. Is a Boolean property that can be specified as true or false. When the attribute is true, the element is specified to allow editing; When the attribute is false, the element is specified not to be edited; When not specified as true or false, it is determined by the inherit state.
[example]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>contentEditable attribute</title>
</head>
<h2>Editable list</h2>
<ul contentEditable="true">
<li>List element 1</li>
<li>List element 2</li>
<li>List element 3</li>
</ul>
After editing the content of an element, if you want to save the content, you can only send the innerHTML of the element to the server for saving, because the innerHTML content of the element will also change after changing the element content.
In JavaScript script, the element also has an isContentEditable attribute. When the element is editable, the attribute value is true; When the element is not editable, the attribute value is false.
1.2contextmenu attribute
The contextmenu attribute is used to define the context menu of the < div > element. The context menu appears when the user right clicks an element.
[example]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div contextmenu="mymenu">Context menu
<menu type="context" id="mymenu">
<menuitem lable="Wechat sharing"></menuitem>
<menuitem lable="Microblog sharing"></menuitem>
</menu>
</div>
</body>
</html>
Currently, only Firefox supports the contextmenu attribute.
1.3data - * attribute
The data - * attribute is used to store private custom data of a page or Web application.
The data - * attribute gives us the ability to embed custom data attributes on all HTML elements.
The stored (custom) data can be used in the JavaScript of the page to create a better user experience without Ajax calls or server-side database queries).
The data - * attribute consists of two parts:
Attribute name: should not contain any uppercase letters and must have at least one character after the prefix "data -".
Attribute value: can be any string.
When the browser (user agent) parses, the custom attribute prefixed with "data -" is completely ignored.
[example]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul>
<li data-animal-type="bird">owl</li>
<li data-animal-type="fish">carp</li>
<li data-animal-type="spider">spider</li>
</ul>
</body>
</html>
1.4 draggable attribute
The draggable attribute defines whether an element can be dragged.
1.5 dropzone attribute
The dropzone attribute defines whether to copy, move, or link the dragged data when dragging data on an element.
Copy: dragging data will produce a copy of the dragged data.
move: dragging data will cause the dragged data to be moved to a new location.
Link: dragging data will produce a link to the original data.
[example]
<div dropzone="copy"></div>
1.6 hidden attribute
In HTML, all elements contain a hidden attribute. This attribute sets the visible state of the element. The value is a Boolean value. When it is set to true, the element is in the invisible state; When set to false, the element is visible.
[example]
<p hiddden>The paragraph is hidden</p>
The hidden attribute can be used to prevent users from viewing elements until certain criteria are matched. After the page is loaded, you can delete the attribute using JavaScript script. After deletion, the element becomes visible and the content in the element is displayed.
1.7 spellcheck attribute
The spellcheck attribute specifies whether to check the spelling and grammar of the element content.
The following text can be spell checked:
The text value (not a password) in the input element.
The value in the < textarea > element.
Text in an editable element.
The spellcheck property is a Boolean property with values including true and false.
<!-- Correct writing -->
<textarea spellcheck="true">
<input type="text" spellcheck="false" />
<!-- Wrong writing -->
<textarea spellcheck>
If the readOnly attribute or the disabled attribute of the element is set to true, no spell check is performed.
[example]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p contenteditable="true" spellcheck="true">This is a paragraph</p>
</body>
</html>
1.8translate attribute
The translate attribute defines whether the element content should be translated.
The values are described as follows:
yes: defines what elements should be translated.
no: defines that element content should not be translated.
[example]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p translate="no">Please translate this paragraph.</p>
<p>This paragraph can be translated into any language.</p>
</body>
</html>