Nếu bạn đã từng sử dụng ứng dụng Word, bạn phải làm quen với các thao tác để in đậm, in nghiêng, hay gạch chân; đó là 3 trong số 10 tùy chọn có sẵn để chỉ cách mà văn bản xuất hiện trong HTML và XHTML.
Bất cứ nội dung gì mà xuất hiện trong phần tử <b>...</b> đều được in đậm.
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
Đây là kết quả:
Bất cứ nội dung gì xuất hiện trong phần tử <i>...</i> đều được in nghiêng:
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>
Đây là kết quả:
Bất cứ nội dung gì xuất hiện trong phần tử <u>...</u> đều được gạch chân:
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>
Đây là kết quả:
Bất cứ nội dung nào xuất hiện trong phần tử <strike>...</strike> đều được gạch ngang:
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
Đây là kết quả:
Nội dung trong phần tử <tt>...</tt> được viết dưới dạng font chữ đơn cách. Hầu hết các font chữ đều được biết như là các font chữ rộng bởi vì các ký tự khác nhau có độ rộng khác nhau (ví dụ như ký tự 'm' rộng hơn ký tự 'i'). Tuy nhiên trong font chữ đơn cách, các ký tự có độ rộng giống nhau.
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
Đây là kết quả:
Nội dung trong phần tử <sup>...</sup> được viết dưới dạng chỉ số trên, kích cỡ của nó bằng kích cỡ của các ký tự quanh nó nhưng độ cao của nó bằng một nửa các ký tự khác.
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
Đây là kết quả:
Nội dung trong phần tử <sub>...</sub> được viết ở dạng chỉ số dưới, kích cỡ của nó bằng kích cỡ các ký tự xung quanh nhưng chiều cao bằng một nửa.
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
Đây là kết quả:
Bất cứ nội dung xuất hiện trong phần tử <ins>...</ins> được hiển thị như ở dạng văn bản được chèn.
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Đây là kết quả:
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Đây là kết quả:
Nội dung trong phần tử <big>...</big> được hiển thị ở một kích cỡ lớn hơn phần còn lại xung quanh nó.
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
Đây là kết quả:
Nội dung xuất hiện trong phần tử <small>...</small> được hiển thị ở một kích cỡ nhỏ hơn phần còn lại xung quanh nó.
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>
Đây là kết quả:
Phần tử <div> và <span> cho phép bạn tạo các phần tử thành nhóm nội dung để tạo ra các khu vực hoặc các tiểu khu của một trang.
Ví dụ, bạn muốn đặt tất cả các lời chú thích ở cuối trang và đặt tất cả chúng trong một phần tử <div> để chỉ rằng tất cả các phần tử trong phần tử <div> nào đó. Bạn cũng có thể đính kèm một style cho phần tử này.
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
Đây là kết quả:
Bên cạnh đó, phần tử <span> có thể sử dụng để tạo nhóm chỉ cho các phần tử trong một dòng.
Vì thế, nếu bạn có một phần của câu hay đoạn văn mà bạn muốn phân nhóm chúng, bạn có thể sử dụng phần tử <span> như ví dụ dưới đây.
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>
Đây là kết quả:
Những thẻ này được sử dụng phổ biến với CSS cho phép bạn đính kèm một style tới một khu vực của trang.
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng iframe để hiển thị một trang web trong một trang web khác.
Trong hướng dẫn này, bạn sẽ học cách tạo biểu mẫu trong HTML5 để thu thập thông tin đầu vào của người dùng.
Trong hướng dẫn này, bạn sẽ học cách tạo các loại danh sách khác nhau trong HTML5.
Trong hướng dẫn này, bạn sẽ học cách hiển thị dữ liệu dạng bảng bằng cách sử dụng bảng trong HTML5.