What new global attributes are added to HTML5?-Front-end Q&A-php.cn

What new global attributes are added to HTML5?

WBOY

Release： 2021-12-21 14:36:30

Original

2382 people have browsed it

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.

What new global attributes are added to HTML5?

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">

Copy after login

The example is as follows:

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

Copy after login

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">

Copy after login

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>

Copy after login

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">

Copy after login

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>

Copy after login

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">

Copy after login

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>

Copy after login

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">

Copy after login

The example is as follows:

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

Copy after login

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>

Copy after login

The example is as follows:

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

Copy after login

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">

Copy after login

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>

Copy after login

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">

Copy after login

Examples are as follows:

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

Copy after login

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

What new global attributes are added to HTML5?