What are the global attributes of html5?-Front-end Q&A-php.cn

What are the global attributes of html5?

青灯夜游

Release： 2021-12-29 11:41:28

Original

2669 people have browsed it

html5 attributes are: 1. accesskey; 2. class; 3. contenteditable; 4. dir; 5. draggable; 6. dropzone; 7. hidden; 8. lang; 9. spellcheck; 10. tabindex, etc. wait.

What are the global attributes of html5?

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

Local attributes: Some elements can specify their own attributes, which are called local attributes.

For example, the link element has six local attributes: href, rel, hreflang, media, type, and sizes.

Global attributes: Can be used to configure behaviors common to all elements. This attribute is called a global attribute and can be used on any element.

HTML5 global attributes

1. Accesskey attribute

Use the accesskey attribute to set one or several for selection Shortcut keys for elements on the page.

2. Class attribute

The class attribute is used to classify elements.

3. The contenteditable attribute

contenteditable is a newly added attribute in HTML5. Its purpose is to allow users to modify the content on the page.

<body>    <!-- contenteditable属性应用 -->    <p contenteditable="true">设置为 true 是可编辑的</p></body>

Copy after login

As in the above example, when the contenteditable attribute value of the p element is set to true, the user can click the text to edit the content. Disable editing when set to false.

4. dir attribute

The dir attribute is used to specify the direction of the text in the element. There are two valid values: ltr (left to right), rtl (right to left).

   <!-- dir属性应用 -->    <p dir="ltr">从左到右</p>    <p dir="rtl">从右到左</p>

Copy after login

5. Draggable attribute

The draggable attribute is one of the ways HTML5 supports drag-and-drop operations and is used to indicate whether an element can be dragged and dropped.

6. Dropzone attribute

The dropzone attribute is one of the ways HTML5 supports drag-and-drop operations and is used in conjunction with the draggable attribute.

7. id attribute

The id attribute is used to assign a unique identifier to an element. This goes without saying. One thing to note is that the id attribute can also be used to navigate to a specific location in the document.

8. hidden attribute

hidden is a Boolean attribute, indicating that the relevant element does not require attention at the moment. The browser handles it by hiding the relevant element (I vaguely think of it) When controlling the display and hiding of an element, you will customize a hidden class and then write the hidden style in it). For details, you can also read this article introducing the hidden attribute of HTML5

<!-- hidden属性应用 --><div hidden>这个元素将会被隐藏</div>

Copy after login

9, lang attribute

The lang attribute is used to describe the language used by the element content. The lang attribute must use a valid ISO phonetic code. The purpose of using this attribute is to let the browser adjust the way it expresses the content of the element, such as correct pronunciation when using a text reader.

<!-- lang属性应用 --><p>Hello - how are you?</p>

Copy after login

10. spellcheck attribute

The spellcheck attribute is used to indicate whether the browser should perform spell check on the content of the element. This attribute is only used on elements that the user can edit. It only makes sense when it comes up.
The spellcheck attribute accepts two values: true and false. How spell checking is implemented varies from browser to browser.

<textarea name="" id="" cols="30" rows="10" spellcheck="true">This is some lalalala text</textarea>

Copy after login

11. style attribute

The style attribute is used to define CSS styles directly on the element.

12. Tabindex attribute

The keyboard focus of the HTML page can be switched between elements by pressing the Tab key. The default transfer order can be changed using the tabindex attribute.

<form action="">    <label>Name: <input type="text" name="" id="" tabindex="2"></label>    <label>City: <input type="text" name="" id="" tabindex="-1"></label>    <label>Country: <input type="text" name="" id="" tabindex="1"></label>    <input type="submit" value="" tabindex="3"></form>

Copy after login

The effect of the above code is: during the process of pressing the Tab key, the Country input box with tabindex 1 is selected first, then the focus will jump to the Name input box, and finally submit. Elements with tabindex set to -1 will not be selected after the user presses the Tab key.

13. title attribute

The title attribute provides additional information about the element. Browsers usually use these things to display toolbar tips. This is used in some incompletely displayed text titles. Also used frequently.

Related recommendations: "html video tutorial"

The above is the detailed content of What are the global attributes of html5?. For more information, please follow other related articles on the PHP Chinese website!