В ходе предыдущих занятий вы узнали:
- Основы 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/quotes">
<p>Be the change that you wish to see in the 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="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Это элемент <figure>
в действии. Здесь вы видите, что <figure>
, используемый вместе с элементом <figcaption>
, может использоваться для улучшения визуального восприятия.
Вы постоянно видите изображения по всей сети и другие полезные визуальные данные. Визуальные элементы помогают привлечь внимание посетителя и создать отличный пользовательский опыт. Элемент <figure>
— это способ маркировки изображения, таблицы, диаграммы и т. д. Он работает путем создания автономного контента по отношению к основному контенту.
Элемент <time>
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
Элемент <time>
обеспечивает как смысловое, так и семантическое значение, обеспечивая лучшую функциональность при таких действиях, как планирование встреч в Интернете, публикация даты и времени для статьи в блоге, архивирование и т. д. Несколько примеров веб-сайтов, на которых можно использовать <time>
Элемент включает использование календаря Google, публикацию статьи в прямом эфире на платформе или чтение онлайн-исторических архивов с веб-сайта библиотеки.
Элемент <time>
ссылается на время и может представлять время в 24-часовом формате или конкретную дату, которую можно настроить в зависимости от часового пояса и местоположения. Для этого элемента требуется как открывающий, так и закрывающий тег: <time>
и </time>
. Вы можете добавить атрибут datetime
, чтобы даты можно было читать в машиночитаемом формате.
Метаданные документа
<title>Sarah's Favorite Food Recipes</title>
Каждый раз, когда вы вводите URL-адрес веб-сайта, появляется имя <title>
, которое можно прочитать в строке браузера или на вкладке веб-страницы. Это заголовок, который вы видите для веб-страницы. Этот элемент важен и используется поисковой системой для отображения списка связанных веб-страниц в результатах поиска. Длина заголовка может варьироваться от короткого и описательного до более длинного и описательного.
Сценарий: у вас есть веб-страница, о которой вы думаете, но не можете вспомнить конкретный URL-адрес веб-сайта. Введите ключевые слова в поисковую систему. Поисковая система помогает найти нужную веб-страницу, и вы можете просмотреть имя <title>
, появляющееся в результатах поиска.
Встроенные элементы контента
Помимо текстового контента, можно использовать множество дополнительных элементов контента.
Элемент <iframe>
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Когда вы завершаете покупку товаров в Интернете и выбираете способ оплаты, например Paypal или Apple Pay, эти функции обычно добавляются на веб-страницу с помощью <iframe>
. Просмотр карты в Интернете для поиска местного бизнеса — еще один распространенный опыт. Эти типы взаимодействия с пользователем на веб-странице можно добавить с помощью iframe. В приведенном выше примере вы видите URL-адрес Википедии внутри iframe под названием «Википедия».
Элемент <iframe>
позволяет вставлять контент из другого источника и встраивать фрейм в веб-страницу. Он создает рамку прямоугольной формы и отображает содержимое в браузере. Фрейм позволяет представить макет в форме окна внутри элемента <iframe>
. Это мощный способ добавить контент на вашу веб-страницу, чтобы улучшить ее работу.
Элементы формы
<progress max="100" value="30"> 30% </progress>
При просмотре более длинного видео, лекции или заполнении обширной заявки наличие визуального индикатора выполнения может быть полезно для отслеживания вашего прогресса. Элемент <progress>
полезен в сценариях такого типа.
Этот элемент изображается в виде визуальной панели с цветом фона. Визуальная панель может различаться по размеру и цвету фона. С помощью индикатора выполнения вы можете дополнительно использовать атрибуты max
и value
. Атрибут max
устанавливает число с плавающей запятой, а атрибут value
отмечает, какой прогресс был достигнут в выполнении задачи.
Сценарии
<canvas id="canvas"></canvas>
Чтобы иметь возможность рисовать графику и анимацию в реальном времени, используйте элемент <canvas>
. Поместите элемент <canvas>
на свою веб-страницу HTML, чтобы создать холст. Для этого элемента требуется код JavaScript для возможности рисования и создания графики.
Элементы содержимого таблицы
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
Элемент <table>
Элемент <table>
создает таблицу. Это отправная точка для добавления дополнительных элементов со строками и столбцами. Таблицы часто появляются на веб-страницах и служат полезным способом организации и отображения информации. Одним из вариантов использования элемента <table>
является представление пользователю табличной информации, например той информации, которую вы можете найти в электронной таблице.
Элемент <th>
Элемент <th>
— это заголовок группы ячеек.
Элемент <tr>
Элемент <tr>
определяет строку ячеек в таблице. Отсюда вы можете добавить определенные данные ячейки.
Элемент <td>
Элемент <td>
создает ячейку, добавляя необходимое содержимое.
Заключение
В этой статье вы открыли для себя дополнительные элементы HTML и расширили свои навыки программирования. Вы узнали больше о содержимом, встроенном тексте, встроенном содержимом и элементах таблиц. Теперь у вас есть понимание дополнительных элементов HTML. Продолжайте в том же духе!