HTML - теги фраз
Теги фраз были расшифрованы для определенных целей, хотя они отображаются так же, как и другие основные теги, такие как <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> element означает двунаправленное переопределение и используется для переопределения текущего направления текста.
пример
<!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>element (или HTML Definition Element) позволяет указать, что вы вводите специальный термин. Его использование похоже на курсив в середине абзаца.
Обычно вы используете элемент <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> element указывает пример вывода программы, сценария и т. д. Опять же, он в основном используется при документировании концепций программирования или кодирования.
пример
<!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>Это даст следующий результат -