Danh sách (list) trong HTML

Bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về bảng (table) trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về danh sách (list) trong HTML.

danh sach (list) trong html

Danh sách (list) trong HTML

Có 3 cách để chỉ định danh sách thông tin trong HTML. Tất cả các danh sách phải chứa một nhiều phần tử danh sách (list). Danh sách có thể chứa:

danh sach list trong html

Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết các kiểu danh sách (list) trong HTML.
 

Mục Lục bài viết:
1. Kiểu danh sách không sắp xếp (unordered list) trong HTML
    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
2. Kiểu danh sách sắp xếp (ordered list) trong HTML
    2.1. Chỉ định kiểu ký tự đánh dấu các mục trong danh sách sắp xếp
3. Danh sách kiểu mô tả trong HTML
4. Danh sách lồng trong HTML
5. Chỉ định số thứ tự đánh dấu các mục trong danh sách
6. Tạo danh sách theo chiều ngang
7. Tổng kết

1. Kiểu 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 bằng thẻ ul. Mỗi mục trong danh sách bắt đầu bằng thẻ li.
Các mục trong danh sách được liệt kê bằng ký tự chấm tròn đen nhỏ theo mặc định.
Ví dụ: Dưới đây minh họa kiểu danh sách không sắp xếp trong HTML:

danh sach list trong html 2

Kết quả trả về sau khi áp dụng kiểu danh sách không sắp xếp có dạng như dưới đây:

danh sach list trong html 3

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 chúng ta sử dụng thuộc tính CSS list-style-type.

danh sach list trong html 4

Ví dụ 1: Trong ví dụ dưới đây chúng ta 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:

danh sach list trong html 5

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 6

Ví dụ 2: Trong ví dụ dưới đây chúng ta 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:

danh sach list trong html 7

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 8

Ví dụ 3: Trong ví dụ dưới đây chúng ta 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:

danh sach list trong html 9

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 10

Ví dụ 4: Trong ví dụ dưới đây chúng ta chỉ định 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:

danh sach list trong html 11

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 12

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 bắt đầu bằng thẻ ol. Các mục trong danh sách bắt đầu bằng thẻ li.
Mặc định các mục trong danh sách được đánh dấu bằng số thứ tự.
Ví dụ: Bưới đây là ví dụ minh họa kiểu danh sách sắp xếp trong HTML:

danh sach list trong html 13

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 14

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, chúng ta sử dụng thuộc tính type của thẻ ol.

danh sach list trong html 15

danh sach list trong html 16

Ví dụ 1: Trong ví dụ dưới đây chúng ta chỉ định đánh dấu các mục trong danh sách sắp xếp bằng số thứ tự:

danh sach list trong html 17

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 18

Ví dụ 2: Trong ví dụ dưới đây chúng ta 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:

danh sach list trong html 19

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 20

Ví dụ 3: Trong ví dụ dưới đây chúng ta 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:

danh sach list trong html 21

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 22

Ví dụ 4: Trong ví dụ dưới đây chúng ta 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:

danh sach list trong html 23

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 24

Ví dụ 5: trong ví dụ dưới đây chúng ta 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:

danh sach list trong html 25

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 26

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ả, các mục, thuật ngữ sẽ có kèm theo một đoạn miêu tả.

Thẻ dl 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ụ: tham khảo ví dụ minh họa danh sách kiểu mô tả trong HTML dưới đây:

danh sach list trong html 27

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 28

4. Danh sách lồng trong HTML

Ngoài kiểu danh sách không được sắp xếp, kiểu danh sách sắp xếp và danh sách kiểu mô tả, trong HTML còn có kiểu danh sách lồng, tức là danh sách này lồng trong danh sách kia.

Ví dụ: dưới đây là ví dụ minh họa danh sách lồng trong HTML:

danh sach list trong html 29

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 30

Lưu ý: các mục trong danh sách có thể chứa danh sách mới 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 kiểu 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 bằng 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à ví dụ minh họa cách chỉ định số thứ tự đánh dấu các mục trong danh sách trong HTML:

danh sach list trong html 31

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 32

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. Đơn giản nhất là tạo kiểu 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 cách tạo menu điều hướng trong HTML:

danh sach list trong html 33

Kết quả trả về có dạng như dưới đây:

danh sach list trong html 34

7. Tổng kết

danh sach list trong html 35

- Danh sách trong HTML có thể lồng 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.

https://thuthuat.taimienphi.vn/danh-sach-list-trong-html-50615n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn danh sách (list) trong HTML giúp bạn tìm hiểu và học HTML tốt hơn. Trong các bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về phần tử Block trong HTML nhé.

Tác giả: Lộc Ngô     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Thẻ định dạng văn bản trong HTML
Thẻ định dạng đoạn văn bản trong HTML
Responsive Web Design trong HTML
Danh sách các thuộc tính trong HTML
Thuộc tính id trong HTML, thẻ ID
Từ khoá liên quan:

Danh sách (list) trong HTML

, danh sách trong HTML, HTML,

SOFT LIÊN QUAN
  • HTML Creator

    Phần mềm thiết kế web cho người mới

    HTML Creator là phần mềm dành cho người mới học HTML, hỗ trợ người dùng tạo webpage cơ bản kèm theo thiết bị đơn giản mà không cần viết mã (code). Mục đích cuối cùng của người học khi sử dụng HTML Creator là làm quen với cấu trúc khối của ngôn ngữ HTML và xem mã HTML tương ứng trông ra sao khi tạo trang.

Tin Mới

  • Sự khác nhau giữa JSON và XML

    XML (Extensible Markup Language) và JSON (JavaScript Object Notation) là 2 định dạng trao đổi dữ liệu phổ biến nhất hiện nay. So sánh JSON và XML, sự khác nhau giữa JSON và XML là gì? Cùng theo dõi bài viết dưới đây để tìm hiểu nhé.

  • Danh sách (list) trong HTML

    Bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về bảng (table) trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về danh sách (list) trong HTML.

  • Thẻ img trong HTML

    Trên các trang web đều sử dụng hình ảnh minh họa để làm nổi bật nội dung, đồng thời để tránh người dùng cảm thấy khó chịu vì text quá dài. Trong HTML hình ảnh được chỉ định bằng thẻ img. Tham khaor tiếp bài viết dưới

  • Vai trò của công nghệ đối với đời sống con người, bài văn mẫu hay nhất

    Với bài thảo luận Vai trò của công nghệ đối với đời sống con người Ngữ văn 7, Kết nối tri thức, học kì II, các em cần nêu được các mặt tốt và mặt