> ## :-: [HTML5新增標簽](http://www.w3school.com.cn/html5/html_5_intro.asp) ```html <!-- 跟div完完全全一樣，只是更加語義化了、 --> <header></header> <footer></footer> <article>div</article> <section>p</section> <!-- Article --- div --> <!-- Section --- p --> <nav></nav> <aside></aside> <!-- svg、canvas ----- 是繪圖用的標簽 --> <!-- svg --> <canvas></canvas> <!-- 多媒體類標簽 --> <audio src=""></audio> <video src=""></video> <!-- 自定義標簽(span) --> ``` > ## :-: HTML5新增屬性 ```html <!-- contenteditable --- 用戶能否修改頁面上的內容(true/false) --> <div contenteditable="true">demo123</div> ```  ```html <!-- draggable --- 允許拖放(true/false) --> <div id="demo" draggable="true"></div> <!-- draggable 配合使用 .wrap為釋放區(事件) --> <div id="wrap"></div> <script> // 開始拖動 - 觸發的事件 demo.ondragstart = function(e) { console.log('start', e); } // 拖動時 - 觸發的事件 demo.ondrag = function(e) { console.log('drag', e); } // 拖動結束 - 觸發的事件 demo.ondragend = function(e) { console.log('end', e); } // ---> 釋放區事件、與 draggable 配合使用 // 拖入 - 觸發的事件 wrap.ondragenter = function(e) { console.log('enter'); } // 在釋放區拖動 - 觸發的事件 wrap.ondragover = function(e) { // 阻止冒泡 preventDefault e.preventDefault(); console.log('over'); } // 離開/松開 - 觸發的事件 wrap.ondragleave = function(e) { console.log('leave'); } // 放下(與over沖突，需阻止冒泡) - 觸發的事件 wrap.ondrop = function(e) { console.log('drop'); } </script> ```  ```html <!-- 隱藏標簽：hidden === display:none; --> <div class="demo" hidden>我被隱藏了</div> <!-- 其他 自定義屬性 --> ```