Html5 global attributes

Html5 global attributes
Global attribute: This attribute can be used for any tag. I. data-* Before html5, you need to add custom attributes on the html tag to store and operate on data. It may be written into <form role = "xxx">, however, this is a very nonstandard method. It is precisely because of the need for such custom attributes that custom attributes are added to the html specification. Html5 developers can customize any desired attribute by adding the prefix data-to avoid conflicts with future html versions. <Form data-type = "comment" class = "container">... </form> data-* Custom properties do not affect the page layout, but are readable and writable. The following describes how to read and write data. 1. Use the dataset object to obtain Custom Attributes. You must remove the data-prefix. Html: <div id = 'test' data-age = "23"> html5 data-* custom attribute data-age </div> js get custom "data-*" attribute var oDiv = document. getElementById ("test"); alert (oDiv. dataset. age); jquery get $ ('# test '). data ('age'); 2. To obtain a custom property with a hyphen, you must convert the name of a custom property to a camper. Html: <div id = 'test' data-user-list = "user-list"> html5 data-* custom attribute data-user-list attribute </div>. js: var oDiv = document. getElementById ("test"); alert (oDiv. dataset. userList); jquey get: $ ('# test '). data ('userlist'); 3. dynamically set data-* custom attribute value js settings

<Div id = 'test' data-user-list = "user-list"> html5 data-* custom attribute data-user-list </div> <script type = "text/javascript"> var oDiv = document. getElementById ("test"); alert (oDiv. dataset. userList); oDiv. dataset. name = "starof"; alert (oDiv. dataset. name); </script>

 

The webpage is modified: <div id = "test" data-user-list = "user-list" data-name = "starof"> html5 data-* custom attribute data-user-list </div> jquery settings: $ ('# content '). data ('name', 'starof '); 4. getAttribute and setAttribute can also be passed through setAttribute () and getAttribute () to set and obtain the data-* custom attribute <div id = 'test'> html5 data-* custom attribute data-age </div> <script> var oDiv = document. getElementById ("test"); oDiv. setAttribute ("data-age", "23"); alert (oDiv. getAttribute ("data-age" ); </Script> 2. The den Boolean value indicates the invisible state of the element. There are two values, true and false. Html: display in css. Html5: <label hidden> invisible </label> 3. spellcheck specifies whether spelling or syntax checks must be performed on elements. With the spellcheck attribute, the browser will help check whether the text of the html element is correctly spelled. The sepllcheck attribute makes sense only when the html element is editable, so it is generally used for the input [text], the textarea element is used to check the spelling and syntax of the content entered by the user. If the spelling is incorrect, there is a red wavy underline. Right-click the underline and a prompt is displayed. Example: <textarea spellcheck = "true" cols = "60" rows = "5"> </textarea> 4. The tabindextabindex attribute specifies the order in which the tab key is switched. ), you can set the tabIndex attribute to a value ranging from 1 to 32767. Note: When the tabindex attribute is set to a negative value (such as tabindex = "-1"), the html element is not selected when you use the tab key to switch. Example:

<Form> <label> name: <input type = "text" name = "name" tabindex = "2"/> </label> <br/> <label> ID card number: <input type = "text" name = "city" tabindex = "-1"/> </label> </br> <label> Admission Ticket No: <input type = "text" name = "country" tabindex = "1"/> </label> </br> <input type = "submit" value = "query" tabindex = "3"/> </form>

 

5. contenteditable1. The basic usage of contenteditable1 allows users to edit content. It is a magical attribute. Generally, the labels of the input text content are input and textarea. After using the contentEditable attribute, you can input content in div, table, p, span, body, and many other elements .. An edit box is displayed when you click. Use JavaScript to partially modify the webpage content. In the past, you should use the input box instead. When the contenteditable state of an element is true (the contenteditable attribute is an empty string, true, or inherit and its parent element is in the true state), it means that the element can be edited. Otherwise, the element cannot be edited. For example, <p contenteditable> my content can be modified </p> you can customize a style as follows: Use a contour line instead of a border, because it does not add elements to the box model, therefore, the page area does not flash suddenly when triggered. [Contenteditable]: hover, [contenteditable]: focus {outline: 2px dotted red;} to edit the entire webpage, set contentEditable in the body or html Tag. This is similar to the desginMode described below. 2. share several interesting applications. contenteditable is very useful when you want to interact with the demo and change the value of the tutorial, such as a CSS demonstration. Another amazing thing: enter data: text/html in the browser's address bar and <Form> User name: <input type = "text" name = "name" accesskey = "n"/> <p/> password: <input type = "password" name = "password" accesskey = "p"/> <p/> <input type = "submit" value = "Logon" accesskey = "s" /> </form>

 

8. The draggable and dropzone attributes are used together because they are part of the new drag-and-drop API (DnD API. Draggable indicates whether to allow users to drag elements. dropzone specifies the area to which the elements are dragged. The draggable attribute has three values: true indicates that the element can be dragged; false indicates that the element cannot be dragged; auto indicates that the default behavior of the user agent is used. The dropzone attribute has three values: copy indicates creating a copy of The dragged element; move actually moves the element to a new position; link creates the link of the dragged data. There is not much research to mention.