Html5. Разработка Приложений Для Мобильных Устройств

. HTML5.

OReilly

. , .

. . . . . .

32.988.02-018 004.438.5

.26 HTML5. . .: ,

2015. 480 .: . ( OReilly). ISBN 978-5-496-01125-9

.-HTML5CSS3.,-,iOS,Android,BlackberryWindowsPhone,.

.-HTML5,-,(SVG),(Canvas),localStorageAPI.,CSS3.-,,.

12+ ( 29 2010 . 436-.)

ISBN 978-1449311414 . Authorized Russian translation of the English edition Mobile HTML5 (ISBN 9781449311414) 2014 Estelle Weyl. This translation is published and sold by permission of OReilly Media, Inc., the owner of all rights to publish and sell the same.ISBN 978-5-496-01125-9 , 2015 , , 2015

OReilly. . .

, , , -. , , , .

,192102,-,.(.),3,,.7.005-93,2;953005.

27.08.14.70100/16....38,700.1000.0000.

.180004,,.,34.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

1. API HTML5, CSS3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

2. HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

3. , HTML5 . . . . . . . . . . . . . . . . . . . . . . . . 93

4. - HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118

5. , , . . . . . . . . .168

6. API HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194

7. CSS3 . . . . . . . . . .229

8. CSS3 . . . . . . . . .277

9. CSS3: , . . . . . . . . . . . . . . . . . . . . . . . . .296

10. CSS3: , . . . . . . . . . . . . . . . . . .342

11. CSS - . . . . . . . . . . .378

12. . . . . . . . . . . . . . . .405

13. . . . . . . . . . . . . . . . .427

14. . . . . . . . . . . . . . . . . . . . . .444

. CSS- . . . . . . . . . . . . . . . . . . .471

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

( Internet Explorer) . . . . . . . . . . . . . . 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 SDK. . . . . . . . . . . . . . . . . . 21

? API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 . . . . . . . . . . . . . . . . . . . . . . . . . 23- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 . . . . . . . . . . . . . . . . . . . 24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24- . . . . . . . . . . . . . . . . . . . . . . . . 25 API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25, . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

, . . . . . . . . . . . . . . . . . . . . . . . 30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

1. API HTML5, CSS3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

CubeeDoo: HTML5 . . . . . . . . . . . . . . . . . 36 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

7

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 . . . . . . . . . . . . . . . . . . . . . . . . . . 55

2. HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 . . . . . . . . . . 59 HTML 4, HTML5 . . . . . . . . . . 62 HTML5: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73, . . . . . . . . . . . . . . . . . . . . . . . . . . . 79: . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 , . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

3. , HTML5 . . . . . . . . . . . . . . . . . . . . . . . . 93 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

8

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 CubeeDoo . . . . . . . . . .100 : , . . . . . .101 : HTML5 . . . . . . . . . .101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103 . . . . . . . . . . . . . . . . . .103

, HTML5 . . . . . . .103 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105, . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106

, . . . .107- . . . . . . . . . . . . . . . . . . . . .108 HTML 4 . . . . . . . . . .109, . . . . . . . . . . . . . . . . . . . . . . . . . . .110

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115 XHTML HTML5, . . . . . . . . . . . . . . . . . . . . . . . . . . .116

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117

4. - HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118 ( ) . . . . . . . . . . . . . . . . . . . . . . .120

type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120required . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 : min max . . . . . .122step . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124

9

readonly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126disabled . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127maxlength . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128autocompletion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129autofocus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130 . . . . . .130: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .131: . . . . . . . . . . . . . . . . . . . . . . . . . . .132: . . . . . . . . . . . . . . . . . . . . . . . . . . .132: . . . . . . . . . . . . . . . . . . . . . . . .133 : . . . . . . . . . . . . . . . . . . . . . .134: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136 : . . . . . . . . . . . . . . . . . . . . .137: . . . . . . . . . . . . . . . . . . . . . . . . .138: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138 . . . . . . . . . . . . . . . . . . . . . . .138

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139 : . . . . . . . . . . . . . . . . . . . . .140URL: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140 : . . . . . . . . . . . . . . . . . . . . . . .142: . . . . . . . . . . . . . . . . . . . . . . . . . . . . .143: . . . . . . . . . . . . . . . . . . . . . . . . . . . .146 : . . . . . . . . . . . . . . . . . . . . . .147: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149 : . . . . . . . . . . . . . . . . . . . . . . .151 : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 . . . . . . . .157 . . . . . . . . . . . .158

10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159 list . . . . . . . . . . . . . . . . . . . . . . . . . . . .159 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166, , . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167

5. , , . . . . . . . . .168API HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168

SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169 SVG . . . . . . . . . . . . . . . . . . . . . . . . . . .171 : SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172 SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .174 CubeeDoo . . . . . . . . . .174 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177 . . . . . . . . . .181

/ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 . . . . . . . . . . . . . . . . . . . . . . . .184 . . . . . . . . . . . . . . . . . . . . . .185, JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191

6. API HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .194-, . . . . . . . . . . . . . . . . . . . .194

? . . . . . . . . . . . . . . . . .194 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195 . . . . . . . . . . . . . . . . . . . . . .200 SQL/ . . . . . . . . . . . . . . . . . . . . .210

. . . . . . . . . . . . . . . . . . . . . . . . .215 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216

11

- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221 . . . . . . . . . . . . . . . . . . . . . . . .224

- (ARIA) . . . . . . . . . . . . . . . . . . .225 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228

7. CSS3 . . . . . . . . . .229CSS: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230

CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231 : . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235 CSS . . . . . . . . . . . . . . . . . . . .238

CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .245 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246

CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 : , . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .259 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263 n- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .268 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270

: DOM- . . . . . . . . . . . . . . . . . . . . . . . . . . .273 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276

8. CSS3 . . . . . . . . .277 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .278 rgb() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .280 RGBA . . . . . . . . . . . . .280, , : HSL() . . . . . . . . . . . . . . . . . . . . . . . . . .281CMYK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .282 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283

12

CurrentColor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284

, CSS . . . . . . . . . . . . . . . . . . . . . . . . . .287 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287 , . . . . . . . . . . . . . . . . . . . . . . . . . .289 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .290 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292

. . . . . . . . . . . . . . . . . . . . . . .293 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295

9. CSS3: , . . . . . . . . . . . . . . . . . . . . . . . . .296 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298border-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299border-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299border-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301box-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .302

CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .304 border-radius iPhone CubeeDoo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .306

CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .308 : . . . . . . . . . . . . . . . . . .309 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310background-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323 . . . . . . . . . . . . . . . . . . . . . . . .325

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .330 width, overflow text-overflow . . .332 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334 : CubeeDoo . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337

10. CSS3: , . . . . . . . . . . . . . . . . . .342CSS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .343

transition-property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .345

13

transition-duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .347 transition-timing-function . . . . . . . . . . . . . . . . . . . . . . . . . . .348 transition-delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .349 transition . . . . . . . . . . . . . . . . . . . . .350 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .351

CSS3- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .353 transform-origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .353 transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .355 . . . . . . . . . . . . . . . . . . . . . . . . . . . .359 . . . . . . . . . . . . . . . . . . . . . . . .360 3D- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361 3D- . . . . . . . . . . . . . . . . . .363 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .364

CSS3- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .367 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .369, . . . . . . . . . . . . . . . . . . . .376

11. CSS - . . . . . . . . . . .378, . . . . . . . . . . . . . .378 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .379 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .382

border-image-source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384border-image-slice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384border-image-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .385border-image-outset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .386border-image-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .387 border-image . . . . . . . . . . . . . . . . . . .388

flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .389flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .392 @supports . . . . . . . . . . . . . .394

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .396 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .397CSS-: JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .403 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .404

12. . . . . . . . . . . . . . . .405, . . . . . . . . . . . . .406 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .408

: . . . . . . . . . . . . . .409

14

: . . . . . . . . . . . . . . . .410 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411 ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . .412

: . . . . . . . . . . . . . . . . . . . . . . .413 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .413 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .414 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .415 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .416 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417

WebKit- . . . . . . . . . . . . . . .418 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .419 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .420 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .423 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .423

. . . . . . . . . . . . . . . . . . . . . . . . . . .424 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .425 . . . . . . . . . . . . . . . . . . .425

13. . . . . . . . . . . . . . . . .427 . . . . . . . . . . . . . . . . . . . . . . . . . . . .427 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .429

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .429 , . . . . . . . . . . . . . . . . . . . . . . . . . .430- -- . . . . . . . . . . . . . . . . .433

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .436 . . . . . . . . . . . . . . . . . . . .437 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .438 -, . . . .440 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441

14. . . . . . . . . . . . . . . . . . . . . .444 . . . . . . . . . . . . . . . . . . . . . . .444

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .445 JPEG- . . . . . . . . . . . . . . . . . . . . . . . . . . . . .445 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . .446 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .448 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .448

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .452

15

HTTP- . . . . . . . . . . . . . . . . . . . . . . .452 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .455 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .456 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .461 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .462

. . . . . . . . . . . . . . . . . . . . . . .468 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .468 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .469

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470

. CSS- . . . . . . . . . . . . . . . . . . .471CSS- 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .471 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .475 CSS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .476CSS- 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .476

-..,Android,iPod,iPhone,BlackBerry,.1,(SDK)iOSAndroid.-.

--,,-,,-.--,,-HTML,CSSJavaScript.,,-,.

HTML5,CSS3JavaScript,-,.-,,,,.,AppleAppStoreGooglePlay.,.

,-,HTML52,CSS3JavaScript.,..

,,,-iPhone,iPadAndroid,,FirefoxOSWindowsPhone,-,-

1 ,,-.. .

2 HTML5,HTML:TheLivingStandard.. .

17 -

.,,Wii.,,,.,--.

,,.---..

iPhone,,(SVG).Safari4.0,,-(webworkers).,2009,iPhone,Chrome,Opera,Firefox,InternetExplorerAndroid.

,HTML,CSS,DOM(),SVG(-)XHR.HTML5CSS3.-,-,,-.

-

,iPhoneAppStore..Android-GooglePlay,Amazon,.-1,2,-..,,,,

1 Apple.-..,,,,?. .

2 Apple.AppStore,-.. .

18

--.

-,.-,,,.

,iPhone.,--,.-,CSS3HTML5,,,-,-,.-.

,,AppStore.-,iTunes..

. , iPhone , Bump, Twitterific Gowalla. , iPhone. , - .

-HTML5,.,-.6,.

-HTML5HTMLCSS,.,,.,!

,HTMLCSS,-.iPhoneiPodtouch,iPhone,,iPad,Windows,BlackberryAndroid.AndroidAndroid,iOS.GoogleTViOS..,,HTML5/CSS3,WebKit,

19 -

IE10,Blink,OperaMobile(mini),Firefox.,,,HTML5CSS3.

-,HTML5CSS3,.HTML5CSS3-InternetExplorer8,InternetExplorer9-.InternetExplorer10,-.

2008iPhone(iPhoneSDK),,iPhone,.SDK-.-,HTML5.-APIHTML5,-,-.

,!iPhone,iPodiPadFlash.iOSSafariWebKit,HTML-.5.

( Internet Explorer).-.--.

,InternetExplorer.,-.HTML5CSS3,IE6,78?,.!

-InternetExplorer68,----.IE6IE7,,.,-,,,.-,,-.

20

,HTML5CSS3.:,X?.:,!..-.--,.-,,,-.

Safari,Chrome,Firefox,OperaIE10-.HTML4.01,XHTML-HTML5.CSS2.1-,CSS3.JavaScript,AJAX.(DOM)2.-Windows,HTML5.,2010,WindowsPhone?2012,-,--Windows,:.Windows.WindowsMobile,,WindowsPhone.

-.-.,-,.,().,.-,,-.

- .

iPhone(2007),-iPhoneDevCamp.iPhoneSDK(-).,iPhone,-.

iPhone,,.

21 -

EDGE,-.,-iPhone.10,1010JavaScript.

iPhoneDevCamp,iPhone(-).onOrientationChange.,-.CSSJavaScript.

iPhoneiUI.JavaScriptCSSiPhone..,-Tilt.iPhone,-,.iPhoneBingoiPhone,JavaScript.,,-AJAX-(-)Twitter..-:,,CSS3,.-,.

iPhone--,-Apple.AppleiOS.,Apple,-iPhone.SafariiPhoneWebKit-iPhone,-iPhone.iOS--(SDK).

SDK. SDKiPhone62008.-(-Apple)iPhone,iPodtouch,iPad.2008AppStore.C

22

(SDKAppStore),,-iPhone.

,SDK,iPhone,,,!2008-,--.-.

2008 . -

SafariiPhone10. -,. CSS3HTML5SafariiPhone,.

2008 .

Xcode. AppStore.2013.-

-..

2013 . -

(,).

HTMLCSS(-,).

,. -.2013 . iPhone

,AppStore,.

,,,-.

AppStore$99,,Apple30%-.

,-(HTML5-).

23 ? API

? APIHTML51.2004,WebApplications1.0.,(-).Safari,Chrome,InternetExplorer10+,FirefoxOpera.IE8.IE9HTML5,.,-HTML5,WebKit/Blink,OperaMobile2,FirefoxOSWindowsPhone.,HTML5.

HTML5,-API.(,)-HTML5,().

HTML5API,,-.HTML5API,,.,,..

HTML5,.,..-,,.3.

1 HTML5.HTML5.NEWT(NewExcitingWebTechnologies--).,-NEWT.. .

2 OperaMiniHTML5.,-,-.OperaMini-Opera,..-,,-.. .

24

-.(),,-,,,.HTML5,JavaScript!HTML5.

4.,,.,,,,.JavaScript!

HTML5,-.HTML,CSS.-,,.5.

().HTML5.!HTML5webMmp4.,,,.CSS-.iOSFlashSilverlight,,-HTML5.5.

APIHTML5, API,..API6.

25 CSS

- :..APIHTML5,--,-.API,,6.

API6,ARIA()-.,--..-,-.ARIA(AccessibleRichInternetApplications-),-.,,.,-()-.,-.-JavaScript.,JavaScript,.,6!

CSS(CSS).CSS3,3,,...-.CSS3-RGBAHSLA,8.,-,910.CSS3,:

; ; ; 3D-; ;

26

background-size; border-image; border-radius; box-shadow; text-shadow; opacity; animation; columns; text-overflow.-.-

-,-.-.,iPhone.-@font-face,,Helvetica,Roboto,.,.11-,-.

,

,-.,:-,,.-.-.,,.,,,.-,,.

,Wi-Fi.-,-

27

.,.-,,JavaScript.

11-.12-,.13.-,-14.

,-,.,12.--,,,CSS2,--.,-.!

.WebKitHTML5Android,-iPhone,OpenMokoBlackberry,.Blackberry,AndroidiOS,WebKitBolt,Dolphin,OzoneSkyfire.Firefox,OperaIE.,,-Opera,Presto.OperaChromeBlink.,,,.

,InternetExplorer,-.-InternetExplorer-CSS3.,CSS2.:-!.,,.

-,HTML-CSS-.

28

-HTMLCSS.

.-.,-,.-:,,.

-..,.

,.--,.

,-,-.,-,-.,,,,5.

,,-,.-,,-.,,,-.

,,,,.,-,iPhone.-.,,.,,.

29

.,.-,.-.-13.

,-.,,.,.,--.,,.,.

1-,.

26,HTML5.-,-,.HTML5,WebForms2.0,APIHTML5API,-.,(SVG),,-,,,AppCache,-.

711,-CSS3.,,,,.--,-,.11--.

1214:,,,-.,,-,--.

,.,.,-.,-,.,.

30

,

.URL,,-

.:,

,,,,..

. ,-

. ,,

.

, .

.

http://www.standardista.com/mobile.-,,,-.

,.,,,.,-.,-,.-,OReilly,.,,,.-,.

31

,,:

OReillyMedia,Inc.1005GravensteinHighwayNorthSebastopol,CA95472(800)998-99-38()(707)829-05-15()(707)829-01-04()

,,,-,,.

HTML5,Introducing HTML51.www.HTML5Doc-tor.comW3C,--.-Opera,-,,300(www.opera.com).Twitter@brucel,www.brucelawson.co.uk.

CubeeDoo.- CerebralInteractive,-.-2001,2006--.,IT-,.Twitter:@cereb-ralideaswww.cix.io.

-OOCSS(-)Sass.FormFace,HTML5.Wufoo.,.Twitter@seetroughtreeshttp://seethroughtrees.github.io.

1 ., . HTML5..:,2011.-. .

32

,,,-.1996-.2000-,--.Twitter@msjenhttp://blackphoebe.com/msjen.

,-,,.,-,Yahoo!,-MobilewebOSPalmNokia,W3CHTML5.Twitter@girlie_mac,http://girliemac.com.

HTML5Microsoft,-JavaScript/HTML5.--.-,JavaScript.,HTML5 Hacks,OReilly,-htmlhacks5.com..Twitter@boyofgreen.

,[email protected](,).

!http://www.piter.com

.

1 API HTML5, CSS3 JavaScript

,InternetExplorer..1.,IE6.IE6,.

,-,.-,-.-,.,LocalStorage,.,LocalStorage,.LocalStorage,-.LocalStorage,.

.(),-,,...,,,,

1 2001,IE6,.-,.. .

35 1 . API HTML5, CSS3 JavaScript

.,,,-.:,,,-.

,,,-.,.,.

,.-,.

,,,,-JavaScript.JavaScript(JavaScript-).JavaScript,.,,:-?

,.!,.,.,-,,,,--.,-,,..

,APIJavaScript,HTML5,(JavaScript),,-.-.,,,-.

HTML5,CSS3APIJavaScript,..

36 1. API HTML5, CSS3 JavaScript

CubeeDoo: HTML5

HTML5CSS3,-,,.CSS3-Pickleview.-,Twitter.2007,,iPhone.-SafariiPhone(,Opera).,-,IE6,IE7Firefox2(Chrome).,2007.

2010,HTML5CSS3.-,,,Chrome12,Safari3.1.,HTML5,CSS3JavaScript.,.2010,2007.(IE).

2013HTML5CSS3.,,IE9.IE6.,,Android2.3.Android2.3.

HTML5,CSS3,-APIJavaScript,.,-.,,-,.

.1.1CubeeDoo.,-.-,,iPhone.HTML5.,-,.CSS-,-,,CSS.

37CubeeDoo: HTML5

,JSON,-,webSQL,LocalStorageSessionStorage,,HTML5,-,URI.

. 1.1. CubeeDoo

-.,()JavaScript,HTML5CSS.API,-.,,,,,,.,.

CSS3,HTML5API.-,.-,..-,-,.,,,InternetExplorer.

,.,-,,,,


,..,..

,,,(IDE).

,-.,:!

,,.(,-).

, (IDE).,,,.,IDE().,(FTP),.IDE.,.SublimeText,TextMate,Dreamweaver,Eclipse,WebStormIDE.,-.,IDE,,.IDE.IDE-.

.ChromeCanary-GoogleChrome.,.,Canary.,.

Apple,-iPhone,iPadiPodtouch.Windows8,

39

,-Metro.!..Windows,UNIX,Android,Mac-.

-IDE...,-,JavaScript,,API.,-.

,.,WindowsPhone,InternetExplorer.SafariGoogleChrome-Android,Bada,BlackBerryiOS.GeckoFirefox.,Presto,Opera.Opera14-Chromium,OperaChromeBlink1,,-,.

Mac,Safari().Windows,InternetExplorer.-Unix,Chrome,FirefoxOpera.ChromeCanary,Aurora,OperaNextWebKitNightly,.-,,.

.,-,,-.(DOM),JavaScript,-CSS,,--.

1 BlinkWebCoreWebKit,-147503.Chrome,28,Ope-ra15,,Chromium.


,,-,-,-.-..-,-,-.

,,,-Firebug1,F12,WebInspector/DragonFly.FirebugMozilla.F12,WebInspectorDragonFlyInternetExplorer,Chrome/SafariOpera.-,HTML,CSS,DOMJavaScript,,-,HTTP-,,.

FirebuggetFirebug.com.SafariDevelop().-,PreferencesAdvanced()Show develop menu in menu bar().Chrome:- .

Chrome,Safari,FirebugOpera-,Command+Option+IControl+I.FirebugF12,F12.CSS,JavaScriptHTML.

WebInspector,ErrorConsole()UserAgentswitcher.--CSS,HTMLJavaScript,DOM,.-,WebInspector,Firebug,DragonFly,F12Developer Tools()Chrome-,..

,-,-.,,,,

1 Firefox,--Firebug-Firefox.

41

.-,.Timeline()-14.

.,.,,..,,-,.,,-,.

,.Overrides()Settings()Developer Tools()Chrome(.1.2).-WebInspector, .

User Agent(),Chrome,.-,.

,().-,.-.-ScreenQueri.es,.,-thumbs.js,-TouchEvent.

Developer Tools()Chrome-.-,.

(),-.-,,-..


. 1.2. Overrides ( ) (Settings) Developer Tools ( ) Chrome

,.,.,,HTMLCSS,,-.

Opera.,,,2008Opera-OperaDragonFly,Opera.Opera-HTMLCSS,-,,,DragonFly.

43

WebKitUSB-Android,4,iOS,6.-Chrome, ,,:

chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile

/Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=9222

FirefoxFirebug-Debug(Crossfire).

,.,(RemoteDebuggingProtocol),.

AndroidAndroid(AndroidSDK)-API,,-Android.-,-SDK(.1.3).

. 1.3. Android 4.2.2, OS X


SDKhttp://developer.android.com/sdk/index.html.Android(ADB),-,,.

toolandroidADB.ADB-.,,UNIX.-.

ADB-.Chrome,ADB--.SDK.

toolsMonitor,Android(AndroidDebugMonitor).-,,-,console.log(),.,.1.4..

. 1.4. Android

,Window()Android(AndroidVirtualDeviceManager)(.1.5).-,.1.3.

weinre,webinspectorremote-.weinre,JavaScript,HTMLCSS.

45

PhoneGap,-debug.phonegap.com.,weinreAdobeEdgeInspect,.

weinre,,,-WebKit.weinreNode.jsWebSockets1.

weinre-.-,JavaScript,

1 Java.WebSocketsCORS,JSONXHR.

. 1.5. Android ,

. ,


.,JavaScript,-,.

weinreweinreJavaJavaScript.JavaScript,Node.js,-npm,Node.:

npm -g install weinre

weinre,:

weinre

weinrelocalhost:8080,Control+C,,--.

,weinre:

WebKithttp://localhost:8080/client/#anonymous,., -Chrome,.

Remote(),,weinre.Elements(),Resources(),Network(),Timeline()Console()(.1.6)-.,Sources(),Profiles()Audit(),.

Adobe Edge Inspect GhostlabAdobeEdgeInspect,weinre.,(),.AdobeEdgeInspectweinre.:,URL.

AdobeEdgeInspect,,Chrome.,.

47

. 1.6. weinre

Edge.Edge.Edge,-Adobe.

,Edge(.1.7)..,Edge.

,.,,,,.

,-.,Chrome,-,EdgeInspect.

-,-Chrome.ChromeAdobeEdgeInspect,,.weinre,-Remote(-)weinre..1.6.

AdobeEdgeInspect,.,.,.


. 1.7. Adobe Edge Inspect Nexus 7 Google Chrome

Mac,-,Ghostlab.,,Ghostlab:,AdobeEdge.

JavaScript AardwolfJavaScript,Aardwolf.JavaScript,-.Aardwolf:.weinre(,weinreNode.js),AardwolfXHR.Aardwolf.-,.

BlackBerry 10,weinre,BlackBerry10.

BlackBerry(BlackBerryBrowser),weinre,--.Black-BerryBrowserweinre,-.-HTTP,USB-Wi-Fi..Wi-FiWebKit,IP-,-BlackBerry()..

49

BlackBerry.-,IP-,.

-BlackBerry10,..,-Developer Tools().-.,OptionsPrivacy & Secrity().-IP-..,,-.Back(),.-BlackBerry.

.,-,,.-..-,,.

-.,,,,.

,()()..,..

,-.,.,.


..

,.,,.-,iOSiPhone,iPad..,.,-.

,,,.,(),.

,SDK.-,.,-.

Android.AndroidWindows,MacOSXLinux.SDK.SDKhttp://developer.android.com.-Android,SDK,Android.-AndroidMac/LinuxSetup.exeSDKWindows.

Android.-Android(AndroidVirtualDeviceManager)-Edit()(..1.5).,New()(DeviceRAM)Property().

iOS. MacOSX.-,,,MobileSafari.,iPhoneSDK2,.

,.-.-,,-.

51

,,-,iPhoneyiPadPeek.,-.

BlackBerry.BlackBerryWindows-,EclipseVisualStudio(-),,.

Windows Phone.Windows.WindowsPhone,-WindowsPhone.WindowsPhone(WindowsPhoneSDK)http://dev.win-dowsphone.com/en-us/downloadsdk.http://www.microsoft.com/en-us/download/deta-ils.aspx?id=35471.

VisualStudioWVGA512.WindowsPhone8,.

Firefox OS.Firefox.-,FirefoxOS,.,FirefoxWeb DeveloperFirefox OS Simulator(-FirefoxOS).

Opera Mobile.OperaMobileWindows,MacLinuxhttp://www.opera.com/ru/developer.

Opera Mini.OperaMini,-,Java-http://www.opera.com/ru/mobile.

.,SymbianWebOS,SDK,.-.-,-.http://www.mobilexweb.com/emulators.

-,,http://www.quirksmode.org/m/tests/widthtest.html.

W3CmobileOKChecker,-.


,,.MobiReady-,W3CMobileOKChecker.-,-.

Firefox,ModifyHeaders,-,HTTP-.HTTP-,-,,.

..-,-,,,.

,,,,.,HTML5,CSS3JavaScript..,,,-.-.,Wi-Fi,3G,4GEDGE.,-,,.

-,.,-.,.

,,,,,.-,,.,,.

-,DeviceAnywhereNokiaRemoteAccess.-,.-

53

,,.,.

iOSiOS,,-.

iOS.-,CraigslisteBay,.1,8%iOS(0,13%)iOS4.3,12,5%-iOS(0,93%)iOS5.

,:.,-.,,iPadiPodtouch.

,,OperaMini.iTunes.

iOS-,.,--.

AndroidAndroid,.Android,.()Android.-.Android2.3,-.Android.34%-Android,2,3%1.

Android,,,-.Android,Chrome,OperaMini,OperaMobile,FirefoxMobile,DolphinMiniDolphinHD.

1 (.http://developer.android.com/about/dashboards/index.html).. .


WindowsWindows,.Win-dowsPhone7,Win-dowsPhone8.Metro.(,),Windows.-,AndroidiOS.,-,-,Windows.

BlackBerry,BlackBerry10,,.

BlackBerry,,BlackBerry10.BB6BB7.,-,,.

BlackBerry6WebKit.,.,BB5,BlackBerry.

NokiaSymbian,LumiaWindowsPhone.

Symbian,Series40,Samsung-SonyMobileMotorolla,Android,iOS,BlackBerryWindows.,-.,Nokia,Symbian.Nokia.,.

KindleKindle.Silk,WebKit.

55

WebOSWebOS,-.PalmPrePixi$30.

,,-.-,,,,.-,,.,-,AdobeEdge.

--.,,-..JavaScript.

JasmineJavaScript,.PhantomJS,-,WebKit1.,PhantomJS-.,-DOM(),CSS--JSON.PhantomJS.

PhantomJS-,CasperJS.AJAX-Sinon.JS.,WebKit.,-.

.,SauceLabs,-,.

,,-.

,.

1 .. .

2 HTML5HTML,.,-,-.,,,,HTML,,,()HTML,,.

HTML5.,HTML5.,HTML.HTML,HTML5.,..,HTML5,,,,,-.

,-,,,,HTML,.HTML,,.

.HTML,.,.,,.

,:HTML5,HTML5.

?-!,!

HTML5HTML5HTML4XHTML.,,HTML5..,-HTML4XHTML,

57 HTML5

HTML51.HTMLXHTML,-.(doctype),HTML4.01XHTML,HTML5.-.

HTML5HTML4XHTML.,-,,-.

HTML5,--:-,ID,,,.

HTML5,.,,,,,-.HTML5,()-.,HTML5-.DOM,,.

,.,,,.,.,,-.,.

-.,-,()..,(,,meta-),.

,--()(.2.1).,-,.

1 .http://www.w3.org/TR/html5-diff/..

58 2. HTML5

XHTML-,-.,.

. 2.1.

HTML.,/.-()()-,.

CSS , , . ( : - . HTML5 - , .)

HTML5.-.HTML5-,,,,,..,.

, , . , . .

..href.(..2.1).,/,

59 HTML5

1.-.,.

,HTML-.-,()-,-,-..3,,.

HTML5-,.-id,class,title,style,langdir-.HTML5accesskey,hiddentabindex.:contenteditable,contextmenu,spellcheck,draggabledropzone.-.

-,WIA-ARIA,aria-,.,.-data-*,(*),-.data-HTML5,-HTML.data-*-data-*.(ARIA)6.

idid.id,id.HTML5id-..id-AZaz, (AZ,az),(09),(-),(_),(:)(.).

1 ,:.XHTMLreadonly="readonly",checked="checked"disabled="disabled".HTML5():readonly,checked,disabled.

60 2. HTML5

. -.

id.,,,.

,forid.:id,- .id4.

,idJavaScript,.-idCSS.id,.id-,id.6.:,CSS3,-id-.

classclass-,.class,.id,().-,.

CSSclass.(6):

titletitle-,.title,,,title.title,-.-title.

61 HTML5

, title . , , , title . - title .

title,,-.-,.,CSStitle-.title-::before::after.

,title..,,-.-title,.title-JavaScript!-reltitle().,data-*HTML5:-.

stylestyle()..,,,-!

:-,WebInspectorSafariChrome,FirebugFirefox,DragonFlyOperaF12IE,,JavaScript,style..,.

langlang(dir).lang,,-.-HTTP-Content-Languagehttpequiv="language".

62 2. HTML5

lang-,,-.,,-,lang.

lang.,-.

lang,.,,lang.-.

dirlang.,,.dirltr().--,-dir.

(),-,dir.,titlelang,dir.,dir().lang,.,.title-,-.-,-Google!

:HTML5dir-,auto.,-rtl,ltrauto.

HTML 4, HTML5

()(X)HTML.-,HTML5-..

63 HTML5

tabindextabindex,.,.HTML5tabindexHTML-.

.,-.,,.Tab,-.-().,,,-.,-Next()..,Next()Tab,tabindex.

HTML5tabindex..,tabindex-,-tabindex.tabindex,.

tabindex,-tabindex.,,,.,,.-.,,.,-.-tabindex.-.

,-,tabindex?,,

64 2. HTML5

.,JavaScript/.

-,,tabindex:01.tabindex="-1"(,1),tabindex="0",-,.

: tabindex -, ? , , , , , - Next (). , , JavaScript. , -. iPhone , tabindex - .

accesskeyaccesskeytabindex.,tabindex,,,.,.

accesskey.,,accesskeys.s,.

accesskey,-.,-,.accesskeyclass,-,.:-,.

tabindexaccesskey,.,tabindex-,.accesskey-,.

65 HTML5

accesskey.,HTML5,.accesskey,.

HTML5:

HTML5,,.,,-,.

hiddenhidden,,.,,,.display:none;.,-,.-,,-.

contenteditablecontenteditable,.,,.-,.contenteditable,OperaMini,-,Android3.0iOS5.

contenteditable,,-.

contextmenucontextmenu,-,.id,.,Chrome(),.

66 2. HTML5

draggabledraggable,.,,,..draggable,JavaScript-dragstart,drag,dragenter,dragleave,dragover,dropdragend.,IE10,,API.

dropzone,?HTML5dropzone,,..move,copylink.,.

spellcheckspellcheck,-.-,-.,.,-,spellcheck.

,,iOS,autocorrect-.-.

ARIAHTML5ARIA(-)rolearia-*.ARIA,HTML5.ARIA(liveregions),,ARIA.WAI-ARIA.

,-(-ARIA)-,.,.ARIA-

67 HTML5

,,.arialive:assertive,politeoff,,ARIA-,.aria-atomic,aria-busyaria-relevant.

ARIA-role.,,grid,listbox,menu,menubar,tablist,toolbar,treetreegrid.-,.HTML5ARIA-(.3),article,application,banner,complementary,contentinfo,document,form,heading,main,navigationsearch-,-ARIA,HTML5.

.-,,role,.-,,.

roleARIA.aria-disabled,aria-busy,aria-expanded,aria-hidden,aria-describedby,aria-haspopuparia-labelledby,.-,(,)-ARIA-.

data-*HTML5.,,.HTML5..

/-titlerel,.titlerel,-data-,.

,CubeeDoo-.,,,.LocalStorage-,.JavaScript,

68 2. HTML5

data-positiondata-value,data-value:

...

,data-value.,.data-position-0data-value,.data-value(7).

data-*,.title-,-,(-,,).-data-,-HTML.,.-,,,-moz--webkit-.

API Dataset.APIdataset.-API,/,(,):

69 HTML-

1 // 2 // dataset 3 currCards = document.querySelectorAll('#board > div');4 for (i = 0; i < qbdoo.cards; i++) {5 cardinfo.push(currCards[i].dataset);6 }7 currentState.cardPositions = JSON.stringify(cardinfo);

,,APIdataset,getAttribute().API,,.qbdoo.pauseGame(3).-APIdataset,--/,-DOMStringMap.(7)/JSON.,:

1 for (i = 0; i < qbdoo.cards; i++) {2 for (key in currCards[i].dataset) {3 deck[key] = currCards[i].dataset[key];4 }5 cardinfo[i] = deck;6 }

itemid, itemprop, itemref, itemscope itemtype,.:itemid,itemprop,itemref,itemscopeitemtype-HTML5-.,-.API6.

HTML- ,,,.,.

--.(,).

:

70 2. HTML5

:

< div>

,./.HTML5,XHTML,.,true,.

HTML5,,.1.

.,-.,,,.

:

,:

:

(),,,..(.),,:

. . .

1 ,,,.,ID.

71 HTML-

-()./.!,,:

-,-.:-.,,.

,,-().XHTML.

.,()..HTML5,XHTML-.-():

; ; ; ; URL; ; ; -; ; ; (); ;

72 2. HTML5

; (); ; .

XHTML,HTML.HTML5,-.

.XHTML,.HTML5-,,,.W3C,,,id,,.

.XHTML-.HTML5-,-.:,.

.XHTML.,,.HTML5-.,,,,,-.--.-.-,.:-,.

,-,.,.

..,(),,.:

73 HTML-

,,().

, .-XHTML/,.XHTML,-,selected="selected".HTML5selected.HTML5,true,false.,,-.

=""-,.

: , true, . , false, removeAttribute(attributeName), setAttribute(attributeName, ''), true.

,-.3,-form.

, .XHTML..-,-,.,spandiv.,.

,.,CSSJavaScript.,-XHTML,:

(DTD); HTML; ,html; ,,; ,html.

74 2. HTML5

,,-HTML5,XHTML:

charset,,HTTP-.-,.

,-.,,.HTML:

blank document

:.2.2.,,,,DOM-.

. 2.2. , , , DOM

( HTML-, )

,HTML-140.,

75 HTML-

,.,-,.XHTML,.

.

((doctype),DTD),,,.

.XML-,XML.-DTDHTML5.-,,-,.-(.2.1).

2.1. HTML 4, XHTML HTML5

(DTD)HTML 4.01 Transitional HTML 4.01 Strict XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.1 HTML5 1

,XHTMLDTD10.-..!HTML5,-.

-HTMLXHTML,,,HTML5.

,,HTML5.2.-

1 HTML5,.2 HTML5IE

.

76 2. HTML5

HTML4XHTMLStrict,-HTML5.,HTML5,-HTMLXHTML,.-,,!,,-!1-,,XHTML, .HTML5,!

HTML-.HTML5-,XHTML.HTML4,HTML5.,,.,.2.2.

,.-()lang.

2.2. HTML

HTMLHTML 4.01 TransitionalHTML 4.01 StrictHTML5

XHTML 1.0 TransitionalXHTML 1.0 StrictXHTML 1.1

HTML5manifest.,URL().,-6.

HTML5,modernizr,..,modernizr-,:

lang.6manifest,.no-js

1 http://bit.ly/16t5Z6L

77 HTML-

,modernizr1-,.

.,,2.-,-,-HTML5..,,-.HTML4HTML5,profile.,-HTML5.

,,,,.

.,,.,,.,--.,.

.,,.

,-(.2.3).,(SEO),,..

,-,-.,,

1 ModernizrJavaScript,HTML5CSS3.

2 ,CSS.

78 2. HTML5

,.-.

,XHTML.HTML5XHTML,-HTML4,alignbgcolor,-.,CSS.,idclass,langdir.

-,-,onload="doSomething();".-,classid.JavaScript,CSS.

HTML5-.():

- HTML5

(,,,,)-.,-.,,.

,:

. 2.3. , Safari (iOS) Firefox OS

79 HTML-

- HTML5, !

HTML-,.,-,-,.

, -,.,,-.,-,-,-.,,,-.

,:,,,,,.

-,-:

HTML5

80 2. HTML5

p {color: #3 33333;}

, -..,?

: -,.-,:charset,http-equiv,contentname.

,,-,HTML5:

,:

.,HTMLUTF-8,HTTP-.

,.,,,.HTML5,-,-meta,:

:,-.charset.,-.HTML5.

()UTF-8.Apache,.htaccessAdd De-faultCharsetUTF-8.

81 HTML-

charset,namehttp-equiv.charset,namehttp-equiv, content.

,HTTP-,namecontent,,,..-,,.

description.,,description ()."description",-,.,content-,(.2.4):

. 2.4. , Google

keyword"keyword".,-,-.,,:

,name,http-equiv.http-equiv,name,HTTP-.http-equivHTTP-.http://www.standardista.com/html5/http-equiv-the-meta-attribute-explained/http-equiv..htaccess,

82 2. HTML5

.,:

,.,,,-,-(-).

viewport.,,,,.,1.

"viewport",.CubeeDoo:

,,iOS,Android,webOS,WindowsPhoneOperaMobile.device-width,.!

,-.,-.,.

width=|device-width.,device-width-,,.,,-,,,980.200,10000.

height=|device-height.,device-height,,480iPhone4,.

1 -,.,Slate,.

83 HTML-

,,.-:223.

user-scalable=no|yes.,-,.-,yes,no.yes..,-minimum-scalemaximum-scale,.

initial-scale=.()-,-.-1.0,--.

maximum-scale=.-,user-scalableno.10,0.25.

minimum-scale=.--.0.25.

-980.device-width,-,980,320.320,device-width,-.,-.,.

,-.,user-scalable,,.

CubeeDoo-..,-,.-.,-,.:

84 2. HTML5

,,-.-Apple.-,HTML-,[email protected].

,

-,-.,GoogleApple//API..

apple-mobile-web-app-capable"apple",Android.,.,.-,.-,.,-.,:

contentyes,-,.

,,-JavaScript,window.naviga tor.stan-dalone..

apple-mobile-web-app-status-bar-style,apple-mobile-web-app-capable-.,-.-,-.,apple-mobile-web-app-status-bar-style:

-(),..iOS

85 HTML-

default,blackblack-translucent.(,,),,.

format-detectionformat-detection-,-:

,-.,,.telephone="no",.,,,-,.

-,,.URL-URL.,.--RacketTailedDrongo.comdrongo.gif1.

URLHTTP-,,,URL.-.base.,,,,,.:

.,,.HTML-.

1 ,,:,.

86 2. HTML5

,,-1,.

:

2

,href,rel,type,sizes,hreflang,mediatitle.revcharsetHTML5.:

rel,href.relhref.

-,..

-,.-,,.

,.,,:

,,,.:/type="text/css".(),HTML5,

1 ,,,,.http://ru.wikipedia.org/wiki/Favicon.. .

2 rel="shortcuticon"IE.shortcut,,favico.ico,-.

87 HTML-

text/css.,media="onlyscreen and(max-device-width:480px)".,,7.

,..2.3.

2.3.

href . URL

media , rel hreflang , type MIME- . , ,

relsizes . ,

mediamedia,,.,-all.,href.

,:screen,print..screen,tty,tv,projection,handheld,print,braille,[email protected].,media.,,-.CSS,-:

@mediaCSS3,-media.,-:

(min/max)-width; (min/max)-height; (min/max)-device-width;

88 2. HTML5

(min/max)-device-height; orientation,()-();

(min/max)-aspect-ratio; (min/max)-device-aspect-ratio.,HTML4,

HTML5,coords,shape,urn,target,charset,methodsrev.title.

relrel,href.rel-,,.rel="stylesheet";-,(,,?)..2.4rellink.

2.4. rel

stylesheet rel, ,

. stylesheet, /- type="text/css" , text/css -

next - .

prev

index help (,

- ). ,

contents , alternate .

hreflang , . media , , , . stylesheet - , -

copyright ,

89 HTML-

glossary , icon apple-touch-icon

, -,

apple-touch-startup-image

, -. - , - . , -

apple-touch-iconapple-touch-startup-image-iOSAndroid.WindowsPhone-.:

.,,,,.-,-.,-style(,,scoped),,.

type(,type="text/css").HTML5,-"text/css".,-media.

scopedHTML5,-.scoped,CSS(scope).,.(,).-,CSSCSS,.

:.12,,,.CSS,,,HTTP-,.,.

90 2. HTML5

-,HTTP-,.

CSS.JavaScriptstyleLocalStorage,cookie.HTTP-cookie(),LocalStorage.cookie,-().LocalStorage,,.,.,HTTP-HTTP-.

,HTTP-.,(),,LocalStorage.

--JavaScript-,JavaScript.typeXHTMLtype="text/javascript".HTML5,typetext/javascript.JavaScript,type.,language.

src,,-., JavaScript-.

JavaScript.,,,,.-.

?JavaScript.,JavaScript,..,,.

91 HTML-

,JavaScript,,-.--,,.JavaScript.

,-JavaScript:deferasync.,async-HTML5.async,-,.defer,,-.,JavaScript,.,.

,JavaScript,(,async/defer).,JavaScript,.JavaScript,-.,JavaScript.,-,,-.

HTML5,-JavaScript.-,6,JavaScript-.,,-.

JavaScript ,

,,JavaScript.,.,JavaScript.,,JavaScript.JavaScript-,WebKit,Blink,OperaMobile,WindowsFirefox.

92 2. HTML5

( )..,,.,,.().

,:.,-,,:

onafterprint; onbeforeprint; onbeforeunload; onblur; onerror; onfocus; onhashchange; onload; onmessage; onoffline; ononline; onpopstate; onredo; onresize; onstorage; onundo; onunload.JavaScript,

.,-,,.

-.

3 , HTML5HTML5,-.-,.2,,,-,.HTML5:,-,,.-4.,,5.,HTML5-.-.

HTML:,,,.HTML5-.HTML5,-CSS,,,.,HTML5.-,,-,,.

HTML5HTML4,-.,HTML5,,CSS.2.HTML5,,-.,,-.

94 3. , HTML5

HTML5.-HTML4HTML5.,,-.HTML5,1:

section; article; nav; aside; header; footer.:

body; h1h6; address.,

.-,,,,.,,,..-,.,,-.sectionblockquotefooter.,.,-().,-.

HTML5,,,-(-).Opera,,ID.--DreamweaverMicrosoft

1 hgroup,HTML5,.WHATWG,-W3CHTML5W3CHTML5.1.

95 HTML5

style1MsoNormal.,,-leftright,,-,main,header,footer,content,sidebar,banner,searchnav.,Dreamweaver().

HTML5-25.maincontent.?,,-,,,.,.

,,,.-.(.3.1),-.

. 3.1. -, HTML5

-.-,-,.

96 3. , HTML5

,1:

- HTML5 CSS3 HTML5 HTML5. CSS3 CSS3. Provided by Standardista.com

,,,-,.,,-,:

- HTML5 CSS3 11.11.13 HTML5 HTML5. CSS3 CSS3. Provided by Standardista.com

HTML5pubdate,,,,.

,.,

1 ,-.-,,.

97 HTML5

,-..,,,.

,,(,,:,-).:,,,,-,...-,,,.,,.

,,,,,,.

:,.,,-,,.

,,-.,,.

,,-.

.,,..-(),,,.

,-,,.,.

,-(,),.

98 3. , HTML5

,-,.,WAI-ARIArole="navigation":

CSS3 HTML5 JavaScript

,-.,-,.-,,,,.:,-,.

.-, ,:

......

HTML5 HTML.

-,(

99 HTML5

).,,.

.,.,,.,-/.-,,-,,.,,,,.

- , .

,.,-,..,.-,-/.-,.

-,.-,.-,.,-.

(),.,-.-,:

Copyright 2013 [email protected]

:.

100 3. , HTML5

CubeeDoo

,.,,-!,,,-:

1 2 3 CubeeDoo4 5 6 7 8 9 10 11 12 13 14 : 115 16 17 18 19 : 020 21 22 23 24 25 26 27 28 29

(622),.(25)(2328).,-..,-,(1021)..

101 HTML5

: ,

HTML5.,-.,.,-.

,.,-.,-..,-.

: HTML5

,,:.,,,.:,.HTML5-,-(.3.1).

3.1.

mainfigurefigcaptionhr ( )

ppreblockquoteolliuldldddtdiv

,,.,-,.

102 3. , HTML5

.,(-).,,-,.,,,,-,.

,,,,,,.,..-,.,,,.

,-.,,.

,W3C.-?,?.

-,-,.,.,,,,.-:

,,.

-.,-,.,.

103 , HTML5

HTML5.-,().()-.

,,-.

,-2,,:valuetype.,reversed,.

, HTML5

HTML520,-.,,,,,,..3.2.

3.2.

marktimerubyrtrpbdiwbrdata

asmalls citei b u

qsampkbdsubsupbdospanbremstrongdfnabbrcodevar

acronymbigcenterfontstrikett

104 3. , HTML5

,-.?-.,,,.,.

-Safari?,?

Google,,:

mark {background-color: yellow;}mark:focus {background-color: blue;}

CSS.,.3.2.

. 3.2. Opera Mobile ,

105 , HTML5

,,.(CSS).,.

,,.,-HTML5.,,CSS:

HTML5 . HTML. , HTML 4.01 XHTML 1.1, HTML5 .

,.,CSS,,-.

.,-,.,.,.

datetime.datetime,1.datetime,.

:CubeeDoo.:11:00(),:

next Saturday at 11:00 a.m.

CubeeDoo,,.

1 .http://www.w3.org/TR/NOTE-datetime

106 3. , HTML5

,-datetime.

, ,ruby-,ruby-.-Ruby.Ruby-,(.3.3).

,ruby-,ruby-.,ruby-.ruby-,.,ruby-,ruby-ruby-.

. 3.3. , . : : " "1

/:,,/.-,,ruby-.CubeeDoo;,ruby--.

(,-).,Unicode,.,-.,-,.CSS-,text-combine-horizontal,HTMLCSS,.

,-.,URL,.,:

1 :https://dl.dropboxusercontent.com/u/1330446/tests/ruby.html

107 ,

CubeeDoo.HTML5.com?

,,URL.,,..

,

HTMLHTML5.,-a,small,s,cite,i,bu.

.,,HTML5.,-,href,1.

,,name.(),-id,.,id.,-,id,anchorid.,-shape,coords,charset,methodsrev.

target,XHTMLStrict.,download,mediaping2.download,.,-.media,-.ping-URL,(),,,.

,HTML5,,,,-HTML5,,.,HTML5:

1 href,.2 media,pingdownload,,-

.

108 3. , HTML5

- ,-1.

,mailto:.,,.,.

tel:,,.iOS,-,.tel:Android,-,,.-sms:,.

,sms:-.:

sms:[,]*[?body=]

,.:,,iOS.Android-,.SMSSMS.,SMS:

1 (650) 555-1212

.,SafariiPhone,,-,.,(.-,HTML-2).

1 Skype.http://developer.sky-pe.com/skype-uris

109 ,

,-GoogleMaps,YouTube,iTunesGooglePlay.--GoogleMaps,,.,Maps:

-

iOSYouTubeiTunes-YouTubeiTunes.Android,:GooglePlay.

HTML 4

,,,,.:,.

,,.,,,,,.

,-,-.,,,.

,.,HTML5.HTML5.

.-.-.,,,.

,.,,,,,.,--(,,).

110 3. , HTML5

,,,HTML5.:-.,,,,,..HTML.-.

, ,,HTML5.-..3.3.

3.3.

em strong q , dfn abbr . : acronym .

titlecode var , , -

samp kbd , sub sup bdo ; -

span br

..

.1:

1 .-:http://www.w3.org/TR/html-picture-element/

111

embed; video; audio; source; track; canvas.:

img; iframe; object; param; map; area.,

,,,,5..,HTML4XHTML.,,,.

HTML5,.longdesc,frameborder,marginwidth,marginheight,scrollingalign,srcdoc,sandboxseamless.

srcdocHTML,,.,,srcdoc.srcdoc&quot:,.srcdoc,srcdoc.srcdoc,,-src:

sandbox-,.,,

112 3. , HTML5

,.,,.,,DOM-cookie.,sandbox,.

allow-same-origin,,,-.allow-top-navigation.allow-forms,allow-pointer-lock,allow-popupsallow-scripts,APIpointer-lock,.,,,.,:

seamless,.,CSS,.,,-,.

border,vspace,hspace,align,longdescname.srcset,,.

,,.,,9.

,srcset,,.1,

1 http://bot.kz/2013/06/23519.. .

113

(SVG),-5,-.

datatype.,align,hspace,vspaceborder,,CSS.,archive,classid,code,codebasecodetype,.declare.-standby,,,,,,,.,.

typevaluetype,namevalue.

nohref,rel,ping(.),mediahreflang.

,..,,AdobeFlashPlayer,,.,,.-URL,src.MIME-type.

,,,.

114 3. , HTML5

-,-,?HTML5,,JavaScript(.3.4).

. 3.4. . ,

.-,,,-.open,HTML5.open,.-

115

,..-:,-,.,open.,./.,JavaScript:

5 5 5 Amazon 5 Costco 5 Barns & Noble

,()open().-.summary.,,,,,display:none;.,,.

/-,(,).-,JavaScript.,open,CSS:

details * {display: none;}details summary {display: auto;}details[open] * {display: auto;}

!8.

,HTML4.01XHTML..HTML5

116 3. , HTML5

..

HTML5.idmenumenuitem..-,.,typetoolbar.,context.label,.,.

.,,.-type.radiobutton(),checkbox(/)command,-.,,.,.

.-label,,.-icon,disabled,checked,radiogroup,default command.command.title,.

,-,,Windows.-,.

XHTML HTML5, XHTMLHTML5.:

basefont; big; center; font; strike();

117

tt; frame(-); frameset; noframes; acronym(); applet(); isindex; dir.,,

.,,,,-,-..,.,.,href.

,.--,4.,,.

width,border,frame,rules,cellspacingcellpadding.

reversestart. ,span.

.headers,rowspancolspan,abbr,axis,width,alignvalign.-,.

,.

HTML5.HTML5,.-()HTML5.

HTML5.4--,--JavaScript.

4 - HTML5 ,,-,,HTML5,,,.,Canvas.SVG.APIJavaScript-DOM..,,-JS-(,).CSS3-.HTML5?,JavaScript.

HTML5,.HTML5-,JavaScript.-JavaScript,,..

,,setFocus()onload.autofocus(,,1).JavaScript,.HTML5,.,,,-

1 ,,,.,.-,.,.

119 4 . - HTML5

.,HTML5,.

-.,HTML5,,!

.type.'text',.QWERTY.HTML5,,,,-.--HTML5.,,-(,,).-,-.

HTML5CSS-,JavaScript-.,HTML5-JavaScript.

HTML5,,-,..,..,-,.

--HTML5,-..,-.-,-,-.,-

120 4. - HTML5

,,-,-HTML5.,-.,,,1990-,-HTML5.

,,type.-.HTML5-,.JavaScript,,-.,,JavaScript.,(.-),(.7),.,-HTML5.

( )

,.

type,type.,,,,:type="text".

Phone: Website:

HTML523type..:,typetext..

121 ( )

,,.

required,required.,,required,,,.,,-,:,,12-12,,.pattern,-,..

required,buttons,range,colorhidden:

Email: 1Phone:

,,,,.,,,,,--.required,,-.

: , required, - :required :invalid. , - , . , , - CSS:

input:focus:invalid { background-color: #CCCCCC;}input:valid { background-color: #00FF33;}input:required { border: 2px solid #0066FF;}

1 :required,required="required",XHTMLStrict.

122 4. - HTML5

,CSS3,-7.

: , required ARIA aria-required="true" ( ARIA, - -, 6):

: min max

,minmax.

minmax,,:numberrange.,min/max,.

,number,.,-minmax.-,-,number,.,minmax,.

rangemin,max,maxmin.,numberrange.

,-.,,,.,,-,.,,:

Reservation Time:

,.17:00,22:00.,,JavaScript,.

123 ( )

stepstep,/rangenumber,step-.,,5,1,-,:

Price

,-,step.

,,number,,,.,7.2,step5(-),7,100:

Price

step for. - . for .

placeholder,,JavaScript,--.-,.-,.,--.-,,-.HTML5,.placeholder,-,-.,JavaScript.

124 4. - HTML5

-placeholder,placeholder-,.-placeholder,.

placeholder,,.-,title-,placeholder.,,.,.-.

placeholdertext,search,url,telephone,emailpassword,,datecolor.-placeholder,,.pattern,-.placeholder.

:placeholder-shownCSS-4.,-(.):

input:placeholder-shown {}input:not(:placeholder-shown) {}

, , . - , . , JavaScript .

JavaScript , placeholder, min, max, pattern, . JavaScript .

patternpattern,placeholder,.patternJavaScript,.,.

pattern,.pattern.-,,JavaScript,,pattern

125 ( )

,.-,,*.

.4.1.

4.1. , for

? 0 1 * 0 + 1 {n} n {n,m} n, m [] , , -

. , [123] 1, 2 3[n-m] , -

. [123] [13][^n-m] ^ . -

, nm\d . [09]\D , . [^09]\s ( )\S (

)\w . [09AZaz]\W , . -

[^09AZaz]() () -

| ,

. gr(a|e)y gray grey

.,pattern-,,.

pattern-title,.:

Color:

Credit Card:

126 4. - HTML5

color,..pattern,color.,pattern,.-,.

-.-,pattern,,,.(.4.1).,-.

. 4.1. . (BlackBerry 10)

CSS. :invalid , pattern - . :valid , .

readonlyreadonly.,,

127 ( )

,URL,/.,.-,,,-,,,.,-,IE.readonly,:

disableddisabled.,.HTML4disabled-.,-disabled,(.form).,,-disabled,disabled-.

CSS: :disabled, .

,readonlydisabled?-,readonly.disabled,.

maxlengthmaxlengthtext,password,url,search,telephoneemail,.-/number.HTML4textpassword.

maxlengthURL,.,:--URL?,,-,,.

128 4. - HTML5

,.Twitter,-140,-,.

sizesize.:,,,.sizeCSS.

size-,HTML5.-size,(maxlength)(multiple).

formHTML-,HTML5,-.formHTML--.,,.

HTML-formid,,-,HTML-.,HTML-,-,.

,:

User ID

#userid#form1.HTMLnamevalue,#userid, .,formHTML5,id#useridform.-#form1#userid,.

129 ( )

-,HTML5,-.HTML5-,form.,.

: form='''' - , , . . , removeAttribute('form'), setAttribute('form', '');, .

autocompletion1.,-.,,-.autocomplete()-,(,,).autocomplete:on,offdefault.on-,off.

off,,,(,)-(,).,-.,on,,,.,HTML--().,,:

Login:

Username:

Password:

1 GoogleAPIrequestAutocomplete(),--.,-.

130 4. - HTML5

autofocusautofocus,,..autofocus-,(),,.autofocus-,.

,,,autofocus.-jQuery,,-,:

$('[autofocus]').last().focus();

:autofocus,.,.,,,.

:iOS-,.

HTML5.23,.,.-,type,-,.text(,maxlengthsize).,,-,text.,-:color,disabled.

23.,HTML5..

,HTML5.,:HTML,,,

131

.,.

: , , . - type. - , , submit:input:not([type=submit])){ border: 1px solid #6 66666;}

:not8.

: ,text,type="text",-,.text-type:type,-text.

text . type , type="text". , HTML5, text. HTML5, Netscape 4.7. .

value.,value-.value,-(),.

:name,disabled,form,maxlength,readonly,size,autocomplete,autofocus,list,pattern,requiredplaceholder.,,textHTML5:

value, , . , -. , - value. , - placeholder .

132 4. - HTML5

,,placeholder.

, ,-,-.,.

: password,type="password",.-,,,,,value,().pAssW0rd,.,,.

: , POST SSL-. , . GET, URL : https://www.website.com/index.php?user=Estelle&password=pAssW0rd.

,POSTHTTPS.,POST,,:

WebKit.CSS-webkit-text-security.-webkit-text-securitycircle,square,discnone,,,-.

:,.

: checkbox,type="checkbox",..

133

(),.-,(indeterminate),-.,.,,-.,,.--,..

namevalue.,namevalue/.,:

. , - . CSS :checked. - , , , :

input[type=checkbox]:checked + label { color: #cccccc;}

CSS,.8,:checked.

: radio,type="radio",.().,,.

,,.-,,-.,,.,,.

-namevalue.,-:

134 4. - HTML5

-;

value-name.--value;

,;

:.,-,,.JavaScript,:

( ):

red: green: blue:

:name.name.ID,.

, . - . , for id . .

: submit,type="submit",.,.-

135

,.-,disabled.-,JavaScript,returnfalsepreventDefault().disabled,.JavaScriptpreventDefault()returnfalse-.

: onsubmit - , . , .

,value,.name,/.

HTML5, .HTML-,-.form:form="id_of_form_to_submit".,form.

,,,HTMLCubeeDoo:

136 4. - HTML5

: ,type="reset",-.-,,disabledJavaScript.onreset,,.-,.

,,,..,,..

-,,.

,:.

reset,-value.,/.

: file,type="file",.,-.iOS6.0(SafariiPhone/iPad).iOSfile.,fileIE10WindowsPhone8,WindowsPhone8RT.

.,Browse ()Choose().,.,CSS,file:

137

input[type="file"] { /* " " */}input[type="file"]::-webkit-file-upload-button { /* */}

file:name,disabled,accept,autofocus,multiple,requiredcapture.value,.

accept-,.,.fileminmax,,,-.01minmax.-,multiple.

accept-,,:

,-.,Android3.0,ChromeAndroid(0.16),FirefoxMobile10.0OperaMobile14.

1.capture-accept,.:

,-.,-,capture.

: hidden,type="hidden",-:type="hidden",name="somename"value="some value".hidden,

1 .

138 4. - HTML5

.hiddenID,IP-,.

hidden,-JavaScript.HTML5-,LocalStorage,-cookie.hidden.,hidden/,.

: image,type="image",-submit,srcalt.valuename,/.-,"file".

: button,type="button"-,.,-,JavaScript.,-value:

button , , type="button". , , JavaScript . input type="button", . , .

-.WebKitMozilla-appearance.--webkit-appearance-moz-appearance.

139

,.,-.

appearance,.,-,-.,,appearance,checkbox(),button()slider-horizontal.DOMslider-horizontal.appearanceCSS.

!

text:,,URL...,,HTML5-,,..HTML513typeHTML-:

search; tel; url; email; datetime; date; month; week; time; datetime-local; number; range; color.HTML5-

.,radio,checkboxbutton,,-type.,(),.

140 4. - HTML5

BlackBerry10.tel,QWERTY,,.4.4.

CSS- - :invalid. JavaScript ( JavaScript) CSS:

input:focus:invalid {background-color: #CCCCCC;}

: email-.

-,.emailiPhone,3.1.AZ,@,,-_123.,.4.2:

:

emailmultiple,-,.

, -.

emailname,disabled,form,autocomplete,autofocus,list,maxlength,pattern,readonly,required,sizeplaceholder.

URL: email,url-.-,-,-.iOSurlAZ,,,,.com.,.4.3,.BlackBerry,,.

141

. 4.2. . BlackBerry10, iPod, Windows Phone Firefox OS

142 4. - HTML5

. 4.3. URL Firefox OS, iPod, BlackBerry 10, Windows Phone Chrome Android

,url,-,URL-,.,Q://,ftp://.

URL(-HTML5),,-URL/URI.W3C.(..4.3),-.

,-pattern:

-:

: tel.urlemail,tel.,,,,..,.,+1(415)555-1212,415.555.1212.

143

,tel?(..4.4).,,!

,-placeholder.,patternsetCustomValidity()().:

:

: number,.number,,.4.5.min,maxstep.

min,max-.step-.step1,.min,maxstep.

,,..,,.()-step..,,.,,maxmin,min.-,-:

144 4. - HTML5

,,min+n*step,n,min/max.,min=2,max=10step=5,7,10:

100 999

:

. 4.4.

145

0 1000, 5

, 5:

10.0

:

. 4.5.

146 4. - HTML5

,HTML5,-API.stepstepUp()stepDown():

input.stepUp(x)input.stepDown(x)

,step,x1,.minmax.

patternnumber,,,number.pattern(gracefuldegradation),pattern,-1.

number,-.pattern="[0-9]*"pattern="\d+|\d+\.\d+"number.-min,maxstep,.

: range,,.4.6.,.number,min,max,step.Safari2.0,Safari5-min,maxstep.,-WebKit.Opera,BlackBerry,IE10Chromerange.MobileFirefoxrange,-23.Androidrange.

.,value.2030,25.min,maxstep,0,1001-.,range,.

:,-?,.WebKit:

input[type=range]{-webkit-appearance: slider-vertical;}

1 ,SafariiOS6-pattern,number.

147

. 4.6. Windows Phone, BlackBerry 10, iPhone Chrome

,,.Opera,-Presto.

: search.--,-.,,,search-cancel-button.,.4.7.

search().,Go()Enter().

: color,,.4.8.color,,,.-.#0 00000.,color,.

,indianred(-).,.

-,.,,#[a-zA-Z0-9]{6}.patternplaceholder,,-.,

148 4. - HTML5

. 4.7. BlackBerry 10 ( ) iOS6.1 ( Search ())

. 4.8. BlackBerry 10 Opera Mac

149

color,-,:

:

,,date,datetime,datetime-local,month,timeweek.-ISO8601.,,,.date-,,.

: date:,.,..

-.,,:--:

:

:

date,-(pattern).,-,-.JavaScript,,..,.

.4.9,,date,.,-(,,).

150 4. - HTML5

date-.-/.,.

. 4.9. , iOS, BlackBerry, Android Firefox OS,

151

: datetime:(,,),(,,,).-(UTC),.min,maxstep,:min="2012-03-01T12:00Z".

,,-:

:

:

:

datetime-localdatetime,UTC(Z).

: month,.,,.,min-0001-01,max21474 83647-12.-minmax.step.,-step="6",.:

:

JavaScript,-01.

152 4. - HTML5

: time24-.0,24.minmax.

,.60,60,.-step900,15.,15:

:

type,.,,-,..

: week,,,.0152.-,2014:2014-W01.

1,,4.1:

week-.

,23.:

button; checkbox; color; date; datetime; datetime-local; email; file; hidden; image;

153

month; number; password; radio; range; reset; search; submit; tel; text; time; url; week.

-JavaScript.,,,.JavaScript.,.-,-.,-URL:

:

154 4. - HTML5

,.,emailurl,.-,,,.4.10.

. 4.10. , ,

typepattern,-(.4.11).,iOSAndroid.

. 4.11. , ,

,.,HTML5,-.,,,-.

,-.JavaScript,.,.

155

,HTTP-.

,,-,,.JavaScript.HTML5,--.

HTML5DOM,-.HTML5,validity1.

validityAPI.-,.validity,-:

var element = document.querySelector('#form_control_id');var validityStateObject = element.validity;

var validityStateObject = document.form_id.form_control_id.validity;

validityStateObjectvalidity:

element.validity.valueMissing.,(required),,valueMissingtrue,false.valueMissing,,;

element.validity.typeMismatch.true,,false.,number,emailurl,,-URL,typeMismatchtrue;

element.validity.patternMismatch.-,pattern,,patternMismatchtrue,false.pattern-.,pattern-.,patternMismatch,-pattern,.

1 ,,-.,-.

156 4. - HTML5

,pattern-title,.;

element.validity.tooLong.maxlength,tooLong.true,,false.,.maxlength.tooLong,-maxlength;

element.validity.rangeUnderflow.rangeUnderflow-,min.rangUnderflowtrue,;

element.validity.rangeOverflow.rangeOverflowrangeUnderflow.,max;

element.validity.stepMismatch.true, ,step,false.stepMismatch,-step, min.step;

element.validity.valid.-,validValidityStatetrue,false.-,customError,.false, validtrue.-(true),validfalse;

element.validity.customError.customError.true,-(),-,.

customError,..,-setCustomValidity(message), message, (..4.1,4.104.11).customError,true,-

157

.false,.

,-,customErrortrue.,setCustomValidity(""),.

customError true, , , . - , - .

,.CSS.

WebKit,.,,,-DOM.,:

::-webkit-validation-bubble::-webkit-validation-bubble-arrow-clipper::-webkit-validation-bubble-arrow::-webkit-validation-bubble-message

:::-webkit-vali-dation-bubble.::-webkit-validation-bubble-arrow-clipper::-webkit-validation-bubble-arrow,16..::-webkit-validation-bubble-message.,,,CSS1.

1 WebKit,Blink.Chrome.,--.

158 4. - HTML5

,HTML5,-,,-.-(),.-.,.

,,-..,,.,:

*

,-.-.

HTML5,-,CSS.,,-,,,-,,,,..,,:

input:required,input:invalid { background-color: #FFFFFF;border: 1px solid #FF0000;}input:valid { border: 1px solid #9 99999;}input:read-only { background-color: #DDDDDD; border: 1px solid #6 66666;}input:checked + label { color: #6 66666; font-style: italic;}

159

68.,,,.

ARIAaria-required="true",titlearia-labeledby,.

,.HTML5:,,,.,,HTML5.

listtext,email,url,-,,-,list.,.

listid-.HTML5.

,.,list,.,-list,.

,-.list,.-,(.4.12):

Animals:

duck

160 4. - HTML5

. 4.12. , ( Opera 10.6)

,-Google..-,-.,,.,Google,.AJAX-.

.,.-,,.,,.-.-().

,.,.,(),.,,,:

Web Address:

Or select from the list

161

,-(.4.13).,.,,.4.12.-JavaScript,,.

. 4.13. . , , . : URL, .

Next(),

,,,-JavaScript.HTML:

Cow

162 4. - HTML5

Banana Slug Sheep

JavaScript:

var select = document.getElementById('slct_animal'), input = document.getElementById('animals');select.addEventListener('change', function() { input.value = this.value;}, false);

CSS:

input[list],datalist select { float: left; height: 1.4em; position: relative;}input[list] { z-index: 2; width: 20em;}datalist select { width: 1.2em;}

selectname,select.select,(selectspinner).,list.

,,DOM.,HTML5,form,namefor,-onchange,onforminputonformchange;,-.

outputvalue.,,-.-,.,DOM.

for.for-ID,.

163

,--,,,for.

CubeeDoo.CubeeDoo:,,,-.-DOM.HTML-:

01120

,,,0,-,2.JavaScript-.

,,.,-..,,

Documents

Html5. Разработка Приложений Для Мобильных Устройств