Shulou(Shulou.com)06/02 Report--

This article mainly introduces the new global attributes of HTML5, which can be used for reference by interested friends. I hope you can learn a lot after reading this article.

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

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

In html, a global attribute is an attribute that can be used with all HTML elements.

There are eight new global properties in html5, so let's take a look at each of them.

1. Contenteditable attribute

The contenteditable attribute specifies whether the content of the element is editable.

Note: when the contenteditable attribute is not set in the element, the element inherits from the parent element.

The syntax is:

Examples are as follows:

123 this is a paragraph. It's editable. Try to modify the text.

Output result:

2. Contextmenu attribute

Currently, only Firefox browsers support the contextmenu attribute.

The contextmenu attribute specifies the context menu of the element. The context menu is displayed when the user right-clicks the element. / p >

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

Syntax:

Examples are as follows:

This paragraph has a context menu called "supermenu". This menu appears when the user right-clicks the paragraph.

Note: current mainstream browsers do not support the contextmenu attribute.

3. "data-*" attribute

All major browsers support the data-* attribute.

The data-* property is used to store custom data applied after a private page.

The data-* attribute embeds data in all HTML elements.

Custom data can make the page have a better interactive experience (there is no need to use Ajax or go to the server to query data).

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

The property name must not contain uppercase letters and must have at least one character after the data-. The property can be any string

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

The syntax is:

Examples are as follows:

Function showDetails (animal) {var animalType = animal.getAttribute ("data-animal-type"); alert ("The" + animal [XSS _ clean] + "is a" + animalType + ".");} species

Click on a species to see what type it is:

Salmon this is a movable paragraph. Please drag the paragraph into the upper rectangle.

Output result:

5. Dropzone attribute

No major browsers support dropzone attributes.

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

The syntax is:

Examples are as follows:

6. Hidden attribute

The hidden attribute specifies that the element is hidden.

Hidden elements are not displayed.

If you use this attribute, the element is hidden.

The hidden property can be set so that the user cannot see an element until certain conditions are met (such as selecting a check box, and so on). You can then use JavaScript to remove the hidden attribute, making the element visible.

The syntax is:

Examples are as follows:

This is a hidden paragraph.

This is a visible paragraph.

Output result:

7. Spellcheck attribute

The spellcheck attribute specifies whether to spell check the contents of the element.

The following text can be spell checked:

Values in input elements of type text (non-password) values in textarea elements values in editable elements

Grammar

Examples are as follows:

This is an editable paragraph. Please try editing the text.

First name:

Note: the spellcheck attribute is not supported in Internet Explorer 9 and earlier IE versions.

Output result:

8. Translate attribute

Currently, no major browsers support the translate attribute.

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

Test: use the Google translation tool to see what the following word "ice cream" becomes:

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

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

Tip: use class= "notranslate" instead.

Grammar

Examples are as follows:

This paragraph cannot be translated.

This paragraph can be translated

Thank you for reading this article carefully. I hope the article "what global attributes have been added to HTML5" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.