Теги фразы были десикментированы для определенных целей, хотя они отображаются аналогично другим базовым тегам, таким как <b>, <i>, <pre> и <tt> , которые вы видели в предыдущей главе. Эта глава проведет вас через все важные теги фраз, поэтому давайте начнем видеть их один за другим.
Подчеркнутый текст
Все, что появляется внутри элемента <em> … </ em>, отображается как выделенный текст.
пример
<!DOCTYPE html> <html> <head> <title>Emphasized Text Example</title> </head> <body> <p>The following word uses an <em>emphasized</em> typeface.</p> </body> </html>
Это даст следующий результат —
Помеченный текст
Все, что появляется с -в элементе <mark> … </ mark> , отображается как отмеченное желтыми чернилами.
пример
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>
Это даст следующий результат —
Сильный текст
Все, что появляется внутри элемента <strong> … </ strong>, отображается как важный текст.
пример
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
Это даст следующий результат —
Сокращение текста
Вы можете сокращать текст, помещая его внутрь, открывая теги <abbr> и закрывая </ abbr>. Если присутствует, атрибут title должен содержать это полное описание и ничего больше.
пример
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>
Это даст следующий результат —
Акроним Элемент
Элемент <acronym> позволяет указать, что текст между тегами <acronym> и </ acronym> является аббревиатурой.
В настоящее время основные браузеры не изменяют внешний вид содержимого элемента <acronym>.
пример
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>
Это даст следующий результат —
Направление текста
Элемент <bdo> … </ bdo> обозначает двунаправленное переопределение и используется для переопределения текущего направления текста.
пример
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>
Это даст следующий результат —
Особые условия
Элемент <dfn> … </ dfn> (или элемент определения HTML) позволяет указать, что вы вводите специальный термин. Его использование похоже на курсивные слова в середине абзаца.
Как правило, вы будете использовать элемент <dfn> при первом введении ключевого термина. Самые последние браузеры отображают содержимое элемента <dfn> курсивом.
пример
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>
Это даст следующий результат —
Цитирование текста
Если вы хотите процитировать отрывок из другого источника, вы должны поместить его между тегами <blockquote> … </ blockquote> .
Текст внутри элемента <blockquote> обычно имеет отступ от левого и правого краев окружающего текста и иногда использует курсивный шрифт.
пример
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
Это даст следующий результат —
Короткие цитаты
Элемент <q> … </ q> используется, когда вы хотите добавить двойную кавычку в предложение.
пример
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>
Это даст следующий результат —
Текст Цитаты
Если вы цитируете текст, вы можете указать источник, поместив его между открывающим тегом <cite> и закрывающим </ cite>
Как и следовало ожидать в печатной публикации, по умолчанию содержимое элемента <cite> отображается курсивом.
пример
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>
Это даст следующий результат —
Компьютерный код
Любой программный код, отображаемый на веб-странице, должен быть помещен в теги <code> … </ code> . Обычно содержимое элемента <code> представлено моноширинным шрифтом, как и код в большинстве книг по программированию.
пример
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>
Это даст следующий результат —
Текст клавиатуры
Когда вы говорите о компьютерах, если вы хотите сказать читателю ввести какой-либо текст, вы можете использовать элемент <kbd> … </ kbd>, чтобы указать, что нужно вводить, как в этом примере.
пример
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>
Это даст следующий результат —
Переменные программирования
Этот элемент обычно используется вместе с элементами <pre> и <code>, чтобы указать, что содержимое этого элемента является переменной.
пример
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>
Это даст следующий результат —
Выход программы
Элемент <samp> … </ samp> указывает пример выходных данных программы, сценария и т. Д. Опять же, он в основном используется при документировании концепций программирования или кодирования.
пример
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>
Это даст следующий результат —
Текст адреса
Элемент <address> … </ address> используется для хранения любого адреса.
пример
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>
Это даст следующий результат —