【HTML5高级第三篇】drag拖拽、音频视频、defer/async属性、dialog应用

以下是针对HTML5高级特性的代码示例：

1. 音频和视频标签：

<!-- 音频标签 -->
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>
 
<!-- 视频标签 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

2. defer和async属性：

<!-- defer属性用于延迟脚本的执行 -->
<script src="app.js" defer></script>
 
<!-- async属性用于异步加载脚本，加载完毕后脚本会尽快执行 -->
<script src="jsonp.js" async></script>

3. dialog元素的使用：

<!-- 使用dialog元素创建一个对话框 -->
<dialog open>
  <dt>标题</dt>
  <dd>这是一个打开的对话框。</dd>
  <menu>
    <button onclick="this.parentNode.close()">关闭</button>
  </menu>
</dialog>

这些代码示例展示了HTML5中音频和视频的嵌入方法，以及如何使用defer和async属性来优化脚本的加载和执行。最后，dialog元素被用来创建一个可交互的对话框。