Кириченко А.В., Дубовик Е.В. - Справочник HTML. Кратко, быстро, под рукой [2021, PDF, RUS]

Примеры страниц

Оглавление

ЧАСТЬ 1. ОБЩАЯ СТРУКТУРА НТМL-ДОКУМЕНТА ••••••• 15
1.1. ЧТО ТАКОЕ HTML? ••••••••••••••••••••••••••••••••••••••••••••.•..••.•..•.... 16
1.2. НТМL-ДОКУМЕНТ, ТЕГИ ••••••••••••••••••.•••.••••.•.•......•••••••••••••• 18
Введение в теги ........................................................................ 18
1.3. СТРУКТУРА НТМL-ДОКУМЕНТА •••..•..•••••••••••••••••••••••••••••••••• 23
Атрибуты id и class .................................................................... 25
1.4. ГЛОБАЛЬНЫЕ АТР ИБУТЫ HTML ••••••••••••••.••••••••••••••••••••••.••• 25
Другие глобальные атрибуты .................................................... 28
1.5. СОБЫТ ИЯ •.•••••..•......•..•......•.•..•.....••••••••••••••••••••••••••••••••• 32
ЧАСТЬ 2. СПРАВОЧНИК ТЕГОВ HTML5 ••.••.•.•••..•••••••• 34
ТЕГ А •••.••••.•••.•••............•.•.....•••••••••••••••••••••••••••••••••••••.•••• 35
ТЕГ АВВR ............................................................................. 38
ТЕГ ADDRESS ••••••••.••••••••••••••••••.•.••••.•.•••.•.•.•••••.••.•••...••••••.•••• 39
ТЕГАRЕА ••••••••••••••••••...•••••••••••.••.•••••.•.........•••••...•....•.•••..•..•. 39
ТЕГ ARTICLE •...••................•...............•.••••••••••••••••••••••••••••••••• 41
ТЕГ ASIDE •••••..•..•.•.••........................•••••••••••••.•••••••••••••••••••••• 42
ТЕГ AUDIO ••••••.•••••..••........•..•......••....••.•.••••••••••••.•••••••••••••.•••• 44
ТЕГ В .•...........•..••.••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 46
ТЕГ ВАSЕ ............................................................................. 47
TEГ BDI ...........••.•••.••.••••...••••••.•.••.••••••.••••.•••••••••••••••••••••.•.•• 49
ТЕГ ВDО .............................................................................. 50
ТЕГ BLOCKQUOTE .................................................................. 51
ТЕГ ВОDУ •....•..•....•••••••••.•••.•••.•....•.•.•.••..••••.•••••••••••••••••••••.•.•• 52
ТЕГ ВR ...••......................................................................... 52
ТЕГ BUПON •••.••.•••••.••••.•.•.•••••.•••...•.•.....•.•.••••.•••.•••••••.•.••••..•• 54
ТЕГ CANVAS ......................................................................... 59
ТЕГ CAPTION ........................................................................ 61
ТЕГ CENTER ......................................................................... 62
ТЕГ СIТЕ •••.•.••.•••.••.•..•.••.•.•••••..•.•.......................................... 63
ТЕГ СОDЕ ...................•...............••••••••.••.•..•...•..•••.•..•...•••.•.•• 64
ТЕГ СОL ••••••••••••.••.•••..•.••••••••••••••••••.•.•.•..•.•••••••••••.......••.•••... 65
ТЕГ COLGROUP ..................................................................... 66
TEГ COMMAND ..................................................................... 68
ТЕГ DАТА •••••••.••••.•.•••••••••••••••••.•••••.....•.•.••.•.•••.••..•••.•.••••••••••• 69
ТЕГ DATALIST ........................................................................ 70
TEГ DD ..............................................•..........................•.... 71
TEГ DEL ••••••.••••.••••.••.••.•.•.••.•.••.•.•..........•....•..•.••......••....•.•... 72
ТЕГ DEТAILS ......................................................................... 73
TEГ DFN ••.•.•••.•.•..••.....•.....•••...•....................•...................•.•. 74
ТЕГ DIALOG •••••••••••••••.••••.•.•••••••••••••••••••.••.••.•.•.•..•••••••••••••••••• 75
TEГ DIV •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 75
TEГ DL .............................................................................. 79
ТЕГ DТ .............................................................................. 81
ТЕГ ЕМ .............................................................................. 81
ТЕГ EMBED .......................................................................... 82
ТЕГ FIELDSEТ ....................................................................... 83
ТЕГ FIGCAPТION ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••.••• 85
ТЕГ FIGURE •••••••••••••••••••••••••••.••••.•••.•••••••••••••••••••••...•.•.••.•••.•• 86
ТЕГ FOOTER ......................................................................... 86
TEГ FORM ............................................................................ 88
ТЕГИ Н1 ,Н2, НЗ, Н4, Н5, Н6 ...................................................... 90
ТЕГ НЕАD ............................................................................. 92
ТЕГ HEADER ......................................................................... 94
ТЕГ HGROUP ........................................................................ 95
ТЕГ НR .............................................................................. 95
ТЕГ НТМL ............................................................................. 97
ТЕГ I .............................................................................. 98
ТЕГ IFRAME .......................................................................... 98
TEГ IMG ............................................................................ 101
ТЕГ INPUT .......................................................................... 105
TEГ INS ••••••••••••••••.•••••••••••••••••••••••••.••••••.••••••••••••••..•••••••••• 127
ТЕГ КВD ••.•••••••••••••..••••.•.•.•••••.•••••••••.•..••••..•..•••••••••••••••••••.• 128
ТЕГ KEYGEN • . . . • . . • . • . . . . . . . . . . . • . • • • • . . . . . . . • • • • • • • • • • • • • . . • • . . . • . . . . . . . • . . . . . . . . 129
ТЕГ LABEL .•••••.•.••........•.•....••.•...•.••...•.•......••.•..••........•....•..• 130
ТЕГ LEGEND ........•.........•••.•.......••........•.•..•...•...•....•...•.....•.. 131
ТЕГ LI ..•.•.•.••••.•.•.••••.••••.••••••••••••••••••.•••••••••••.••••••.••••••••••• 132
ТЕГ LINK .......•.•.•....••••.••.•••••••.•••.•.••.•......••.•.•..•.•.•.•.•.•.....•.•• 134
ТЕГ MAIN ........................................................................... 135
ТЕГ МАР ............................................................................ 136
ТЕГ MARK .......................................................................... 138
ТЕГ MENU ••••.•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••.••••••••• 138
ТЕГ MENUITEM ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••.•• 140
ТЕГ МЕТА ........................................................................... 141
ТЕГ МЕТЕR ......................................................................... 145
TEГ •••••••••...••.••••.••••••.•••..•.••..•........•....••..••...•...•....•.•. 146
ТЕГ NOSCRIPT .•....•...........••••.•.•...•.••.•.••..•.••.•.•..••.•....••••.••••• 147
ТЕГ OBJECT ..••.....•......•......•.•..•••...•..•.....•.•.......•....•.......•..•. 148
ТЕГ ОL ••••••...•..••••••••••••••.••...•.•.•.•••••••••••••••.••.•.••...•.•.•.••...• 150
ТЕГ OPТGROUP •••.•••••••••••••.•••••••••••••••••••••••••••.••••••••••••••••••••• 153
ТЕГ OPTION ••••••••.•..•.•••.•.••••••••••••••••••••.•••.•••••••••••........•....•.. 154
ТЕГ OUTPUT •••••••••.•.••••••.•••••••••••.••••.••••••••.••••.•.•.••••••••••••••••• 156
ТЕГ Р •••.••••••••.••••••••.••.••••••.•••.•.••••.••..••...•••.•••.•••••••••.•••••• 157
ТЕГ PARAM ......................................................................... 158
ТЕГ PRE ••••••.•••••••••••••••••••.•••••..•••.•...•••..•.••.••••••••..•.•.•.......•• 159
ТЕГ PROGRESS ................................................................... 160
ТЕГ Q ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••.••••• 162
ТЕГ RP .•••••••••••••••••••.•••••••••.•.••..••.•.•••••••....•.•••.................. 163
ТЕГ RT .••••••.••••••••••••••••••••••••••••••..•..•..••....•••....•.••.•.••••••••.• 164
ТЕГ RUBY........................................................................... 166
ТЕГ S •...••.•........•...•••..•.•.••.•....•••.•••••..••.••..•..•••.•••••••••••••• 166
ТЕГ SAMP .......................................................................... 167
ТЕГ SCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
ТЕГ SECTION ••.•••••..•••.•••••••••••.••••••••••••••••••••••••••••••••••.••••••••• 169
ТЕГ SELECT • • • • • • • • • • • . • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • . • • . • • • • • . . 170
ТЕГ SMALL • . • • • • • • • • • • • • . • • . . • • • • • • • • . • • • • • • • • • • • • • • • • • • • • • • • • • • . . • • • • • • • • • • • • • • • • • 173
TEГ SOURCE ••••••••.•••••••.•••••••••••••••••.••••••••••.••••••••••••••••••••..... 174
ТЕГ SPAN ........................................................................... 175
ТЕГ STRONG •••••••••.••••••••••••••.•..•..•.••..•...•.•••.••••..••..••..•••••••••• 177
ТЕГ SТYLE.......................................................................... 178
TEГ SUB .....•..••..••.••..••.•••.•••..•••••••••••••••••••••••••.••••••••••••••••••• 180
ТЕГ SUMMARY ...•.••.••...•••••••••••••••••••••.•••••••••••••••.••••.•••••••••.•. 180
ТЕГ SUP •...•.............•..........•..•••••..••••.•••..•••.•••••..•••••••••••••••• 181
ТЕГ TABLE ••••••••••••••••••••.••••••••••••••••••••••••.•••••••••••••••••••••••••••• 182
ТЕГ TBODY ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 185
ТЕГ ТD •.....•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 186
ТЕГ TEXTAREA .................................................................... 192
ТЕГ TFOOT ......................................................................... 195
ТЕГ ТН ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••.••••••••••••••••• 196
ТЕГ THEAD ......................................................................... 198
ТЕГ TIME ........................................................................... 198
ТЕГ TITLE ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 199
ТЕГ ТR ............................................................................ 201
ТЕГ TRACK ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 201
ТЕГ U •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••.•• 203
TEГ UL ............................................................................ 204
TEГ VAR •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 206
ТЕГ VIDEO •••••••••••.•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 207
TEГ WBR ............................................................................ 209
ТЕГ ХМР ............................................................................ 210
ЧАСТЬ 3. СЕМАНТИЧЕСКАЯ ВЕРСТКА НА HTML ......................... 213
3.1. БАЗОВЫЕ АБСТРАКЦИИ РАЗМЕТКИ. ВЕРСТКА
НА ОСНОВЕ БЛОКОВ DIV ........................................... 214
3.2. СЕМАНТИЧЕСКИЕ ТЕГИ HTML5. ВЕРСТКА НА ОСНОВЕ
СЕМАНТИЧЕСКОЙ РАЗМЕТКИ .................................... 216
3.3. ПРИМЕР СЕМАТИЧЕСКОЙ ВЕРСТКИ ................................. 222
3.3.1. Блок HEAD ..................................................................... 224
3.3.2. Блок HEADER ................................................................. 227
3.3.3. Блок SECTION - слайдер ................................................ 231
3.3.4. Блок SECTION - Статьи и новости .................................. 233
3.3.5. Блок SECTION - видео ................................................... 235
3.3.6. Блок SECTION -Архив журнала ...................................... 237
3.3.7. Блок SECTION - подписка .............................................. 238
3.3.8. Блок FOOTER ................................................................. 239
ПРИЛОЖЕНИЕ 1. СТАНДАРТНЫЕ ЦВЕТА .................................. 244
ПРИЛОЖЕНИЕ 2. КОДЫ ЯЗЫКОВ ........................................... 267
ПРИЛОЖЕНИЕ 3. MIME-ТИПЫ ............................................... 273