3.超链接、图片、音频、视频

1.超链接：<a>

· href：链接的地址
· title：鼠标放上去显示的文字
· target：_self在当前窗口打开（默认值）、_blank在新窗口打开、_parent把文档载入父窗口或包含了超链接引用的框架的框架集、_top把文档载入包含该超链接的窗口 取代任何当前正在窗口显示的框架

· 锚链接：href='要跳转区域的id'

<a href="http://www.baidu.com" title="鼠标放上去显示的文字" target="_blank">百度</a>

<!-- 锚链接  -->
<a href="#id1">链接1</a>
<a href="#id2">链接2</a>
<a href="#">返回顶部</a>
<p id="id1">内容1</p>
<p id="id2">内容2</p>

 

2.图片：<img>

· src：图片路径（jpg不支持动画 不支持透明度；png不支持动画 支持透明度；gif支持动画 支持透明度）
· title：当鼠标移动到该位置显示的文字
· alt：当图片无法显示时的替代文字
· width/height：只设置一个时，另一个会等比例缩放。所以通常只设置一个
· 绝对路径：完整路径。主要用来链接外部资源
· 相对路径：以当前所在的目录作为参考（例如返回上级目录：../image/img1.png）

<img src="../..//assets/logo.png" title="当鼠标移动到该位置显示的文字" alt="当图片无法显示时的替代文字" width="50px">

 

3.音频：<audio>--支持的三种格式ogg、mp3、wav

· src：音频路径
· controls：显示控件
· autoplay：自动播放
· loop：重复播放
· preload：页面加载时就开始预备播放，当有autoplay属性时preload就会失效
· muted：静音播放

<audio src="../../assets/audio/audio1.mp3" controls loop preload="">你的浏览器不支持audio</audio>

 

4.视频：<video>--支持的三种格式ogg、mp4、webm

· src：视频路径（同音频）
· controls：显示控件（同音频）
· autoplay：自动播放（同音频）
· loop：重复播放（同音频）
· preload：页面加载时就开始预备播放（同音频）
· poster：视频加载时用户点击播放按钮前显示的图片
· source：解决浏览器兼容问题，原理就是指定多个文件来源（注意：如果使用了poster就不能使用src元素）

<video src="../../assets/video/video1.mp4" controls loop preload="" poster="../../assets/imgs/img3.jpg" height="300px"></video>

//解决浏览器兼容问题，但是如果使用了poster就不能使用src元素
<video controls loop preload="" poster="../../assets/imgs/img3.jpg" height="300px">
    <source src="../../assets/video/video1.mp4" type="video/mp4">
    <source src="../../assets/video/video1.ogg" type="video/ogg">
</video>