Читать книгу Руководство по созданию и продвижению сайтов с разбором кода HTML и CSS онлайн
– объявляет тип документа и версию HTML.
– определяет корневой элемент HTML.
– содержит метаданные о документе, такие как заголовок, ссылки на стили и скрипты.
– задает заголовок документа, отображаемый в строке заголовка браузера.</p>
<p><body> – содержит основное содержимое документа, такое как текст, изображения, таблицы и другие элементы.</p>
<p><h1>, <h2>, …, <h6> – определяют заголовки различных уровней.</p>
<p><p> – создает абзац текста.</p>
<p><a> – создает гиперссылку.</p>
<p><img> – вставляет изображение.</p>
<p><ul>, <ol>, <li> – создают неупорядоченный или упорядоченный список.</p>
<p><div> – определяет блок элемента для создания контейнеров.</p>
<p><span> – определяет строчный элемент для стилизации отдельных частей текста.</p>
<p><table>, <tr>, <td> – создают таблицы, строки и ячейки.</p>
<p><form> – определяет форму для ввода данных.</p>
<p><input> – создает поле ввода внутри формы.</p>
<p><button> – создает кнопку.</p>
<p><textarea> – создает многострочное текстовое поле.</p>
<p><select>, <option> – создают выпадающий список.</p>
<p><hr> – рисует горизонтальную линию (разделитель).</p>
<p><!– … –> – комментарий.</p>
<br><p>Списки и таблицы:</p>
<p><dl>, <dt>, <dd> – создают определение списка (словарь).</p>
<p><ul>, <ol>, <li> – дополнительные атрибуты могут изменять структуру и внешний вид списков (маркированные, нумерованные списки).</p>
<p><table>, <thead>, <tbody>, <tfoot>, <tr>, <th> – для создания и стилизации таблиц.</p>
<br><p>Формы и ввод данных:</p>
<p><form> – содержит элементы формы.</p>
<p><input> – различные типы для ввода текста, пароля, чекбоксов, радиокнопок и др.</p>
<p><select>, <option> – создают выпадающий список.</p>
<p><button> – создает кнопку.</p>
<p><textarea> – создает многострочное текстовое поле.</p>
<p><label> – связывает текст с элементом формы для улучшения доступности.</p>
<br><p>Мультимедиа:</p>
<p><audio>, <video> – встраивают аудио и видео контент.</p>
<p><source> – определяет источники мультимедийных данных.</p>
<br><p>Гиперссылки и маркеры:</p>
<p><a> – ссылка, может содержать текст, изображение или другие элементы.</p>
<p><nav> – обозначает блок навигации.</p>
<p><header>, <footer> – определяют верхнюю и нижнюю части страницы соответственно.</p>
<br><p>Метаданные:</p>
<p><meta> – предоставляет метаданные, такие как кодировка, описание, ключевые слова.</p>
<br><p>Структурные элементы:</p>
<p><article> – обозначает независимую статью в документе.</p>
<p><section> – определяет раздел в документе.</p>
<p><aside> – обозначает содержание, которое находится в стороне от основного контента.</p>
<p><figure>, <figcaption> – используются для встраивания графики с подписью.</p>
<div class="pagination ignore-select d-flex jc-center" id="pagination">
<a href="/fb2reader/4160/page/14"><i class="pagination__btn pagination__btn--prev fal fa-arrow-left"></i></a>
<div class="pagination__pages d-flex jc-center"><a href="/fb2reader/4160/page/10">10</a><a href="/fb2reader/4160/page/11">11</a><a href="/fb2reader/4160/page/12">12</a><a href="/fb2reader/4160/page/13">13</a><a href="/fb2reader/4160/page/14">14</a><span>15</span><a href="/fb2reader/4160/page/16">16</a><a href="/fb2reader/4160/page/17">17</a></div>
<a href="/fb2reader/4160/page/16"><i class="pagination__btn pagination__btn--next fal fa-arrow-right"></i></a>
</div>
<div class="pagi-nav fx-row fx-center">
<div class="navigation">
<div class="inthis">
<div class="block-q">
<a class="fdl btn" href="https://www.litres.ru/70836496/?lfrom=1172546164">Купить книгу в магазине</a>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="descr1">
</section>
</main>
<!-- END CONTENT -->
<footer class="footer">
<div class="footer__one d-flex ai-center jc-center r-gap-20 c-gap-20">
<div class="footer__logo logo">
Fli<span>Bust</span>
</div>
<div class="footer__notify mr-auto">Представленный фрагмент книги размещен <br>по согласованию с распространителем легального контента ООО "ЛитРес" (не более 15% исходного текста).<br> Если вы считаете, что размещение материала нарушает ваши или чьи-либо права, то сообщите нам об этом.</div>
<ul class="footer__menu d-flex jc-center r-gap-10 c-gap-20">
<li><a href="/sitemap.xml">Карта сайта</a></li>
<li><a href="/pravoobladateljam.html">Правообладателям</a></li>
</ul>
</div>
<div class="footer__two d-flex ai-center jc-center r-gap-20 c-gap-20">
<div class="footer__copyright mr-auto">Copyright 2025 Материалы предоставлены
только для ознакомления! (16+)</div>
<div class="footer__counter"><!--LiveInternet counter--><a href="https://www.liveinternet.ru/click"
target="_blank"><img id="licnt8AC6" width="0" height="0" style="border:0"
title="LiveInternet"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7"
alt=""/></a><script>(function(d,s){d.getElementById("licnt8AC6").src=
"https://counter.yadro.ru/hit?t45.2;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)</script><!--/LiveInternet--></div>
</div>
</footer>
<!-- END FOOTER -->
</div>
<!-- END WRAPPER-MAIN -->
</div>
<!-- END WRAPPER -->
<div class="lgn d-none">
<div class="lgn__ctrl d-flex">
<span class="flex-1 d-flex jc-center">Вход</span>
<a href="/?do=register" rel="nofollow" class="flex-1 d-flex jc-center">Регистрация</a>
</div>
<form method="post" class="lgn__content d-flex fd-column r-gap-15">
<button type="button" class="lgn__btn-close fal fa-times btn-nobg btn-square" aria-label="Закрыть панель авторизации"></button>
<div class="lgn__header">
<div class="lgn__title">Войти в свой аккаунт</div>
<div class="lgn__caption">И получить новые возможности</div>
<div class="lgn__avatar img-block ratio-1-1 pi-center fal fa-user"></div>
</div>
<div class="lgn__cell lgn__input">
<input type="text" name="login_name" id="login_name" placeholder="Ваш логин" autocomplete="on">
<input type="password" name="login_password" id="login_password" placeholder="Ваш пароль" autocomplete="on">
</div>
<div class="lgn__cell d-flex ai-center jc-space-between r-gap-10 c-gap-10">
<label class="has-checkbox" for="login_not_save">
<input type="checkbox" name="login_not_save" id="login_not_save" value="0" checked>
<span>Запомнить меня</span>
</label>
<a href="https://flibust.net/index.php?do=lostpassword">Забыли пароль?</a>
</div>
<div class="lgn__cell lgn__btn">
<button onclick="submit();" type="submit" class="w-100">Войти на сайт</button>
<input name="login" type="hidden" id="login" value="submit">
</div>
<div class="lgn__cell lgn__social d-flex ai-center jc-center r-gap-10 c-gap-10">
<div class="lgn__social-caption w-100 d-flex ai-center c-gap-10">Или войти через соц. сети</div>
</div>
</form>
</div>
<script src="/engine/classes/js/jquery3.js?v=vang3"></script>
<script src="/engine/classes/js/jqueryui3.js?v=vang3" defer></script>
<script src="/engine/classes/js/dle_js.js?v=vang3" defer></script>
<script src="/templates/Flibust/js/libs.js?v=vang3"></script>
<script src="/templates/Flibust/js/owl-carousel.js?v=vang3"></script>
<script src="/templates/Flibust/js/filter.js?v=vang3"></script>
<script data-host="https://uanalytics.net" data-dnt="false" src="https://uanalytics.net/js/script.js" id="ZwSg9rf6GA" async defer></script>
<script>
<!--
var dle_root = '/';
var dle_admin = '';
var dle_login_hash = 'ef869ae59acd3ddee8d93c31a5364a5cd033f57a';
var dle_group = 5;
var dle_skin = 'Flibust';
var dle_wysiwyg = '-1';
var quick_wysiwyg = '2';
var dle_min_search = '4';
var dle_act_lang = ["Да", "Нет", "Ввод", "Отмена", "Сохранить", "Удалить", "Загрузка. Пожалуйста, подождите..."];
var menu_short = 'Быстрое редактирование';
var menu_full = 'Полное редактирование';
var menu_profile = 'Просмотр профиля';
var menu_send = 'Отправить сообщение';
var menu_uedit = 'Админцентр';
var dle_info = 'Информация';
var dle_confirm = 'Подтверждение';
var dle_prompt = 'Ввод информации';
var dle_req_field = ["Заполните поле с именем", "Заполните поле с сообщением", "Заполните поле с темой сообщения"];
var dle_del_agree = 'Вы действительно хотите удалить? Данное действие невозможно будет отменить';
var dle_spam_agree = 'Вы действительно хотите отметить пользователя как спамера? Это приведёт к удалению всех его комментариев';
var dle_c_title = 'Отправка жалобы';
var dle_complaint = 'Укажите текст Вашей жалобы для администрации:';
var dle_mail = 'Ваш e-mail:';
var dle_big_text = 'Выделен слишком большой участок текста.';
var dle_orfo_title = 'Укажите комментарий для администрации к найденной ошибке на странице:';
var dle_p_send = 'Отправить';
var dle_p_send_ok = 'Уведомление успешно отправлено';
var dle_save_ok = 'Изменения успешно сохранены. Обновить страницу?';
var dle_reply_title= 'Ответ на комментарий';
var dle_tree_comm = '0';
var dle_del_news = 'Удалить статью';
var dle_sub_agree = 'Вы действительно хотите подписаться на комментарии к данной публикации?';
var dle_unsub_agree = 'Вы действительно хотите отписаться от комментариев к данной публикации?';
var dle_captcha_type = '0';
var dle_share_interesting = ["Поделиться ссылкой на выделенный текст", "Twitter", "Facebook", "Вконтакте", "Прямая ссылка:", "Нажмите правой клавишей мыши и выберите «Копировать ссылку»"];
var DLEPlayerLang = {prev: 'Предыдущий',next: 'Следующий',play: 'Воспроизвести',pause: 'Пауза',mute: 'Выключить звук', unmute: 'Включить звук', settings: 'Настройки', enterFullscreen: 'На полный экран', exitFullscreen: 'Выключить полноэкранный режим', speed: 'Скорость', normal: 'Обычная', quality: 'Качество', pip: 'Режим PiP'};
var DLEGalleryLang = {CLOSE: 'Закрыть (Esc)', NEXT: 'Следующее изображение', PREV: 'Предыдущее изображение', ERROR: 'Внимание! Обнаружена ошибка', IMAGE_ERROR: 'Не удалось загрузить изображение', TOGGLE_SLIDESHOW: 'Просмотр слайдшоу',TOGGLE_FULLSCREEN: 'Полноэкранный режим', TOGGLE_THUMBS: 'Включить / Выключить уменьшенные копии', ITERATEZOOM: 'Увеличить / Уменьшить', DOWNLOAD: 'Скачать изображение' };
var DLEGalleryMode = 0;
var DLELazyMode = 1;
var allow_dle_delete_news = false;
//-->
</script>
<script>
let dleSearchPage = 'fb2reader';
let dleSearchConfig = {"ajax":0,"maximunNews":5,"ajaxCategory":0,"ajaxTags":0,"ajaxXfield":0,"url":0,"minChar":3,"maxChar":15,"statistics":1};
dleSearchConfig.page = window.location.pathname;
</script>
<script src="/templates/Flibust/lazydev/dle_search/assets/dle_search.js" defer></script>
</body>
</html>
<!-- DataLife Engine Copyright SoftNews Media Group (https://dle-news.ru) -->