Home >Web Front-end >Front-end Q&A >What new global attributes are added to HTML5?

What new global attributes are added to HTML5?

WBOYOriginal: 2021-12-21 14:36:302508browse

Attributes: 1. contenteditable attribute; 2. contextmenu attribute; 3. "data-*" attribute; 4. draggable attribute; 5. dropzone attribute; 6. hidden attribute; 7. spellcheck attribute; 8. translate Attributes.

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

What new global attributes are added to HTML5?

In HTML, global attributes are attributes that can be used with all HTML elements.

In html5, there are eight new global attributes. Let’s take a look at each one below.

1. contenteditable attribute

The contenteditable attribute specifies whether the element content is editable.

Note: When the contenteditable attribute is not set in an element, the element will inherit from the parent element.

The syntax is:

<element contenteditable="true|false">

The example is as follows:

<html>
<head> 
<meta charset="utf-8"> 
<title>123</title> 
</head>
<body>
<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>
</body>
</html>

Output result:

What new global attributes are added to HTML5?

##2, contextmenu Attribute

Currently only the Firefox browser supports the contextmenu attribute.

The contextmenu attribute specifies the context menu of the element. A context menu will appear when the user right-clicks an element. The value of the /p>

contextmenu attribute is the id of the element that needs to be opened.

Syntax:

<element contextmenu="menu_id">

Examples are as follows:

<body>
<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>  
<menu id="supermenu">
  <command label="Step 1: Write Tutorial" onclick="doSomething()">
  <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
<p><b>注意：</b>目前的主流浏览器都不支持 contextmenu 属性。</p>
</body>

3. "data-*" attribute

All major browsers Support data-* attributes.

data-* attributes are used to store custom data applied behind private pages.

data-* attributes can embed data in all HTML elements.

Customized data can give the page a better interactive experience (no need to use Ajax or query data on the server).

data-* The attribute consists of the following two parts:

The attribute name should not contain uppercase letters, and there must be at least one character after data-. This attribute can be any string

Note: Custom attribute prefix "data-" will be ignored by the client.

The syntax is:

<element data-*="somevalue">

The example is as follows:

<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<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>
</body>

4. Draggable attribute

The draggable attribute specifies whether the element can be dragged .

Tip: Links and images are draggable by default.

The syntax is:

<element draggable="true|false|auto">

The example is as follows:

<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>

Output result:

What new global attributes are added to HTML5?

5. dropzone attribute

No mainstream browser supports the dropzone attribute.

The dropzone attribute specifies whether the dragged data is copied, moved, or linked when it is dropped onto the element.

The syntax is:

<element dropzone="copy|move|link">

The example is as follows:

<div dropzone="copy"></div>

6. hidden attribute

The hidden attribute specifies that the element is hidden.

Hidden elements will not be displayed.

If this attribute is used, the element will be hidden.

The hidden attribute can be set so that users can only see an element when certain conditions are met (such as checking a check box, etc.). You can then use JavaScript to remove the hidden attribute, making the element visible.

The syntax is:

<element hidden>

The example is as follows:

<body>
<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>
</body>

Output result:

What new global attributes are added to HTML5?

7, spellcheck Attributes

spellcheck attribute specifies whether to spell check the element content.

The following text can be spell-checked:

The value in the input element of type text (non-password) The value in the textarea element The value in the editable element

The syntax

<element spellcheck="true|false">

example is as follows:

<body>
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
First name: <input type="text" name="fname" spellcheck="true">
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本不支持 spellcheck 属性。</p>
</body>

Output result:

What new global attributes are added to HTML5?

8, translate attribute

Currently no mainstream browser supports the translate attribute.

The translate attribute specifies whether the element content should be translated.

Test: Use Google Translate tool to see what the following word "ice cream" will become:

Here we use translate="no": ice cream.

Here we use class="notranslate": ice cream.

Tip: Use class="notranslate" instead.

Grammar

<element translate="yes|no">

Examples are as follows:

<p translate="no">这个段落不能翻译。</p>
<p>这个段落可以被翻译</p>

What new global attributes are added to HTML5?

Related articles