9

HTML5 ()

II

HTML5 ()

Canvas

Canvas

HTML5 ()

III

Web Storage

IV

HTML5 ()

HTML5 ()

VI

HTML5 ()

HTML5 ()

VII

VIII

HTML5 ()

HTML5 ()

IX

CSS3

Canvas

HTML5 ()

HTML5 ()

XI

XII

HTML5 ()

HTML5 ()

XIII

XIV

HTML5 ()

HTML5 ()

XV

XVI

HTML5 ()

XMLHttpRequest

Canvas

XMLHttpRequest

HTML5 ()

XVII

XMLHttpRequest

JSON

XVIII

HTML5 ()


HTML5 2012
HTML5 2012 12 17
W3C HTML5 CRCandidate Recommendation

Indexed Database API API

HTML5

HTML5
PC HTML5
HTML5
2013 HTML5
HTML5
HTML5

http://html5.kangting.tw/

HTML5 HTML5
C#
1,000

Apple Flash
HTML5 Web
Adobe Flash HTML5
Windows 8
HTML5

HTML5
Web

HTML5 Web

HTML5 HTML5
HTML CSS3 API

ii

HTML5 ()

HTML5 HTML CSS JavaScript

JavaScript

Chrome
HTML5

Chrome

HTML5 W3C HTML5

JavaScript CSS3
HTML
CSS JavaScript
jQuery

Indexed Database API

http://html5.kangting.tw/books/ps2/

http://html5.kangting.tw/books/ps2/
http://www.kangting.tw
e-Mailtim@pie.com.tw
HTML5 ()

iii

HTML5

HTML5

/ video / audio

HTML

JSON

INPUT

HTML5
CSS3
HTML5 CSS3
Canvas
Canvas

Web Web Storage

Web Workers

Server-Sent Events

iv

XMLHttpRequest

Ajax

WebSocket API

HTML5 ()

Indexed Database API

A
HTML5

 contentes

HTML5
1.1
1.2
1.3
1.4
1.5
1.6
1.7
1.8

HTML5 .............................. 1-2

HTML5 .................................................. 1-4
HTML5 ? .......................... 1-6
HTML5 ................................... 1-7
HTML5 ..........................................................1-10
HTML5 ........................................................................... 1-11
HTML CSS JavaScript.........................................1-12
.........................................................................1-14
SUMMARY....................................................................................1-15

HTML5
2.1
2.2
2.3
2.4

HTML5 .................................................................................... 2-2

................................................................................. 2-3
html ..................................................................................... 2-4
......................... 2-5
head metadata

2.4.1
2.4.2
2.4.3
2.4.4
2.4.5
2.4.6
2.4.7
2.4.8

2.5

...................................................... 2-5
title.............................................................................. 2-6
base ........................................................................... 2-8
style ................................................................... 2-9
link ................................................................... 2-10
script .............................................. 2-12
noscript ................................................................... 2-16
meta ................................................................. 2-18

......................................................................................................2-21

2.5.1

.................................................................. 2-21

HTML5 ()

2.5.2
2.5.3

2.6

Boolean ......................................... 2-22

enumerated attribute
.................... 2-24

..............................................................................2-25
SUMMARY....................................................................................2-29

HTML
3.1
3.2

HTML .................................................................... 3-2

....3-13
HTML5 global attributes

3.2.1
3.2.2
3.2.3
3.2.4
3.2.5
3.2.6

3.3
3.4

HTML 4.01 ................................. 3-13

HTML5 .......................................... 3-22
................................................ 3-28
a .................................................... 3-30
.......................................................................... 3-34
textarea .................................................................... 3-36

.........................................................................3-40
.........................................................................3-40
SUMMARY ..................................................................................3-43

INPUT
4.1
4.2
4.3
4.4

input .................................................... 4-2

...................................................................4-10
type ..........................................................4-12
.................................................4-16

4.4.1
4.4.2
4.4.3

4.5
4.6
vi

text search........................................................... 4-16

tel url email password ................................... 4-16
........................................................... 4-20

...................................................................4-22
..........................................................................................4-27

HTML5 ()

4.7
4.8
4.9
4.10
4.11

color ................................................................................4-31
....................................................................................4-33
datalist list ...................................................4-35
formnovalidate .............................................4-37
..........................................................................................4-39

4.11.1
4.11.2
4.11.3
4.11.4

input APIconstraint validation............. 4-39

ValidityState ........................... 4-42
.................................................................. 4-47
................................. 4-49

SUMMARY....................................................................................4-49

5.1
5.2
5.3
5.4

input ............................................................................ 5-2

onmousewheel ................................................ 5-7
................................................................................................... 5-9
Drag and Drop ..........................................5-13

5.4.1
5.4.2
5.4.3

5.5

....................................................... 5-13
DataTransfer DragEvent ............................. 5-15
.................................................... 5-18

History API...................................................................................5-21

5.5.1
5.5.2
5.5.3

History API........................................................................................ 5-21

................................................ 5-25
popstate .................................................. 5-28

SUMMARY....................................................................................5-34

HTML5
6.1
6.2

HTML5 ............................................................ 6-2

.................................................... 6-5

HTML5 ()

vii

6.3
6.4
6.5
6.6
6.7
6.8
6.9
6.10
6.11
6.12

body ............................................... 6-6

HTML5 .....................................................................6-10
Sectioning Content ............................................................ 6-11
<section> .........................................................................6-13
<article> .............................................................................6-16
<nav> .................................................................................................6-20
<aside> ............................................................................................6-23
<header> <footer> ........................................................6-25
figure ................................................6-27
outline..............................................................6-32

6.12.1
6.12.2
6.12.3
6.12.4

6.13
6.14

............................................ 6-32
<hgroup> ......................................................... 6-34
............................................ 6-35
............................................ 6-40

<address> ..........................................................6-41
..............................................................................6-41
SUMMARY....................................................................................6-45

CSS3
7.1
7.2

CSS3 ........................................................................................ 7-2

.................. 7-3
Flexible Box Layout

7.2.1
7.2.2
7.2.3
7.2.4
7.2.5
7.2.6

7.3

.................................................................... 7-5
........................................................... 7-11
........................................................... 7-11
........................................................... 7-15
................................................ 7-16

CSS3 Borders..........................................7-19

7.3.1
7.3.2
viii

............................................................. 7-3

....................................................... 7-20
............................................................... 7-21

HTML5 ()

7.3.3
7.3.4

7.4

.................................................................. 7-34
column-width ................................................ 7-36
column-count ................................................ 7-39
columns.................................................................... 7-42
.................................................................. 7-42

...................................................................7-45

7.5.1
7.5.2
7.5.3
7.5.4

7.6

border-image ........................................................... 7-30

..............................................................................7-34

7.4.1
7.4.2
7.4.3
7.4.4
7.4.5

7.5

box-shadow........................................... 7-25

........................................................... 7-45
overflow-x overflow-y .......................................... 7-49
outline outline-offset ............................. 7-52
opacity....................................................... 7-54

..........................................................................................7-56
SUMMARY....................................................................................7-64

HTML5 CSS3
8.1

Selectors API ...................................................... 8-2

8.1.1
8.1.2
8.1.3

8.2
8.3

querySelector ............................. 8-4

querySelectorAll() .... 8-7

....................................................................................... 8-9
.....................................................8-30
Transform

8.3.1
8.3.2
8.3.3
8.3.4
8.3.5

8.4

................................................................. 8-2

.................................................................. 8-31
.................................................................. 8-32
.......................................................................... 8-34
.......................................................................... 8-36
.......................................................................... 8-39

.............................................8-42
CSS3 Animations

8.4.1

Keyframes ................................................................ 8-42

HTML5 ()

ix

8.4.2
8.4.3
8.4.4
8.4.5
8.4.6
8.4.7

8.5

Animation ............................................. 8-42

........................................................... 8-46
.................................................................. 8-46
.................................................... 8-50
.................................................... 8-54
....................................................... 8-56

......................................................8-58
Transition

SUMMARY....................................................................................8-67

Canvas
9.1
9.2
9.3

<canvas> ................................................................ 9-2

CanvasRenderingContext2D ......................... 9-4
............................................................................................. 9-5

9.3.1
9.3.2
9.3.3
9.3.4
9.3.5
9.3.6
9.3.7

9.4

............................................................. 9-7
beginPath() closePath() ...................................... 9-10
.................................................................. 9-12
.................................................... 9-13
.................................................................. 9-19

arc() .................................................. 9-22

translate ............................................... 9-25
arcTo() ..................................................................... 9-27
.................................................................. 9-30
........................................................... 9-34

......................................................................................................9-36

9.5.1
9.5.2
9.5.3
9.5.4
x

.............................................. 9-6

....................................................................................9-22

9.4.1
9.4.2
9.4.3
9.4.4
9.4.5

9.5

API................................................... 9-5

CSS color ................................................ 9-36

................................................ 9-38
............................................................... 9-41
fillStyle fill() .................................................. 9-42

HTML5 ()

9.6

..........................................................................................9-44

9.6.1
9.6.2
9.6.3

9.7
9.8
9.9

.......................................................................... 9-44
.................................................................. 9-45
.................................................................. 9-47

..........................................................................................9-49
...................................................................9-53
...................................................................9-58
SUMMARY....................................................................................9-60

1010.1Canvas

.....................................................................................10-2

10.2
10.3

.........................................................................10-4
...............................................................................10-7

10.3.1
10.3.2
10.3.3
10.3.4

10.4

....................................................... 10-7
.................................................................. 10-8
................................................................ 10-11
................................................................ 10-19

................................................................................. 10-23

10.4.1 ................................................. 10-23

10.4.2 .................................................. 10-27

10.5
10.6
10.7

Canvas Width Height ....... 10-34

Canvas ......................................................... 10-35
................................................................................. 10-37

10.7.1
10.7.2

10.8

................................................. 10-38
........................................................ 10-39

................................................................................. 10-45

10.8.1 .................................................. 10-45

10.8.2 ..................................................... 10-47
10.8.3 putImageData() .............................. 10-49

HTML5 ()

xi

10.8.4 .................................................. 10-51

10.9
10.10
10.11
10.12
10.13
10.14
10.15

................................................................................. 10-55
................................................................................. 10-57
............................................................... 10-63
..................................................................... 10-65
setTimeout setInterval
........................................................................................................ 10-67
................................................................................. 10-69
..................................................................... 10-71

10.15.1 .................................................. 10-71

10.15.2 ....................................... 10-74

SUMMARY .......................................................................... 10-77

11 11.1

..................................................................................... 11-2

11.2
11.3
11.4
11.5
11.6
11.6.1
11.6.2
11.6.3
11.6.4

11.7
11.7.1
11.7.2
11.7.3
xii

............................................................. 11-4
............................................................. 11-6
................................. 11-9
Cache manifest

......................................................................11-10
...................................................................... 11-11
..........................................................11-11
................................................................ 11-13
CACHE NETWORK ...................... 11-14
FALLBACK .................................................... 11-18

...............................................11-21
..................................................... 11-21
................................................................ 11-21
................................................................ 11-23

HTML5 ()

11.7.4
11.7.5

....................................... 11-27
............................... 11-28

SUMMARY ...........................................................................11-31

Web Web Storage

1212.1

Cookie ......................................................................12-2

12.2
12.3
12.4

Web ......................................................................12-4
localStorage sessionStorage ........12-6
...................................................................12-7

12.4.1 localStorage ............................................ 12-7

12.4.2 ....................................... 12-10
12.4.3 localStorage ........................ 12-13

12.5
12.6
12.7
12.8
12.9
12.10

localStorage sessionStorage .. 12-15

sessionStorage .................................... 12-17
Storage ............... 12-19
................................................................................. 12-19
........................................................................... 12-23
....................................................................................... 10-28
SUMMARY ......................................................................... 12-34

1313.1

File ......................................................13-2

13.2

.....................................................................................13-6

13.2.1
13.2.2
13.2.3
13.2.4
13.2.5

13.3

FileReader ....................................................... 13-6

.................................................... 13-8
................................................................ 13-15
.................................................. 13-19
................................................................ 13-25

................................................................................. 13-29
HTML5 ()

xiii

13.4
13.5

..................................................................... 13-32
BlobBuilder ............................................. 13-34
SUMMARY .......................................................................... 13-38

1414.1

.........................................................................14-2

14.1.1 API ............................................................ 14-2

14.1.2 ........................................................... 14-3

14.2
14.3

DirectoryEntry ...........................14-7
......................................................... 14-10

14.3.1 .............................................. 14-10

14.3.2 .............................................. 14-13
14.3.3 ........................... 14-14

14.4

......................................................... 14-16

14.4.1 ......................................................... 14-16

14.4.2 ................................................................ 14-21
14.4.3 ................................................................ 14-31

14.5
14.6
14.7
14.8

......................................................... 14-33
........................................ 14-36
......................................................... 14-39
Worker ...................................................... 14-40
SUMMARY .......................................................................... 14-42

1515.1

.........................................................................15-2

15.2
15.3
xiv

...................................................................15-5
...............................................15-11

HTML5 ()

15.4
15.5
15.6
15.7

................................................................................. 15-13
MessageEvent ..................................... 15-16
iframe .............................................................. 15-17
............................................................................................. 15-19

15.7.1 ................................................................ 15-19

15.7.2 .......................................... 15-22

SUMMARY .......................................................................... 15-25

16 Web Workers
16.1
16.2
16.3
16.4
16.5
16.6
16.7
16.8

.............................................................16-2
Web Workers ..........................................................16-3
.....................................................................................16-7
................................16-8
..................................................................... 16-10
JavaScript..................... 16-12
JavaScript ..................................... 16-14
Worker ....................... 16-18

16.8.1 Worker SharedWorker ...................... 16-18

16.8.2 SharedWorker ........................................ 16-22
16.8.3 ............................................................. 16-24

SUMMARY .......................................................................... 16-25

Server-Sent Events
1717.1
........................................................17-2

17.2

EventSource .......................17-4

17.2.1 ..................................... 17-4

17.2.2 EventSource ............................................ 17-6
17.2.3 .................................................................. 17-8

HTML5 ()

xv

17.2.4 ................................................ 17-9

17.2.5 data id ...................................................... 17-13

17.3
17.4
17.5

........................................................................... 17-17
......................................................... 17-19
.............................................. 17-21
SUMMARY .......................................................................... 17-22

WebSocket API
1818.1

WebSocket WebSocket ............18-2

18.2
18.3

WebSoket ......................................................18-3
WebSocket .....................18-5

18.3.1 ........................................................... 18-5

18.3.2 .................................................... 18-8

18.4
18.5

................................................................................. 18-13
................................................................................. 18-17

18.5.1 .................................................. 18-17

18.5.2 .................................................. 18-20

SUMMARY .......................................................................... 18-23

1919.1

Geolocation .............................................................19-2

19.2
19.3
19.4
19.5

.............................................................19-3
Google ..............................................................19-8
............................ 19-13
......................................................... 19-15
SUMMARY .......................................................................... 19-19

xvi

HTML5 ()

/ video / audio
2020.1

<video> <audio> ........................................20-2

20.2
20.3
20.4
20.5
20.6

.............................................................20-4
<video> ............................................................20-5
source ............................................................20-11
........................................ 20-12
Video ........................................ 20-15

20.6.1
20.6.2
20.6.3
20.6.4
20.6.5

20.7
20.8
20.9

JavaScript Video ........................... 20-16

video ...................................................... 20-18
..................................................... 20-19
................................................................ 20-21
......................................................... 20-24

............................................................... 20-26
.............................................. 20-28
canvas video ................................... 20-31
SUMMARY .......................................................................... 20-37

XMLHttpRequest Ajax
2121.1

HTML5 XMLHttpRequest .................................21-2

21.2
21.3

XMLHttpRequest ...............................................21-3
XMLHttpRequest ................................ 21-10

21.3.1 / ..................... 21-10

21.3.2 HTTP ............................................................. 21-12
21.3.3 ................................................................ 21-15

21.4

............................................................... 21-18

21.4.1
21.4.2
21.4.3
21.4.4

................................................. 21-18
...................................... 21-19
.............................................. 21-21
.......................................... 21-23
HTML5 ()

xvii

21.4.5 ......................................................... 21-29

21.4.6 ................................................................ 21-31
21.4.7 File .......................................... 21-34

21.5

XMLHttpRequest ................... 21-36

21.5.1
21.5.2
21.5.3
21.5.4

21.6

timeout ........................................................... 21-40

progress ......................................................... 21-44
......................................................... 21-46

............................................................... 21-47

21.6.1
21.6.2
21.6.3
21.6.4

21.7

XMLHttpRequest .................................... 21-36

XML .............................................................. 21-47

XML ................................................ 21-50
XML ............................................. 21-51
.............................................. 21-55

XMLHttpRequest ......... 21-61

SUMMARY .......................................................................... 21-65

JSON
2222.1

JSON ...............................................................................22-2

22.2
22.3
22.4
22.5

JSON ................................22-7
XMLHttpRequest JSON.....................................22-9
ASP.NET JSON .............................. 22-13
..................................................................... 22-18
SUMMARY .......................................................................... 22-20

Indexed Database API

2323.1

Indexed Database Web SQL Database...23-2

23.2
23.3
23.4
xviii

IDBFactory .........................................23-3
...................................................................23-5
IDBDatabase ..............................................23-7

HTML5 ()

23.5

............................................23-8

23.5.1 ....................................................... 23-8

23.5.2 ......................................................... 23-11
23.5.3 .......................................... 23-13

23.6

................................................................................. 23-17

23.6.1
23.6.2
23.6.3
23.6.4
23.6.5

23.7
23.8

IDBObjectStore ............................... 23-17

.............................................. 23-18
cursor .................................................. 23-20
..................................................... 23-22
......................................................... 23-27

........................................ 23-29
............................................................................................. 23-34

23.8.1
23.8.2
23.8.3
23.8.4

................................................................ 23-34
......................................................... 23-35
..................................................... 23-37
.......................................... 23-42

SUMMARY .......................................................................... 23-50

( 24-28 )

2424.1

........................................................24-2

24.2

................................................................................. 24-10
SUMMARY .......................................................................... 24-13

2525.1

.....................................................................................25-2

25.2
25.3

................................................................................. 25-12
................................................................................. 25-14
SUMMARY .......................................................................... 25-22
HTML5 ()

xix

2626.1

.....................................................................................26-2

26.2
26.3

.....................................................................................26-8
.....................................................................................26-8
SUMMARY ......................................................................... 26-16

2727.1

.....................................................................................27-2

27.2
27.3

.....................................................................................27-4
.....................................................................................27-5
SUMMARY ...........................................................................27-11

2828.1

.....................................................................................28-2

28.2
28.3

.....................................................................................28-4
.....................................................................................28-6
SUMMARY .......................................................................... 28-14

xx

A.1
A.2
A.3
A.4
A.5

HTML5 .......................................................... A-2

.............................................................. A-2
HTML5 HTML4 ........................................... A-3
.............................................................. A-3
.................................................................... A-4

HTML5 ()