Hay sử dụng các thẻ ul ol>
Trong bài này chúng ta sẽ cùng nhau đi tìm hiểu về thẻ tạo danh sách (tạo list) trong HTML. Trong HTML việc tạo các phần tử danh sách cũng được sử dụng khá thường xuyên, chẳng hạn như tạo menu, tạo danh sách chuyên mục,… Vậy nên bài này mình muốn giới thiệu với các bạn các loại thẻ để tạo list và các sử dụng của từng thẻ. Show Trong HTML chúng ta có 3 kiểu tạo danh sách đó là danh sách có sắp xếp (ordered list), danh sách không sắp xếp (unordered list) và danh sách mô tả (description list). Dưới đây chúng ta sẽ đi vào cách dùng từng kiểu danh sách cụ thể. Kiểu danh sách sắp xếp là kiểu hiển thị danh sách các mục bên trong nó được sắp xếp theo thứ tự đánh số hoặc chữ cái. Để tạo danh sách kiểu này chúng ta bắt đầu bằng cặp thẻ Ví dụ:
Như đã nói ở trên là bạn có thể sắp xếp danh sách theo chữ số hoặc chữ cái nên trong thẻ Ví dụ:
Kiểu danh sách không sắp xếp được bắt đầu bằng cặp thẻ Ví dụ:
Kiểu danh sách này cũng hỗ trợ bạn thay đổi kiểu các ký tự đánh dấu bằng thuộc style với thuộc tính CSS là list-style-type đi kèm với các giá trị disc, circle, square và none. Ví dụ:
Kiểu danh sách mô tả này khác với 2 kiểu trên đó là nó được bắt đầu bằng cặp thẻ Ví dụ:
Trong HTML, sẽ không đơn thuần là tạo 1 kiểu danh sách là hết mà bạn còn có thể lồng các kiểu danh sách vào với nhau để tạo thành 1 danh sách đa cấp. Để làm việc đó bạn chỉ cần chèn thêm 1 danh sách nữa vào giữa cặp thẻ Ví dụ:
Lời kết Việc tạo các danh sách trong HTML cũng khá đơn giản đúng không nào. Mà nói chung thì học HTML nó cũng không phải là cái gì đó quá khó học. Các bạn chỉ cần chịu khó theo dõi các bài viết trên NguyenHung.Net thì sẽ sớm làm dc 1 trang web HTML thôi. Chúc các bạn thành công!
Để tạo danh sách trong HTML bạn sẽ dùng các thẻ như UL, OL, LI. Tuy nhiên khi dùng lại có một vài vấn đề liên quan như trước thẻ li có dấu chấm làm sao để loại bỏ? Bài viết sau đây bạn sẽ hiểu rõ hơn về cách dùng của các thẻ này. Danh sách HTML (HTML List) có dạng như hình dưới Danh sách HTML không theo thứ tự với thẻ ULNếu bạn muốn show một list nào đó không theo thứ tự nhất định thì dùng thẻ
Danh sách HTML có thứ tự với thẻ OLĐể hiển thị một danh sách có thứ tự từ 1 cho tới 10 vv… thì bạn dùng thẻ ol.
Thẻ LI trong HTMLThuộc tính ký tự này cho biết kiểu đánh số:
Ví dụ:
Bỏ dấu chấm thẻ liĐể bỏ chấm thẻ li bạn dùng mã CSS sau: ul li { list-style-type: none; }Nhưng bạn cần lưu ý rằng khi đưa vào website nếu dùng y chang như trên nó sẽ ảnh hưởng toàn bộ thẻ li. Để ảnh hưởng tới một thẻ li ở vị trí mà bạn muốn bỏ thì thêm Class ở trong ul.
Và mã CSS: .menuList li { list-style-type: none; }Thẻ li kiểu hình tròn, vuôngNếu muốn hiển thị kiểu tròn bạn dùng mã CSS li { list-style-type: circle; }Còn hình vuông li { list-style-type: square; }Vậy là qua bài học này bạn đã biết được thẻ ul, ol và li về cách sử dụng như thế nào rồi đấy. Chúc bạn học tập thật tốt và đừng quên ghé thăm quachquynh.com để đón đọc nhiều bài viết hay về HTML.
- Trong ngôn ngữ HTML, danh sách được chia ra làm hai loại cơ bản:
- Để tạo một cái danh sách có thứ tự thì chúng ta sử dụng cú pháp như sau:
Ví dụ:
- Dưới đây là danh sách một số thuộc tính thường được sử dụng bên trong thẻ
(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính)
3) Cách tạo danh sách không có thứ tự- Để tạo một cái danh sách không có thứ tự thì chúng ta sử dụng cú pháp như sau:
Ví dụ: - Lưu ý: Khi chúng ta tạo một cái danh sách không có thứ tự thì chỉ mục của các danh mục bên trong danh sách sẽ có kiểu mặc định là dấu chấm tròn màu đen. Nếu muốn thiết lập lại kiểu chỉ mục cho các danh mục thì chúng ta cần phải sử dụng thuộc tính type. - Dưới đây là những giá trị có thể áp dụng cho thuộc tính type:
4) Danh sách hai cấp- Thật ra thì danh sách hai cấp là một dạng mở rộng của danh sách thông thường, danh mục bên trong danh sách có thể là một cái danh sách khác.
Ví dụ: - Danh sách bên dưới chính là một cái danh sách hai cấp, nhìn kỹ thì các bạn sẽ thấy danh mục thứ ba chính là một cái danh sách (danh sách này gồm có hai danh mục: Ajax, jQuery)
- Để tạo một cái danh sách hai cấp thì chúng ta chỉ cần chèn đoạn mã của cái danh sách cấp hai nằm tại vị trí danh mục của cái danh sách cấp một là được.
Ví dụ: - Lưu ý: Với cùng quy tắc này thì chúng ta cũng có thể tạo ra danh sách ba cấp, bốn cấp, . . . .
Ví dụ:
- Thông thường, khi chúng ta tạo một cái danh sách có thứ tự thì chỉ mục của các danh mục bên trong danh sách sẽ có kiểu mặc định là các số nguyên (1, 2, 3, . . . .) - Tuy nhiên, với việc sử dụng thuộc tính type thì chúng ta có tùy chỉnh kiểu chỉ mục cho các danh mục. - Cú pháp: type="value"- Trong đó, value có thể được xác định dựa theo một trong các giá trị như sau:
|