HTML标签(三)(超链接、音频、视频)

---

一、超链接标签

1.链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

两个属性的作用如下：

属性	作用
href	用于指定链接目标的URL,（必须属性）当为标签应用href属性时，就具有了超链接的功能
target	用于指定链接页面的打开方式，其中，_self为默认值，_blank为在新窗口打开方式

2. 链接的分类

1. 外部链接: 例如
   <a href="http:// www.baidu.com "> 百度</a>
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如
   < a href="index.html"> 首页</a>
3. 空链接: 如果当时没有确定链接目标时，例如：
   < a href="#"> 首页</a>
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置。
   （1） 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集</a>
   （2） 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如<h3 id="two">第2集介绍</h3>

二、音频：<audio>

1.语法

<audio src="文件地址" controls="controls"></audio>

 < audio controls="controls" >
 <source src="happy.mp3" type="audio/mpeg" >
 <source src="happy.ogg" type="audio/ogg" >
 您的浏览器暂不支持 <audio> 标签。
 </ audio>

2.支持格式

当前<audio>支持三种音频格式：

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

3.常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	lpoop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频URL

谷歌浏览器把音频和视频自动播放禁止了

三、视频：<video>

1.语法

<video src="文件地址" controls="controls"></video>

<video controls="controls" width="300">
 <source src="move.ogg" type="video/ogg" >
 <source src="move.mp4" type="video/mp4" >
 您的浏览器暂不支持 <video> 标签播放视频
 </ video >

2.格式支持

当前 元素支持三种视频格式： 尽量使用 mp4格式

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES	YES	YES

3.常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto（预先加载视频） none（不应加载视频）	规定是否预加载视频（如果有了autoplay，就忽略该属性）
src	url	视频url地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

四、总结

1.音频标签和视频标签使用方式基本一致
2.浏览器支持情况不同
3.谷歌浏览器把音频和视频自动播放禁止了
4.我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）