Thẻ danh sách trong HTML

Phần tử danh sách [list] được sử dụng rất thường xuyên trong một tài liệu web bằng HTML. Trong một trang web thường người ta sử dụng các phần tử danh sách rất nhiều, chẳng hạn như menu, danh sách những thông tin nào đó,vvđều được tạo ra bởi các thẻ tạo danh sách trong HTML.

Trong HTML có ba kiểu danh sách [list type] đó là kiểu xếp theo thứ tự [ordered list], kiểu không xếp thứ tự [unordered list]. Cụ thể:

• Kiểu xếp theo thứ tự [Ordered List]: Là kiểu hiển thị một danh sách mà các mục con của nó được sắp xếp theo thứ tự bằng số hoặc chữ cái.
• Kiểu không xếp thứ tự [Unordered List]: Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được sắp xếp theo thứ tự mà chỉ được đánh dấu bằng một ký tự đặc trưng.

Dưới đây là ví dụ:

Ta định nghĩa danh sách không xếp thứ tự bằng thẻ

, viết tắt củaunorderedlist. Mỗi phần tử của danh sách được định nghĩa bằng thẻ
• , viết tắt củalistitem.

  Mặc định, các phần tử của danh sách sẽ được hiển thị kèm theo một dấu tròn phía trước:

  • Coffee
  • Tea
  • Milk

  Kết quả:

  Các biểu tượng chophần tử trong danh sách không xếp thứ tự

  Ta dùng thuộc tính CSSlist-style-typeđể định kiểu cho biểu tượng của phần tử trong danh sách:

  Giá trịMiêu tảdisc[Mặc định] Các biểu tượng là hình tròn màu đencircleCác biểu tượng là hình tròn rỗngsquareCác biểu tượng là hình vuôngnoneKhông hiển thị các biểu tượng

  Ví dụ dùng giá trị disc:

  • Coffee
  • Tea
  • Milk

  Kết quả:

  Ví dụ dùng giá trị circle:

  • Coffee
  • Tea
  • Milk

  Kết quả:

  Ví dụ dùng giá trị square:

  • Coffee
  • Tea
  • Milk

  Kết quả:

  Ví dụ dùng giá trị none:

  • Coffee
  • Tea
  • Milk

  Kết quả:

  Ta định nghĩa một danh sách xếp theo thứ tự bằng thẻ

  [orderedlist]. Mỗi phần tử của danh sách được định nghĩa bằng thẻ
  1. [listitem].

     Mặc định thì các phần tử sẽ được hiển thị kèm số thứ tự:

     1. Coffee
     2. Tea
     3. Milk

     Kết quả:

     Thuộc tính type của danh sách xếp thứ tự

     Thuộc tínhtypecủa thẻ

     dùng để định kiểu cho biểu tượng các phần tử:TypeMiêu tảtype=1Các phần tử sẽ được đánh thứ tự bằng số [Mặc định]type=ACác phần tử sẽ được đánh thứ tự bằng chữ cái hoatype=aCác phần tử sẽ được đánh thứ tự bằng chữ cái thườngtype=ICác phần tử sẽ được đánh thứ tự bằng chữ số La Mã hoatype=iCác phần tử sẽ được đánh thứ tự bằng chữ số La Mã thường

     Ví dụ đánh thứ tự bằng số: type=1:

     1. Coffee
     2. Tea
     3. Milk

     Kết quả:

     Ví dụ đánh thứ tự bằng chữ cái hoa: type=A:

     1. Coffee
     2. Tea
     3. Milk

     Kết quả:

     Ví dụ đánh thứ tự bằng chữ cái thường: type=a:

     1. Coffee
     2. Tea
     3. Milk

     Kết quả:

     Ví dụ đánh thứ tự bằng chữ số La Mã hoa: type=I:

     1. Coffee
     2. Tea
     3. Milk

     Kết quả:

     Ví dụ đánh thứ tự bằng chữ số La Mã hoa:

     1. Coffee
     2. Tea
     3. Milk

     Kết quả:

     Mã HTML cũng có thẻ danh sách miêu tả.

     Một danh sách miêu tả là danh sách các thuật ngữ cùng với miêu tả của chúng.

     Thẻ

     định nghĩa một danh sách miêu tả, trong đó, thẻđịnh nghĩa thuật ngữ [tên gọi], và thẻmiêu tả các thuật ngữ:
     Coffee - black hot drink Milk - white cold drink

     Kết quả:

     Ta có thể lồng danh sách vào một danh sách khác, tạo thành danh sách bên trong danh sách, tiếng Anh gọi là nested list:

     • Coffee
     • Tea
       • Black tea
       • Green tea
     • Milk

     Kết quả:

     Chú ý:Mỗi phần tử không chỉ có thể chứa danh sách khác mà còn có thể chứa các thành phần HTML khác như ảnh hay liên kết,

     Danh sách trong HTML có thể được định kiểu theo nhiều cách bằng CSS.

     Một cách làm phổ biến là định kiểu chuyển danh sách thành nằm ngang để tạo thành một menu:

     HTML:

     • Home
     • News
     • Contact
     • About

     CSS:

     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; }

     Kết quả:

     • Dùng thẻ
       để định nghĩa một danh sách không xếp thứ tự
       • Dùng thuộc tính CSSlist-style-typeđể định nghĩa biểu tượng cho các phần tử trong danh sách
       • Dùng thẻ
         để định nghĩa một danh sách xếp thứ tự
         1. Dùng thuộc tínhtypeđể định nghĩa kiểu đánh thứ tự
         2. Dùng thẻ
         3. để định nghĩa một phần tử trong danh sách
         4. Dùng thẻđể định nghĩa một danh sách miêu tả
         5. Dùng thẻđể định nghĩa một thuật ngữ
         6. Dùng thẻđể miêu tả thuật ngữ ngay phía trên nó trong danh sách miêu tả
         7. Có thể lồng các danh sách bên trong các danh sách
         8. Các phần tử trong danh sách có thể chứa các thành phần HTML khác
         9. Dùng thuộc tính CSSfloat:lefthoặcdisplay:inlineđể hiển thị danh sách nằm ngang

       Qua đây là một số chia sẻ về thẻ tạo danh sách ul, ol, li trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

       Các bạn có thể tham khảo các bài viết hay về HTMLtại đây.

       Hãy tham gia nhómHọc lập trìnhđể thảo luận thêm về các vấn đề cùng quan tâm.

Video liên quan