Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 2-Bài 8. Các thẻ (tag) tạo đường kẻ ngang (Horizontal Rule)

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: 22/2/2025, 12:33

Lượt xem: 5311

Tạo đường kẻ ngang (Horizontal Rule)

Trong HTML5 đã hỗ trợ thẻ (tag) <hr /> giúp chúng ta tạo đường kẻ ngang cho trang web.
Thẻ này không có thẻ đóng. Do đó, chúng ta mở thẻ và đóng ngay lập tức. Cú pháp: <hr />

Các thuộc tính (attributes) hỗ trợ trong thẻ hr

Thuộc tính (Attribute)	Giá trị (Value)	Diễn giải (Description)
align	left right center	Canh lề (trái, phải, giữa) theo chiều ngang cho đường kẻ.
width	pixels or %	Dùng để quy định chiều rộng cho đường kẻ
size	pixels hoặc %	Dùng để quy định độ dày của đường kẻ
noshade	noshade	Dùng để yêu cầu không hiển thị bóng mờ cho đường kẻ
color	mã màu	Dùng để quy định màu sắc cho đường kẻ

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  Đường kẻ đơn giản
  <hr />

  Đường kẻ màu đỏ
  <hr color="red" />

  Đường kẻ màu xanh dương, chiều dài 150px
  <hr color="blue" width="150px" />

  Đường kẻ màu xanh lá, chiều dài 300px, độ dài 10px, không bóng mờ
  <hr color="green" width="300px" size="10px" noshade="noshade" />

  Đường kẻ màu tím, chiều dài 150px, độ dài 3px, canh trái
  <hr color="purple" width="100px" size="3px" align="left" />

  Đường kẻ màu tím, chiều dài 150px, độ dài 3px, canh giữa
  <hr color="purple" width="100px" size="3px" align="center" />

  Đường kẻ màu tím, chiều dài 150px, độ dài 3px, canh phải
  <hr color="purple" width="100px" size="3px" align="right" />

</body>
</html>