HTML全域性屬性
阿新 • • 發佈：2022-04-05
HTML5的全域性屬性是指在HTML5的任何元素中都可以使用的屬性。
draggable元素
draggable元素用來定義頁面中的元素是否可以拖動，該屬性有2個值：true和false，預設為false，當值為true時表示元素選中之後可以進行拖動操作，否則不能拖動。
下面通過一個案例對draggable屬性的用法進行演示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>draggable元素的使用</title> 6 </head> 7 <body> 8 <h3>元素拖動屬性</h3> 9 <article draggable="true">這些文字可以被拖動</article> 10 可拖動的圖片<img src="鳥巢.webp" draggable="true" /> 11 </body> 12 </html>
執行效果如圖所示：
hidden元素
在HTML5中，大多數元素都支援hidden屬性，該屬性有兩個屬性值：true和false。當hidden屬性取值為true時，對應元素將會被隱藏，反之則會顯示。
元素中的內容是通過瀏覽器建立的，頁面裝載後允許使用JavaScript指令碼將該屬性取消，取消後該元素變為可見狀態，同時元素中的內容也及時顯示出來。
spellcheck屬性
spellcheck屬性主要針對Input元素和textarea文字輸入框進行設定，對使用者輸入的文字內容進行拼寫和語法檢查。
spellcheck屬性有2個值：true（預設值）和false，值為true時檢測文字輸入中的值，反之不檢測。
下面通過一個案例對spellcheck元素做演示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4<meta charset="utf-8"> 5 <title>spellcheck元素的使用</title> 6 </head> 7 <body> 8 <h3>輸入框語法檢測</h3> 9 <p>spellcheck屬性值為true<br/> 10 <textarea spellcheck="true">html5</textarea> 11 </p> 12 <p>spellcheck屬性值為false<br/> 13 <textarea spellcheck="false">html5</textarea> 14 </p> 15 </body> 16 </html>
執行效果如圖所示：
contenteditable屬性
contenteditable屬性規定是否可編輯元素的內容，但是前提是該元素必須可以獲得滑鼠指標焦點並且其內容不是隻讀的。
在HTML5之前的版本如果直接在頁面上編輯文字需要編寫比較複雜的JavaScript程式碼，但是在HTML5中只要指定該屬性的值即可。該屬性有兩個值（true和false）。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>contenteditable元素的使用</title> 6 </head> 7 <body> 8 <h3>可編輯列表</h3> 9 <ul contenteditable="true"> 10 <li>列表1</li> 11 <li>列表2</li> 12 <li>列表3</li> 13 <li>列表4</li> 14 </ul> 15 </body> 16 </html>
執行效果如圖所示：