Thẻ HTML chỉ định văn bản chỉ số trên. Đây là văn bản xuất hiện ở đầu dòng văn bản. Thẻ đại diện cho văn bản chỉ số dưới. Đây là văn bản xuất hiện ở cuối dòng văn bản.
Hầu hết khi chúng ta gặp văn bản, văn bản có đường cơ sở truyền thống và chiều cao x.
Tất cả mọi thứ trong văn bản này cho đến thời điểm này trong bài viết này đều có đường cơ sở. Đường cơ sở này về cơ bản là điểm mà gạch dưới sẽ hiển thị nếu chúng ta định dạng nó bằng một và một chiều cao x. Chiều cao x là dòng tưởng tượng nơi kết thúc một chữ cái viết thường. Nó được đặt tên từ chữ x viết thường vì nó lấp đầy khoảng trống.
Trong hướng dẫn này, chúng ta sẽ nói về cách xác định chỉ số dưới và chỉ số trên trong HTML. Chúng tôi sẽ giới thiệu cho các bạn một ví dụ về từng chủ đề định dạng văn bản này để bạn có thể học cách sử dụng chúng trong mã của mình.
Văn bản chỉ số dưới và chỉ số dưới được sử dụng khi nào?
Đôi khi chúng tôi muốn sử dụng các ký tự bằng một nửa ký tự bên dưới hoặc bên trên văn bản đã đặt. Đăng ký là các ký tự được đặt nửa ký tự bên dưới văn bản. Ký tự viết tắt là các ký tự được đặt nửa ký tự phía trên văn bản.
Trong bối cảnh thế giới thực, chúng tôi sử dụng các ký tự này khi sử dụng các phương trình toán học, phương trình hóa học, trích dẫn hoặc chú thích cuối trang.
Siêu văn bản HTML
Để tạo siêu văn bản trong HTML, hãy sử dụng thẻ . Thẻ này nâng bất kỳ văn bản nào kèm theo bên trong lên đầu dòng. Thẻ sup không có bất kỳ thuộc tính nào dành riêng cho thẻ.
Hãy xem cú pháp của phương thức này:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
<p>4 <sup>2</sup> = 16</p>
Chúng tôi đã bao gồm ký tự “2” trong thẻ . Điều này làm cho "2" xuất hiện trong chỉ số trên. Mã của chúng tôi hiện hiển thị:
4 ² =16
Văn bản phụ HTML
Lệnh HTML xác định văn bản con. Văn bản phụ đề cập đến văn bản xuất hiện ở cuối dòng văn bản.
Hãy xem xét cú pháp này:
<p>This is main text. <sub>3</sub></p>
Mã của chúng tôi trả về:
Đây là văn bản chính. ₃
Giống như trong ví dụ siêu văn bản, chúng tôi chưa chỉ định bất kỳ thuộc tính thẻ nào cho . Để chuyển văn bản thành văn bản con, chúng tôi đặt văn bản đó trong thẻ .
Văn bản phụ thường được sử dụng để mô tả số nguyên tố trong bảng tuần hoàn các nguyên tố.
Ví dụ về văn bản con và siêu văn bản HTML
Hãy xem qua một ví dụ về cả và trên trang web HTML. Hãy xem xét đoạn mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Superscript and Subscript</title>
<style>
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font: smaller;
}
</style>
</head>
<body>
<div style="text-align:center;" class="container">
<div>
<h3>Superscript</h3>
<span>E=MC<sup>2</sup></span>
<br />
<span>1.7 x 10<sup>4</sup></span>
</div>
<div>
<h3>Subscript</h3>
<span>H<sub>2</sub>O</span>
<br />
<span><sup>†1</sup>Ipsum, Lorem. Footnote example, 2020.</span>
</div>
</div>
</body>
</html>
Như bạn có thể thấy, chúng tôi sử dụng và thẻ chỉ số dưới và thẻ chỉ số trên để tạo hiệu ứng trên Phần tử HTML. Nó đi kèm với một số giá trị mặc định:
<style>
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font: smaller;
}
</style>
Cả hai thẻ đều sử dụng các thuộc tính sự kiện và toàn cục có sẵn cho chúng tôi trong HTML. Về cơ bản, điều này có nghĩa là bạn có thể đặt trình xử lý sự kiện trên đó nếu ai đó nhấp vào văn bản.
Ngoài ra, bạn có thể sử dụng bất kỳ thuộc tính HTML thông thường nào để tùy chỉnh các phần tử. Bạn có thể tìm thấy danh sách các thuộc tính HTML thông thường có sẵn cho chúng tôi trong danh sách Thuộc tính chung do W3Schools viết.
Kết luận
Phần tử của HTML thêm văn bản con vào một đoạn văn bản. Văn bản phụ xuất hiện ở cuối dòng văn bản. thêm siêu văn bản vào văn bản, xuất hiện ở đầu dòng văn bản.
Đó là nó! Giờ đây, bạn có thể tạo thành công các chỉ số trên và chỉ số phụ trong HTML.
Bạn có muốn tìm hiểu thêm về HTML? Hãy xem hướng dẫn Cách học HTML đầy đủ của chúng tôi để biết các mẹo và hướng dẫn của chuyên gia về các khóa học và sách trực tuyến hàng đầu.