Danh sách không có thứ tự HTML
Thẻ HTML <ul>
xác định danh sách không có thứ tự (có dấu đầu dòng).
Danh sách HTML không có thứ tự
Danh sách không có thứ tự bắt đầu bằng thẻ <ul>
. Mỗi mục danh sách bắt đầu bằng thẻ <li>
.
Các mục trong danh sách sẽ được đánh dấu bằng dấu đầu dòng (vòng tròn nhỏ màu đen) theo mặc định:
Danh sách HTML không có thứ tự - Chọn điểm đánh dấu mục danh sách
Thuộc tính CSS list-style-type
được sử dụng để xác định kiểu của điểm đánh dấu mục danh sách. Nó có thể có một trong các giá trị sau:
Value | Description |
---|---|
disc | Sets the list item marker to a bullet (default) |
circle | Sets the list item marker to a circle |
square | Sets the list item marker to a square |
none | The list items will not be marked |
Ví dụ - Đĩa
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Hãy tự mình thử »Ví dụ - Vòng tròn
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Hãy tự mình thử »Ví dụ - Hình vuông
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Hãy tự mình thử »Ví dụ - Không có
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Hãy tự mình thử » Danh sách HTML lồng nhau
Danh sách có thể được lồng vào nhau (danh sách bên trong danh sách):
Ví dụ
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Hãy tự mình thử » Lưu ý: Một mục danh sách ( <li>
) có thể chứa danh sách mới và các thành phần HTML khác, như hình ảnh và liên kết, v.v.
Danh sách ngang với CSS
Danh sách HTML có thể được tạo kiểu theo nhiều cách khác nhau bằng CSS.
Một cách phổ biến là tạo kiểu cho danh sách theo chiều ngang, để tạo menu điều hướng:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Hãy tự mình thử »Mẹo: Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi.
Tóm tắt chương
- Sử dụng phần tử HTML
<ul>
để xác định danh sách không có thứ tự - Sử dụng thuộc tính CSS
list-style-type
để xác định điểm đánh dấu mục danh sách - Sử dụng phần tử HTML
<li>
để xác định một mục danh sách - Danh sách có thể được lồng nhau
- Các mục danh sách có thể chứa các phần tử HTML khác
- Sử dụng thuộc tính CSS
float:left
để hiển thị danh sách theo chiều ngang
Bài tập HTML
Thẻ danh sách HTML
Tag | Description |
---|---|
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dl> | Defines a description list |
<dt> | Defines a term in a description list |
<dd> | Describes the term in a description list |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.