html5 has new attributes, such as contextmenu, contentEditable, hidden, draggable, "data-*", placeholder, required, pattern, autofocus, autocomplete, etc.

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

HTML5 new attributes

1.1, contextmenu

The function of contextmenu is to specify the right-click menu.

Running effect:

contextmenu In Html5, each element has a new attribute: contextmenu, contextmenu is the context menu, that is, right-click the mouse A menu will appear for the element.
menu To realize that a menu will appear when you right-click an element, you must also understand another new element in HTML5: menu. As the name suggests, menu defines the menu. The menu element attributes: type: menu type attribute. There are three values ​​​​1) context: context; 2) toolbar: toolbar; 3) list: list

1.2 , contentEditable

Specifies whether the content of the element can be edited
Attribute value:
true -----The content of the element can be edited
false -----The element cannot be edited Content
inherit -----Inherit the contenteditable attribute of the parent element
When it is an empty string, the effect is the same as true.
When the contenteditable status of an element is true (the contenteditable attribute is an empty string, or is true, or is inherit and its parent element status is true), it means that the element is editable. Otherwise, the element is not editable.

document.body.contentEditable=true; You can modify the published website

    
        
        
    

    
        
contentEditable属性
        

            Hello contentEditable
        
    

1.3、hidden

The hidden attribute is used to hide the element. Once this attribute is used, the element will not be displayed in the browser
2 Boolean values ​​
true specifies that the element is visible.
false specifies that the element is invisible.

In order to be compatible with some browsers (IE8) that do not support this attribute, you can add the following style to CSS:

*[hidden]{
   display: none;
}

var p1=document.querySelector("body #p1");
p1.innerHTML+=" +++";

1.4, draggable

Specifies whether the element can be dragged
3 enumeration values
true specifies whether the element is draggable.
false specifies that the element is not draggable.
auto uses the browser's default features.

Example:

Run result:

##1.5, data- *

Value:
getAttribute('data-order-amount')
dataset.orderAmount
The data() method in jQuery can also be accessed

    
        
        
        
    

    
        
data-*
        

        添加数据
        获取数据
        
    

1.6, placeholder attribute

            

                邮箱：
                
            

1.7, requiredRequired attribute

            

                博客：
                
            

1.8, pattern regular attribute

            

                帐号：
                请输入a-zA-Z0-9且长度6-16位的字符            
                

1.9, autofocus automatic focus attribute

            

                博客：
                
            

Copy after login

1.10. autocomplete attribute

该属性默认是打开的。

1.11、novalidate不验证属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

提交

1.12、multiple多选属性

multiple 属性规定输入域中可选择多个内容，如：email 和 file

            

                相片：