Дополнительные HTML-элементы

В ходе предыдущих занятий вы узнали:

  • Основы HTML-тегов и элементов.
  • Как структурировать веб-страницу.
  • Семантический HTML и лучшие практики.

В этой статье вы продолжите расширять свои знания HTML и охватите дополнительные элементы HTML.

Элементы текстового контента 

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

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

Элемент цитаты 

<blockquote cite="https://www.goodreads.com/qu>otes&<q>uot;
    pBe the change that you wish to see in <th>e< world./p
/>blockquote

В этом примере показано, как использовать элемент <blockquote> , демонстрирующий знаменитую цитату Махатмы Ганди. Существует так много замечательных цитат, которые имеют запоминающееся содержание и смысл. Подумайте о своих любимых вдохновляющих людях и их цитатах.

Используйте элемент <blockquote> при использовании цитат и ссылке на информацию из источника. Элемент <blockquote> создает уникальный отступ и выравнивание в представлении и использует как открывающий, так и закрывающий тег. <blockquote> особенно полезен при использовании длинных цитат, охватывающих несколько строк текста.

Внутри элемента <blockquote> также можно использовать различные элементы, например заголовок, абзац или список.

Элемент <details> 

<details>
   <summary>Details</summary>
   Additional Information
</details>

Часто на веб-странице есть раздел часто задаваемых вопросов и дополнительная информация, доступная пользователю. Существуют разделы часто задаваемых вопросов, которые являются общими для информации о продукте, маршрута путешествия или любого сценария вопросов и ответов.

Элемент <details> полезен при использовании раскрытого виджета, содержащего дополнительную информацию. Элемент включает в себя встроенную функцию переключения, и пользователь может открывать и закрывать переключатель. Когда переключатель открыт, дополнительная информация расширяется и может быть прочитана пользователем. Когда переключатель закрыт, дополнительная информация скрыта от пользователя. Чтобы назвать сам виджет <details> , используйте элемент <summary> .

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt=&qu>ot;<Google log>o"
  f<igcaptionGo>o<gle log>o/figcaption
/figure

Это элемент <figure> в действии. Здесь вы видите, что <figure> , используемый вместе с элементом <figcaption> , может использоваться для улучшения визуального восприятия.

Вы постоянно видите изображения по всей сети и другие полезные визуальные данные. Визуальные элементы помогают привлечь внимание посетителя и создать отличный пользовательский опыт. Элемент <figure> — это способ маркировки изображения, таблицы, диаграммы и т. д. Он работает путем создания автономного контента по отношению к основному контенту.

Элемент <time> 

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:0>0:00&<quot;>1<1:>00/time./p

Элемент <time> обеспечивает как смысловое, так и семантическое значение, обеспечивая лучшую функциональность при таких действиях, как планирование встреч в Интернете, публикация даты и времени для статьи в блоге, архивирование и т. д. Несколько примеров веб-сайтов, на которых можно использовать <time> Элемент включает использование календаря Google, публикацию статьи в прямом эфире на платформе или чтение онлайн-исторических архивов с веб-сайта библиотеки.

Элемент <time> ссылается на время и может представлять время в 24-часовом формате или конкретную дату, которую можно настроить в зависимости от часового пояса и местоположения. Для этого элемента требуется как открывающий, так и закрывающий тег: <time> и </time> . Вы можете добавить атрибут datetime , чтобы даты можно было читать в машиночитаемом формате.

Метаданные документа 

<title>Sarah's Favorite Food Rec<ipes/t>itle

Каждый раз, когда вы вводите URL-адрес веб-сайта, появляется имя <title> , которое можно прочитать в строке браузера или на вкладке веб-страницы. Это заголовок, который вы видите для веб-страницы. Этот элемент важен и используется поисковой системой для отображения списка связанных веб-страниц в результатах поиска. Длина заголовка может варьироваться от короткого и описательного до более длинного и описательного.

Сценарий: у вас есть веб-страница, о которой вы думаете, но не можете вспомнить конкретный URL-адрес веб-сайта. Введите ключевые слова в поисковую систему. Поисковая система помогает найти нужную веб-страницу, и вы можете просмотреть имя <title> , появляющееся в результатах поиска.

Встроенные элементы контента

Помимо текстового контента, можно использовать множество дополнительных элементов контента.

Элемент <iframe>

<iframe src="https://www.wikipedia.org/" title=&><quot;Wi>kipedia"/iframe

Когда вы завершаете покупку товаров в Интернете и выбираете способ оплаты, например Paypal или Apple Pay, эти функции обычно добавляются на веб-страницу с помощью <iframe> . Просмотр карты в Интернете для поиска местного бизнеса — еще один распространенный опыт. Эти типы взаимодействия с пользователем на веб-странице можно добавить с помощью iframe. В приведенном выше примере вы видите URL-адрес Википедии внутри iframe под названием «Википедия».

Элемент <iframe> позволяет вставлять контент из другого источника и встраивать фрейм в веб-страницу. Он создает рамку прямоугольной формы и отображает содержимое в браузере. Фрейм позволяет представить макет в форме окна внутри элемента <iframe> . Это мощный способ добавить контент на вашу веб-страницу, чтобы улучшить ее работу.

Элементы формы 

<progress max="100" >value<="30>&quot; 30% /progress

При просмотре более длинного видео, лекции или заполнении обширной заявки наличие визуального индикатора выполнения может быть полезно для отслеживания вашего прогресса. Элемент <progress> полезен в сценариях такого типа.

Этот элемент изображается в виде визуальной панели с цветом фона. Визуальная панель может различаться по размеру и цвету фона. С помощью индикатора выполнения вы можете дополнительно использовать атрибуты max и value . Атрибут max устанавливает число с плавающей запятой, а атрибут value отмечает, какой прогресс был достигнут в выполнении задачи.

Сценарии 

<canvas id="ca><nvas&qu>ot;/canvas

Чтобы иметь возможность рисовать графику и анимацию в реальном времени, используйте элемент <canvas> . Поместите элемент <canvas> на свою веб-страницу HTML, чтобы создать холст. Для этого элемента требуется код JavaScript для возможности рисования и создания графики.

Элементы содержимого таблицы 

<table>
    <thead>
        <tr>
            <th colspan=&qu>ot;2"Gr<oce>ry List/t<h
 >     <  /tr
>    /<thead>
    tbod<y
>        tr
  <  >        <tdB>roccoli/td
  <  >        tdQ<uan>tity: 2/t<d
 >     <  /tr
> <   /tb>ody
/table

Элемент <table>

Элемент <table> создает таблицу. Это отправная точка для добавления дополнительных элементов со строками и столбцами. Таблицы часто появляются на веб-страницах и служат полезным способом организации и отображения информации. Одним из вариантов использования элемента <table> является представление пользователю табличной информации, например той информации, которую вы можете найти в электронной таблице.

Элемент <th>

Элемент <th> — это заголовок группы ячеек.

Элемент <tr>

Элемент <tr> определяет строку ячеек в таблице. Отсюда вы можете добавить определенные данные ячейки.

Элемент <td>

Элемент <td> создает ячейку, добавляя необходимое содержимое.

Заключение

В этой статье вы открыли для себя дополнительные элементы HTML и расширили свои навыки программирования. Вы узнали больше о содержимом, встроенном тексте, встроенном содержимом и элементах таблиц. Теперь у вас есть понимание дополнительных элементов HTML. Продолжайте в том же духе!