Тег HTML — использование, атрибуты, примеры

❮ Пред. Следующий ❯

Тег используется для вставки переменных, фрагментов программного кода и т.п. в документ HTML. В браузере код отображается моноширинным шрифтом (шрифт, в котором все символы имеют одинаковую ширину) меньшего размера.

Тег сам по себе представляет одну строку кода или кодовую фразу. Он должен быть заключен в элемент

 для представления нескольких строк кода. 

Вы можете использовать CSS для достижения лучших эффектов.

Тег идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.

Пример тега HTML

:
 

  <голова>
    Название документа
  
  <тело>
    

Обычный текст.

Строка программного кода.

Продолжение обычного текста.

Попробуй сам "

Результат

Пример тега HTML

, помещенного внутри тега HTML
:
  
 
<голова> Название документа <тело> <пред> <код> тело { цвет: желтый; размер шрифта: 16px; высота строки: 1,5; }

Попробуй сам "

Пример тега HTML

со свойствами CSS:
 

  <голова>
    Название документа
    <стиль>
      . код-стиль {
        размер шрифта: 20px;
        высота строки: 28px;
        цвет фона: голубой;
        цвет: #ffffff;
      }
    
  
  <тело>
    

Обычный текст.

Строка программного кода.

Продолжение обычного текста.

Попробуй сам "

Тег поддерживает глобальные атрибуты и атрибуты событий.

Как оформить тег

?

Общие свойства для изменения визуального веса/выделения/размера текста в теге

:
  • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
  • Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
  • Свойство CSS font-size устанавливает размер шрифта.
  • Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
  • Свойство CSS text-transform управляет регистром текста и регистром символов.
  • Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цветной текст в теге

:
  • Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
  • Свойство CSS background-color устанавливает цвет фона элемента.

Стили макета текста для тега

:
  • Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
  • Свойство CSS text-overflow указывает, как пользователь должен сигнализировать о переполненном содержимом, которое не отображается.
  • Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
  • Свойство CSS word-break указывает, где строки должны быть разорваны.

Другие свойства тега

, на которые стоит обратить внимание:
  • Свойство CSS text-shadow добавляет тень к тексту.
  • Свойство CSS text-align-last устанавливает выравнивание последней строки текста.
  • Свойство CSS line-height определяет высоту строки.
  • Свойство CSS letter-spacing определяет интервалы между буквами/символами в тексте.
  • Свойство CSS word-spacing устанавливает расстояние между словами.

12 принципов чистого HTML-кода — журнал Smashing Magazine

  • 8 мин чтения
  • Кодирование Рабочий процесс, CSS, Принципы, Персонажи, Проверка
  • Поделиться в Twitter, LinkedIn
Об авторе

Крис — веб-дизайнер и разработчик. Он пишет обо всем, что связано с Интернетом, на CSS-Tricks, рассказывает обо всем, что связано с Интернетом, на конференциях по всему миру и в своих… Больше о Крис ↬

Красивый HTML — основа красивого веб-сайта. Когда я учу людей CSS, я всегда начинаю с того, что говорю им, что хороший CSS может существовать только при такой же хорошей HTML-разметке. Дом настолько прочен, насколько крепок его фундамент, верно? Преимущества чистого семантического HTML многочисленны, но многие веб-сайты страдают от плохо написанной разметки.

Красивый и чистый HTML — основа красивого веб-сайта. Когда я учу людей CSS, я всегда начинаю с того, что говорю им, что хороший CSS может существовать только при такой же хорошей HTML-разметке. Дом настолько прочен, насколько крепок его фундамент, верно? Преимущества чистого семантического HTML многочисленны, но многие веб-сайты страдают от плохо написанной разметки.

Давайте посмотрим на плохо написанный HTML, обсудим его проблемы, а затем приведем его в форму! Имейте в виду, что мы не выносим никакого суждения о содержании

или дизайне этой страницы, а только о разметке, которая ее создает. Если вам интересно, взгляните на плохой код и хороший код, прежде чем мы начнем, чтобы вы могли увидеть общую картину. Теперь давайте начнем прямо сверху.

Дополнительная литература на SmashingMag:

  • Почему стиль кодирования имеет значение
  • 7 принципов чистого и оптимизированного кода CSS. Нет необходимости обсуждать, что использовать: HTML 4. 01 или XHTML 1.0: оба они предлагают строгую версию, которая позволит нам быть вежливыми и честными при написании нашего кода.

    Больше после прыжка! Продолжить чтение ниже ↓

    В любом случае наш код не использует никаких таблиц для разметки (хорошо!), поэтому переходный DOCTYPE действительно не нужен.

    Ресурсы:

    • W3C: рекомендуемые DTD для использования в веб-документах
    • Исправьте свой сайт с помощью правильного DOCTYPE!
    • Больше никаких переходных DOCTYPE, пожалуйста

    2. Набор символов и кодировка символов

    В нашем разделе самым первым делом должно быть объявление нашего набора символов. Здесь мы используем кодировку UTF-8, что здорово, но она указана после нашего. Давайте продолжим и переместим его вверх, чтобы браузер знал, с каким набором символов он имеет дело, прежде чем он вообще начнет читать какой-либо контент.</p><p></p><p> Пока мы говорим о персонажах, давайте продолжим и убедимся, что все забавные символы, которые мы используем, правильно закодированы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/blogo-mir.ru/wp-content/uploads/2020/12/slide-10.jpg' /><noscript><img loading='lazy' src='/800/600/https/blogo-mir.ru/wp-content/uploads/2020/12/slide-10.jpg' /></noscript> У нас есть амперсанд в названии. Чтобы избежать возможного неправильного толкования этого, мы преобразуем его в <code> & Вместо </code>.</p><p> <strong> Ресурсы: </strong></p><ul><li> Википедия: UTF-8</li><li> Руководство по вопросам кодирования символов</li><li> Расширенная таблица ASCII</li></ul><h3><span class="ez-toc-section" id="3"> 3. Правильный отступ </span></h3> 9 0002 Хорошо, мы на три строчки и я уже раздражает отсутствие отступов. Отступ не влияет на то, как отображается страница, но оказывает огромное влияние на удобочитаемость кода. Стандартная процедура заключается в отступе на одну табуляцию (или несколько пробелов), когда вы начинаете новый элемент, который является дочерним элементом тега над ним. Затем вернитесь на вкладку, когда вы закрываете этот элемент.</p><p></p><p> Правила отступов далеко не высечены на камне; не стесняйтесь изобретать свою собственную систему. Но я рекомендую быть последовательным в том, что вы выберете. Разметка с красивыми отступами значительно украсит ваш код и сделает его легким для чтения и перехода.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/sun9-56.userapi.com/3ZvNAvU6oTVgK26s_tFqAT5LWc_AYF9BTDDWww/eVHahmReCfA.jpg' /><noscript><img loading='lazy' src='/800/600/https/sun9-56.userapi.com/3ZvNAvU6oTVgK26s_tFqAT5LWc_AYF9BTDDWww/eVHahmReCfA.jpg' /></noscript></h3><p> У нас есть некоторый CSS, который пробрался в наш раздел<head>. Это ужасное нарушение, потому что оно не только загрязняет нашу разметку, но и применимо только к этой единственной HTML-странице. Хранение файлов CSS отдельно означает, что будущие страницы могут ссылаться на них и использовать тот же код, поэтому изменение дизайна на нескольких страницах становится простым.</p><p></p><p> В какой-то момент это могло произойти как «быстрое исправление», что понятно и случается со всеми нами, но давайте переместим это в более подходящее место во внешнем файле. В нашем разделе head нет JavaScript, но то же самое касается и этого.</p><h3><span class="ez-toc-section" id="5"> 5. Правильно размещайте теги </span></h3><p> Название нашего сайта «Мой сайт о кошках» правильно размещено внутри тегов<h2><span class="ez-toc-section" id="i-8">, что вполне логично. И по норме заголовок является ссылкой на главную страницу. Однако якорная ссылка </span></h2><a> оборачивает теги заголовка. Легкая ошибка. Большинство браузеров справятся с этим нормально, но технически это нет-нет.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/www.thoughtco.com/thmb/K-KZ_3lCQXKY0q-qhaAh8fUPVds=/1732x1732/filters:fill(auto,1)/GettyImages-183273455-58634e4f3df78ce2c3f2ae68.jpg' /><noscript><img loading='lazy' src='/800/600/https/www.thoughtco.com/thmb/K-KZ_3lCQXKY0q-qhaAh8fUPVds=/1732x1732/filters:fill(auto,1)/GettyImages-183273455-58634e4f3df78ce2c3f2ae68.jpg' /></noscript> Якорная ссылка — это «встроенный» элемент, а теги заголовков — это «блочные» элементы. Блоки не должны находиться внутри строчных элементов. Это как переходить ручьи в «Охотниках за привидениями». Это просто не очень хорошая идея.</p><p></p><h3><span class="ez-toc-section" id="6_div"> 6. Удалите ненужные элементы div </span></h3><p> Не знаю, кто первым придумал это, но мне нравится термин «дивит», который относится к чрезмерному использованию элементов div в HTML-разметке. Иногда на этапах обучения веб-дизайну люди узнают, как заключать элементы в div, чтобы можно было ориентироваться на них с помощью CSS и применять стили. Это приводит к распространению элементов div и их чрезмерному использованию в ненужных местах.</p><p></p><p> В нашем примере у нас есть div («topNav»), в который помещается неупорядоченный список («bigBarNavigation»). И элементы div, и неупорядоченные списки являются элементами блочного уровня. На самом деле нет необходимости заворачивать<ul> в div; все, что вы можете сделать с этим div, вы можете сделать с<ul>.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/st3.depositphotos.com/1000350/13832/i/450/depositphotos_138324842-stock-photo-html-code-on-laptop-screen.jpg' /><noscript><img loading='lazy' src='/800/600/https/st3.depositphotos.com/1000350/13832/i/450/depositphotos_138324842-stock-photo-html-code-on-laptop-screen.jpg' /></noscript></p><p> <strong> Ресурсы: </strong></p><ul><li> Дивитит: что это такое и как его вылечить.</li></ul><h3><span class="ez-toc-section" id="7"> 7. Используйте лучшие соглашения об именах </span></h3><p> Самое время обсудить соглашения об именах, так как мы только что говорили о ненумерованном списке с идентификатором «bigBarNavigation». Часть «Навигация» имеет смысл, потому что она описывает контент, который содержит список, но «большой» и «Панель» описывают дизайн, а не контент. Это может иметь смысл прямо сейчас, потому что меню представляет собой большую полосу, но если вы измените дизайн веб-сайта (и, скажем, измените навигацию веб-сайта на вертикальный стиль), это имя идентификатора будет запутанным и неуместным.</p><p></p><p> Хорошими именами классов и идентификаторов являются такие вещи, как «mainNav», «subNav», «боковая панель», «нижний колонтитул», «метаданные», которые описывают содержимое, которое они содержат. Плохие имена классов и идентификаторов — это вещи, описывающие дизайн, такие как «bigBoldHeader», «leftSidebar» и «roundedBox».<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/kinsta.com/wp-content/uploads/2018/04/wordpress-html-1.png' /><noscript><img loading='lazy' src='/800/600/https/kinsta.com/wp-content/uploads/2018/04/wordpress-html-1.png' /></noscript></p><h3><span class="ez-toc-section" id="8_CSS"> 8. Оставьте типографику CSS </span></h3><p> Дизайн нашего меню требует, чтобы текст был написан только заглавными буквами. Мы просто копаем, как это выглядит, и больше силы для нас. Мы добились этого, поместив текст заглавными буквами, что, конечно же, работает; но для лучшей расширяемости в будущем мы должны абстрагировать типографские варианты, подобные этому, в CSS. Мы можем легко нацелить этот текст и превратить его в заглавные с помощью {text-transform: uppercase}. Это означает, что в будущем, если внешний вид заглавных букв потеряет свое очарование, мы можем внести одно небольшое изменение в CSS, чтобы изменить его на обычный строчный текст.</p><p></p><h3><span class="ez-toc-section" id="9"> 9. Класс/идентификатор </span></h3><p> Под «классом тела» я буквально подразумеваю применение класса к телу, например<body class="blogLayout">. Почему? Я вижу две вещи, происходящие в этом коде, которые заставляют меня поверить, что эта страница имеет макет, отличный от других страниц на веб-сайте. Во-первых, основной блок контента имеет идентификатор «mainContent-500».<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/samartist.ru/wp-content/uploads/9/5/1/9511260eb69b124ab251264fe7894197.png' /><noscript><img loading='lazy' src='/800/600/https/samartist.ru/wp-content/uploads/9/5/1/9511260eb69b124ab251264fe7894197.png' /></noscript> Похоже, что у кого-то был div «mainContent» в какой-то момент, а затем ему нужно было изменить его размер позже, и для этого был создан новый идентификатор. Я предполагаю, что это было сделано для того, чтобы сделать его больше, потому что далее в коде мы видим, что <class="narrowSidebar"> применяется к боковой панели, и мы можем сделать вывод, что это было добавлено, чтобы уменьшить боковую панель по сравнению с ее нормальным размером.</p><p> Это не очень хорошее долгосрочное решение для альтернативных макетов. Вместо этого мы должны применить имя класса к телу, как было предложено выше. Это позволит нам однозначно ориентироваться на элементы div «mainContent» и «sidebar» без необходимости в причудливых новых именах или добавлениях классов.</p><p></p><p> Уникальные имена классов и идентификаторов для тела очень полезны и имеют гораздо больше применений, чем просто альтернативные макеты. Поскольку каждый бит содержимого страницы находится в теге «body», вы можете однозначно настроить таргетинг на что угодно на любой странице с помощью этого хука; особенно полезно для таких вещей, как навигация и индикация <strong> текущая навигация </strong> , так как вы будете точно знать, на какой странице вы находитесь, с этим уникальным классом тела.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/forjobathome.ru/800/600/https/www.begomotbed.ru/wp-content/uploads/2014/04/ris_2.png' /><noscript><img loading='lazy' src='/800/600/https/forjobathome.ru/800/600/https/www.begomotbed.ru/wp-content/uploads/2014/04/ris_2.png' /></noscript></p><p> <strong> Ресурсы: </strong></p><ul><li> Идентифицируйте свое тело для большего контроля и специфичности CSS</li><li> Практический пример: повторное использование стилей с классом тела</li></ul><h3><span class="ez-toc-section" id="10"> 10. Проверка </span></h3><p> Само собой разумеется, но вы должны запустить свой код через старый валидатор, чтобы выявить небольшие ошибки. Иногда ошибки не влияют на отображение страницы, но некоторые ошибки, безусловно, влияют. Проверенный код обязательно переживет непроверенный код.</p><p></p><p> Хотя бы по какой-то другой причине, видя этот зеленый текст в инструменте проверки W3C, вы чувствуете себя хорошо внутри.</p><p> <strong> Ресурсы: </strong></p><ul><li> Служба проверки разметки W3C</li><li> Валидатор XHTML-CSS</li></ul><h3><span class="ez-toc-section" id="11"> 11. Логическое упорядочение </span></h3><p> Если это вообще возможно, сохранение разделы вашего сайта в логическом порядке лучше всего. Обратите внимание, как нижний колонтитул находится над боковой панелью в нашем коде. Это может быть связано с тем, что для дизайна веб-сайта лучше всего хранить эту информацию сразу после основного контента и вне боковой панели.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/fuzeservers.ru/wp-content/uploads/8/d/f/8df4bb1d3e1f77086489990e6b063d2a.png' /><noscript><img loading='lazy' src='/800/600/https/fuzeservers.ru/wp-content/uploads/8/d/f/8df4bb1d3e1f77086489990e6b063d2a.png' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/html-code-teg-htmlbook-ru.html" data-text="Html code: Тег | htmlbook.ru" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/html-code-teg-htmlbook-ru.html" data-text="Html code: Тег | htmlbook.ru" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/html-code-teg-htmlbook-ru.html" data-text="Html code: Тег | htmlbook.ru" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/html-code-teg-htmlbook-ru.html" data-text="Html code: Тег | htmlbook.ru" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/4proxy-magazin-proksi-dlya-lyubogo-biznesa-samye-nizkie-tseny-i-garantiya-ot-4proxy.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>4Proxy: ★★★ Магазин ПРОКСИ для любого бизнеса★★★ Самые низкие цены и гарантия от 4proxy!</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/dobavit-pikselej-na-foto-onlajn-obrezat-foto-onlajn-img-online.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Добавить пикселей на фото онлайн: Обрезать фото онлайн — IMG online</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/html-code-teg-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='44150' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_f77ae60575d0f6f7fff0fb5d33f5a30f.js"></script></body></html>