Html5 global attribute, html5 global

Html5 global attribute, html5 global

Global attribute: This attribute can be used for any tag.

I. data -*

Before html5, you need to add custom attributes to html tags to store and operate data. It may be written into <form role = "xxx">, but this is a very nonstandard method.

It is precisely because of the need for such custom attributes that custom attributes are added to the html specification. Html5 developers can customize any desired attribute by adding the prefix data-to avoid conflicts with future html versions.

<form data-type="comment" class="container">...</form>

Data-* Custom properties do not affect the page layout, but are readable and writable. The following describes how to read and write data.

1. Get Custom Attributes

You can use the dataset object to get the attributes. You need to remove the data-prefix.

Html:

<Div id = 'test' data-age = "23"> html5 data-* custom attribute data-age </div>

Js to get custom "data-*" attributes

var oDiv=document.getElementById("test");alert(oDiv.dataset.age);

Get by jquery

$('#test').data('age');

2. Get custom attributes with hyphens

In case of custom attributes, the name of a hyphen must be converted into a camper.

Html:

<Div id = 'test' data-user-list = "user-list"> html5 data-* custom attribute data-user-list </div>

Js:

var oDiv=document.getElementById("test");alert(oDiv.dataset.userList);

Get jquey:

$('#test').data('userList');

3. dynamically set data-* custom attribute values

Js settings

<Div id = 'test' data-user-list = "user-list"> html5 data-* custom attribute data-user-list </div> <script type = "text/javascript"> var oDiv = document. getElementById ("test"); alert (oDiv. dataset. userList); oDiv. dataset. name = "starof"; alert (oDiv. dataset. name); </script>

The webpage is modified:

<Div id = "test" data-user-list = "user-list" data-name = "starof"> html5 data-* custom attribute data-user-list </div>

Jquery settings:

$('#content').data('name','starof');

4. getAttribute and setAttribute

You can also use the setAttribute () and getAttribute () Methods to set and obtain data-* Custom Attributes.

<Div id = 'test'> html5 data-* custom attribute data-age </div> <script> var oDiv = document. getElementById ("test"); oDiv. setAttribute ("data-age", "23"); alert (oDiv. getAttribute ("data-age"); </script>

Ii. den Boolean Value

Indicates the invisible state of the element. There are two values: true and false.

Html: display in css.

Html5:

<Label hidden> invisible </label>

 

Iii. spellcheck

Specifies whether spelling or syntax checks must be performed on elements. With the spellcheck attribute, the browser will help check whether the text of the html element is correctly spelled. The sepllcheck attribute makes sense only when the html element is editable, so it is generally used for the input [text], the textarea element is used to check the spelling and syntax of the content entered by the user. The spelling error is a red wavy underline,Right-click and a prompt is displayed.

Example:

<textarea spellcheck="true" cols="60" rows="5"> </textarea>

 

Iv. tabindex

The tabindex attribute specifies the order in which the tab key of an element is switched (when the tab key is used for navigation). You can set the tabIndex attribute to a value ranging from 1 to 32767.

Note: When the tabindex attribute is set to a negative value (such as tabindex = "-1"), the html element is not selected when you use the tab key to switch.

Example:

<Form> <label> name: <input type = "text" name = "name" tabindex = "2"/> </label> <br/> <label> ID card number: <input type = "text" name = "city" tabindex = "-1"/> </label> </br> <label> Admission Ticket No: <input type = "text" name = "country" tabindex = "1"/> </label> </br> <input type = "submit" value = "query" tabindex = "3"/> </form>

 

5. contenteditable1. Basic usage

Whether to allow users to edit content is a magical attribute. Generally, the labels of input text content are input and textarea. After using the contentEditable attribute, you can, span, body, and many other elements .. An edit box is displayed when you click. Use JavaScript to partially modify the webpage content. In the past, you should use the input box instead.

When the contenteditable state of an element is true (the contenteditable attribute is an empty string, true, or inherit and its parent element is in the true state), it means that the element can be edited. Otherwise, the element cannot be edited.

Example:

<P contenteditable> my content can be modified </p>

 

You can customize a style as follows: Use a contour line to replace the border, because it does not add elements to the box model, so the page area does not flash suddenly when triggered.

[contenteditable]:hover, [contenteditable]:focus {     outline: 2px dotted red; } 

 

To edit the entire webpage, you can set contentEditable in the body or html Tag. This is similar to the desginMode described below.

2. share several interesting applications

Contenteditable is useful when you want to interact with the demo and change the value of a tutorial, such as a CSS demonstration.

Another amazing thing: enter data: text/html in the browser's address bar and

Source: one line browser notepad

You can also use html5 to create slides and then edit them in the browser in real time during demonstration. This is cool.

Vi. desginMode

Specifies whether the entire page can be edited. There are two values: on and off. This attribute can only be modified using javascript. If design is set to on, all elements that are allowed to set contenteditable can be edited.

Usage:

window.document.designmode="off";

When the designmode is on, the entire page can be edited. It is not very practical to modify global data. It is more practical to modify local data like contenteditable.

VII. accesskey

The accesskey attribute allows you to set one or more keyboard shortcuts to quickly select page elements.

Example:

<Form> User name: <input type = "text" name = "name" accesskey = "n"/> <p/> password: <input type = "password" name = "password" accesskey = "p"/> <p/> <input type = "submit" value = "Logon" accesskey = "s" /> </form>

 

8. draggable and dropzone

These two attributes are used together because they are part of the new drag-and-drop API (DnD API. Draggable indicates whether to allow users to drag elements. dropzone specifies the area to which the elements are dragged.

The draggable attribute has three values: true indicates that the element can be dragged; false indicates that the element cannot be dragged; auto indicates that the default behavior of the user agent is used.

The dropzone attribute has three values: copy indicates creating a copy of The dragged element; move actually moves the element to a new position; link creates the link of the dragged data.

There is not much research to mention.

Resource Link:

Understand HTML5 semantics-Part 2: document structure and global attributes