简介
HTML 5 的一些规则
- 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
- 减少对外部插件的需求（比如 Flash）
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML 5 应该独立于设备
- 开发进程应对公众透明
新特性
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML 5 特性。Internet Explorer 9 将支持某些 HTML 5 特性。
video 视频
用于显示视频资源 你的浏览器不支持 video 标签
示例
复制代码
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。
<video>标签可以插入多个<source>标签。<source>标签可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
复制代码
video 标签的属性
| 属性 | 说明 | 值 |
|---|---|---|
| src | 指定视频的url | (有效的视频url, 支持Ogg, MPEG 4, WebM 格式) |
| poster | 视频封面,视频加载成功之前显示 | (有效的图片url) |
| autoplay | 视频加载后自动播放 | autoplay |
| preload | 视频是否预加载。如果设置了`autoplay`属性, 则忽略该设置,使用默认值`auto` |
|
| controls | 显示播放按钮,音量按钮等控件 | controls |
| loop | 循环播放 | loop |
| width/height | 宽/高 | 就是宽高的用法啦 |
source 媒体资源
为媒体元素（比如 <video> 和 <audio>）定义媒体资源。 设置多个source浏览器依次识别资源直到找到可读取的媒体资源,以此可兼容不同浏览器。若是有的ie依然不支持可以在source后面使用flash标签。
示例
audio:
复制代码
video:
复制代码
注意:
- 当 audio 和video 标签设置了src属性时，里面的source标签无效。
- source 标签本身不代表任何含义, 单独使用不会出现任何效果
source 标签的属性
| 属性 | 说明 | 值 |
|---|---|---|
| src | 媒体文件的 URL | (有效的媒体url) |
| type | 媒体文件的类型 | (有效的图片) |
| media | 指定媒体资源的类型(几乎所有的主流浏览器都不支持 media 属性。) | |
audio 音频
用于播放声音文件或者音频流
示例
复制代码
或者
复制代码
audio标签的属性
| 属性 | 说明 | 值 |
|---|---|---|
| src | 指定音频的URL | (有效的音频URL,支持Ogg Vorbis、MP3、Wav等格式) |
| autoplay | 音频加载后自动播放 | autoplay |
| preload | 音频是否预加载。如果设置了`autoplay`属性, 则忽略该设置,使用默认值`auto` |
|
| controls | 显示播放按钮,音量按钮等控件 | controls |
| loop | 循环播放 | loop |
canvas 图形
canvas 通过js绘制图形。 canvas 标签本身没有绘图能力，标签提供一个画布，使用js 来控制画布内的每一个像素。
参考：
HTML5从入门到精通