html5 媒体
一. a 标签 : 链接
<a href="“URL”"> ~ </a>
1. 属性说明：
| 属性 | 描述 |
|---|---|
| href | 定义链接地址 |
| title | 链接提示信息 |
| target | 链接打开方式(_blank 新的空白页,_self 当前页,_top) |
2. 常规应用：
<a href=“http://www.163.com”>外部链接</a>
<a href=“about.html”>内部链接 </a>
3. 其他应用：
<a href="“mailto:邮箱地址”">邮件链接</a>
<a href="“tel:电话号码”">一键拨打</a>
<a href="sms:139xxxxxxx">一键发送短信</a>
href 链接的地址可以是绝对地址也可以是相对地址，也可以是页面文档的某个部分
4. 绝对地址
<a href=“http://www.163.com”>外部链接</a>
5. 相对地址
<a href="“about.html”">内部链接 </a>
锚点——————页面文档的某个部分
<a href="“#bgg”">内部链接 </a> <a name="“bgg”">内部链接 </a>或者<a id="“bgg”"
>内部链接
</a>
注意id是唯一的。
二. img 元素 : 图像
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<img src="img/timg.jpg" alt="加载不成功" width="240" height="160" />
</body>
</html>
属性说明：
| 属性 | 描述 |
|---|---|
| src | 图片源地址 |
| alt | 加载不成功显示的内容 |
| width | 图片的宽度 |
| height | 图片的高度 |
三. 图像热区 map 元素(扩展)
<map> 属性 与 <area> 属性一起使用来定义一个图像映射 (一个可点击的链接区域).
图像热区就是能够通过点击图片的某一部分跳转。
<img src="img/charector.png" alt="加载不成功" width="800" usemap="#bgg" />
<map name="bgg">
<area
shape="rect"
coords="50 50 150 150"
href="http://www.baidu.com"
alt="加载不成功"
/>
<area
shape="rect"
coords="0 0 20 20"
href="http://taobao.com"
alt="加载不成功"
/>
</map>
说明:
- 有
map标签，map标签里面有area标签 map标签可以把所有的area(区域)包裹起来。area(区域)标签要有形状(shape),有坐标(coords),链接地址(href),alt
四. audio : 音频
带控制器的音频播放器
<audio src="song.ogg" controls="controls"></audio>
如果考虑到不同浏览器对视频文件的兼容性
<audio width="320" height="240" controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
<p>Your browser does not support the audio tag.</p>
</audio>
标签常用属性：
| 属性 | 值 | 说明 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的音频的 URL |
五. video : 视频
带控制器的视频播放器
<video src="movie.mp4" controls="controls"></video>
如果考虑到不同浏览器对视频文件的兼容性
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
标签常用属性：
| 属性 | 值 | 说明 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 规定视频的音频输出应该被静音。 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL |
| width | pixels | 设置视频播放器的宽度。 |
| height | pixels | 设置视频播放器的高度。 |