Команды html для сайта: 15 самых популярных HTML-тегов — журнал «Доктайп»
Содержание
15 самых популярных HTML-тегов — журнал «Доктайп»
Чтобы сверстать простой сайт, необязательно знать все HTML-теги. Для начала можно изучить самые популярные — их достаточно для создания примитивной страницы с текстом, ссылками, картинками, подключёнными стилями и скриптами.
Мы будем рассматривать популярность тегов, опираясь на исследование Николая Шабалина — автора профессиональных курсов HTML Academy. Он проанализировал структуру 55 тысяч сайтов и посмотрел, из чего они состоят: какие теги встречаются часто, а какие — редко.
Теги <html>, <head> и <body>
На каждой веб-странице есть три обязательных тега — они формируют структуру документа и содержат информацию для браузеров и поисковых систем.
<html> — контейнер для содержимого страницы.
<head> содержит служебную информацию. Здесь подключаются стили, указывается заголовок страницы, подключаются метатеги.
<body> содержит контент — всё, что отображается в браузере.
Тег <div>
8 270 734 упоминаний.
Тег <div> — самый популярный. Он используется как контейнер для HTML-элементов. В него можно добавить заголовок, абзацы текста, списки, формы или что-то ещё, а потом стилизовать.
<div> <h3>О нас</h3> <p>Мы очень любим котов и веб-разработку.</p> </div>
Тег не имеет семантического значения, то есть не передаёт никакой информации о своём содержании. Он нужен для визуального форматирования и разметки.
Обращу внимание на отрыв
<div>от других тегов. Он потому популярный, что им можно описать бессмысленные сущности, коих больше, чем осмысленных. Также не для всех осмысленных сущностей есть теги. Например,<div>используется для создания сетки. Для сеток нет тегов, только стили: гриды, флексы, флоаты и прочее.Николай Шабалин
Почитать про эти теги и семантическую вёрстку
Некоторые разработчики создают на <div> смысловые блоки, например, шапку, подвал или меню.
Так можно делать, но это плохая практика. Лучше использовать специальные семантические теги: <header>, <nav>, <main>, <section>, <aside> и <article>. Они дают больше информации о содержимом и делают код более читабельным.
Тег <a>
2 918 931 упоминание.
HTML-тег <a> используется для создания ссылок. У тега есть атрибут href — в нём указывается URL-адрес страницы, на которую должен попасть пользователь. Когда адрес неизвестен, в href ставится заглушка:
<a href="https://htmlacademy.ru/">Обычная сылка</a> <a href="#">Ссылка с заглушкой</a>
Что такое ссылки и как их ставить
Если в атрибут добавить протокол mailto:, ссылка откроет почтовый клиент пользователя и создаст электронное письмо. Например, когда пользователь кликнет по ссылке из примера ниже, откроется клиент с автоматически заполненным полем получателя — keks@example.
com.
<a href="mailto:[email protected]">Напишите нам.</a>
Тег <span>
2 047 701 упоминание.
Тег <span> — несемантический, как и <div>. Он используется для стилизации отдельных слов и фраз в блоке текста. Например, вы можете использовать тег, чтобы изменить цвет слова в абзаце, применить другой шрифт или начертание.
<p>В этом параграфе часть слов написана <span>красным</span> цветом.</p>
Тег <ul> и <li>
280 978 и 1 463 187 упоминаний.
<ul> создаёт неупорядоченный список, то есть элементы в нём не пронумерованы, а помечены маркером. Внутри тега с помощью <li> добавляются элементы списка.
<ul> <li>Первый элемент</li> <li>Второй элемент</li> <li>Третий элемент</li> </ul>
Как сделать список без точек
С помощью таких списков разработчики создают навигацию, каталог с карточками товаров, пагинацию, раздел с отзывами и прочее.
То есть блоки, которые содержат несколько однородных и равноправных элементов.
Тег <p>
872 383 упоминаний.
Тег <p> создаёт абзацы — отделяет одну часть текста от другой. Например, все абзацы на этой странице размечены тегом <p>.
<p>Если вы верстаете личный блог, сайт-визитку или целый интернет-магазин, не забудьте правильно разметить текст. Неважно, для каких целей вы создаёте продукт и сколько в нём будет текста — в любом случае абзацы важны.</p> <p>В письменной речи принято в одном абзаце раскрывать одну идею. Но в HTML абзац — не смысловая, а скорее структурная единица. Он лишь явно выделяет параграфы. Притом в тег можно вкладывать не только текст, но и, например, картинки.</p>
Тег <img>
834 669 упоминаний.
Как отличить контентное изображение от декоративного
Тег <img> добавляет графики, иллюстрации и фотографии. Обычно его используют, когда на страницу нужно вставить контентное изображение — то есть которое доносит до пользователей полезную информацию.
Например, показывает продукт или покупателей. Фоны и декоративные элементы чаще добавляют с помощью CSS или тега <svg>.
У <img> есть четыре обязательных атрибута:
alt— альтернативный текст, описывающий изображение. Нужен на случай, если картинка не загрузится.src— адрес, по которому находится изображение.width— ширина изображения.height— высота изображения.
<img src="images/keks.jpg" alt="Рыжий кот Кекс сидит на клавиатуре.">
Тег <br>
801 902 упоминания.
Тег <br> переносит текст на другую строку, не начиная нового абзаца.
<p>Санкт-Петербург, <br> набережная реки Карповки, 5. </p>
Распространённая ошибка разработчиков-новичков — использовать <br> для деления текста на абзацы. Тег не подходит для таких задач — для абзацев есть <p>.
Тег <script>
765 856 упоминаний.
Тег подключает на страницу JavaScript. <script> ставится в конце документа, перед закрывающим тегом </body>. Если сделать наоборот и подключить JS в начале, страница будет отрисовываться медленнее.
У тега есть обязательный атрибут src, в котором указывается путь до файла.
<script src="scripts/script.js"></script>
Тег <link>
542 306 упоминаний.
Тег <link> подключает CSS-файлы. В отличие от <script>, он ставится в начале документа, в теге <head>.
У <link> два обязательных атрибута:
relсо значениемstylesheetозначает, что файл содержит таблицу стилей.hrefуказывает адрес файла.
<link rel="stylesheet" href="styles/style.css">
Тег <meta>
538 580 упоминаний.
Тег содержит метаданные — информацию, которая может влиять на страницу. Атрибут charset указывает кодировку страницы, чтобы браузер правильно отобразил текст. Самая распространённая современная кодировка — utf-8.
<meta charset="utf-8">
С помощью атрибута name="keywords" можно подсказать поисковым системам ключевые слова, по которым пользователи должны находить сайт. Атрибут name="description" указывает описание сайта, которое будет видно, например, в поисковике.
<meta name="keywords" name="фронтенд-разработка, обучение программированию"> <meta name="description" name="Обучаем фронтенд- и бэкенд-разработке">
Все атрибуты тега <meta>.
Тег <i>
390 689 упоминаний.
Тег <i> форматирует текст — делает его курсивным.
<p>Дизайнер решил выделить текст <i>курсивом</i></p>
Часто тег <i> используется для иконок: <i>.
Именно поэтому он так часто встречается в исследовании. Однако такое использование тега — грубая ошибка, потому что он предназначен для работы с текстом
Кстати, есть ещё один тег для выделения курсивом, не такой популярный — <em>. Разработчики используют его, чтобы поставить акцент на слове или фразе.
<p>Тебе <em>не стоило</em> дразнить Кекса. Он <em>обиделся</em></p>
Что ещё надо знать
Как мы говорили в начале статьи, этих тегов хватит для создания простой страницы. Но чтобы верстать хорошо, придётся изучить семантические теги. То есть не создавать всю разметку на <div>, а размечать элементы правильно. Например, для шапки сайта использовать <header>, для подвала — <footer>, для навигации — <nav>, а для крупных смысловых разделов — <section>.
Есть и другие теги — вы найдёте их в спецификации HTML.
Потренировать навыки вёрстки можно на курсе «Старт во фронтенде».
Два первых раздела — бесплатные.
Материалы по теме
- Шаблон простого сайта
- Как ставить пустые ссылки
- Как подключить стили на страницу
- Как правильно написать alt-текст
- Как использовать ссылки mailto: и tel:
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
ТелеграмПодкастБесплатные учебники
HTML теги — справочник с примерами и описанием команд
В этом справочнике мы рассмотрим все основные html теги, которые пригодятся при создании сайтов и веб-документов.
Вы узнаете, что это такое и для чего нужно.
Также на примерах я покажу как это все используется.
Содержание:
- Что это такое
- Виды
- Основные элементы
- Справочник:
- Основной контейнер
- Служебные
- Коды для текста
- Таблицы
- Изображения
- Списки
- Гиперссылки
- Встроенный контент
- Для группировки
- Формы
Что такое html теги
HTML тег — это специальный код (элемент или команда), который указывает браузеру, как интерпретировать документ для пользователя.
Одни теги говорят браузеру, что нужно отобразить абзац. Другие, что нужно отобразить заголовок. Третьи, что нужно сделать таблицу.
С помощью таких команд мы общаемся с браузером и как бы программируем его действия.
Парный html тег с атрибутом
Все теги имеют одинаковый формат. Они начинаются с угловой скобки < и заканчиваются на обратную скобку >.
Между угловыми скобками обязательно должны присутствовать кодовые слова.
Но конечно же, здесь нельзя писать все подряд и выдавать это за теги. Есть определенный набор тегов по спецификации html.
Например, выделение текста жирным:
<b>Жирный текст</b>
Ниже мы еще к этому вернемся.
Стоит сказать, что теги пишутся маленькими латинскими буквами. Хотя нет ничего страшного если вы их напишите большими.
Однако стандарт подразумевает писать их в нижнем регистре.
У тега могут быть атрибуты.
Это дополнительные детали, которые его описывают. Они всегда вставляются в открывающей части.
К примеру, в тег <а> (ссылка на документ) указываем путь к странице, к которой нужно перейти после клика. Записывается она в атрибут href.
<a href="https://site.ru">Текст ссылки</a>
Виды хтмл тегов
Все хтмл теги подразделяются на два вида:
- Одиночные
- Парные
Парные имеют открывающий и закрывающий тег.
Также между этими двумя элементами обязательно должен присутствовать какой-то контент или другие теги. Причем уровень вложенности не ограничен.
К примеру, если вам нужно вставить абзац, то сначала ставим открывающий тег <p>. Это будет начало абзаца.
Далее вставляем нужный текст (контент). После этого мы должны сообщить браузеру, где наш абзац заканчивается. Для этого вставляем закрывающий тег </p>.
<p>Пример небольшого текстового абзаца</p>
Обратите внимание!
К закрывающему элементу всегда добавляется слеш. Благодаря ему браузер понимает, где заканчивается команда.
В данном примере конец абзаца.
Если же нам нужно выделить определенный участок текста жирным, то здесь тоже делаем по аналогии.
Сначала из справочника (будет ниже) подбираем нужный тег, который выделяет текст жирным.
Далее вставляем открывающий тег в том месте, где начнется выделение. А закрывающий там, где оно заканчивается.
<p><b>Пример</b> небольшого текстового абзаца</p>
Наглядный пример выделения
Есть определенные правила вложенности тегов. Более подробно на эту тему вы найдете в статье про структуру html документа.
Одиночные состоят из одного тега. Например, <hr>. Представляют собой самостоятельные сущности, которым не нужен внутренний контент.
<br> <!-- перенос строки --> <hr> <!-- разделитель --> <input type="text"> <!-- поле ввода --> <img src="logo.png"> <!-- вывод изображения -->
Основные html теги
Сейчас затронем основные html теги, которые имеют важную роль среди остальных элементов.
Такие команды обязательно должны присутствовать на каждой странице.
Вот они:
- doctype
- html
- head
- body
Doctype предназначен для определения типа документа. То есть по нему браузер понимает, что это html-документ, а не что-либо еще.
Тег HTML — это контейнер, который имеет основное содержимое страницы. Контейнером называется потому что у него есть парный тег (открывающий и закрывающий).
Абсолютно все элементы (кроме doctype) должны быть вложены в этот контейнер.
Head содержит в себе служебные теги. Они предназначены для работы поисковых систем и браузеров.
Обычно эта информация не видна пользователю.
Body — это основное тело страницы. Она содержит рабочие элементы, которые видны пользователям. Как правило, это информационный контент.
Вот так выглядит скелет любой html-страницы:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>Справочник HTML
Здесь расположен справочник html тегов.
Словарь содержит все основные команды, которые можно использовать для создания сайта и веб-документа.
Все теги имеют описание. А при переходе по ссылке, можно более подробно узнать о данном элементе. Там вы увидите подробные определения и примеры использования.
Тег HTML
О нем говорили выше. Это главный контейнер, который содержит почти все элементы страницы. Закрывающая его часть всегда должна идти в самом конце документа.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <html></html> | корневой элемент html-документа | block |
Служебные
Служебные теги предназначены для поисковых систем и браузеров.
Браузеры по ним определяют тип документа и его интерпретацию. А поисковым системам важно для четкого сканирования документа и его ранжирования в выдаче.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <!—…—> | комментарий | none |
| <!DOCTYPE> | объявление типа документа | none |
| <head></head> | контейнер для метаданных html-документа | none |
| <title></title> | заголовок / имя html-документа | none |
| <meta> | мета-данные веб-страницы | none |
| <link> | подключает внешние таблицы стилей | none |
| <script></script> | подключает сценарии к странице | none |
| <style></style> | подключает встраиваемые таблицы стилей | none |
| <base> | базовый url-адрес, относительно которого вычисляются относительные адреса | none |
| <noscript></noscript> | секция, не поддерживающая скрипт | block |
HTML теги для текста
Здесь расположены основные html теги для работы с текстом на странице.
Как правило, это различные выделения, подчеркивания, вставка заголовков и так далее.
Такие элементы делают текст наиболее приятным для восприятия. Обязательно используйте такие команды для форматирования текста.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <h2></h2> — <h6></h6> | заголовки шести уровней | block |
| <p></p> | параграфы в тексте | block |
| <br> | перенос текста на новую строку | none |
| <hr> | горизонтальная линия | block |
| <wbr> | возможное место разрыва длинной строки | none |
| <blockquote></blockquote> | большая цитата | block |
| <cite></cite> | источник цитирования | inline |
| <q></q> | краткая цитата | inline |
| <code></code> | фрагмент программного кода | inline |
| <kbd></kbd> | текст, вводимый пользователем с клавиатуры | inline |
| <pre></pre> | выводит текст с пробелами и переносами | block |
| <samp></samp> | результат выполнения сценария | block |
| <var></var> | выделяет переменные из программ | block |
| <del></del> | перечёркивает текст, помечая как удаленный | block |
| <s></s> | перечёркивает неактуальный текст | block |
| <dfn></dfn> | выделяет термин курсивом | block |
| <em></em> | выделяет важные фрагменты текста курсивом | block |
| <i></i> | выделяет текст курсивом без акцента | block |
| <strong></strong> | выделяет полужирным важный текст | block |
| <b></b> | задает полужирное начертание отрывка текста, без дополнительного акцента | block |
| <ins></ins> | подчёркивает изменения в тексте | block |
| <u></u> | выделяет отрывок текста подчёркиванием, без дополнительного акцента | block |
| <mark></mark> | выделяет фрагменты текста желтым фоном | block |
| <small></small> | отображает текст шрифтом меньшего размера | block |
| <sub></sub> | подстрочное написание символов | block |
| <sup></sup> | надстрочное написание символов | block |
| <time></time> | дата / время документа или статьи | block |
| <abbr></abbr> | аббревиатура или акроним | none |
| <address></address> | контактные данные автора документа или статьи | block |
| <bdi></bdi> | изолирует текст, читаемый справа налево | inline |
| <bdo></bdo> | задаёт направление написания текста | inline |
| <ruby></ruby> | контейнер для Восточно-Азиатских символов и их расшифровки | inline |
| <rp></rp> | тег для скобок вокруг символов | none |
| <rt></rt> | расшифровка символов | block |
Теги таблицы HTML
Здесь расположены html теги для создания таблиц.
Такие элементы тоже рекомендую использовать на странице.
Особенно они пригодятся в аналитических материалах. Так пользователи могут быстро сориентироваться в ваших данных.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <table></table> | html-таблица | table |
| <tr></tr> | строка таблицы | table-row |
| <th></th> | заголовок столбца таблицы | table-cell |
| <td></td> | ячейка таблицы | table-cell |
| <thead></thead> | блок заголовков таблицы | table-header-group |
| <tbody></tbody> | тело таблицы | table-row-group |
| <tfoot></tfoot> | нижний колонтитул таблицы | table-footer-group |
| <caption></caption> | подпись к таблице | table-caption |
| <col> | выбирает для форматирования столбцы | table-column |
| <colgroup></colgroup> | контейнер для одного или нескольких <col> | table-column-group |
Картинки
Обязательно используйте тег картинки в html-документе.
Тоже полезно при восприятии и усвоения информации.
Еще полезно и в SEO.
Можно получать трафик с поиска по картинкам. И стоит отметить, что материал без изображений очень плохо ранжируется в поиске.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <img> | html-изображения | inline |
| <map></map> | активные области на карте-изображении | inline |
| <area> | гиперссылка с текстом или активная область внутри карты-изображения | inline |
| <canvas></canvas> | холст-контейнер для динамического отображения изображений | inline-block |
Списки
Теги списка тоже рекомендую использовать. Очень полезно при каком-то перечислении или создании пошаговой инструкции.
Информацию в списке старайтесь давать максимально коротко и понятно. То есть не делать длинных предложений.
| Название | Описание | Значение свойства display |
|---|---|---|
| <ol></ol> | упорядоченный нумерованный список | block |
| <ul></ul> | маркированный список | block |
| <li></li> | элемент списка | list-item |
| <dl></dl> | контейнер для термина и его описания | block |
| <dt></dt> | задаёт термин | block |
| <dd></dd> | расшифровывает термин | block |
Ссылки
Тег ссылки в html всегда один. Будьте осторожны при его использовании.
Всегда проверяйте, куда вы ссылаетесь. То есть, что это за сайт и релевантен ли он данной теме.
Также в атрибуте данного тега внимательно прописывайте адрес перехода.
Если что-то сделаете не так, то вас перебросит на страницу с 404 ошибкой. Это плохо для юзабилити и продвижения сайта в целом.
Также обращайте на количество линков. Ссылайтесь только тогда, когда это необходимо!
Встраиваемый контент
Контент, который можно встроить в основное тело страницы. Также полезно для восприятия информации.
Например, вы сначала написали текстовую инструкцию. После этого в самом конце можно вставить видео с наглядной демонстрацией работы.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <audio></audio> | добавляет аудио-файлы | inline-block |
| <video></video> | добавляет видео-файлы | inline-block |
| <source> | указывает местоположение и тип альтернативных файлов для <audio> и <video> | none |
| <track> | субтитры для элементов <audio> и <video> | none |
| <embed> | встраивает внешний интерактивный контент или плагин | inline-block |
| <object></object> | контейнер для встраивания мультимедиа | inline-block |
| <param> | задаёт параметры для плагинов, встраиваемых с помощью элемента <object> | none |
| <iframe></iframe> | создаёт встроенный фрейм | block |
Группировка контента
Дополнительная группировка контента по различным секциям страницы.
Своего рода семантическая структура страницы. Очень полезно для юзабилити сайта.
Структура страницы
К примеру, постраничная навигация позволяет разбивать длинные страницы архивов на несколько подстраниц.
Это улучшает как удобство пользования, так и скорость загрузки страницы.
| Имя | Описание | Значение свойства display |
|---|---|---|
| <body></body> | тело html-документа | block |
| <div></div> | контейнер для разделов html-документа, группирует блочные элементы | block |
| <span></span> | контейнер для строчных элементов | inline |
| <header></header> | секция для вводной информации сайта или группы навигационных ссылок | block |
| <footer></footer> | секция для нижнего колонтитула документа или раздела | block |
| <section></section> | логическая область (раздел) страницы, обычно с заголовком | block |
| <article></article> | раздел контента, образующий независимую часть документа или сайта | block |
| <aside></aside> | контент страницы, имеющий косвенное отношение к основному контенту | block |
| <nav></nav> | раздел документа, содержащий навигационные ссылки по сайту | block |
| <figure></figure> | независимый контейнер для такого контента как изображения, диаграммы и т. п. | block |
| <figcaption></figcaption> | заголовок для элемента <figure> | block |
| <details></details> | контейнер с дополнительными сведениями, который можно открыть или закрыть | block |
| <summary></summary> | видимый заголовок для элемента <details> | block |
| <main></main> | контейнер для уникального основного содержимого в пределах одной страницы сайта | block |
Формы
Они тоже частенько используются на сайтах. Самая главная и обязательная из них, это форма поиска.
Если это многостраничник, то такой элемент должен обязательно присутствовать.
Также сюда можно отнести формы подписки, обратной связи, регистрации и так далее.
| Название | Описание | Значение свойства display |
|---|---|---|
| <form></form> | html-форма | block |
| <input> | многофункциональные поля формы | inline-block |
| <textarea> | многострочное поле формы | inline-block |
| <label></label> | текстовая метка для элемента <input> | inline |
| <datalist></datalist> | контейнер для выпадающего списка элемента <input> с <option>-значениями | none |
| <select></select> | элемент управления с выбором значений из предложенных вариантов <option> | inline-block |
| <optgroup></optgroup> | контейнер с заголовком для группы элементов <option> | block |
| <option></option> | вариант (опция) в раскрывающемся списке | block |
| <fieldset></fieldset> | группирует связанные элементы в форме | block |
| <legend></legend> | заголовок элементов формы, сгруппированных с помощью <fieldset> | block |
| <button></button> | интерактивная кнопка | inline-block |
| <keygen> | генерирует закрытый и открытый ключи | inline-block |
| <progress></progress> | индикатор выполнения задачи | inline-block |
| <meter></meter> | индикатор измерения в заданном диапазоне | inline-block |
| <output></output> | поле для вывода результата вычисления | inline |
На этом все!
Мы рассмотрели html теги и их значение.
Используйте данную справку, как шпаргалку при создании сайтов.
Однако желательно, чтобы вы наизусть знали хотя бы основные команды. Если с кодом будете часто работать, то с этим проблем не будет. Запомнить можно быстро.
25 основных команд для начала работы с HTML 🚀
Рошан Шарма
Рошан Шарма
Бывший стажер @Flipkart 🚀| Бывший ученик @Google Cloud 🌤️ | Облачный разработчик 🥑 | Автор технического контента @Hashnode ✍️ | Хактоберфест ’21🔐 | CSE Второкурсник @RGIPT | IIT-JEE Продвинутый ’21
Опубликовано 23 февраля 2023 г.
+ Подписаться
HTML (язык гипертекстовой разметки) — один из самых популярных языков программирования, используемых веб-разработчиками и дизайнерами .
Он широко используется для проектирования и определения структуры веб-страниц, обеспечения стабильности, использования CSS, javascript и других фреймворков для веб-разработки.
Если вы новичок в веб-разработке, необходимо освоить несколько основных команд для начала работы с дизайном веб-сайта . В этой статье мы обсудим некоторые из наиболее часто используемых команд , которые вы должны освоить, чтобы эффективно использовать Ubuntu Linux.
Основные команды HTML:
- : начало и конец документа HTML.
- : информация заголовка документа.
-
</strong> : указывает заголовок страницы.</li><li> <strong><body> </strong> : содержит основное содержимое.</li><li> <strong><br /><h2></h2><p></strong> по <strong></p><h6></h6><p></strong> : определить заголовки разных размеров.</li><li> <strong><p> </strong> : Этот тег определяет абзац текста.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/sun9-18.userapi.com/c855432/v855432302/cd507/mnfN3QR16cY.jpg' /><noscript><img loading='lazy' src='/800/600/https/sun9-18.userapi.com/c855432/v855432302/cd507/mnfN3QR16cY.jpg' /></noscript></li><li> <strong> <a> </strong> : создает гиперссылку.</li><li> <strong> <img> </strong> : вставляет изображение на страницу.</li><li> <strong><ul> </strong> : создать неупорядоченный список.</li><li> <strong><ol> </strong> : создать упорядоченный список.</li></ol><p> В дополнение к основным командам, упомянутым выше, есть также некоторые расширенные команды, которые могут быть полезны опытным веб-разработчикам. Эти команды обеспечивают больший контроль над различными аспектами веб-сайта и позволяют выполнять сложные задачи.</p><h4></h4><p><strong> Расширенные HTML-команды: </strong></h4><ol><li> <strong> <iframe> </strong> : вставьте другой HTML-документ на свою веб-страницу.</li><li> <strong> <аудио> </strong> и <strong> <видео> </strong> : встраивайте аудио- и видеоконтент на свою веб-страницу.</li><li> <strong><canvas> </strong> : создать элемент холста, который можно использовать для рисования графики и анимации.</li><li> <strong> <svg> </strong> : создание масштабируемой векторной графики, которой можно управлять с помощью CSS и JavaScript.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/toto-school.ru/800/600/https/ds04.infourok.ru/uploads/ex/106a/000d9171-fa24732a/img4.jpg' /><noscript><img loading='lazy' src='/800/600/https/toto-school.ru/800/600/https/ds04.infourok.ru/uploads/ex/106a/000d9171-fa24732a/img4.jpg' /></noscript></li><li> <strong> <datalist> </strong> : предоставить список опций для поля ввода.</li><li> <strong> <метр> </strong> и <strong> <прогресс> </strong> : отображать счетчик или индикатор выполнения на вашей веб-странице.</li><li> <strong> <детали> </strong> и <strong><br /> <summary> </strong> : создайте расширяемый раздел на вашей веб-странице.</li><li> <strong><br /><figure> </strong> и <strong><figcaption> </strong> : связать подпись с изображением или другим медиа.</li><li> <strong> <диалог> </strong> : создать модальное диалоговое окно, которое можно использовать для отображения сообщений.</li><li> <strong> <template> </strong> : определить блок HTML, который можно клонировать и вставлять на веб-страницу.</li></ol><p> <strong> Если вы нашли этот пост в блоге полезным, хлопните в ладоши и следите за более техническим содержанием по веб-разработке. </strong></p><h4><span class="ez-toc-section" id="%D0%9E%D0%B1%D0%BB%D0%B0%D1%87%D0%BD%D1%8B%D0%B5_%D0%B2%D1%8B%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F"></span><p> Облачные вычисления</p> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="4953_%D0%BF%D0%BE%D0%B4%D0%BF%D0%B8%D1%81%D1%87%D0%B8%D0%BA%D0%B0"></span><p> 4953 подписчика</p> <span class="ez-toc-section-end"></span></h5><p> + Подписаться</p><ul><li><p><h4><span class="ez-toc-section" id="%D0%A0%D0%B0%D0%B7%D0%B2%D0%B5%D1%82%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%BE%D0%B2_%D1%81_GitHub_%D0%B8_%D0%BA%D0%BB%D0%BE%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B0_%D0%BB%D0%BE%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80_%F0%9F%98%BC"></span> Разветвление проектов с GitHub и клонирование на локальный компьютер 😼<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="11_%D0%BC%D0%B0%D1%8F_2023_%D0%B3"></span><p> 11 мая 2023 г.<span class="ez-toc-section-end"></span></h5><p><img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/uspei.com/wp-content/uploads/2017/11/tegi.jpg' /><noscript><img loading='lazy' src='/800/600/https/uspei.com/wp-content/uploads/2017/11/tegi.jpg' /></noscript></p></h5></li><li><p><h4><span class="ez-toc-section" id="%D0%94%D0%BE%D1%80%D0%BE%D0%B6%D0%BD%D0%B0%D1%8F_%D0%BA%D0%B0%D1%80%D1%82%D0%B0_%D0%B4%D0%BB%D1%8F_%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8F_%D1%81%D0%B5%D1%80%D1%82%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%B0_Crack_Associate_Cloud_Engineer_Certification_GCP_%F0%9F%9A%80"></span> Дорожная карта для получения сертификата Crack Associate Cloud Engineer Certification (GCP) 🚀<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="5_%D0%BC%D0%B0%D1%80%D1%82%D0%B0_2023_%D0%B3"></span><p> 5 марта 2023 г.</p> <span class="ez-toc-section-end"></span></h5></li><li><p><h4><span class="ez-toc-section" id="Ultimate_Cheatsheet_%D0%B4%D0%BB%D1%8F_%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D0%B0_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B_%D1%81_Java_%F0%9F%8D%B5"></span> Ultimate Cheatsheet для начала работы с Java 🍵<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="3_%D0%BC%D0%B0%D1%80%D1%82%D0%B0_2023_%D0%B3"></span><p> 3 марта 2023 г.</p> <span class="ez-toc-section-end"></span></h5></li><li><p><h4><span class="ez-toc-section" id="%D0%9F%D0%BB%D0%B0%D1%82%D1%84%D0%BE%D1%80%D0%BC%D0%B0_%D0%BA%D0%B0%D0%BA_%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B0_PaaS_-_%D0%BE%D0%B1%D0%BB%D0%B0%D1%87%D0%BD%D1%8B%D0%B5_%D0%B2%D1%8B%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F_%F0%9F%8C%A4%EF%B8%8F"></span> Платформа как услуга (PaaS) — облачные вычисления 🌤️<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="27_%D1%84%D0%B5%D0%B2%D1%80%D0%B0%D0%BB%D1%8F_2023_%D0%B3"></span><p> 27 февраля 2023 г.</p> <span class="ez-toc-section-end"></span></h5></li><li><p><h4><span class="ez-toc-section" id="%D0%98%D0%BD%D1%84%D1%80%D0%B0%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%BA%D0%B0%D0%BA_%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B0_IaaS_-_%D0%BE%D0%B1%D0%BB%D0%B0%D1%87%D0%BD%D1%8B%D0%B5_%D0%B2%D1%8B%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F_%F0%9F%8C%A4%EF%B8%8F"></span> Инфраструктура как услуга (IaaS) — облачные вычисления 🌤️<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="26_%D1%84%D0%B5%D0%B2%D1%80%D0%B0%D0%BB%D1%8F_2023_%D0%B3"></span><p> 26 февраля 2023 г.<span class="ez-toc-section-end"></span></h5><p><img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/rusinfo.info/wp-content/uploads/b/8/6/b8660df5260227eebb0d9f2674346388.gif' /><noscript><img loading='lazy' src='/800/600/https/rusinfo.info/wp-content/uploads/b/8/6/b8660df5260227eebb0d9f2674346388.gif' /></noscript></p></h5></li><li><p><h4><span class="ez-toc-section" id="25_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D1%85_%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4_%D0%B4%D0%BB%D1%8F_%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D0%B0_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B_%D1%81_CSS_%D0%BA%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D0%BE%D0%B9_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B5%D0%B9_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9_%F0%9F%A5%91"></span> 25 основных команд для начала работы с CSS (каскадной таблицей стилей) 🥑<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="25_%D1%84%D0%B5%D0%B2%D1%80%D0%B0%D0%BB%D1%8F_2023_%D0%B3"></span><p> 25 февраля 2023 г.</p> <span class="ez-toc-section-end"></span></h5></li><li><p><h4><span class="ez-toc-section" id="AI_%D0%B8_ML_%D0%B2_%D0%BE%D0%B1%D0%BB%D0%B0%D1%87%D0%BD%D1%8B%D1%85_%D0%B2%D1%8B%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F%D1%85_%F0%9F%A4%96"></span> AI и ML в облачных вычислениях 🤖<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="20_%D1%84%D0%B5%D0%B2%D1%80%D0%B0%D0%BB%D1%8F_2023_%D0%B3"></span><p> 20 февраля 2023 г.</p> <span class="ez-toc-section-end"></span></h5></li><li><p><h4><span class="ez-toc-section" id="Google_Cloud_Vertex_AI_%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5%F0%9F%8C%A4%EF%B8%8F"></span> Google Cloud Vertex AI: введение🌤️<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="19_%D1%84%D0%B5%D0%B2%D1%80%D0%B0%D0%BB%D1%8F_2023_%D0%B3"></span><p> 19 февраля 2023 г.</p> <span class="ez-toc-section-end"></span></h5></li><li><p><h4><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D1%82%D1%8C_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82_%D0%BD%D0%B0_%D0%BE%D0%B1%D0%BB%D0%B0%D1%87%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BB%D0%B0%D1%82%D1%84%D0%BE%D1%80%D0%BC%D0%B5_Google_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_Firebase_%F0%9F%8C%A4%EF%B8%8F"></span> Как разместить веб-сайт на облачной платформе Google с помощью Firebase 🌤️<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="19_%D1%84%D0%B5%D0%B2%D1%80%D0%B0%D0%BB%D1%8F_2023_%D0%B3-2"></span><p> 19 февраля 2023 г.<span class="ez-toc-section-end"></span></h5><p><img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/s1.slide-share.ru/s_slide/57f8/1fcfbca6-87f2-4a18-b300-fcd5785ccb9e.jpeg' /><noscript><img loading='lazy' src='/800/600/https/s1.slide-share.ru/s_slide/57f8/1fcfbca6-87f2-4a18-b300-fcd5785ccb9e.jpeg' /></noscript></p></h5></li><li><p><h4><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%83_%D1%81_%D0%BE%D0%B1%D0%BB%D0%B0%D0%BA%D0%BE%D0%BC_%F0%9F%8C%A4%EF%B8%8F"></span> Как начать работу с облаком? 🌤️<br /> <span class="ez-toc-section-end"></span></h4><h5><span class="ez-toc-section" id="17_%D1%84%D0%B5%D0%B2%D1%80%D0%B0%D0%BB%D1%8F_2023_%D0%B3"></span><p> 17 февраля 2023 г.</p> <span class="ez-toc-section-end"></span></h5></li></ul><p> Увидеть все</p><h3><span class="ez-toc-section" id="%D0%94%D1%80%D1%83%D0%B3%D0%B8%D0%B5_%D1%82%D0%B0%D0%BA%D0%B6%D0%B5_%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B5%D0%BB%D0%B8"></span> Другие также смотрели<br /> <span class="ez-toc-section-end"></span></h3><h3><span class="ez-toc-section" id="%D0%98%D1%81%D1%81%D0%BB%D0%B5%D0%B4%D1%83%D0%B9%D1%82%D0%B5_%D1%82%D0%B5%D0%BC%D1%8B"></span> Исследуйте темы<br /> <span class="ez-toc-section-end"></span></h3><h2><span class="ez-toc-section" id="%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D1%82%D0%B5%D0%B3%D0%B8_HTML_-_10_%D0%BB%D1%83%D1%87%D1%88%D0%B8%D1%85_%D1%82%D0%B5%D0%B3%D0%BE%D0%B2"></span> Основные теги HTML — 10 лучших тегов <span class="ez-toc-section-end"></span></h2><p> Здесь, в CodeBrainer, нас часто спрашивают о том, какие теги лучше всего знать, когда вы начинаете изучать HTML. Следовательно, это <strong> мой краткий список основных основных тегов HTML </strong> , которые я часто использую. Кроме того, все теги имеют краткое описание и пример, чтобы вы могли сразу увидеть, что они делают.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/fsd.multiurok.ru/html/2018/11/23/s_5bf85061417a6/img17.jpg' /><noscript><img loading='lazy' src='/800/600/https/fsd.multiurok.ru/html/2018/11/23/s_5bf85061417a6/img17.jpg' /></noscript></p><p> </p><h3><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA%D0%B8%D0%B5_HTML-%D1%82%D0%B5%D0%B3%D0%B8_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D1%8E%D1%82%D1%81%D1%8F_%D1%87%D0%B0%D1%89%D0%B5_%D0%B2%D1%81%D0%B5%D0%B3%D0%BE"></span> Какие HTML-теги используются чаще всего? <span class="ez-toc-section-end"></span></h3><p> Мы проанализировали самые популярные веб-сайты в Интернете, чтобы выяснить, какие теги используются чаще всего. Неудивительно, что <strong> тег ссылки является наиболее часто используемым тегом </strong>. На самом деле он составляет почти 25% всех тегов в сети.</p></p><h3><span class="ez-toc-section" id="%D0%AD%D1%82%D0%BE_%D0%BD%D0%B0%D1%88_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D1%85_%D1%82%D0%B5%D0%B3%D0%BE%D0%B2_HTML"></span> Это наш список основных тегов HTML: <span class="ez-toc-section-end"></span></h3><ul><li> <code> <a> </code> для ссылки</li><li> <code> <b> </code> сделать текст жирным<ul><li> <code> <strong> </code> для полужирного текста с выделением</li></ul></li><li> <code><body> </code> основная часть HTML</li><li> <code> <br /> </code> на перерыв</li><li> <code><div> </code> это раздел или часть документа HTML</li><li> <code><br /><h2></h2><p></code> … для заголовков</li><li> <code> <i> </code> выделить текст курсивом</li><li> <code> <img> </code> для изображений в документе</li><li> <code><ol> </code> — упорядоченный список, <code></p><ul> </code> — ненумерованный список.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/xn--90abhccf7b.xn--p1ai/800/600/http/images.myshared.ru/26/1289085/slide_6.jpg' /><noscript><img loading='lazy' src='/800/600/https/xn--90abhccf7b.xn--p1ai/800/600/http/images.myshared.ru/26/1289085/slide_6.jpg' /></noscript></p><ul><li> <code><li> </code> — элемент списка в маркированном (упорядоченном списке)</li></ul></li><li> <code><p></code> за пункт</li><li> <code> <span> </code> для оформления части текста</li></ul><p> </p><h4></h4><p><A> </A></h4><p> Короче говоря, это тег, который помогает вам <strong> сделать ссылку на веб-страницу </strong> , на вашу страницу, сайт в социальной сети, товар в интернет-магазине,… Основным атрибутом этого HTML-тега является атрибут <strong> href </strong> (гипертекстовая ссылка), где вы размещаете ссылку на веб-сайт, на который хотите сделать ссылку. Другой атрибут равен <strong> цель </strong> , его можно использовать для открытия ссылки в новом окне, чтобы пользователи не теряли фокус на текущей странице.</p><p> <em> <em> <strong> Пример 1: <br /> </strong> </em> </em> <code> <em> <em> Вот как вы можете сделать ссылку на нашу страницу: </em> </em> <a href=" https://www.codebrainer.com">CodeBrainer </a> </code> </p><p> <em> <em> </em> </em></p><p> <em> <em> <br /> <strong> Пример 2: </strong> (ссылка откроется в новом окне) <br /> </em> </em> <code> новое окно: <a href="https ://www.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ab-w.net/htmllessons/images/ta.png' /><noscript><img loading='lazy' src='/800/600/https/ab-w.net/htmllessons/images/ta.png' /></noscript> codebrainer.com” target="_blank">CodeBrainer</a> </code></p><h4></h4><p><B> </B></h4><p> Если у вас много текста, вам нужно выделить некоторые слова, чтобы читатель знал, что важно. И вы делаете это с <strong> полужирными частями текста </strong> .</p><p> <em> <strong> Пример: </strong> <br /> <code> У CodeBrainer есть много <b>хороших</b> курсов. </code> <br /> </em></p><p> </p><h4></h4><p><BODY></BODY></h4><p> Основная часть документа HTML. На самом деле это неотъемлемая часть всех HTML-документов, но это всего лишь тег, который отмечает, что является видимым содержимым страницы, где больше всего содержимого.</p><p> </p><h4></h4><p><BR></h4><p> С помощью этого базового HTML-тега мы сообщаем браузеру, где нам нужны пустые строки или разрывы в тексте. На самом деле, использование нескольких разрывов делает наш текст дышащим, а значит, его легче читать и понимать.</p><p> <em> <em> <em> <em> <strong> Пример </strong> (используйте этот текст в html, и он будет выглядеть иначе): <br /> <code> CodeBrainer научит вас писать HTML.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/mypresentation.ru/documents_6/4a70f40fa554cadd69a76bd5c2834896/img8.jpg' /><noscript><img loading='lazy' src='/800/600/https/mypresentation.ru/documents_6/4a70f40fa554cadd69a76bd5c2834896/img8.jpg' /></noscript></p><p>Если у вас возникнут проблемы с запоминанием тегов HTML, вы должны прочитать наши 10 лучших тегов.<br />И использовать некоторые примеры из них.</p><p>Ваш CodeBrainer </code> <br /> </em> </em> </em> </em></p><p> </p><h4></h4><p><DIV></DIV></h4><p> Элемент, который в основном используется для группировки элементов и в качестве шаблона для новых элементов управления. HTML-тег div — это элемент, который вы будете использовать для отделения значительной части HTML-документа от других частей. Например, предположим, что у вас есть список продуктов на вашей веб-странице, вы будете использовать div для каждого продукта.</p><p> </p><h4></h4><p><HEAD></HEAD></h4><p> Заголовок документа HTML. Более того, это где у вас есть <strong> метаданные </strong> , которые представляют собой данные о стиле документа, о том, какие библиотеки JavaScript используются в документе, заголовке и файлах CSS.</p><p> </p><h4></h4><h2></h2><p> </p><h3></h3><p> …<H6></h6><p></H6></h4><p> Заголовки (уровни 1–6, т.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/fsd.multiurok.ru/html/2018/05/18/s_5afe9399d17b7/img22.jpg' /><noscript><img loading='lazy' src='/800/600/https/fsd.multiurok.ru/html/2018/05/18/s_5afe9399d17b7/img22.jpg' /></noscript> е. h4 — это подзаголовок внутри подзаголовка h3). <strong> Теги h2, h3,… используются для создания заголовков </strong> . Зачем нам нужны заголовки, когда мы можем оформить текст так, чтобы он выглядел как H-теги? Например, заголовки используются для того, чтобы поисковые системы и другие парсеры (боты) понимали важные части наших документов.</p><p> <em> <em> <em> <em> <strong> Пример: </strong> <br /> <code></p><h2><span class="ez-toc-section" id="10_%D0%BB%D1%83%D1%87%D1%88%D0%B8%D1%85_%D1%82%D0%B5%D0%B3%D0%BE%D0%B2_HTML"></span>10 лучших тегов HTML<span class="ez-toc-section-end"></span></h2><p>В этой статье мы поясним наш список 10 лучших тегов HTML.<br />< br></p><h3><span class="ez-toc-section" id="%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B9_%D1%82%D0%B5%D0%B3"></span>Первый тег - <b></b><span class="ez-toc-section-end"></span></h3><p>Жирный шрифт делает слова более важными. </code></p><p> В нашем блоге есть отличная глава о заголовках, посвященная добавлению маркированного списка в документ HTML. <br /> </em> </em> </em> </em></p><p> </p><p> </p><h4></h4><p><I> </I></h4><p> Если у вас много текста, вам нужно выделить некоторые слова, чтобы читатель понял, что важно. Скорее, курсивом вы можете представить текст, который немного наклонен вправо.</p><p> <em> <em> <em> <em> <strong> Пример: </strong> <br /> <code> У <i>CodeBrainer</i> много хороших курсов.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf3.ppt-online.org/files3/slide/0/0oYRVAOmlyKhLq7BDwHbXP8vJgE3zp5rjta1xU/slide-5.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf3.ppt-online.org/files3/slide/0/0oYRVAOmlyKhLq7BDwHbXP8vJgE3zp5rjta1xU/slide-5.jpg' /></noscript> </code></p><p> </em> </em> </em> </em></p><p> </p><h4></h4><p><IMG></h4><p> Мы <strong> используйте тег IMG для отображения изображений. </strong> Учитывая, что изображения могут находиться в файлах на вашей веб-странице или в любом месте в Интернете. Кроме того, самым важным атрибутом является <strong> src </strong> (источник), который сообщает, где находится картинка.</p><p> <em> <em> <em> <em> <strong> Пример </strong> (это покажет яблоко и текст): <br /> <code> Это яблоко <img class="lazy lazy-hidden" decoding="async" src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15 /Red_Apple.jpg/1200px-Red_Apple.jpg” ширина=”100”><noscript><img decoding="async" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15 /Red_Apple.jpg/1200px-Red_Apple.jpg” ширина=”100”></noscript> </code> <br /> </em> </em> </em> </em></p><p> </p><h4></h4><p><LI></LI></h4><p> Элемент списка. Тег, используемый в упорядоченном (<OL>) или неупорядоченном (<UL>) списке. Не говоря уже о том, что вы можете иметь столько, сколько захотите.</p><p> <em> <em> <em> <em> <strong> Пример: </strong> <br /> <code></p><ul><li>Это один элемент списка.</li></ul><p> </code></p><p> </em> </em> </em> 9033 0</p><p> </p><h4></h4><p><OL></OL></h4><p> Заказной список.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/rusinfo.info/wp-content/uploads/d/c/5/dc5cfd6fd6039cefecd7924d437eca39.jpg' /><noscript><img loading='lazy' src='/800/600/https/rusinfo.info/wp-content/uploads/d/c/5/dc5cfd6fd6039cefecd7924d437eca39.jpg' /></noscript> Также включает элементы списка<LI>, которые будут пронумерованы автоматически. Как следствие, это очень полезно, если вы добавляете больше элементов списка, потому что номера всегда будут в правильном порядке.</p><p> <em> <em> <em> <em> <strong> Пример: </strong> <br /> <code><Ol></p><li> Первый пункт</li><li> Второй элемент</li><li> Третий элемент</li></ol><p> </code> <br /> </em> </em> </em> </em></p><p> </p><h4></h4><p><P></P></h4><p> Тег абзаца группирует текст в абзац 😀 (это забавно). Следовательно, его цель состоит в том, чтобы <strong> отделить часть текста или абзац </strong> , таким образом, вы сделаете его более читабельным и организованным.. <em> <em> <em> </em> </em> </em></p><p> <em> <strong> Пример: </strong> <br /> <code></p><p>Это статья о 10 лучших HTML-тегах, это будет ваша шпаргалка в будущем, где-нибудь, где вы сможете взглянуть и просто использовать ее.</ p></p><p>Первый тег, о котором мы поговорим, выделен жирным шрифтом. Он выделяет слова или предложения..</p><p> </code> <br /> </em></p><p> </p><p> </p><h4></h4><p><SPAN> </SPAN></h4><p> Тег span группирует текст, для которого мы <strong> хотим иметь другой стиль </strong> .<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/hozyindachi.ru/wp-content/uploads/2018/07/html-tegi-dlya-sajta.jpg' /><noscript><img loading='lazy' src='/800/600/https/hozyindachi.ru/wp-content/uploads/2018/07/html-tegi-dlya-sajta.jpg' /></noscript> Хорошим примером было бы, если бы мы хотели иметь красное слово внутри предложения.</p><p> <em> <em> <em> <em> <strong> Пример: </strong> <br /> <code> Это <span style="color: red;">предупреждение:</span> вы должны всегда иметь при себе эту шпаргалку :D </code> <br /> </em> </em> </em> </em></p><p> </p><h4></h4><p><STRONG> </STRONG></h4><p> Текст сильно выделен — обычно выделяется жирным шрифтом, в большинстве случаев он также выглядит жирным. Но у этого есть дополнительный смысл, что этот текст должен быть выделен.</p><p> <em> <em> <em> <em> <strong> Пример: </strong> <br /> <code> У CodeBrainer много <strong>хороших</strong> курсов. </code> <br /> </em> </em> </em> </em></p><p> </p><h4></h4><p><UL></UL></h4><p> Неупорядоченный список просто означает, что он будет иметь <strong> маркеров для каждого элемента в списке </strong> . Элементы списка будут иметь маркеры для каждого элемента. <em> <em> <em> </em> </em> </em></p><p> <em> <strong> Пример: </strong> <br /> <code> Животные:<br /> </code> <br /> <code></p><ul> </code> <br /> <code></p><li>Рыба</li><p> </code> <br /> <code></p><li>Медведь</li><p> </code> <br /> <code></p><li>Собака</li><p> </code> <br /> <code></ul><p> 9 0255 </em></p><p> Ознакомьтесь с записью в нашем блоге о том, что такое HTML, чтобы узнать о его происхождении и будущем.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/fsd.multiurok.ru/html/2018/05/18/s_5afe9399d17b7/img21.jpg' /><noscript><img loading='lazy' src='/800/600/https/fsd.multiurok.ru/html/2018/05/18/s_5afe9399d17b7/img21.jpg' /></noscript></p></div><div class="post-navigation row"><div class="post-previous col-md-6"><a href="https://imacrosoft.ru/raznoe/shablony-vizitka-shablony-vizitok-razlichnoj-tematiki-sozdanie-maketa-vizitki-onlajn-v-besplatnom-redaktore-printut.html" rel="prev"><span class="meta-nav">Назад:</span> Шаблоны визитка: Шаблоны визиток различной тематики. Создание макета визитки онлайн в бесплатном редакторе PRINTUT</a></div><div class="post-next col-md-6"><a href="https://imacrosoft.ru/raznoe/sql-coalesce-primer-coalesce-transact-sql-sql-server-2.html" rel="next"><span class="meta-nav">Вперед:</span> Sql coalesce пример: COALESCE (Transact-SQL) — SQL Server</a></div></div></div></article><aside id="sidebar" class="col-md-3 rsrc-right" role="complementary"></aside></div><footer id="colophon" class="rsrc-footer" role="contentinfo"><div class="row rsrc-author-credits"><div class="text-center"> Imacros | Все права защищены © 2021</div></div></footer><div id="back-top"> <a href="#top"> <span></span> </a></div></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://imacrosoft.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- 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://imacrosoft.ru/wp-content/cache/autoptimize/js/autoptimize_e333cc9d38f7203f63ae7f91547f0edb.js"></script></body></html>