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

Home

Web Front-end

Front-end Q&A

What are the global attributes of html5?

青灯夜游

Dec 29, 2021 am 11:41 AM

html5global properties

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>

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>

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>

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>

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>

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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS: Can I use multiple IDs in the same DOM?May 14, 2025 am 12:20 AM

No,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure

The Aims of HTML5: Creating a More Powerful and Accessible WebMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl

Significant Goals of HTML5: Enhancing Web Development and User ExperienceMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur

HTML5: Is it secure?May 14, 2025 am 12:15 AM

HTML5isnotinherentlyinsecure,butitsfeaturescanleadtosecurityrisksifmisusedorimproperlyimplemented.1)Usethesandboxattributeiniframestocontrolembeddedcontentandpreventvulnerabilitieslikeclickjacking.2)AvoidstoringsensitivedatainWebStorageduetoitsaccess

HTML5 goals in comparison with older HTML versionsMay 14, 2025 am 12:14 AM

HTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand

CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AM

Using ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.

HTML5: Goals in 2024May 13, 2025 am 12:13 AM

HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur

What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AM

HTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr

See all articles