Теги html: таблица с описанием и примерами
Сегодня на конструкторах или движках можно создавать отличные сайты. Однако знание языка HTML остается важным навыком вебмастера, так как всегда возникает необходимость редактирования и исправлений верстки шаблона. Основные HTML-теги с описанием и примерами представлены в нашей статье.
HTML-теги с описанием и примерами
Браузер интерпретирует теги HTML и отображает элементы в том виде, какой предусмотрели разработчики. Почти все данные элементы являются парными и обрамляют ту часть контента, где применяются. Ниже мы собрали все известные теги, и для удобства разделили их по категориям.
Базовые
| Описание | Пример использования |
| | Позволяет добавить комментарии в документ для улучшения читабельности кода. Поддерживается всеми современными браузерами. | Вот как нужно выделять шапку сайта вместе с логотипом: . Или футер: . |
| | Техническая системная информация о документе. Элемент представляет собой контейнер, в который помещаются метаданные документа. Содержимое блока видят только поисковые роботы, но для пользователей оно остается невидимыми. На страницах с большим количеством информации, бывает довольно объемным и занимает место от до . | Например, вот как будет выглядеть простой для небольшой страницы: . |
| | Тег метаданных, который браузеры используют для обработки страницы, а поисковые боты — для индексации. | Пример синтаксиса: . Означает кодировку документа — стандарт кодирования символов, позволяющий компактно хранить и передавать символы Юникода. |
| | Контейнер обрамляет видимую пользователями часть документа. Другими словами, все что указывается внутри данного блока, отобразится на странице. Это текст, изображения, таблицы, формы, списки и т. д. Тег идет после . | Пример использования: цвет текста . |
| | Определяет заголовок документа. Размещается внутри контейнера . На странице используется всего 1 раз. Пользователи по . |
| | Определяет параграф или текстовый абзац. Относится к блочным элементам. | Синтаксис: Абзац . |
| | Устанавливает перевод строки в том месте, где находится тег. В отличие от не добавляет пустой отступ перед строкой. | Если написать текст
текст, то эта конструкция будет отображаться так: тексттекст |
| | Рисует горизонтальную линию и разделяет контент на странице. |
| | Выделяет текст, который обрамляет, полужирным шрифтом. |
, , и т. д | Определяет заголовки HTML от первого до шестого уровня. Относится к блочным элементам, всегда начинается с новой строки. |
Синтаксис: Заголовок первого уровня . |
Базовые tag включают элементы, которые структурируют документ, выводят заголовки, показывают браузерам кодировку, выделяют текст, устанавливают пробелы и линии. По сути, простая страница может состоять только из: ,
,
, <body>.</p> <h3 id="formatirovanie">Форматирование</h3> <table> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>acronym<strong>></strong></td> <td>Определяет акроним (США, замполит, СПИД), поддерживается только HTML 4. По умолчанию подчеркивается пунктиром.</td> </tr> <tr> <td><strong>abbr<strong>></strong></td> <td>Показывает аббревиатуру или акроним. К тексту автоматически добавляется всплывающая подсказка, в которой можно дать расшифровку аббревиатуры.</td> </tr> <tr> <td><strong>address<strong>></strong></td> <td>Отображает контактную информацию об авторе, может включать в себя другие элементы HTML — ссылки, выделения и т. д.</td> </tr> <tr> <td><strong>bdi<strong>></strong></td> <td>Изолирует фрагмент текста, что требуется при объяснении слов на иврите или других терминов.</td> </tr> <tr> <td><strong>bdo<strong>></strong></td> <td>Изменяет направление текста справа налево, что присуще арабскому языку.</td> <td><strong>bdo<strong>></strong>Снова идет снег<strong></</strong>bdo<strong>> будет отображаться вот так –</strong> генс теди авонС</td> </tr> <tr> <td> <td>С помощью данного tag можно отображать графику прогресса завершенности какой-то задачи.</td> <td>Например, выводите под надписью «Подождите, идет загрузка» — горизонтальный столбик, в которой часть выкрашена цветом.</td> </tr> <tr> <td><strong>big<strong>></strong></td> <td>Увеличивает размер шрифта на 1 единицу по сравнению с используемым шрифтом. Допускается применение нескольких тегов .</td> <td><strong>big<strong>></strong>Все<strong></</strong>big<strong>></strong> в нашей жизни имеет свое начало и конец, даже неизлечимая болезнь или сумасшедшая <strong>big<strong>></strong>любовь<strong></</strong>big<strong>></strong></td> </tr> <tr> <td><strong>blockquote<strong>></strong></td> <td>Выделяет длинные цитаты внутри документа. Отображается как выровненный блок с отступами по краям.</td> <td><strong>blockquote<strong>>Какая-то цитата, которую хотим выделить</</strong>blockquote<strong>></strong></td> </tr> <tr> <td><strong>q<strong>></strong></td> <td>Выделяет короткие цитаты в пределах одного предложения.</td> </tr> <tr> <td><strong>center<strong>></strong></td> <td>Выравнивание содержимого блока по центру.</td> <td>Например, когда вставляете видео или изображение так, чтобы оно встало посередине между абзацами.</td> </tr> <tr> <td><strong>cite<strong>></strong></td> <td>Выделяет источник статьи.</td> </tr> <tr> <td><strong>del<strong>></strong></td> <td>Выделяет текст, который был удален. Используется для обозначения изменений в документе. Конкретный фрагмент текста вычеркивается.</td> <td>Мой любимый цвет <strong>del<strong>></strong><s>синий</s><strong></</strong>del<strong>></strong> красный</td> </tr> <tr> <td><strong>mark<strong>></strong></td> <td>Новый элемент в HTML5, помечает фрагменты текста фоновым цветом.</td> <td>Что такое хорошо и что такое плохо.</td> </tr> <tr> <td><strong>meter<strong>></strong></td> <td>С помощью этого тега выводятся цифровые значения в виде разноцветной шкалы. Используется вместе с атрибутами value, min, max, low и другими.</td> <td>Например, можно показать изменение температуры воды в виде нескольких шкал.</td> </tr> <tr> <td><strong>font<strong>></strong></td> <td>Контейнер для изменения характеристик шрифта, размеров, цвета, гарнитуры. Ввиду широкого использования стилей, данный tag уже не так популярен, хотя и поддерживается всеми браузерами.</td> <td>Например, с помощью данного тега можно выделить другим цветом всего одну букву в слове или выделить курсивом только одно слово в предложении.</td> </tr> <tr> <td><strong>rt<strong>></strong></td> <td>Добавляет аннотацию сверху или снизу текста в уменьшенном шрифте.</td> <td>Например, вот так можно выделить календарную дату в тексте:</td> </tr> <tr> <td><strong>samp<strong>></strong></td> <td>Отображает текст в виде скрипта или компьютерной программы.</td> </tr> <tr> <td><strong>dfn<strong>></strong></td> <td>Выделяет курсивом слово в предложении — обычно незнакомый термин или что пожелаете.</td> </tr> <tr> <td><strong>kbd<strong>></strong></td> <td>Обозначает текст моноширным шрифтом, что подходит для наименования компьютерных терминов, клавиш, сочетаний на клавиатуре и т. д.</td> </tr> <tr> <td><strong>pre<strong>></strong></td> <td>Позволяет отобразить блок с предварительно форматированным текстом. Выводится в формате моноширинного шрифта с пробелами между словами.</td> </tr> <tr> <td><strong>small<strong>></strong></td> <td>Уменьшает размер шрифта на единицу по сравнению с используемым шрифтом.</td> </tr> <tr> <td><strong>sub<strong>></strong></td> <td>Отображает нижний регистр.</td> </tr> <tr> <td><strong>sup<strong>></strong></td> <td>Отображает верхний регистр.</td> </tr> <tr> <td><strong>u<strong>></strong></td> <td>Подчеркивает какое-то слово.</td> <td>Например, с помощью <strong>u<strong>></strong> можно отобразить меню.</td> </tr> <tr> <td><strong>time<strong>></strong></td> <td>Текст внутри этого тега будет отображен в виде даты и времени. Используется вместе с атрибутами datetime, pubdate.</td> </tr> <tr> <td><strong>var<strong>></strong></td> <td>Выделяет математические формулы и переменные.</td> </tr> <tr> <td><strong>wbr<strong>></strong></td> <td>Используется для очень длинных слов. С помощью этого tag можно указать браузерам, в каких местах слово нужно переносить на новую строку.</td> </tr> <tr> <td>Устанавливает жирный шрифт. Можно использовать вкупе с другими тегами, обозначающими начертание текста.</td> <td><b><strong>Изображения</strong></b> особенно важны при верстке <b><strong>макета</strong></b>.</td> </tr> </table> <p> Без использования тегов форматирования контент на странице будет похож на «простыню». Пользователям сложно читать такой документ, так как в нем не расставлены акценты. Поисковики отдают предпочтение удобным текстам, поэтому элементы форматирования также важны, как и базовые tag HTML.</p> <h3 id="dlya-vstavki-form">Для вставки форм</h3> <table> <tbody> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>form<strong>></strong></td> <td>Устанавливает форму на странице. Например, опрос.</td> </tr> <tr> <td><strong>input<strong>></strong></td> <td>Позволяет сделать более стильную форму, с добавлением окошек вверху и внизу, кнопок.</td> </tr> <tr> <td><strong>textarea<strong>></strong></td> <td>Отображает форму для отзыва, комментария.</td> </tr> <tr> <td><strong>button<strong>></strong></td> <td>Устанавливаете кнопку с текстом или рисунком.</td> </tr> <tr> <td><strong>select<strong>></strong></td> <td>Отображает форму в виде списка и кнопки.</td> </tr> <tr> <td><strong>optgroup<strong>></strong></td> <td>Тот же список, но с раскрывающимся подменю.</td> </tr> <tr> <td><strong>label<strong>></strong></td> <td>Добавляет форму с возможностью ставить галочки и выбирать конкретное слово (значение).</td> </tr> <tr> <td><strong>fieldset<strong>></strong></td> <td>Позволяет сгруппировать элементы формы и облегчить работу с длинными предложениями в списке.</td> </tr> <tr> <td><strong>datalist<strong>></strong></td> <td>Добавляет форму выбора с раскрывающимся списком.</td> </tr> <tr> <td><strong>output<strong>></strong></td> <td>Отображает форму с математическими данными. К примеру, можно добавить форму с конвертацией длины в дюймы, одной валюты в другую и т. д.</td> </tr> </tbody> </table> <p> С помощью данных тегов вы сможете вставлять в текст или корректировать интерактивные опросы, систему комментариев, конвертер и т. д.</p><script data-noptimize="" data-wpfc-render="false">
/* <![CDATA[ */
fpm_start( "true" );
/* ]]> */
</script> <h3 id="dlya-freymov">Для фреймов</h3> <table> <tbody> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>frameset<strong>></strong></td> <td>Определяет структуру фреймов на web-странице. Окно браузера делится на отдельные области, расположенные вплотную друг к другу, куда можно загружать самостоятельную web-page.</td> </tr> <tr> <td><strong>iframe<strong>></strong></td> <td>Отображает плавающий фрейм, позволяет загружать отдельные документы в область заданных размеров.</td> </tr> </tbody> </table> <p> Теги для фреймов можно использовать для оформления оглавлений, неподвижных элементов интерфейса, форм и результатов. На данный момент большинство фреймов устарели и не поддерживаются HTML5.</p> <h3 id="dlya-kartinok">Для картинок</h3> <table> <tbody> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>img<strong>></strong></td> <td>Определяет изображение в формате GIF, JPEG, PNG.</td> </tr> <tr> <td><strong>canvas<strong>></strong></td> <td>Создает область, в которой при помощи JS можно рисовать разные объекты или выводить изображения, анимацию, игры и т. д. Поддерживается не всеми браузерами.</td> </tr> <tr> <td><strong>figcaption<strong>></strong></td> <td>Позволяет отобразить изображения в виде таблицы с отступами между картинками.</td> </tr> <tr> <td><strong>figure<strong>></strong></td> <td>Та же группировка изображений, но через другой стиль.</td> </tr> </tbody> </table> <p> Эти теги позволят грамотнее работать с изображениями.</p> <h3 id="dlya-video-i-audio">Для видео и аудио</h3> <table> <tbody> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>audio<strong>></strong></td> <td>Выводит аудио контент.</td> </tr> <tr> <td><strong>source<strong>></strong></td> <td>Вставляет обобщенный аудио/видео формат.</td> </tr> <tr> <td><strong>track<strong>></strong></td> <td>Отображает текстовую дорожку для медийных элементов.</td> </tr> <tr> <td><strong>video<strong>></strong></td> <td>Определяет видео формат.</td> </tr> </tbody> </table> <p> Теги для видео и аудио — возможность добавлять медиа файлы, настраивать их, приводить в более приемлемый вид на сайте.</p> <h3 id="dlya-ssylok">Для ссылок</h3> <table> <tbody> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>a<strong>></strong></td> <td>Вывод гиперссылки.</td> </tr> <tr> <td><strong>nav<strong>></strong></td> <td>Отображает ссылки для навигации.</td> </tr> </tbody> </table> <p> Эти tag дают возможность работать со ссылками.</p> <h3 id="dlya-spiskov">Для списков</h3> <table> <tbody> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>ul<strong>></strong></td> <td>Выводит маркированный список.</td> </tr> <tr> <td><strong>ol></td> <td>Выводит нумерованный список.</td> </tr> <tr> <td><strong>dir<strong>></strong></td> <td>Создает список с названиями системных папок.</td> </tr> <tr> <td><strong>dl<strong>></strong></td> <td>Отображает список с описаниями.</td> </tr> <tr> <td><strong>menu<strong>></strong></td> <td>Создает список меню.</td> </tr> </tbody> </table> <p> Теги списков структурируют текст на сайте.</p> <h3 id="dlya-tablits">Для таблиц</h3> <table> <tbody> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>table<strong>></strong></td> <td>Выводит простую таблицу.</td> </tr> <tr> <td><strong>caption<strong>></strong></td> <td>Выводит таблицу с названиями.</td> </tr> <tr> <td><strong>tfoot<strong>></strong></td> <td>Добавляет к таблице нижний колонтитул.</td> </tr> <tr> <td><strong>col<strong>></strong></td> <td>Задает ширину и другие характеристики для одной или нескольких колонок таблицы.</td> </tr> </tbody> </table> <p> Эти теги задают различные настройки для работы с таблицами.</p> <h3 id="dlya-stilizatsii">Для стилизации</h3> <table> <tbody> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>style<strong>></strong></td> <td>Основной tag для выделения стилей элементов страницы.</td> <td>Например, можно вывести с помощью нескольких семейств шрифтов и цвета такой вариант текста.</td> </tr> <tr> <td><strong>header<strong>></strong></td> <td>Задает шапку страницы, где обычно располагается заголовок.</td> </tr> <tr> <td><strong>section<strong>></strong></td> <td>Позволяет разом выводить текст с абзацами и подзаголовками.</td> </tr> <tr> <td><strong>dialog<strong>></strong></td> <td>Создает диалоговые окна в контенте.</td> </tr> <tr> <td><strong>summary<strong>></strong></td> <td>Выводит заголовок с раскрывающимся списком.</td> </tr> </tbody> </table> <p> Улучшают внешний вид различных элементов на сайте, значительно упрощают работу.</p> <h3 id="dlya-skriptov">Для скриптов</h3> <table> <tbody> <tr> <td><strong>Описание</strong></td> <td><strong>Пример использования</strong></td> </tr> <tr> <td><strong>script<strong>></strong></td> <td>Предназначен для описания скриптов. Как правило, содержит ссылку на программу или ее код.</td> <td>К примеру, с помощью данного tag можно задать такую таблицу.</td> </tr> <tr> <td><strong>applet<strong>></strong></td> <td>Дает возможность вставлять небольшие программы, написанные на языке Java.</td> </tr> <tr> <td><strong>embed<strong>></strong></td> <td>Можно задавать интерактивный контент — видео, аудио.</td> </tr> </tbody> </table> <p> С помощью тегов скриптов вы сможете манипулировать с изображениями, формами проверки, динамически изменять содержание и т. д. Чаще всего используется в этом случае JavaScript.</p> <h2 id="zachem-znat-html-tegi">Зачем знать HTML-теги</h2> <ul> <li>запускать Email-рассылки;</li> <li>стильно оформлять УТП и замерять эффективность каждого предложения;</li> <li>упрощать рутинные процессы;</li> <li>проводить внутреннюю поисковую оптимизацию лендинга или сайта, чтобы страницы попадали на верхние строчки выдачи — для этого нужно понимать, как работают скрипты и какой блок за что отвечает;</li> <li>развивать свой блог, вести аналитику и т. д.</li> </ul> <p>Без знаний HTML хотя бы на базовом уровне, все это делать не получится. Этот язык отвечает за семантическую структуру. Именно этот код понимают поисковые роботы: какие слова и фразы особенно важны на странице, по каким запросам нужно показывать пользователям материал и т. д.</p> <p>Самый простой пример, который показывает важность HTML. Вы написали статью с описанием преимуществ товара. При этом не разметили ее по HTML: не указали тайтл, заголовок первого и второго уровня, абзацы. Как вы думаете, сможет ли такая страница бороться за первые места в выдаче. Ответ очевиден: конечно же, нет.</p> <p>Теги — это базовые и важнейшие единицы HTML. Вокруг них строится весь HTML язык. Именно tag указывают поисковикам, какие элементы текста особенно важны, а какие — второстепенны. Короче, с помощью данных элементов вы можете общаться с роботом Гугла или Яндекса. Например, сказать им: смотри, моя статья о том, как зарабатывать на арбитраже трафика, и если люди будут спрашивать, то приводи их ко мне, потому что у меня есть много полезной информации.</p> <p>Для лучшего представления, что такое теги — сравним их с кейсами. В них вы кладете слова. Допустим, в один кейс положили основной заголовок статьи — подписываете, что это h1. В другой — поставили абзац. В третий — заголовок второго уровня и т. д. При этом в одном кейсе могут находиться несколько более мелких отделений. Например, в кейсе абзац могут находиться отделения с такими названиями: текст курсивом, текст полужирным, перенос, сплошная линия и т. д.</p> <p>Все tag заключены в скобки типа <>. Бывают в основном парными (с закрывающимися </>), но встречаются и одиночные типа <br/>. Внутри них вставляется текст, и в совокупности получается элемент HTML, то есть основная структурная единица web-документа.</p> <h2 id="zaklyuchenie">Заключение</h2> <p>Без базовых навыков HTML невозможно представить SEO. Теги — основа этого языка, ведь с их помощью строятся все важные элементы.</p> <p><a href="https://protraffic.com/baza-znaniy/tegi-html-45456.html">Источник</a></p> <div class="fpm_end"></div><div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://business-programming.ru/css-html-global-font/" target="_blank" rel="dofollow" class="ud0d6b3583c920d78bbf65cf10a2c0d9b"><!-- INLINE RELATED POSTS 1/3 //--><style> .ud0d6b3583c920d78bbf65cf10a2c0d9b { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .ud0d6b3583c920d78bbf65cf10a2c0d9b:active, .ud0d6b3583c920d78bbf65cf10a2c0d9b:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .ud0d6b3583c920d78bbf65cf10a2c0d9b { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .ud0d6b3583c920d78bbf65cf10a2c0d9b .ctaText { font-weight:bold; color:#464646; text-decoration:none; font-size: 16px; } .ud0d6b3583c920d78bbf65cf10a2c0d9b .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .ud0d6b3583c920d78bbf65cf10a2c0d9b:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Читайте также:</span> <span class="postTitle">Css html global font</span></div></a></div> </div><!-- .entry-content --> </article> <div class="rating-box"> <div class="rating-box__header">Оцените статью</div> <div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="102165" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div> </div> <div class="entry-social"> <div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image=""></span><span class="social-button social-button--facebook" data-social="facebook"></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span></div> </div> <meta itemprop="author" content="admin"> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://business-programming.ru/moya-testovaya-stranitsa-2/" content="Моя тестовая страница"> <meta itemprop="dateModified" content="2023-08-25"> <meta itemprop="datePublished" content="2023-08-26T21:41:25+03:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="Программирование"><meta itemprop="telephone" content="Программирование"><meta itemprop="address" content="https://business-programming.ru"></div> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div class="sticky-sidebar js-sticky-sidebar"> <div id="block-2" class="widget widget_block"><div class="flatPM_sidebar" data-top="70"> <div id="Q_sidebar"></div> </div></div> </div> </aside><!-- #secondary --> <div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/yaschiki-s-usami-python/">Ящики с усами python</a></div><div class="post-card__description">pandas.plotting.boxplot# Make a box-and-whisker plot</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-74/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">table-layout¶ Свойство table-layout определяет, как</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-73/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">HTML Размеры таблицы HTML таблицы могут иметь разные</div> </div> <div class="post-card post-card--related post-card--thumbnail-no"> <div class="post-card__title"><a href="https://business-programming.ru/primer-ispolzovaniya-svoystva-css-table-layout-72/">Пример использования свойства CSS table-layout.</a></div><div class="post-card__description">table-layout¶ Свойство table-layout определяет, как</div> </div> </div></div> </div><!--.site-content-inner--> </div><!--.site-content--> <div class="site-footer-container "> <div class="footer-navigation fixed" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div class="main-navigation-inner full"> <div class="menu-tehnicheskoe-menyu-container"><ul id="footer_menu" class="menu"><li id="menu-item-12637" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12637"><a href="https://business-programming.ru/pravoobladatelyam/">Правообладателям</a></li> <li id="menu-item-12638" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12638"><a href="https://business-programming.ru/politika-konfidentsialnosti/">Политика конфиденциальности</a></li> <li id="menu-item-12639" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12639"><a href="https://business-programming.ru/kontakty/">Контакты</a></li> </ul></div> </div> </div><!--footer-navigation--> <footer id="colophon" class="site-footer site-footer--style-gray full"> <div class="site-footer-inner fixed"> <div class="footer-bottom"> <div class="footer-info"> © 2024 Программирование </div> <div class="footer-counters"><!-- 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(97921369, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script> <noscript><div><img src="https://mc.yandex.ru/watch/97921369" style="position:absolute; left:-9999px;" alt=""/></div></noscript> <!-- /Yandex.Metrika counter --></div></div> </div> </footer><!--.site-footer--> </div> <button type="button" class="scrolltop js-scrolltop"></button> </div><!-- #page --> <script>var pseudo_links = document.querySelectorAll(".pseudo-clearfy-link");for (var i=0;i<pseudo_links.length;i++ ) { pseudo_links[i].addEventListener("click", function(e){ window.open( e.target.getAttribute("data-uri") ); }); }</script><script type="text/javascript" id="reboot-scripts-js-extra">
/* <![CDATA[ */
var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"};
var wps_ajax = {"url":"https:\/\/business-programming.ru\/wp-admin\/admin-ajax.php","nonce":"01668441f0"};
/* ]]> */
</script> <script type="text/javascript" src="https://business-programming.ru/wp-content/themes/reboot/assets/js/scripts.min.js" id="reboot-scripts-js"></script> <script>window.lazyLoadOptions = [{
elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",
data_src: "lazy-src",
data_srcset: "lazy-srcset",
data_sizes: "lazy-sizes",
class_loading: "lazyloading",
class_loaded: "lazyloaded",
threshold: 300,
callback_loaded: function(element) {
if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) {
if (element.classList.contains("lazyloaded") ) {
if (typeof window.jQuery != "undefined") {
if (jQuery.fn.fitVids) {
jQuery(element).parent().fitVids();
}
}
}
}
}},{
elements_selector: ".rocket-lazyload",
data_src: "lazy-src",
data_srcset: "lazy-srcset",
data_sizes: "lazy-sizes",
class_loading: "lazyloading",
class_loaded: "lazyloaded",
threshold: 300,
}];
window.addEventListener('LazyLoad::Initialized', function (e) {
var lazyLoadInstance = e.detail.instance;
if (window.MutationObserver) {
var observer = new MutationObserver(function(mutations) {
var image_count = 0;
var iframe_count = 0;
var rocketlazy_count = 0;
mutations.forEach(function(mutation) {
for (var i = 0; i < mutation.addedNodes.length; i++) {
if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') {
continue;
}
if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') {
continue;
}
images = mutation.addedNodes[i].getElementsByTagName('img');
is_image = mutation.addedNodes[i].tagName == "IMG";
iframes = mutation.addedNodes[i].getElementsByTagName('iframe');
is_iframe = mutation.addedNodes[i].tagName == "IFRAME";
rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');
image_count += images.length;
iframe_count += iframes.length;
rocketlazy_count += rocket_lazy.length;
if(is_image){
image_count += 1;
}
if(is_iframe){
iframe_count += 1;
}
}
} );
if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){
lazyLoadInstance.update();
}
} );
var b = document.getElementsByTagName("body")[0];
var config = { childList: true, subtree: true };
observer.observe(b, config);
}
}, false);</script><script data-no-minify="1" async src="https://business-programming.ru/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt){var t='<img loading="lazy" src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360">',a='<button class="play" aria-label="play Youtube video"></button>';t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script> </body> </html>