Chưa phân loại

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

Written by AnonyHome
· 2 min read >
[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.  



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.

Written by AnonyHome
Fullstack Developer ! Profile

Leave a Reply

Your email address will not be published. Required fields are marked *

KHÓA HỌC JAVA CƠ BẢN FREE
Cùng tham gia khóa học Java cơ bản miễn phí tại kênh Youtube của AnonyHome Team
NHẤN NÚT ĐĂNG KÝ KÊNH BÊN DƯỚI ĐỂ CÙNG HỌC LẬP TRÌNH MIỄN PHÍ
ĐĂNG KÝ KÊNH ĐỂ CÙNG HỌC LẬP TRÌNH MIỄN PHÍ