Comprehensive analysis of standard attributes and custom attributes in HTML5_html5 tutorial skills

As explained in HTML5 syntax, elements can contain attributes to set various properties for an element.

Some properties are defined as global and can be used on any element, while others are defined as element-specific. All properties have a name and a value, which look like the example below.

Here is an example of using HTML5 attributes, demonstrating how to mark a div element with an attribute named class and the value "example":

The

...

attribute can only be specified in the opening tag and must not be used in the closing tag.

HTML5 attributes are not case-sensitive and can be used in all uppercase or a mixture of uppercase and lowercase, although the most common convention is to always use lowercase.

Standard Attributes
The attributes listed below are supported by almost all HTML5 tags.

The "popup" title of the

属性	选项	功能
accesskey	用户自定义	定义访问元素的键盘快捷键。
align	right, left, center	水平对齐标签。
background	URL	在元素后面设置一个背景图像。
bgcolor	数值，十六进制值，RGB值	在元素后面设置一个背景颜色。
class	用户定义。	分类一个元素，便于使用级联样式表。
contenteditable	true, false	定义用户是否可以编辑元素的内容。
contextmenu	Menu id	为元素定义上下文菜单。
data-XXXX	用户定义。	自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。
draggable	true,false, auto	定义用户是否可以拖动元素。
height	数字值	定义表格，图像或表格单元的高度。
hidden	hidden	定义元素是否应该可见。
id	用户定义。	命名元素，便于使用级联样式表。
item	元素列表。	用于组合元素。
itemprop	条目列表。	用于组合条目。
spellcheck	true, false	定义元素是否必须有拼写或错误检查。
style	CSS 样式表。	给元素定义内联样式。
subject	用户定义 id。	定义元素关联的条目。
tabindex	Tab number	定于元素的 tab 键顺序。
title	用户定义。	元素的“弹出”标题。
valign	top, middle, bottom	HTML 元素内标签的垂直对齐方式。
width	数字值。	定义表格，图像和表格单元的宽度。

Attributes

Options

Function

accesskey

User-defined

Define keyboard shortcuts for accessing elements.

align

right, left, center

Align labels horizontally.

background

URL

Set a background image behind the element.

bgcolor

Numerical value, hexadecimal value, RGB value

Sets a background color behind the element.

class

User defined.

Categories an element to facilitate the use of cascading style sheets.

contenteditable

true, false

Defines whether users can edit the content of the element.

contextmenu

Menu id

Define a context menu for the element.

data-XXXX

User defined.

Custom attributes. Authors of HTML documents can define their own attributes. Custom properties must start with "data-".

draggable

true,false,auto

Defines whether the user can drag the element.

height

numeric value

Define the height of a table, image, or table cell.

hidden

hidden

Defines whether the element should be visible.

id

User defined.

named elements to facilitate the use of cascading style sheets.

item

element list.

is used to combine elements.

itemprop

List of entries.

is used to combine entries.

spellcheck

true, false

Defines whether the element must have spelling or error checking.

style

CSS style sheet.

defines inline styles for elements.

subject

User-defined id.

defines the items associated with the element.

tabindex

Tab number

is determined by the tab order of the elements.

title

User defined.

element.

valign

top, middle, bottom

Vertical alignment of tags within HTML elements.

width

Numeric value.

Defines the width of tables, images and table cells.

Custom attributes
HTML5 also introduces a new feature, which is the ability to add custom data attributes.

Custom data attributes start with data- and are named based on our needs. Here is a simple example:

...

Two of the above examples Custom attributes called data-subject and data-level are fully valid in HTML5. We can also get their values ​​using the JavaScript API or in CSS in a similar way to standard properties.

Add custom attributes to HTML elements and access them through JavaScript. If you have tried it before, you will find that it is easy to ignore tag validation, and HTML5 can provide you with the ability to create and use your own elements within a valid web page. Attribute function.

Create HTML5 file:

If you haven’t decided which one to use yet, you can copy the code below:

XML/HTML CodeCopy content to clipboard

2. >
4. <
5. html
6. >
8. <
9. head
10. >
12. <
13. script
14. >
16. /*functions here*/ 
18. script
19. >
22. head
23. >
25. <
26. body
27. >
30. body
31. >
34. html
35. >

Set custom elements in the body and access them using JavaScript elements in the head script area.

Create element:

First, add some simple content and elements such as custom attributes and IDs so that we can identify the JavaScript example.

XML/HTML CodeCopy content to clipboard

1. <
2. div id="product1" data-product-category="clothing"
3. >
5. Cotton Shirt
7. div
8. >

As you can see, the custom attribute has the form: "data-*", set the name in the "data-" part or a name of your choice. Use custom attributes in HTML5, this is the only way that works. Therefore, only use this method if you want to verify whether the web page is valid.

Of course, the project details determine whether the custom property is useful to you and how you name it. This example can be applied to retail websites across different product categories.

Custom attributes allow you to use JavaScript code within the page to set elements in a special way, for example, to animate the display function. If there are no standard HTML elements, we recommend using custom attributes.

Add test button

Use your own JavaScript elements on the page to execute events, provided that the following code is added to the page:

XML/HTML CodeCopy content to clipboard

1. <
2. input type="button" value="get attribute" onclick="getElementAttribute ('product1')"
3. />

Get attributes:

The most common way to access attributes in JavaScript is to use "getAttributes", which is also the first step we need to do. Add the following function in the head script area of ​​the page:

JavaScript CodeCopy content to clipboard

1. function getElementAttribute(elemID) {
2. var theElement = document.getElementById(elemID);
3. var theAttribute = theElement.getAttribute('data-product-category'); 🎜>
alert(theAttribute);
} 

Here, we have added the alert value to the example. Of course, you can also add it in the script according to your own needs.

Get data:

You can use an element dataset instead of DOM "getAttributes", which may be more efficient, especially in certain cases where the code iterates through multiple attributes. However, browser support for datasets is still very low. So keeping that in mind, this code executes the same process as the method // after.

//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;
Remove "data-" from the attribute name in the dataset, it Still included in the HTML.

Please note that if your custom attribute name has a hyphen in it, this will appear in camel-case form when accessed via data, i.e. ("data-product-category" becomes "productCategory").

Other modules and functions

We have obtained the property, scripts can still set and remove it. The code below demonstrates how to set properties using standard JavaScript modules and datasets.

JavaScript CodeCopy content to clipboard

1. //DOM method
3. theElement.setAttribute('data-product-category', 'sale');
4. //dataset version
6. theElement.dataset.productCategory = "sale";
7. You can also use DOM methods or data sets to delete an attribute:
9. //DOM method
10. theElement.removeAttribute('data-product-category');
11. //dataset version
12. theElement.dataset.productCategory = null;

Implementing custom attributes in HTML5 is not technically very complicated. The real difficulty is whether the method you choose to use is suitable for your project; if so, how to make it more effective? Please keep in mind that it is still too early to enable the dataset method as a page feature, as many browsers do not support this feature yet.