HTML5


Reference document:

http://www.w3school.com.cn/html5/html_5_intro.asp

 

1. Use <video> to display some video in html  (mp4. ogg.)

<video src="movie.ogg" controls="controls"> </video>　　

2. Use <audio> to play some music(mp3. Wav. Ogg Vorbis)

<audio src="music.mp3" controls="controls"></audio>

3.Drag and Drop

如果你想拖动图片，做下面几步：

　　A. draggable 设为true

<image src="picture.jpg" draggable="true" />

　　B. ondragstart 开始拖动的事件触发，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

　　C. ondragover 事件规定在何处放置被拖动的数据

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法


　　D. 当放置被拖数据时，会发生 drop 事件。

4. canvas

这个元素可以画一些简单的图形如直线，圆形或者是直接贴图......

5. SVG

http://www.w3school.com.cn/svg/index.asp

 

5.HTML5 地理定位 (我最喜欢的HTML5特性)

  原理：HTML5 Geolocation API 用于获得用户的地理位置。 然后用getCurrentPosition() 方法来获得用户的位置。

　showPosition()可以显示经度纬度。 如果需要将地图显示在网页上就用google地图或者是百度地图将经度纬度在地图上标示出来.

Example： http://www.w3school.com.cn/tiy/t.asp?f=html5_geolocation_map