Читать книгу Руководство по созданию и продвижению сайтов с разбором кода 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" id="pagination">
<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 class="pagination__pages-btn"><a href="/fb2reader/4160/page/16"><span class="fal fa-chevron-right"></span></a></div>
</div>
</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>
</div>
</main>
<!-- END COLS LEFT -->
<aside class="cols__right">
<div class="sb">
<div class="sb__title">Популярное</div>
<div class="sb__content sb__grid">
<a class="ftop-item d-flex ai-center has-overlay" href="https://novakniga.com/5-zvezdnaja-krov-7-dikaja-ohota.html">
<div class="ftop-item__img img-fit-cover">
<img src="/uploads/posts/2024-07/poster_zvezdnaja-krov-7-dikaja-ohota-1.jpg" loading="lazy" alt="Звездная Кровь – 7. Дикая Охота">
<div class="has-overlay__icon anim"></div>
</div>
<div class="ftop-item__desc flex-grow-1">
<div class="ftop-item__title poster__title line-clamp">Звездная Кровь – 7. Дикая Охота</div>
<div class="ftop-item__meta poster__subtitle line-clamp">Роман Прокофьев</div>
</div>
</a><a class="ftop-item d-flex ai-center has-overlay" href="https://novakniga.com/18659-ne-drakonte-korolja-kniga-2.html">
<div class="ftop-item__img img-fit-cover">
<img src="/uploads/posts/2024-11/poster_ne-drakonte-korolja-kniga-2-1.webp" loading="lazy" alt="Не драконьте короля! Книга 2">
<div class="has-overlay__icon anim"></div>
</div>
<div class="ftop-item__desc flex-grow-1">
<div class="ftop-item__title poster__title line-clamp">Не драконьте короля! Книга 2</div>
<div class="ftop-item__meta poster__subtitle line-clamp">Наталья Мамлеева</div>
</div>
</a><a class="ftop-item d-flex ai-center has-overlay" href="https://novakniga.com/9869-odri-gercoginja-jork.html">
<div class="ftop-item__img img-fit-cover">
<img src="/uploads/posts/2024-09/poster_odri-gercoginja-jork-1.webp" loading="lazy" alt="Одри, герцогиня Йорк">
<div class="has-overlay__icon anim"></div>
</div>
<div class="ftop-item__desc flex-grow-1">
<div class="ftop-item__title poster__title line-clamp">Одри, герцогиня Йорк</div>
<div class="ftop-item__meta poster__subtitle line-clamp">Айлин Лин</div>
</div>
</a><a class="ftop-item d-flex ai-center has-overlay" href="https://novakniga.com/18650-antidemon-kniga-17.html">
<div class="ftop-item__img img-fit-cover">
<img src="/uploads/posts/2024-11/poster_antidemon-kniga-17-1.webp" loading="lazy" alt="Антидемон. Книга 17">
<div class="has-overlay__icon anim"></div>
</div>
<div class="ftop-item__desc flex-grow-1">
<div class="ftop-item__title poster__title line-clamp">Антидемон. Книга 17</div>
<div class="ftop-item__meta poster__subtitle line-clamp">Серж Винтеркей</div>
</div>
</a><a class="ftop-item d-flex ai-center has-overlay" href="https://novakniga.com/2702-pogranichnik-trilogija.html">
<div class="ftop-item__img img-fit-cover">
<img src="/uploads/posts/2024-08/poster_pogranichnik-trilogija-1.webp" loading="lazy" alt="Пограничник. Трилогия">
<div class="has-overlay__icon anim"></div>
</div>
<div class="ftop-item__desc flex-grow-1">
<div class="ftop-item__title poster__title line-clamp">Пограничник. Трилогия</div>
<div class="ftop-item__meta poster__subtitle line-clamp">Владимир Олегович Козлов</div>
</div>
</a>
</div>
</div>
<div class="sb sb--mt">
<div class="sb__title">Комментируют</div>
<div class="sb__content sb__grid">
<div class="lcomm js-comm">
<div class="lcomm__meta d-flex ai-center">
<div class="lcomm__av img-fit-cover js-comm-avatar"><img src="/templates/Novakniga/dleimages/noavatar.png" loading="lazy" alt="Виктор Николаев_52"></div>
<div class="lcomm__author flex-grow-1 ws-nowrap js-comm-author">Виктор Николаев_52</div>
<div class="lcomm__date">23.11.24</div>
</div>
<div class="lcomm__text line-clamp">Книга "Клан Волка. Том 2. Академия" захватывает с первых страниц и не отпускает</div>
<a class="lcomm__link ws-nowrap icon-at-left" href="https://novakniga.com/12100-klan-volka-tom-2-akademija.html#comment"><span class="fal fa-arrow-circle-right"></span>Клан Волка. Том 2. Академия</a>
</div><div class="lcomm js-comm">
<div class="lcomm__meta d-flex ai-center">
<div class="lcomm__av img-fit-cover js-comm-avatar"><img src="/templates/Novakniga/dleimages/noavatar.png" loading="lazy" alt="Ольга Кузнецова_40"></div>
<div class="lcomm__author flex-grow-1 ws-nowrap js-comm-author">Ольга Кузнецова_40</div>
<div class="lcomm__date">23.11.24</div>
</div>
<div class="lcomm__text line-clamp">Эта книга захватывает с первых страниц и не отпускает до последней.</div>
<a class="lcomm__link ws-nowrap icon-at-left" href="https://novakniga.com/12099-podpolnyj-alhimik.html#comment"><span class="fal fa-arrow-circle-right"></span>Подпольный Алхимик</a>
</div><div class="lcomm js-comm">
<div class="lcomm__meta d-flex ai-center">
<div class="lcomm__av img-fit-cover js-comm-avatar"><img src="/templates/Novakniga/dleimages/noavatar.png" loading="lazy" alt="Иван Иванов_34"></div>
<div class="lcomm__author flex-grow-1 ws-nowrap js-comm-author">Иван Иванов_34</div>
<div class="lcomm__date">23.11.24</div>
</div>
<div class="lcomm__text line-clamp">"Вольные стрелки" - захватывающий роман о приключениях группы смельчаков,</div>
<a class="lcomm__link ws-nowrap icon-at-left" href="https://novakniga.com/12094-volnye-strelki.html#comment"><span class="fal fa-arrow-circle-right"></span>Вольные стрелки</a>
</div>
</div>
</div>
</aside>
<!-- END COLS RIGHT -->
</div>
<!-- END COLS -->
</div>
<!-- END CONTENT -->
<footer class="footer">
<div class="footer__top d-flex ai-center">
<ul class="footer__menu d-flex flex-grow-1">
<li class=""><a href="">Файлы cookie</a></li>
<li class=""><a href="">Пользовательское соглашение</a></li>
<li class="footer__menu--fw600"><a href="/pravoobladateljam.html">Правообладателям (DMCA)</a></li>
</ul>
<div class="footer__copyright">© 2024 NovaKniga.com</div>
</div>
<div class="footer__bottom d-flex ai-center">
<div class="footer__text flex-grow-1">
Электронная библиотека в которой можно читать онлайн книги бесплатно. Книги на сайте опубликовано легально.
<br>
<br>
<label class="label label-adult-only">18+</label>
Сайт может содержать материалы, не предназначенные для просмотра лицами, не достигшими 18 лет!
</div>
<ul class="footer__soc d-flex">
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(97866685, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/97866685" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<!--LiveInternet counter--><a href="https://www.liveinternet.ru/click"
target="_blank"><img id="licntC3A5" width="0" height="0" style="border:0"
title="LiveInternet"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7"
alt=""/></a><script>(function(d,s){d.getElementById("licntC3A5").src=
"https://counter.yadro.ru/hit?t40.10;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-->
</ul>
</div>
</footer>
<!-- END FOOTER -->
</div>
<!-- END WRAPPER-MAIN -->
</div>
<!-- END WRAPPER -->
<div class="login login--not-logged d-none">
<div class="login__header d-flex jc-space-between ai-center">
<div class="login__title stretch-free-width ws-nowrap">Войти <a href="/?do=register">Регистрация</a></div>
<div class="login__close"><span class="fal fa-times"></span></div>
</div>
<form method="post">
<div class="login__content">
<div class="login__row">
<div class="login__caption">Логин:</div>
<div class="login__input"><input type="text" name="login_name" id="login_name" placeholder="Ваш логин"/></div>
<span class="fal fa-user"></span>
</div>
<div class="login__row">
<div class="login__caption">Пароль: <a href="https://novakniga.com/index.php?do=lostpassword">Забыли пароль?</a></div>
<div class="login__input"><input type="password" name="login_password" id="login_password" placeholder="Ваш пароль" /></div>
<span class="fal fa-lock"></span>
</div>
<label class="login__row checkbox" for="login_not_save">
<input type="checkbox" name="login_not_save" id="login_not_save" value="1"/>
<span>Не запоминать меня</span>
</label>
<div class="login__row">
<button onclick="submit();" type="submit" title="Вход">Войти на сайт</button>
<input name="login" type="hidden" id="login" value="submit" />
</div>
</div>
<div class="login__social">
<div class="login__social-caption">Или войти через</div>
<div class="login__social-btns">
</div>
</div>
</form>
</div>
<script src="/engine/classes/js/jquery3.js?v=g0qqv"></script>
<script src="/engine/classes/js/jqueryui3.js?v=g0qqv" defer></script>
<script src="/engine/classes/js/dle_js.js?v=g0qqv" defer></script>
<script src="/templates/Novakniga/js/libs.js"></script>
<script src="/templates/Novakniga/js/libs2.js"></script>
<script src="/templates/Novakniga/lazydev/dle_search/assets/dle_search.js"></script>
<script>
<!--
var dle_root = '/';
var dle_admin = '';
var dle_login_hash = '4f21f44ef9b25c2426ed9ac3bc81062d025fdad7';
var dle_group = 5;
var dle_skin = 'Novakniga';
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/Novakniga/lazydev/dle_search/assets/dle_search.js" defer></script>
</body>
</html>
<!-- DataLife Engine Copyright SoftNews Media Group (https://dle-news.ru) -->