html5有新屬性，例contextmenu、contentEditable、hidden、draggable、「data-*」、placeholder、required、pattern、autofocus、autocomplete等等。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML5新增屬性

1.1、contextmenu

#contextmenu的作用是指定右鍵選單。

 運作效果：

contextmenu 在Html5中，每個元素新增了一個屬性：contextmenu, contextmenu 是上下文選單，即滑鼠右鍵元素會出現一個選單。
menu 要實現滑鼠右鍵元素會出現一個選單，還必須了解HTML5裡新增的另一個元素:menu 顧名思義menu是定義選單的， menu 元素屬性： type ：選單類型屬。有三個值1）context：上下文； 2）toolbar：工具列；3）list：列表

1.2 、contentEditable

規定是否可編輯元素的內容
屬性值：
true   -----可以編輯元素的內容
false  -----無法編輯元素的內容
inherit -----繼承父元素的contenteditable屬性
當為空字串時，效果和true一致。
當一個元素的contenteditable狀態為true（contenteditable屬性為空字串，或為true，或為inherit且其父元素狀態為true）時，表示該元素是可編輯的。否則，該元素不可編輯。

document.body.contentEditable=true; 可以修改已發佈網站

    
        
        
    

    
        
contentEditable属性
        

            Hello contentEditable
        
    

1.3、hidden

# hidden屬性用於隱藏該元素。一旦使用了此屬性，則該元素就不會在瀏覽器中被顯示
2個布林值
true 規定元素是可見。
false 規定元素是不可見。

為了相容一些不支援該屬性的瀏覽器（IE8），可以在CSS中加上以下樣式：

*[hidden]{
   display: none;
}

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

1.4、draggable

#規定元素是否可拖曳
3個枚舉值
true 規定元素是可拖曳的。
false 規定元素是不可拖曳的。
auto 使用瀏覽器的預設特性。

範例：

執行結果： 

##1.5、data- *

取值：
getAttribute('data-order-amount')
dataset.orderAmount
jQuery中的data()方法同樣可以存取

    
        
        
        
    

    
        
data-*
        

        添加数据
        获取数据
        
    

#1.6、placeholder佔位屬性

            

                邮箱：
                
            

1.7、required必填屬性##限製表單元在提交前必須輸入值。

            

                博客：
                
            

##約束使用者輸入的值必須與正規表示式相符。

            

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

登入後複製

1.9、autofocus自動聚焦屬性

            

                博客：
                
            

登入後複製

讓指定的表單元素獲得焦點。

1.10、autocomplete自動補全屬性

當表單元素設定了自動完成功能後，會記錄使用者輸入的內容，雙擊表單元素會顯示歷史輸入。

该属性默认是打开的。

1.11、novalidate不验证属性

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

提交

1.12、multiple多选属性

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

            

                相片：