第二节课：html5 – web开发步入新阶段

1991
HTML
1996
CSS
1
+
Javascript
1998
CSS
2
2002
Tableless
2009
HTML5

91
94
96
97
98
00
02
05
09

1994
HTML
2
1997
HTML
4
2000
XHTML
1
2005
AJAX

<p> JS </p>

<figure
id="l4”>

<figcaption> 14 </figcaption>

<pre><code>document.createElement("div");</code></pre>

</figure>

<menu>

<command
type="command"> ...</command>

</menu>

<details>

<summary>fileInfo</summary>

<summary>metadata</summary>

<summary>camera
data</summary>

</details>

type="email"

type="tel"

<input
type="text"
id="name"
/>

sessionStorage.setItem("username",
document.getElementById
("name").value)

<!-‐-‐
on
next
page
-‐-‐>

alert(sessionStorage.getItem("username"))

localStorage.setItem('lng',
map.getCenter().lng);

localStorage.setItem('lat',
map.getCenter().lat);

localStorage.setItem('mapZoom',
map.getZoom());

var
db
=
window.openDatabase('MyDB',
'1.0',
'my
database',
5

*
1024
*
1024);

db.transaction(function(tx){

tx.executeSql("CREATE
TABLE
IF
NOT
EXISTS
test
(id
unique,

text)");

tx.executeSql("INSERT
INTO
test
(id,
text)
VALUES
(1,
'my

data')");

tx.executeSql("SELECT
*
FROM
test",
[],
successCallback);

});

var
idbReq
=
window.indexedDB.open("My
Database");

idbReq.onsuccess
=
function(event){

var
db
=
event.srcElement.result;

//
do
something
here

}

<html
manifest="cache.appcache">

CACHE
MANIFEST

index.html

style.css

images/logo.png

scripts/main.js

if
(navigator.geolocation)
{

navigator.geolocation.getCurrentPosition(function(pos){

alert(pos.coords.latitude
+
','
+
pos.coords.longitude);

})

}

span.addEventListener("dragstart",
function(e){

e.dataTransfer.setData("text",
this.innerHTML);

});

drop.addEventListener('drop',
function(e){

this.innerHTML
=
e.dataTransfer.getData('text');

},
false);

holder.ondrop
=
function
(e)
{

e.preventDefault();

var
file
=
e.dataTransfer.files[0],

reader
=
new
FileReader();

reader.onload
=
function
(event)
{

holder.style.background
=
'url('
+
event.target.result

+
')
no-‐repeat
center';

};

reader.readAsDataURL(file);

return
false;

};

holder.ondrop
=
function
(e)
{

e.preventDefault();

var
file
=
e.dataTransfer.files[0],

reader
=
new
FileReader();

reader.onload
=
function
(event)
{

holder.innerHTML
=
event.target.result;

};

reader.readAsText(file);

return
false;

};

<a
href="pic.png"
id="dragout"
draggable="true"
data-‐
downloadurl="application/octet-‐stream:pic.png:URI">A

Picture</a>

var
file
=
document.getElementById('dragout');

file.ondragstart
=
function(e){

e.dataTransfer.setData('DownloadURL',

file.dataset.downloadurl);

}

window.addEventListener("deviceorientation",
function(e){

var
a
=
e.alpha;

var
b
=
e.beta;

var
g
=
e.gamma;

},
false);

var
socket
=
new
WebSocket(host);

socket.send(message);

socket.onmessage
=
function(message){alert(message.data);}

format
IE9
Firefox
3.5
Opera
10.5
Chrome
3
Safari
3

Ogg
Vorbis
No
Yes
Yes
Yes
No

MP3
Yes
No
No
Yes
Yes

WAV
No
Yes
Yes
No
Yes

format
IE
Firefox
Opera
Chrome
Safari

Ogg
No
3.5+
10.5+
5.0+
No

MP4
9.0+
No
No
5.0+
3.0+

WebM
No
4.0+
10.6+
6.0+
No

var
canvasContext
=
document.getElementById
("canvas").getContext("2d");

canvasContext.fillRect(250,
25,
150,
100);

canvasContext.beginPath();

canvasContext.arc(450,
110,
100,
Math.PI
*
1/2,
Math.PI
*
3/2);

canvasContext.lineWidth
=
15;

canvasContext.lineCap
=
'round';

canvasContext.strokeStyle
=
'rgba(255,
127,
0,
0.5)';

canvasContext.stroke();

var
context
=
canvas.getContext("experimental-‐webgl");

More
WebGL
Demos
at

hNp://www.chromeexperiments.com/

XMLHttpRequest
2

ì 

ì 

ì 

ì

.row:nth-‐child(even){

background:
#dde;

}

.row:nth-‐child(odd){

background:
white;

}

button:not([DISABLED])

*:not(span)

:enabled

:required

@font-‐face
{

font-‐family:
Gentium;

src:
url(http://example.com/fonts/Gentium.ttf);

}

p
{
font-‐family:
Gentium,
serif;
}

div
{

-‐webkit-‐text-‐fill-‐color:
white;

-‐webkit-‐text-‐stroke-‐color:
black;

-‐webkit-‐text-‐stroke-‐width:
1px;

}

Vendor
Preﬁxes

ì  -‐webkit-‐xxxx

ì  -‐moz-‐xxxx

ì  -‐o-‐xxxx

Vendor
Preﬁxes

div
{

1 x
1px
5px
#888

-‐moz-‐box-‐shadow:
1px
1px
5px
#888;

box-‐shadow:
1px
1px
5px
#888;

}

color:
rgba(255,
0,
0,
0.75);

background:
rgba(0,
0,
255,
0.25);

border-‐radius:
10px

background-‐image:
-‐moz-‐linear-‐gradient(#fff,
#000);

background-‐image:
-‐moz-‐linear-‐gradient(30deg,
#000,
#fff

75%,
#000);

text-‐shadow:
4px
4px
1px
#aaa;

box-‐shadow:
1px
1px
2px
#fff;

box-‐shadow:
inset
0
0
10px
#000;

.left{background:
red;left:0px}

.right{background:
green;left:1000px}

#myDiv
{

-‐webkit-‐transition:
left
1s
ease-‐in-‐out,
background
1s

ease-‐in-‐out;

}

-‐webkit-‐transform:
rotateY(45deg);

scaleX(2);

translate3d(0,
0,
90deg);

@-‐webkit-‐keyframes
movingbox{

0%{left:90%;}

50%{left:10%;}

100%{left:90%;}

}

.box2{
-‐webkit-‐animation:movingbox
5s
infinite;
}

hNp://dev.w3.org/html5/spec/Overview.html

hNp://www.html5rocks.com/en/

hNp://diveintohtml5.org/

hNp://www.sitepoint.com/tag/html5/

hNp://www.css3.info/

第二节课：html5 – web开发步入新阶段

More Related Content

What's hot (19)

Viewers also liked (17)

第二节课：html5 – web开发步入新阶段