> ## :-: [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> <!-- 其他 自定义属性 --> ```