Hay sử dụng các thẻ ul ol>

Ví dụ:

1. Danh sách 1
2. Danh sách 2
3. Danh sách 3

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ẻ 

chúng ta sẽ phải thêm thuộc tính type để thiết lập kiểu sắp xếp. Giá trị của thuộc tính type là 1, a, A, i, I.

Ví dụ:

1. Danh sách 1
2. Danh sách 2
3. Danh sách 3

Kiểu danh sách không sắp xếp được bắt đầu bằng cặp thẻ 

và bên trong cũng được khai báo bởi cặp thẻ
 .

Ví dụ:

• Danh sách 1
• Danh sách 2
• Danh sách 3

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ụ:

• Danh sách 1
• Danh sách 2
• Danh sách 3

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à các danh sách bên trong được khai báo bằng cặp thẻ  và sẽ có thêm đoạn mô tả cho chúng nằm trong cặp thẻ  .

Ví dụ:

HTML Tạo nên cấu trúc trang web CSS Để trang trí cho web Javascript Thêm hiệu ứng cho web

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ẻ 

là được.

Ví dụ:

• Back-End
  1. PHP
  2. Python
  3. .Net
• Front-End
  1. HTML
  2. CSS
  3. Javascript

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ẻ UL

Nếu bạn muốn show một list nào đó không theo thứ tự nhất định thì dùng thẻ

. Bên trong nó chứa thẻ
• Học PHP
• Học CSS
• Học HTML5

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.

1. PHP Learn
2. CSS3 Learn
3. HTML5 Learn

Thẻ LI trong HTML

Thuộc tính ký tự này cho biết kiểu đánh số:

• a: chữ viết thường
• A: chữ in hoa
• i: chữ số La mã viết thường
• I: chữ số La mã viết hoa
• 1: số

Ví dụ:

1. List 1
2. List 2
3. List 3

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.

• PHP Learn
• CSS3 Learn
• HTML5 Learn

Và mã CSS:

.menuList li { list-style-type: none; }

Thẻ li kiểu hình tròn, vuông

Nế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.

- Tính đến thời điểm này thì chắc khái niệm danh sách không còn là một thứ gì xa lạ đối với các bạn nữa, chúng ta thường gặp nó trong cuộc sống hàng ngày, điển hình như tập hợp tên của tất cả các món ăn được liệt kê bên trong thực đơn chính là một cái danh sách. - Danh sách là một tập hợp gồm nhiều danh mục, phía trước mỗi danh mục sẽ có một cái chỉ mục để đánh dấu thứ tự cho danh mục. - Ví dụ: Cái danh sách nằm bên trái có tổng cộng bảy danh mục, phía trước các danh mục sẽ có chỉ mục lần lượt là 1, 2, 3, 4, 5, 6, 7

- Trong ngôn ngữ HTML, danh sách được chia ra làm hai loại cơ bản:

Danh sách có thứ tự	- DANH SÁCH CÓ THỨ TỰ là loại danh sách mà chỉ mục của các danh mục có sự phân biệt rõ ràng, mặc định được sắp xếp theo thứ tự tăng dần dựa theo kiểu chỉ mục. -Ví dụ, cả ba cái danh sách bên dưới đều thuộc loại có thứ tự.
Danh sách không có thứ tự	- DANH SÁCH KHÔNG CÓ THỨ TỰ là loại danh sách mà chỉ mục của tất cả các danh mục đều có chung một kiểu. - Ví dụ, cả ba danh sách bên dưới đều thuộc loại không có thứ tự:

- Để tạo một cái danh sách có thứ tự thì chúng ta sử dụng cú pháp như sau:

1. Tên danh mục 1
2. Tên danh mục 2
3. Tên danh mục 3
....

Ví dụ:

1. HTML
2. CSS
3. JavaScript
Xem 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]

type	- Tùy chỉnh kiểu chỉ mục của các danh mục.
reversed	- Đảo ngược thứ tự chỉ mục của các danh mục.
start	- Xác định thứ tự bắt đầu của chỉ mục đầu tiên.

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:

• Tên danh mục 1
• Tên danh mục 2
• Tên danh mục 3
....

Ví dụ:

• HTML
• CSS
• JavaScript
Xem 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:

disc	- Chỉ mục sẽ có kiểu là một dấu chấm tròn màu đen [mặc định]	Xem ví dụ
circle	- Chỉ mục sẽ có kiểu là một dấu chấm tròn màu trắng viền đen.
square	- Chỉ mục sẽ có kiểu là một ô vuông màu đen.
none	- Không hiển thị chỉ mục.

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]

• HTML
• CSS
• PHP & MySQL

- Để 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ụ:

• HTML
• CSS
• Ajax
• jQuery
• PHP & MySQL
Xem 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ụ:

• CHƯƠNG 1
• BÀI SỐ 1
• Câu hỏi 1
• Câu hỏi 2
• BÀI SỐ 2
• Đáp án 1
• Đáp án 2
• CHƯƠNG 2
• BÀI SỐ 1
• BÀI SỐ 2
Xem 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:

1	- Chỉ mục sẽ có kiểu là các số nguyên [1, 2, 3, . . .]	Xem ví dụ
a	- Chỉ mục sẽ có kiểu là các chữ cái viết thường [a, b, c, . . .]
A	- Chỉ mục sẽ có kiểu là các chữ cái viết hoa [A, B, C, . . .]
i	- Chỉ mục sẽ có kiểu là các số la mã viết thường [i, ii, iii, . . .]
I	- Chỉ mục sẽ có kiểu là các số la mã viết hoa [I, II, III, . . .]

Video liên quan