(2) attributes in html5

(2) attributes in html5

1. Global attributes

Global attributes are attributes that can be used for any element;

(1) contentEditable attributes

The main function of the contentEditable attribute is to allow users to edit the content in the element. Therefore, this element must be an element that can get the focus of the mouse, and an insert symbol should be provided to the user after clicking the mouse, prompt the user to allow editing of the content in this element. The contentEditable attribute is a Boolean attribute and can be specified as true or false.

In addition, this property also has a hidden inherit (inheritance) state. when the property is true, the element is specified as allowed to be edited; when the property is false, the element is specified as not allowed to be edited; if true or false is not specified, it is determined by the inherit State. If the parent element of an element is editable, the element is editable;

In addition to the contentEditable attribute, an element also has an isContentEditable attribute. When an element is editable, the attribute is true. When an element cannot be edited, the attribute is false;

ContentEditable attribute example (after the contentEditable attribute is added, the element becomes editable)

Editable list

• List element 1
• List element 2
• List element 3

After editing the content of an element, if you want to save the content, you can only send the innerHTML of the element to the server for saving, because the innerHTML content of the element changes after the element content is changed, there is no special API to save the content in the edited element.

(2) designMode attributes

The designMode attribute specifies whether the entire page can be edited. When the page can be edited, any element on the page that supports the preceding contentEditable attribute changes to the editing status. The designMode attribute can only be edited and modified in a javascript script. This attribute has two values: on and off. When the attribute is specified as "on", the page can be edited; when it is specified as "off", the page cannot be edited. You can use the javascript script to specify the designMode attribute as follows:
As shown in: document. designMode = "on"

(3) hidden attributes

All elements in html5 can use a hidden attribute. This attribute is similar to the hidden element in the input element. It notifies the browser that the element is not rendered and is invisible. However, the content in the element is still created by the browser. That is to say, after loading the page, you can use javascript scripts to cancel the attribute. After canceling the attribute, the element becomes visible and the content in the element is instantly displayed. The hidden attribute is a Boolean value. If the value is true, the element is invisible. If the value is false, the element is visible.

(4) spellcheck attributes

The spellcheck attribute is a new attribute provided by html5 for the input elements (type = text) and textarea. It is used to check the spelling and syntax of text content entered by users. The spellcheck attribute is a Boolean attribute, which is true or false. When writing, a special attribute must be explicitly declared as true or false. The writing method is as follows:

<Input type = text spellchech = false> </code> </pre> <p> The following syntax is incorrect: </p> <pre class = "brush: java; "> <code class =" hljs xml "> <textarea spelcheck> </code> </pre> <p> note that, if the readOnly or disabled attribute of an element is set to true, no spelling check is performed. </P> <strong> (5) tabindex attribute </strong> </p> <p> tabindex is a basic concept in development, when you continuously press the Tab key to retrieve the control or focus of a window or page and traverse all the controls in the window or page, the tabindex of each control indicates the number of accessed controls. In the past, this attribute was very useful when editing a webpage. However, the traversal order of controls is determined by the position of elements on the page, so it is no longer needed. However, tabindex has another function. By default, only link elements and form elements can obtain the focus by pressing the key. If you use the tabindex attribute for other elements, the element can also get the focus. When you execute the focus () Statement in the script, the element can get the focus. However, this operation produces a side effect: This element can also obtain the focus by pressing the Tab key, which is sometimes not the result that the developer wants. This problem is solved after the tabindex value of the element is set to negative (usually-1. After the value of tabindex is negative, the element can still obtain the focus by programming, but the element cannot obtain the focus when the Tab key is pressed. This is very useful in complex pages or complex web applications. </P> <strong> 2. Form-related attributes </strong> </p> <p> (1) You can set the input (type = text) select, textarea, And button elements define the autofocus attribute. It automatically obtains the focus when the element is opened in the form of a specified attribute. </p> <p> (2) You can specify the type = text of the input element) specify the placeholder attribute with the textarea element, which will prompt the user's input, prompting the user to enter the content; </p> <p> (3) you can specify the form attribute for input, output, select, textarea, button, and fieldset, declare the form to which it belongs, and place it in any position on the page, rather than in the form; </p> <p> (4) You can specify the required attribute for the input (type = text) and textarea elements. This attribute indicates a check when the user submits the request. Check whether the input content exists in the element. </p> <p> (5) added several new attributes for the input element: autocomplete, min, max, multiple, pattern, and step. A new list element is used with the datalist element. The datalist element works with the autocomplete attribute. The multiple Attribute allows multiple files to be uploaded at a time. </p> <p> (6) new Attributes formaction, formenctype, formmethod, formnovalidate, and formtarget are added to the input and button elements. They can reload the action, enctype, method, novalidate, and terget attributes of form elements. The disable attribute is added to the fieldset element. You can set its child element to the disable (invalid) state. </p> <p> (7) added the novalidate attribute to the input, button, and form elements. This attribute can cancel related checks during submission, and the form can be submitted unconditionally; </p> <p> (8) is the form label of all the label elements that can be used. [This includes non-hidden input elements (the type attribute value is not equal to hidden), button, select, textarea, meter, output, progress, and keygen elements define a labels attribute. The attribute value is a NodeList object, represents the set of tag elements bound to the element. </p> <p> (9) A form element can be placed inside the label element, the control attribute of the tag is used to access the elements in the form. </p> <p> (10) for the input element and textarea Element Add the SelectionDirection attribute to html5. When you select a part of text with the mouse in these two elements, you can use this attribute to obtain the selection direction. When a user selects text in the forward direction, the attribute value is "forward". When the user selects text in the reverse direction, the attribute value is "backward ". If you do not select any text, the attribute value is "forward". </p> <p> (11) Add the indeterminate attribute to the check box (checkbox element, to indicate that the check box is in the "not explicitly available or not" status. </p> <p> (12) add the height attribute used to specify the image height and the width attribute used to specify the image width to the input element of the image type. </p> <p> (13) added the maxlength attribute to the textarea element to limit the number of input texts, and the wrap attribute to specify whether to add line breaks to text line breaks when a form is submitted; </p> <p> (14) added the sandbox attribute to the iframe element to check whether the content in the iframe element can be displayed due to security reasons, whether the form is allowed to be submitted, and whether the script is allowed to be executed. </p> <p> (15) Add the async and defer attributes to the script element, it is used to speed up page loading. It is recommended to read script code. Loading other elements on the page; </p> <strong> 3. Link-related attributes </strong> </p> <p> (1) adds the media attribute to element a and area. This attribute specifies the reason why the target URL type media/device is optimized and can only be used when the href attribute exists; </p> <p> (2) adds the hreflang attribute and rel attribute to the area element to ensure consistency with element a and link; </p> <p> (3) added a new property sizes for the link element. This attribute can be used with the icon element (through the rel attribute). This attribute specifies the size of the associated icon (icon element). </p> <p> (4) the target attribute is added to the base element to maintain consistency with element; </p> <strong> 4. Other attributes </strong> </p> <p> (1) Add the reversed attribute to the ol element, it specifies the reverse display of the list. </p> <p> (2) it adds the charset attribute to the meta element because this attribute is widely supported, it also provides a good way to develop the character encoding of the document. </p> <p> (3) two new attributes-type and label are added to the menu element. The label attribute defines a visible label for the menu. The type attribute allows the menu to appear in the following menu, toolbar, and list menu formats. </p> <p> (4) adds the scoped attribute to the style element to specify the range of the style. For example, it only applies to a tree on the page. </P> <p> (5) Add the async attribute to the script element and define whether the script is executed asynchronously. </p> <p> (6) add the attribute manifest to the html element. When an offline web application is developed, it is used with APIs to define a URL that describes the cached information of the document; </p> <p> (7) add three attributes sandbox, seamless and srcdoc for the iframe element to improve page security and prevent untrusted web pages from performing some operations; </p> <strong> 5. abolished attributes </strong> </p> </div>