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>
Các cách áp dụng đường kẻ ngang (HR) thường áp dụng trong thiết kế web/ứng dụng
Dùng phân chia cụm tính năng trong thiết kế Menu
Các đường kẻ ngang (Horizontal Rule) áp dụng để phân cụm/nhóm các MENU chức năng
Dùng để phân đoạn Chữ ký trong soạn thảo Thư điện tử (Email)
|