Danh sách không có thứ tự HTML
Thẻ HTML <ul>xác định danh sách không có thứ tự (dấu đầu dòng).
Danh sách HTML không theo thứ tự
Một danh sách không có thứ tự bắt đầu bằng <ul>thẻ. Mỗi mục danh sách bắt đầu bằng
<li>thẻ.
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:
Thí dụ
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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>
Ví dụ - Vòng tròn
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ - Hình vuông
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ - Không có
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Danh sách HTML lồng nhau
Các danh sách có thể được lồng vào nhau (danh sách bên trong danh sách):
Thí dụ
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Lưu ý: Mục danh sách ( <li>) có thể chứa danh sách mới và các phần tử 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 với CSS.
Một cách phổ biến là định kiểu danh sách theo chiều ngang, để tạo menu điều hướng:
Thí 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>
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 vào 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
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 .