HTML5 是 W3C 与 WHATWG 合作的结果
HTML5 中的一些有趣的新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、searc
<video> 标签的属性
属性 | 值 | 描述 |
autoplay | 如果出现该属性,则视频在就绪后马上播放。 | |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 | |
pixels | 设置视频播放器的高度。 | |
loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 | |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | |
url | 要播放的视频的 URL。 | |
pixels | 设置视频播放器的宽度。 |
<audio> 标签的属性
属性 | 值 | 描述 |
autoplay | 如果出现该属性,则音频在就绪后马上播放。 | |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 | |
loop | 如果出现该属性,则每当音频结束时重新开始播放。 | |
preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | |
url | 要播放的音频的 URL。 |
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
Demo Code: