HTML - tagi fraz
Tagi fraz zostały desicolgnowane do określonych celów, chociaż są wyświetlane w podobny sposób, jak inne podstawowe tagi, takie jak <b>, <i>, <pre>, i <tt>, widziałeś w poprzednim rozdziale. Ten rozdział poprowadzi Cię przez wszystkie ważne tagi fraz, więc zacznijmy je przeglądać jeden po drugim.
Podkreślony tekst
Wszystko, co pojawia się w środku <em>...</em> element jest wyświetlany jako wyróżniony tekst.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>
To da następujący wynik -
Zaznaczony tekst
Wszystko, co pojawia się w środku <mark>...</mark> element, jest wyświetlany jako oznaczony żółtym tuszem.
Przykład
<!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>
To da następujący wynik -
Silny tekst
Wszystko, co pojawia się w środku <strong>...</strong> element jest wyświetlany jako ważny tekst.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
To da następujący wynik -
Skrót tekstu
Możesz skrócić tekst, umieszczając go wewnątrz znaczników otwierających <abbr> i zamykających </abbr>. Jeśli występuje, atrybut tytułu musi zawierać ten pełny opis i nic więcej.
Przykład
<!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>
To da następujący wynik -
Element akronimu
Plik <acronym> element pozwala wskazać, że tekst między tagami <acronym> i </acronym> jest akronimem.
Obecnie główne przeglądarki nie zmieniają wyglądu zawartości elementu <acronym>.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>
To da następujący wynik -
Kierunek tekstu
Plik <bdo>...</bdo> element oznacza Bi-Directional Override i służy do zastąpienia bieżącego kierunku tekstu.
Przykład
<!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>
To da następujący wynik -
Specjalne warunki
Plik <dfn>...</dfn>element (lub element definicji HTML) pozwala określić, że wprowadzasz specjalny termin. Jego użycie jest podobne do kursywy w środku akapitu.
Zazwyczaj element <dfn> użyjesz przy pierwszym wprowadzeniu kluczowego terminu. Najnowsze przeglądarki wyświetlają zawartość elementu <dfn> kursywą.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>
To da następujący wynik -
Cytowanie tekstu
Jeśli chcesz zacytować fragment z innego źródła, umieść go pomiędzy <blockquote>...</blockquote> tagi.
Tekst wewnątrz elementu <blockquote> jest zwykle wcięty od lewej i prawej krawędzi otaczającego tekstu, a czasami używa się czcionki kursywą.
Przykład
<!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>
To da następujący wynik -
Krótkie notowania
Plik <q>...</q> element jest używany, gdy chcesz dodać podwójny cudzysłów w zdaniu.
Przykład
<!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>
To da następujący wynik -
Cytaty tekstowe
Jeśli cytujesz tekst, możesz wskazać źródło, umieszczając go między otworem <cite> tag i zamykanie </cite> etykietka
Jak można się spodziewać po publikacji drukowanej, zawartość elementu <cite> jest domyślnie wyświetlana kursywą.
Przykład
<!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>
To da następujący wynik -
Kod komputerowy
Każdy kod programistyczny, który ma pojawić się na stronie internetowej, powinien być umieszczony wewnątrz <code>...</code>tagi. Zwykle zawartość elementu <code> jest prezentowana czcionką o stałej szerokości, tak jak kod w większości książek o programowaniu.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>
To da następujący wynik -
Tekst klawiatury
Kiedy mówisz o komputerach, jeśli chcesz powiedzieć czytelnikowi, aby wprowadził jakiś tekst, możesz użyć <kbd>...</kbd> element wskazujący, co należy wpisać, jak w tym przykładzie.
Przykład
<!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>
To da następujący wynik -
Programowanie zmiennych
Ten element jest zwykle używany w połączeniu z <pre> i <code> elementy wskazujące, że zawartość tego elementu jest zmienną.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>
To da następujący wynik -
Wyjście programu
Plik <samp>...</samp> element wskazuje przykładowe dane wyjściowe programu, skryptu itp. Ponownie jest używany głównie podczas dokumentowania koncepcji programowania lub kodowania.
Przykład
<!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>
To da następujący wynik -
Tekst adresu
Plik <address>...</address> element służy do przechowywania dowolnego adresu.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>
To da następujący wynik -