HTML global attribute and html global attribute

HTML global attribute and html global attribute

In addition to the original global attributes, HTML5 also adds 8 new global attributes.

1. Unique id of the element specified by the id attribute

The id attribute specifies the unique id of the HTML element. The id must be unique in the HTML document. The id attribute can be used as a link anchor. You can use JavaScript (html dom) or CSS to change or add styles for elements with a specified id. In HTML5, the id attribute can be used for any HTML element. It verifies any HTML element, but not necessarily useful. In HTML4, the id attribute cannot be used for: <base >,< head >,< html >,< meta >,< param >,< script>, <style> and <title>.

Syntax: <element id = "id">

The unique id of the attribute value definition element. Naming rules: ①: cannot begin with a number, must begin with a letter A-Z or a-z. ②: The following characters can be: letters (A-Za-z), numbers (0-9), hyphens ("-"), and underscores ("_"), colon (":") and dot (". "). ③: The value is case sensitive.

 

2. class Attribute specifies the class Name of the element (className)

The class attribute defines the class Name of the element. The class attribute is usually used to point to a style sheet class. However, it can also be used to modify the class name of an HTML element through html dom in JavaScript. In HTML5, the class attribute can be used for any HTML element. It verifies any HTML element, but not necessarily useful. In HTML4, the class attribute cannot be used for: <base >,< head >,< html >,< meta >,< param >,< script>, <style> and <title>.

Syntax: <element class = "classname">

The name of the class of the attribute value definition element. To define multiple classes for an element, use spaces to separate the class names. <Span class = "a B C"> the HTML element allows multiple classes. Naming rules: ①: must begin with a letter A-Z or a-z. ②: It can be A-Za-z, A number (0-9), A hyphen ("-"), and an underscore ("_"). ③: In HTML, class names are case sensitive.

 

3. The style attribute specifies the inline style of the element)

The style attribute specifies the row style of the element. The style attribute overwrites any global style settings, such as the style specified in the <style> label or external style sheet. In HTML5, the style attribute can be used for any HTML element. It verifies any HTML element, but not necessarily useful. In HTML4, the style attribute cannot be used for: <base >,< head >,< html >,< meta >,< param >,< script>, <style> and <title>.

Syntax: <element> the attribute value defines one or more CSS attributes and values separated by semicolons. For example, <p> 4. Additional information of the element specified by the title attribute

Description information can be displayed in the tooltip, which usually displays a tooltip text when you move the cursor over the element. In HTML5, the title attribute can be used for any HTML element. It verifies any HTML element, but not necessarily useful. In HTML4, the title attribute cannot be used for: <base >,< head >,< html >,< meta >,< param >,< script>, <style> and <title>.

Syntax: <element title = "text">

The prompt text of the attribute value definition element.

 

5. The language code of the lang attribute setting Element

This attribute specifies the language of the element content. In HTML5, the lang attribute can be used for any HTML element. It verifies any HTML element, but not necessarily useful. In HTML4, the lang attribute cannot be used for: <base>, <br>, <frame>, <frameset>,

Syntax: <element lang = "language_code">

The attribute value is the language code used to specify the language code of the element content.

 

6. Set the text direction of the content in the dir attribute.

In HTML5, the dir attribute can be used for any HTML element. It verifies any HTML element, but not necessarily useful. In HTML4, the dir element cannot be used for: <base >,< br >,< frame >,< frameset >,< hr >,< iframe>, <param> and <script>.

Syntax: <element dir = "ltr | rtl | auto">

Value description: ① ltr is the default value. It is displayed normally from left to right in the text direction. ②: Rtl defines the text direction from right to left. ③: The auto definition allows the browser to determine the text direction based on the content. It is recommended only when the text direction is unknown.

 

7. Set the keyboard shortcut for the access element in the accesskey attribute

The accesskey attribute specifies the shortcut key for activating (getting the element focus) the element. Note: The shortcut keys can be accessed in different browsers in different operating systems. However, in most browsers, the shortcut keys can be set to another group.

How to Use the accesskey in various browsers:

①: IE: press the Alt key, click the shortcut key defined by accesskey (focus will be moved to the link), and press Enter.

②: Chrome: Press and hold the Alt key and click the shortcut key defined by accesskey.

③: FireFox: press Alt + Shift and click the shortcut key defined by accesskey.

④ Safari: Press and hold the Alt key and click the shortcut key defined by accesskey.

⑤: Opera: press Shift and click esc. The list of accesskeys defined on this page is displayed.

In HTML5, The accesskey attribute can be used for any HTML element. It verifies any HTML element, but not necessarily useful. In HTML4, The accesskey attribute can be used in: <a >,< area >,< button >,< input >,< label >,< legend> and <textarea>.

Syntax: <element accesskey = "character">

The property value is used to specify the shortcut key for the activation element.

 

8. Set the Tab key control order of the elements in the tabindex attribute.

The tabindex attribute specifies the sequence of elements when the "tab" key is used for navigation. In HTML5, The tabindex attribute can be used for any HTML element. It verifies any HTML element, but not necessarily useful. In HTML4, The tabindex attribute can be used for: <a>, <area>, <button>, <input>, <object>, <select>, and <textarea>.

Syntax: <element tabindex = "number">.

The attribute value is a numerical value, which is used to specify the order in which the Tab key of the element is controlled. 1 is the first, and so on.

 

The following are newly added attributes of HTML5:

9. The data-* attribute is used to store custom page data.

This attribute is used to store the custom data of the application after a private page. data can be embedded in all HTML elements. Custom Data can give pages a better interactive experience, without the need to use Ajax or query data on the server.

The data-* attribute consists of the following two parts: ①: the attribute name must not contain uppercase letters and must contain at least one character after data. ②: This attribute can be any string. Note: The custom property prefix "data-" is ignored by the client.

Syntax: <element data-* = "somevalue">

The attribute value specifies the attribute value in the form of a string.

 

10. The contenteditable attribute specifies whether to edit the content of an element.

The contenteditable attribute specifies whether the element content can be edited. Note: When the contenteditable attribute is not set in an element, the element inherits from the parent element.

Syntax: <element contenteditable = "true | false">

Value description: ① when the value is true, the element can be edited. ②: When the value is false, the element cannot be edited.

 

11. The contextmenu attribute specifies the context menu of an element.

The contextmenu attribute specifies the context menu of an element. When you right-click an element, the context menu is displayed. The value of the contextmenu attribute is the id of the <menu> element to be opened.

Syntax: <element contextmenu = "menu_id">

 

12. Check whether the spellcheck attribute has a spelling error.

The spellcheck attribute specifies whether to perform a spelling check on the element content.

You can check the spelling of the following text: ①: the value in the input element of the text type, not the password. ②: The value in the textarea element. ③: Editable values.

Syntax: <element spellcheck = "true | false">

Value description: ① when the value is true, spelling check should be performed on the text of the element. ②: If the value is false, spelling check should not be performed on the text of the element.

 

13. The hidden attribute specifies to hide an element.

If this attribute is used, the hidden elements are hidden, and hidden elements are not displayed. You can set the hidden attribute so that you can see an element when certain conditions are met, such as the check box selected, and so on. Then, you can use JavaScript to delete the hidden attribute to make the element visible.

Syntax: <element hidden>

 

14. The draggable attribute specifies whether an element can be dragged.

The draggable attribute specifies whether an element can be dragged. Note: links and images can be dragged by default.

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

Value description: ①: When the value is true, the element can be dragged. ②: When the value is false, the elements cannot be dragged. ③ When the value is auto, use the default features of the browser.

 

15. The dropzone attribute specifies whether data is copied, moved, linked, or deleted.

The dropzone attribute specifies whether the dragged data is copied, moved, or linked when it is dragged to an element. Currently, no mainstream browsers support the dropzone attribute.

Drag data to produce a copy of The dragged data: <div dropzone = "copy"> </div>

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

Value description: ①: When the value is copy, the dragged data will generate a copy of The dragged data. ②: When the value is move, the dragged data will be moved to the new position. ③: When the value is link, the link pointing to the original data is generated by dragging the data.

 

16. The translate attribute specifies whether the value of an element needs to be translated during page loading.

The translate attribute specifies whether the element content needs to be translated. You can use class = "notranslate" instead. Currently, no mainstream browsers support the translate attribute.

Syntax: <element translate = "yes | no">

Value description: ① when the value is yes, the specified element content needs to be translated. ②: When the value is no, the specified element content does not need to be translated.