Buzz
Tìm hiểu về danh sách (list) trong HTML
Có ba cách để tạo danh sách trong HTML. Mỗi danh sách cần chứa nhiều phần tử. Danh sách có thể bao gồm:
Tiếp tục đọc bài viết dưới đây của Mytour để hiểu rõ hơn về các loại danh sách (list) trong HTML.
1. Danh sách không sắp xếp (unordered list) trong HTML
1.1. Đặt ký tự đánh dấu cho mỗi mục trong danh sách không sắp xếp
2. Danh sách sắp xếp (ordered list) trong HTML
2.1. Đặt ký tự đánh dấu cho mỗi mục trong danh sách sắp xếp
3. Danh sách mô tả trong HTML
4. Danh sách lồng trong HTML
5. Đánh số thứ tự cho mỗi mục trong danh sách
6. Tạo danh sách theo chiều ngang
7. Tóm tắt
1. Danh sách không sắp xếp (unordered list) trong HTML
Danh sách không sắp xếp (unordered list) bắt đầu với thẻ ul. Mỗi mục trong danh sách sẽ được bắt đầu với thẻ li.
Các mục trong danh sách sẽ được liệt kê bằng ký tự chấm tròn đen nhỏ theo mặc định.
Ví dụ: Dưới đây là minh họa cho danh sách không sắp xếp trong HTML:
Kết quả sau khi thực hiện kiểu danh sách không sắp xếp sẽ có dạng như sau:
1.1 Chỉ định kiểu ký tự đánh dấu các mục trong danh sách không sắp xếp
Để chỉ định kiểu ký tự đánh dấu các mục trong danh sách không sắp xếp trong HTML, ta sử dụng thuộc tính CSS list-style-type.
Ví dụ 1: Trong ví dụ dưới đây, ta sẽ chỉ định đánh dấu các mục trong danh sách không sắp xếp bằng ký tự chấm tròn đen:
Kết quả trả về sẽ có dạng như sau:
Ví dụ 2: Trong ví dụ này, chúng ta sẽ chỉ định đánh dấu các mục trong danh sách không sắp xếp bằng ký tự hình tròn:
Kết quả trả về sẽ hiển thị như sau:
Ví dụ 3: Trong ví dụ này, chúng ta sẽ chỉ định đánh dấu các mục trong danh sách không sắp xếp bằng ký tự hình vuông:
Kết quả trả về sẽ hiển thị như sau:
Ví dụ 4: Trong ví dụ này, chúng ta sẽ không sử dụng ký tự nào để đánh dấu các mục trong danh sách không sắp xếp trong HTML:
Kết quả trả về sẽ có dạng như sau:
2. Kiểu danh sách sắp xếp (ordered list) trong HTML
Kiểu danh sách sắp xếp (ordered list) trong HTML sẽ được bắt đầu bằng thẻ ol. Các mục trong danh sách sẽ bắt đầu bằng thẻ li.
Mặc định, các mục trong danh sách sẽ được đánh dấu bằng số thứ tự.
Ví dụ: Dưới đây là một ví dụ minh họa về kiểu danh sách sắp xếp trong HTML:
Kết quả trả về sẽ có dạng như sau:
2.1 Chỉ định kiểu ký tự đánh dấu các mục trong danh sách sắp xếp
Để chỉ định kiểu ký tự đánh dấu các mục trong danh sách sắp xếp, ta sử dụng thuộc tính type của thẻ ol.
Ví dụ 1: Trong ví dụ này, chúng ta sẽ chỉ định đánh dấu các mục trong danh sách sắp xếp bằng số thứ tự:
Kết quả trả về sẽ có dạng như sau:
Ví dụ 2: Trong ví dụ này, chúng ta sẽ chỉ định đánh dấu các mục trong danh sách sắp xếp bằng ký tự chữ cái viết hoa:
Kết quả trả về sẽ hiển thị như sau:
Ví dụ 3: Trong ví dụ này, chúng ta sẽ chỉ định đánh dấu các mục trong danh sách sắp xếp bằng ký tự chữ cái viết thường:
Kết quả trả về sẽ có dạng như sau:
Ví dụ 4: Trong ví dụ này, chúng ta sẽ chỉ định đánh dấu các mục trong danh sách sắp xếp bằng ký tự chữ La Mã viết hoa:
Kết quả trả về sẽ hiển thị như sau:
Ví dụ 5: Trong ví dụ này, chúng ta sẽ chỉ định đánh dấu các mục trong danh sách sắp xếp bằng ký tự chữ La Mã viết thường:
Kết quả trả về sẽ có dạng như sau:
3. Danh sách kiểu mô tả trong HTML
Ngoài 2 kiểu danh sách không sắp xếp và kiểu danh sách sắp xếp, HTML còn hỗ trợ danh sách kiểu mô tả.
Trong danh sách kiểu mô tả, mỗi mục và thuật ngữ sẽ đi kèm với một đoạn miêu tả.
Thẻ dl được sử dụng để chỉ định danh sách kiểu mô tả, thẻ dt để chỉ định thuật ngữ (tên) và thẻ dd để mô tả từng thuật ngữ.
Ví dụ: Xem ví dụ minh họa về danh sách kiểu mô tả trong HTML dưới đây:
Kết quả trả về sẽ hiển thị như sau:
4. Danh sách lồng trong HTML
Ngoài các loại danh sách không sắp xếp, sắp xếp và kiểu mô tả, HTML còn hỗ trợ danh sách lồng, tức là một danh sách có thể nằm trong danh sách khác.
Ví dụ: Dưới đây là một ví dụ về danh sách lồng trong HTML:
Kết quả trả về sẽ hiển thị như sau:
Lưu ý: Các mục trong danh sách có thể chứa các danh sách con và các phần tử HTML khác như hình ảnh, liên kết, ... .
5. Chỉ định số thứ tự đánh dấu các mục trong danh sách
Mặc định, số thứ tự trong danh sách sắp xếp bắt đầu từ số 1. Tuy nhiên, nếu muốn chỉ định bắt đầu từ số thứ tự bất kỳ, chúng ta có thể sử dụng thuộc tính start.
Ví dụ: Dưới đây là một ví dụ minh họa về cách chỉ định số thứ tự đánh dấu các mục trong danh sách trong HTML:
Kết quả trả về sẽ hiển thị như sau:
6. Tạo danh sách theo chiều ngang
Chúng ta có thể sử dụng các thuộc tính CSS khác nhau để tạo kiểu cho danh sách HTML. Một cách đơn giản là tạo danh sách theo chiều ngang để tạo menu điều hướng.
Ví dụ: Dưới đây là ví dụ minh họa về cách tạo menu điều hướng trong HTML:
Kết quả trả về sẽ hiển thị như sau:
7. Tóm tắt
- Trong HTML, danh sách có thể chứa nhau.
- Các mục trong danh sách có thể chứa các phần tử HTML khác.
- Sử dụng thuộc tính float:left hoặc display:inline trong CSS để hiển thị danh sách theo chiều ngang.
Bài viết trên đã giới thiệu về danh sách trong HTML, giúp bạn nắm vững kiến thức HTML hơn. Trong các bài viết tiếp theo, sẽ tiếp tục giới thiệu về phần tử Block trong HTML.
