HTML - Thẻ cụm từ
Các thẻ cụm từ đã được làm khô cho các mục đích cụ thể, mặc dù chúng được hiển thị theo cách tương tự như các thẻ cơ bản khác như <b>, <i>, <pre>và <tt>, bạn đã thấy trong chương trước. Chương này sẽ đưa bạn qua tất cả các thẻ cụm từ quan trọng, vì vậy chúng ta hãy bắt đầu xem từng thẻ một.
Đoạn văn bản được nhấn mạnh
Mọi thứ xuất hiện bên trong <em>...</em> phần tử được hiển thị dưới dạng văn bản được nhấn mạnh.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản được Đánh dấu
Bất cứ thứ gì xuất hiện cùng với <mark>...</mark> , được hiển thị như được đánh dấu bằng mực vàng.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Văn bản mạnh mẽ
Mọi thứ xuất hiện bên trong <strong>...</strong> phần tử được hiển thị dưới dạng văn bản quan trọng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Viết tắt văn bản
Bạn có thể viết tắt một văn bản bằng cách đặt nó bên trong các thẻ mở <abbr> và đóng </abbr>. Nếu có, thuộc tính title phải chứa mô tả đầy đủ này và không có gì khác.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Yếu tố viết tắt
Các <acronym> phần tử cho phép bạn chỉ ra rằng văn bản giữa các thẻ <acronym> và </acronym> là một từ viết tắt.
Hiện tại, các trình duyệt chính không thay đổi hình thức nội dung của phần tử <tên viết tắt>.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản chỉ đạo
Các <bdo>...</bdo> phần tử là viết tắt của Bi-Directional Override và nó được sử dụng để ghi đè hướng văn bản hiện tại.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Khóa đặc biệt
Các <dfn>...</dfn>phần tử (hoặc Phần tử Định nghĩa HTML) cho phép bạn chỉ định rằng bạn đang giới thiệu một thuật ngữ đặc biệt. Cách sử dụng của nó tương tự như các từ in nghiêng ở giữa một đoạn văn.
Thông thường, bạn sẽ sử dụng phần tử <dfn> lần đầu tiên bạn giới thiệu một thuật ngữ chính. Hầu hết các trình duyệt gần đây hiển thị nội dung của phần tử <dfn> bằng phông chữ nghiêng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản trích dẫn
Khi bạn muốn trích dẫn một đoạn văn từ một nguồn khác, bạn nên đặt nó ở giữa <blockquote>...</blockquote> các thẻ.
Văn bản bên trong phần tử <blockquote> thường được thụt vào từ các cạnh trái và phải của văn bản xung quanh, và đôi khi sử dụng phông chữ in nghiêng.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Trích dẫn ngắn
Các <q>...</q> phần tử được sử dụng khi bạn muốn thêm dấu ngoặc kép trong một câu.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Trích dẫn văn bản
Nếu bạn đang trích dẫn một văn bản, bạn có thể chỉ ra nguồn đặt nó giữa đoạn mở đầu <cite> gắn thẻ và đóng </cite> nhãn
Như bạn mong đợi trong một ấn phẩm in, nội dung của phần tử <cite> được hiển thị dưới dạng văn bản in nghiêng theo mặc định.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Mã máy tính
Bất kỳ mã lập trình nào xuất hiện trên một trang Web phải được đặt bên trong <code>...</code>các thẻ. Thông thường nội dung của phần tử <code> được trình bày bằng phông chữ monospaced, giống như mã trong hầu hết các sách lập trình.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản Bàn phím
Khi bạn đang nói về máy tính, nếu bạn muốn yêu cầu người đọc nhập một số văn bản, bạn có thể sử dụng <kbd>...</kbd> phần tử để chỉ ra những gì nên được nhập vào, như trong ví dụ này.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Các biến lập trình
Phần tử này thường được sử dụng cùng với <pre> và <code> phần tử để chỉ ra rằng nội dung của phần tử đó là một biến.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đầu ra chương trình
Các <samp>...</samp> phần tử chỉ ra kết quả đầu ra mẫu từ một chương trình và tập lệnh, v.v. Một lần nữa, nó chủ yếu được sử dụng khi ghi lại các khái niệm lập trình hoặc mã hóa.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Văn bản địa chỉ
Các <address>...</address> phần tử được sử dụng để chứa bất kỳ địa chỉ nào.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>Điều này sẽ tạo ra kết quả sau: