[Series Html] Bài 5. Danh sách ( list)

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!
[Series Html] Bài 5. Danh sách ( list)- Danh sách trong html - AnonyHome


– Trong HTML có 3 loại danh sách:
+ ol: ordered list: Danh sách có đánh trật tự.
+ ul: unordered list: Danh sách không đánh trật tự.
+ dl: definition list: Danh sách định nghĩa.
– Ngoài để tạo danh sách các thẻ trên còn sử dụng để xây dựng hệ thống Menu của website.
– Bên trong các cặp thẻ <ol></ol> , <dl></dl> <ul></ul> là các cặp thẻ <li></li> hay <dd></dd> và <dt></dt> .

1. Danh sách có trật tự <ol></ol>.

Tạo nên danh sách có đánh thứ tự 1, 2, 3,…bên trong là các cặp thẻ định nghĩa danh sách <li></li>  .
 Ví dụ:

[Series Html] Bài 5. Danh sách ( list)- Danh sách trong html - AnonyHome


– Có thể thay đổi cách hiển thị khi sử dụng <ol> bằng cách sử dụng thuộc tính type.
+ a: Hiển thị theo kiểu ký tự thường a, b, c…
+ A: Hiển thị theo dạng ký tự hoa A, B, C..
+ i: Hiển thị dạng La Mã thường i, ii, iii, iv,..
+ I: Hiển thị dang La Mã I, II, III, IV,..
+ square: Hình ô vuông.
+ circle: Hình tròn màu rỗng ( màu trắng).
+ disc: Hình tròn đặc( chấm tròn màu đen).
– Để bắt đầu với 1 giá trị khác 1 chúng ta sử dụng thuộc tính start=“n” với n là giá trị bắt đầu của danh sách.  
Ví dụ:



2. Danh sách không trật tự <ul></ul>.

– Là kiểu danh sách đánh thứ tự các list mặc định là các hình tròn đặc ( chấm tròn đen).
– Có thể tùy biến sang các kiểu khác: đánh trật tự, ô vuông, hình tròn rỗng,..Tương tự như đối với <ol></ol>
– Để loại bỏ các kiểu đánh thứ tự đối với 2 loại “ol” và “ul” chúng ta sử dụng thuộc tính type với giá trị là none.  


Ví dụ:


3. Danh sách định nghĩa.

– Khác với “ol” và “ul”, cặp thẻ <dl></dl> được dùng để định nghĩa 1 đối tượng nào đó.
– Bên trong cặp thẻ “dl” chứa các cặp thẻ:
+ “dd” (Definition Description): Thẻ mô tả định nghĩa
+ “dt” ( Definition term): Thẻ định nghĩa 1 thuật ngữ nào đó.

Kết thúc bài 5 tại đây. Trong bài mình đã giới thiệu cho các bạn về danh sách( list ) trong Html. Trong bài học tiếp theo chúng ta sẽ nghiên cứu về biểu mẫu(form ) trong Html.

Chúc các bạn học tập tốt! Mọi ý kiến các bạn vui lòng để lại trong mục bình luận bên dưới.

Share
0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
Chào các bạn! Tiếp tục series…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x