HTML5 提供了展示视频的标准.
<video src="movie.ogg" controls="controls">
</video>
control 属性供添加播放、暂停和音量控件。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的.
方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width
如需在 HTML5 中播放音频，您所有需要的是:
<audio src="song.ogg" controls="controls">
</audio>
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
拖放（Drag 和 drop）是 HTML5 标准的组成部分。
1.设置元素为可拖放<img draggable="true" />
2.然后，规定当元素被拖动时，会发生什么ondragstart 和 setData()
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据
dataTransfer.setData() 方法设置被拖数据的数据类型和值
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
数据类型是 "Text"，值是可拖动元素的 id ("drag1").
3.放到何处 - ondragover 规定在何处放置被拖动的数据
通过调用 ondragover 事件的 event.preventDefault() 方法
4.进行放置 - ondrop
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中.
canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成.
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
-----------------------
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
<html manifest="demo.appcache">
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的
FALLBACK
FALLBACK:
/html5/ /404.html 第一个 URI 是资源，第二个是替补。
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存
完整的 Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发生和接收消息了.
向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
终止 Web Worker: w.terminate();
由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
window 对象
document 对象
parent 对象
分享到：
相关推荐
北京神奇时代网络的首席技术专家张哲，诚挚献上专为HTML5游戏开发者准备的实战感悟与宝贵经验。精华要点涵盖： “三国时代OL”实战体验 HTML5技术的利弊权衡 在iPhone上实现HTML5的探索 Application Cache深入解析 3...
【HTML5大作业1】是梧州学院大数据与软件工程学院软件工程专业的一份课程作业，旨在通过制作个人技术博客分享网站来实践HTML5技术。这个项目不仅关注于视觉设计，还强调了交互性和功能性，提供了多种用户互动的模块...
HTML5和CSS3是现代网页设计的两大核心技术，它们为创建功能丰富、交互性强且视觉效果出众的网站提供了强大的工具。这款"html5模板-志愿者主题CSS3网站模板"是专为志愿者活动或非营利组织设计的一整套网页设计方案。 ...
【标题】"天蓝色背景旅行日志html5模板"是一个专为个人博客设计的网页模板素材，其特点是采用清新的天蓝色调，给人一种宁静而舒适的视觉体验。这种模板旨在为喜欢分享旅行故事或日常生活的人们提供一个优雅的展示...
总结来说，这个"jQuery客户感言展示特效"项目结合了HTML5、CSS和jQuery，展示了如何创建一个动态的、用户友好的感言展示区。通过学习这个项目，开发者不仅可以掌握基础的网页元素布局和样式设计，还能深入了解jQuery...
- **H5 (HTML5)**：提供了更多的语义化标签，如、、、等，增强了网页内容的可读性和可访问性。 3. **页面组件**： - `base.html` 可能是基础样式或布局模板，包含全局的CSS样式和脚本。 - `logic.html` 涉及到...
这个模板采用了现代化的设计风格，结合了HTML5的新特性，提供了丰富的功能和自定义选项。 在网页设计中，HTML5（HyperText Markup Language第五版）是目前广泛使用的标记语言，它增强了网页的结构化和语义化，提高...
该资源是一个基于HTML5的网页模板，专门设计用于创建清爽、漂亮的个人旅行日志或博客。标题和描述中提到了几个关键元素，包括天蓝色调、清爽风格、旅行主题、日志功能、扁平化设计、iOS风格以及响应式布局。这些都是...
《Clean简洁响应式HTML5博客模板解析》 在当今互联网时代，网站设计的趋势越来越倾向于简洁化和响应式布局。Clean博客模板就是这样一个优秀的实例，它以其简洁的设计风格、高效的响应式特性，为个人博客和简单技术...
【天蓝色背景旅行日志HTML5模板】是针对个人博客设计的一款清新、优雅的网页模板素材，它以天蓝色为主色调，营造出一种宁静而舒适的视觉体验，旨在为用户提供一个展示旅行经历、分享生活感悟的理想平台。这款模板以...
3. **jingyanzongjie.html**、**ganxiang.html**、**xindetihui.html**、**mingyanxinshang.html**、**gerenjieshao.html**：这些是HTML文件，很可能代表了不同的页面，如经验总结、感悟、心得体会、名言心赏和个人...
DOCTYPE html>`声明，定义文档类型为HTML5。接着是`<html>`元素，它是整个页面的根元素。在`<html>`内部，`<head>`包含元信息如标题，而`<body>`则容纳页面内容。 2. **标题元素**：`<title>`位于`<head>`内，用于...
此外，HTML5引入的新特性，如离线存储（`<applicationCache>`）、音频/视频处理（`<audio>`、`<video>`）等也是笔记的重要部分。 CSS（Cascading Style Sheets）则负责网页的样式和布局。CSS通过选择器（如类名、ID...
【人物生活HTML博客模板】是一种专门用于记录个人生活故事和思想感悟的网页设计模板，它以HTML语言为基础，为创建个性化博客提供了便捷的框架。HTML（HyperText Markup Language）是网页制作的基础，它通过标记性...
- **HTML5**: 作为网页的基础构建语言，用于定义和组织网页内容。 - **CSS3**: 用于网页样式的定义和美化，通过CSS3可以实现更加丰富的视觉效果和更复杂的布局。 - **JavaScript (JS)**: 提供了交互性和动态功能的...
在这个项目中，源码很可能是围绕毕业季主题进行设计的，可能包含毕业照、毕业感言、活动回顾等内容。设计师可以通过修改图片、文字、背景等元素，打造独特的毕业季氛围。 8. 移动优化： Swiper对移动设备有很好的...
以每天8小时计算，这相当于5年全职工作或学习。计算机科学因其深度和广度，对这一定律有着鲜明的体现。 软件工程涵盖了前端、后端和移动端开发，每个领域都有其独特的技术和挑战。前端开发关注用户界面和用户体验，...
HTML5的新特性如语义元素（如、、等）、离线存储以及多媒体支持，使得博客内容更加丰富且易于阅读。 CSS（Cascading Style Sheets）则负责网页的样式和布局。在本模板中，我们可以看到Bootstrap.css、font-awesome....
- **HTML5**: 利用HTML5的新特性来增强页面的结构和语义。 - **CSS3**: 使用CSS3的新属性和选择器来实现更复杂的样式和动画效果。 - **JavaScript**: 增加动态交互功能，如图片轮播、下拉菜单等。 #### 3.3 网站...
【小清新简洁响应式HTML5博客模板】是一个专为个人风景博客设计的网站源码，其特点是风格清新、布局简洁，并且具备响应式设计。在当前互联网时代，一个优秀的博客模板不仅能吸引用户，还能提升用户体验，使内容更...