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

Table of Contents

物种

Home

Web Front-end

Front-end Q&A

What new global attributes are added to HTML5?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 21, 2021 pm 02:36 PM

html

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 id="物种">物种</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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Where to find the Crane Control Keycard in Atomfall

1 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7442

CakePHP Tutorial

1371

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

See all articles