Thẻ HTML <ul>
Thí dụ
Danh sách HTML không có thứ tự:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thẻ <ul>
xác định danh sách không có thứ tự (dấu đầu dòng).
Sử dụng <ul>
thẻ cùng với thẻ <li> để tạo danh sách không có thứ tự.
Mẹo: Sử dụng CSS để tạo kiểu cho danh sách .
Mẹo: Đối với danh sách có thứ tự, hãy sử dụng thẻ <ol> .
Hỗ trợ trình duyệt
Element | |||||
---|---|---|---|---|---|
<ul> | Yes | Yes | Yes | Yes | Yes |
Thuộc tính toàn cầu
Thẻ <ul>
cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <ul>
cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Các ví dụ khác
Thí dụ
Đặt các loại kiểu danh sách khác nhau (với CSS):
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Thí dụ
Mở rộng và giảm chiều cao dòng trong danh sách (với CSS):
<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul
style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Thí dụ
Tạo danh sách bên trong danh sách (danh sách lồng nhau):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Thí dụ
Tạo một danh sách lồng nhau phức tạp hơn:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Các trang liên quan
Hướng dẫn HTML: Danh sách HTML
Tham chiếu HTML DOM: Ul Object
Hướng dẫn CSS: Danh sách tạo kiểu
Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị <ul>
phần tử với các giá trị mặc định sau:
Thí dụ
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}