. 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.
,.,-,,,,
38 1. API HTML5, CSS3 JavaScript
,..,..
,,,(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.
40 1. API HTML5, CSS3 JavaScript
,,-,-,-.-..-,-,-.
,,,-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-.-,.
(),-.-,,-..
42 1. API HTML5, CSS3 JavaScript
. 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
44 1. API HTML5, CSS3 JavaScript
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 ,
. ,
46 1. API HTML5, CSS3 JavaScript
.,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,.,.,.
48 1. API HTML5, CSS3 JavaScript
. 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.
.,-,,.-..-,,.
-.,,,,.
,()()..,..
,-.,.,.
50 1. API HTML5, CSS3 JavaScript
..
,.,,.-,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,-.
52 1. API HTML5, CSS3 JavaScript
,,.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).. .
54 1. API HTML5, CSS3 JavaScript
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":,.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-.
,,.,-..,,