Thẻ <ul> HTML

  • Trang trước <u>
  • Trang tiếp theo <var>

Định nghĩa và cách sử dụng

<ul> thẻ để định nghĩa danh sách không theo thứ tự (có dấu phẩy).

Hãy sử dụng <ul> thẻ và <li> thẻ để tạo danh sách không theo thứ tự.

Lưu ý:Hãy sử dụng CSS đểĐặt樣式 danh sách.

Lưu ý:Để danh sách theo thứ tự, hãy sử dụng <ol> thẻ.

Xin xem thêm:

Giáo trình HTML:Danh sách HTML

Tài liệu tham khảo HTML DOM:Đối tượng Ul

Giáo trình CSS:Đặt樣式 danh sách

Mô hình

Ví dụ 1

Danh sách HTML không theo thứ tự:

<ul>
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Đồ uống sữa</li>
</ul>

Thử ngay

Ví dụ 2

Đặt loại樣式 danh sách khác nhau (sử dụng CSS):

<ul style="list-style-type:circle">
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Đồ uống sữa</li>
</ul>
<ul style="list-style-type:disc">
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Đồ uống sữa</li>
</ul>
<ul style="list-style-type:square">
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Đồ uống sữa</li>
</ul>

Thử ngay

Ví dụ 3

Phóng to và thu nhỏ dòng cao trong danh sách (sử dụng CSS):

<ul style="line-height:180%">
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Đồ uống sữa</li>
</ul>
<ul style="line-height:80%">
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Đồ uống sữa</li>
</ul>

Thử ngay

Ví dụ 4

Tạo danh sách khác trong danh sách (danh sách nhúng):

<ul>
  <li>Cà phê</li>
  <li>Trà</li>
    <ul>
      <li>Trà Pu'er</li>
      <li>Trà xanh</li>
    </ul>
  </li>
  <li>Đồ uống sữa</li>
</ul>

Thử ngay

Ví dụ 5

Tạo danh sách nhúng phức tạp hơn:

<ul>
  <li>Cà phê</li>
  <li>Trà</li>
    <ul>
      <li>Trà Pu'er</li>
      <li>Trà xanh</li>
        <ul>
          <li>Trà Bỉ Lâu</li>
          <li>Trà Long Chỉ</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Đồ uống sữa</li>
</ul>

Thử ngay

Thuộc tính toàn cục

<ul> Thẻ cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<ul> Thẻ cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <ul> Thành phần:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Thử ngay

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ
  • Trang trước <u>
  • Trang tiếp theo <var>