2016
. 1
: white-space [10/16] 11
[6/17] 11
[7/17] 12
. strong b [8/17] 13
. em i [9/17] 13
. br hr [10/17] 14
[11/17] 15
[12/17] 16
. del ins [13/17] 16
[14/17] 17
[15/17] 17
: [16/17] 17
: [17/17] 19
.. 20
[2/23] 20
. 20
CSS [4/23] 20
[5/23] 21
[6/23] 23
[7/23] 23
[8/23] 24
: , [9/23] 24
- [10/23] 25
[11/23] 27
[17/23] 28
[18/23] 29
[19/23] 32
[20/23] 34
[21/23] 35
: [23/23] 36
. 38
[1/18] 38
[2/18] 39
[3/18] 39
[4/18] 40
id [5/18] 41
[6/18] 42
[7/18] 43
[8/18] 43
[9/18] 44
[10/18] 45
: [11/18] . 47
[12/18] 48
[13/18] 49
[14/18] 50
[15/18] 51
[16/18] 51
[17/18] 51
CSS. 51
CSS [1/15] 51
CSS- [2/15] 52
[3/15] 52
[4/15] 53
[5/15] 53
[6/15] 53
[7/15] 54
[8/15] 54
[9/15] 54
. [10/15] 54
[11/15] 55
. [12/15] 56
[13/15] 56
: - [15/15] 56
.. 57
[3/18] 57
[4/18] 57
[5/18] 57
[6/18] 58
[7/18] 58
[7/19] 59
.. 59
[9/18] 59
:nth-child [10/18] 60
, 1. 60
:nth-child [11/18] 60
:hover [12/18] 60
:hover [13/18] 62
. . [18/18] 64
. 65
[1/18] 65
[2/18] 66
[3/18] 66
[4/18] 67
[5/18] 67
[6/18] 68
|
|
|
[7/18] 68
[8/18] 69
[9/18] 70
. [10/18] 71
. [11/18] 72
. [12/18] 73
. [13/18] 75
[14/18] 76
[15/18] 77
[16/18] 78
[17/18] 79
: [18/18] 81
, 1. 81
span [1/16] 81
font-size: [2/16] 81
font-weight: [3/16] 81
font-style: [4/16] 82
font-family: [5/16] 82
color: [6/16] 82
text-decoration: [7/16] 83
[8/16] 83
text-transform [9/16] 83
: white-space [10/16] 83
: text-align[11/16] 84
: vertical-align [12/16] 85
CSS [13/16] 85
line-height: [14/16] 85
[15/16] 85
: CSS [16/16] 86
. 87
C background-color [1/16] 88
background-image [2/16] 89
background-repeat [3/16] 90
background-position [4/16] 91
background-position [5/16] 93
background-attachment [6/16] 94
, 1. 95
background [7/16] 95
JPEG [9/16] 100
PNG-8 [10/16] 100
PNG-24 [11/16] 101
GIF [12/16] 101
[13/16] 103
[14/16] 104
[15/16] 105
: CAT Academy [16/16] 107
. 108
[1/23] 108
. 110
[2/23] 110
[3/23] 110
, padding [4/23] 111
, margin [5/23] 113
[6/23] 113
[7/23] 114
[8/23] 115
[9/23] 116
[10/23] 116
? [11/23] 117
[12/23] 118
100% [13/23] 118
[14/23] 118
, box-sizing[15/23] 119
[16/23] 119
, display[17/23] 120
display: inline-block [18/23] 120
display: table [19/23] 121
display: table-row [20/23] 121
display: table-cell [21/23] 121
display: none [22/23] 122
[23/23] 122
. 122
[1/32] 122
, 2 [2/32] 123
, 3 [3/32] 123
[4/32] 123
, 2 [5/32] 124
, 3 [6/32] 124
, [7/32] 125
[8/32] 125
float [9/32] 126
float [10/32] 126
[11/32] 126
, [12/32] 127
: [13/32] 127
clear [14/32] 128
: [15/32] 128
: [16/32] 128
, 1 [17/32] 131
|
|
|
, 2 [18/32] 131
, [19/32] 131
, 1 [20/32] 132
, 2 [21/32] 134
, 3 [22/32] 136
, [23/32] 138
, 1 [24/32] 142
, 2 [25/32] 144
[26/32] 147
: [27/32] 151
inline-block [28/32] 156
float vs inline-block [29/32] 158
inline-block [30/32] 161
inline-block [31/32] 163
: inline-block [32/32] 167
. 169
[1/20] 169
. 170
[1/20] 170
[2/20] 170
position: relative top [3/20] 170
position: relative left [4/20] 171
position: relative bottom [5/20] 171
position: relative right [6/20] 171
[7/20] 172
[8/20] 172
[9/20] 172
position: absolute left [10/20] 173
position: absolute top [11/20] 173
position: absolute right [12/20] 173
position: absolute bottom [13/20] 173
[14/20] 174
[15/20] 174
[16/20] 174
[17/20] 175
[18/20] 175
z-index [19/20] 175
.. 176
[1/28] 176
[2/28] 176
[3/28] 177
[4/28] 177
, [5/28] 177
[6/28] 178
[7/28] 178
[8/28] 178
: [9/28] 179
[10/28] 179
[11/28] 180
, [12/28] 180
[13/28] 180
[14/28] 181
: [15/28] 181
[16/28] 181
, ? [17/28] 181
[18/28] 182
[19/28] 182
: [20/28] 182
[21/28] 183
[22/28] 183
[23/28] 183
[24/28] 184
[25/28] 184
[26/28] 184
[27/28] 184
: [28/28] 185
: . 185
, 1 [1/18] 185
, 2 [2/18] 185
, 3 [3/18] 186
, 1 [4/18] 186
, 2 [5/18] 187
, 3 [6/18] 187
, 4 [7/18] 187
, [8/18] 188
: [9/18] 188
, 1 [10/18] 188
, 2 [11/18] 188
, 3 [12/18] 189
, 1 [13/18] 189
, 2 [14/18] 189
, 3 [15/18] 189
, 4 [16/18] 189
, 5 [17/18] 190
: [18/18] 190
HTML5. 191
. header footer [1/19]. 191
. main [2/19] 191
. article section [3/19] 192
SVG [4/19] 192
. nav [5/19] 194
[6/19] 199
[7/19] 202
. @font-face [8/19] 205
. aside [9/19] 208
article. [10/19] 213
: [11/19] 218
: [12/19] 221
|
|
|
. time [13/19] 225
. figure figcaption[14/19] 230
. video [15/19] 237
[16/19] 244
. audio [17/19] 251
[18/19] 257
: [19/19] 265
HTML5 .. 271
: [1/28] 271
[2/28] 274
[3/28] 276
- [4/28] 279
[5/28] 282
[6/28] 285
[7/28] 287
[8/28] 289
[9/28] 291
[10/28] 294
[11/28] 297
[12/28] 299
[13/28] 300
[14/28] 303
[15/28] 307
[16/28] 310
[17/28] 314
[18/28] 317
[19/28] 319
email [20/28] 321
[21/28] 324
[22/28] 328
[23/28] 332
[24/28] 334
[25/28] 338
localStorage [26/28] 342
localStorage [27/28] 345
: [28/28] 345
, 2. 350
[1/20] 350
:not [2/20] 352
:not [3/20] 355
:nth-last-child [4/20] 357
:first-of-type [5/20] 359
:last-of-type [6/20] 362
:nth-of-type [7/20] 364
:nth-last-of-type [8/20] 366
: [9/20] 369
C [10/20] 372
:empty [11/20] 374
:only-child [12/20] 376
:only-of-type [13/20] 378
::before [14/20] 380
[5/14]
<meta>, -. <head>.
- , : content, http-equiv, name scheme.
- . . :
<meta name="keywords" content=", , ">
content . . .
, ,
[6/14]
- . :
<meta name="description" content=" ">content . .
, , . , .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style type=text/css>
h1 {
font-size: 28px;
font-family: Monaco, Courier, monospace;
color: #618ad2;
}
p {
transition: font-size.5s;
}
</style>
</head>
<body>
|
|
|
<h1> </h1>
<p id="blinking"> . HTML-.</p>
<script>
var p = document.getElementById("blinking");
setInterval(function() {
if (p.style.fontSize!= "10px") {
p.style.fontSize = "10px";
} else {
p.style.fontSize = "20px";
}
}, 2000);
</script>
</body>
</html>
: white-space [10/16]
, HTML-. <pre>.
, CSS . white-space, :
nowrap ;
pre <pre>;
pre-wrap pre, , ;
normal .
[6/17]
. . .
, :
1.
|
1. HTML
1. HTML-
1.
2.
2. CSS
1.
1.
2.
3.
3.
2.
3.
4.
5. JavaScript
6.
Text/ menu-6-17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> text/menu-6-17.html</title>
</head>
<body>
<h1> </h1>
<ol>
<li>
<ol>
<li>2.1
<ol>
<li>3.1
<ol>
<li>4.1</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li> </li>
</ol>
</body>
</html>
[7/17]
:
1. <dl> ;
2. <dt> ;
3. <dd> .
<dt> <dd> <dl>.
:
<dl>
<dt></dt>
<dd></dd>
<dt> </dt>
<dd> </dd>
<dt></dt>
<dd> </dd>
</dl>
Text/menu-7-17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<h1> </h1>
<dl>
<dt>dl</dt>
<dd>Definition List, </dd>
<dt>dt</dt>
<dd>Definition Term, </dd>
<dt>dd</dt>
<dd>Definition Definition, </dd>
<dt>ul</dt>
<dd>Unordered List, </dd>
<dt>li</dt>
<dd>List Item, </dd>
</dl>
</body>
</html>
. strong b [8/17]
, , , , .
, : , . , .
, .
|
|
|
<strong> ( ).
<b> .
, .
, , , . , <strong>. <em> <i>. <em> .
, <b> HTML5. , . .
. em i [9/17]
.
<em> , , .
, , ( ), , :
<em></em> .
<i> , , . , , .
, , - , :
<i></i> .
, .
<i> HTML5. .
. br hr [10/17]
, . , .
HTML <br>.
, . <p>.
<hr> , -. , CSS ( ).
Text/menu-10-17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> text/menu-10-17.html </title>
</head>
<body>
<h1>. </h1>
<p>
,
.
.
<br>
<br>
<br>
</p>
<hr>
<p>
,
,
.
<br>
<br>
</p>
<hr>
<p>
,
.
,
.
<br>
<br>
<br>
</p>
</body>
</html>
[11/17]
HTML :
<blockquote> , . .
<q> . .
<cite> , , .
:
1. 1 ,
2. 2 ... !,
3. 3 Hasta la vista, baby.
.
text/menu-11-17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> </h1>
<p> <cite> </cite> :</p>
<blockquote>
! , , . !
</blockquote>
<p> <q>Hasta la vista, baby</q> .</p>
<p> <q> !</q> .</p>
</body>
</html>
[12/17]
, . .
: 202, H2O, X3+X2=1
<sup> .
<sub> .
, .
.
HTML-, MathML.
text/menu-12-17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<h1></h1>
<ul>
<li>H<sub>2</sub>SO<sub>4</sub></li>
<li>sin<sup>2</sup>x+cos<sup>2</sup>x=1</li>
<li>C<sub>2</sub>H<sub>5</sub>OH</li>
<li>e-x<sub>2</sub></li>
</ul>
</body>
</html>
. del ins [13/17]
. - HTML- .
: , , ?
