Danh sách trong HTML

HTML cung cấp ba cách để chỉ định danh sách thông tin. Tất cả các danh sách phải chứa một hoặc nhiều thành phần danh sách. Danh sách có thể chứa:
  • <ul> - Một danh sách không có thứ tự. Nó sẽ liệt kê các mục bằng cách sử dụng bullet.
  • <ol> - Một danh sách được sắp xếp. Nó sẽ sử dụng các sơ đồ số khác nhau để liệt kê các mục.
  • <dl> - Một danh sách định nghĩa. Nó sắp xếp các mục của bạn theo cùng một cách chẳng hạn như sắp xếp theo thứ tự từ điển.

Danh sách không thứ tự

Một danh sách không có thứ tự là một tập hợp các mục liên quan không có thứ tự hoặc trình tự đặc biệt. Danh sách này được tạo bằng cách sử dụng thẻ <ul> . Mỗi mục trong danh sách được đánh dấu bằng một bullet.

  • Củ cải đường
  • Gừng
  • Khoai tây
  • Củ cải
<!DOCTYPE html>
<html>
<head>
<title> Danh sách không thứ tự HTML </title>
</head>
<body>
<ul>
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ul>
</body>
</html>

Các loại thuộc tính

Bạn có thể dùng thuộc tính type cho thẻ <ul> để chỉ định loại bullet bạn thích. Theo mặc định, nó là dạng tròn. Sau đây là các tùy chọn:

Sau đây là một ví dụ chúng ta đã sử dụng <ul type = "square">
danh sách trong html
<!DOCTYPE html>
<html>
<head>
<title> Danh sách không thứ tự HTML </title>
</head>
<body>
<ul type = "square">
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ul>
</body>
</html>
Sau đây là một ví dụ chúng ta đã sử dụng <ul type = "disc">
  • Củ cải đường
  • Gừng
  • Khoai tây
  • Củ cải
<!DOCTYPE html>
<html>
<head>
<title> Danh sách không thứ tự HTML </title>
</head>
<body>
<ul type = "disc">
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ul>
</body>
</html>
Sau đây là một ví dụ chúng ta đã sử dụng <ul type = "circle">
o Củ cải đường
o Gừng
o Khoai tây
o Củ cải

<!DOCTYPE html>
<html>
<head>
<title> Danh sách không thứ tự HTML </title>
</head>
<body>
<ul type = "circle">
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ul>
</body>
</html>

Danh sách có thứ tự

Nếu bạn được yêu cầu đặt các mục của mình vào danh sách được đánh số thay vì gạch đầu dòng, thì danh sách có thứ tự sẽ được sử dụng. Danh sách này được tạo bằng cách sử dụng thẻ <ol>. Việc đánh số bắt đầu ở một và được tăng thêm một cho mỗi phần tử danh sách được sắp xếp liên tiếp được gắn thẻ <li>.
1. Củ cải đường
2. Gừng
3. Khoai tây
4. Củ cải
<!DOCTYPE html>
<html>
<head>
<title> Danh sách có thứ tự HTML </title>
</head>
<body>
<ol>
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ol>
</body>
</html>

Các thuộc tính

Bạn có thể dùng thuộc tính type cho thẻ <ol> để chỉ định loại đánh số bạn thích. Theo mặc định, nó là số một. Sau đây là các tùy chọn:

Sau đây là một ví dụ chúng tôi đã sử dụng <ol type = "1">
1. Củ cải đường
2. Gừng
3. Khoai tây
4. Củ cải
<!DOCTYPE html>
<html>
<head>
<title> Danh sách có thứ tự HTML </title>
</head>
<body>
<ol type = "1">
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ol>
</body>
</html>
Sau đây là một ví dụ chúng ta sử dụng <ol type = "I">
I. Củ cải đường
II. Gừng
III. Khoai tây
IV. Củ cải
<!DOCTYPE html>
<html>
<head>
<title> Danh sách có thứ tự HTML </title>
</head>
<body>
<ol type = "I">
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ol>
</body>
</html>
Sau đây là một ví dụ chúng ta đã sử dụng <ol type = "i">
i. Củ cải đường
ii. Gừng
iii. Khoai tây
iv. Củ cải
<!DOCTYPE html>
<html>
<head>
<title> Danh sách có thứ tự HTML </title>
</head>
<body>
<ol type = "i">
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ol>
</body>
</html>
Sau đây là một ví dụ chúng ta sử dụng <ol type = "A">

A. Củ cải đường
B. Gừng
C. Khoai tây
D. Củ cải
<!DOCTYPE html>
<html>
<head>
<title> Danh sách có thứ tự HTML </title>
</head>
<body>
<ol type = "A">
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ol>
</body>
</html>
Sau đây là ví dụ chúng ta sử dụng <ol type = "a">
a. Củ cải đường
b. Gừng
c. Khoai tây
d. Củ cải
<!DOCTYPE html>
<html>
<head>
<title> Danh sách có thứ tự HTML </title>
</head>
<body>
<ol type = "a">
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ol>
</body>
</html>

Thuộc tính start

Bạn có thể dùng thuộc tính start cho thẻ <ol> để chỉ định điểm bắt đầu đánh số bạn cần. Sau đây là các tùy chọn:
<ol type = "1" start = "4"> - Chữ số bắt đầu bằng 4.
<ol type = "I" start = "4"> - Chữ số bắt đầu bằng IV.
<ol type = "i" start = "4"> - Chữ số bắt đầu bằng iv.
<ol type = "a" start = "4"> - Chữ cái bắt đầu bằng d.
<ol type = "A" start = "4"> - Chữ cái bắt đầu bằng D.
Sau đây là ví dụ chúng ta sử dụng <ol type = "i" start = "4">
4. Củ cải đường
5. Gừng
6. Khoai tây
7. Củ cải
<!DOCTYPE html>
<html>
<head>
<title> Danh sách có thứ tự HTML </title>
</head>
<body>
<ol type = "I" start = “4”>
<li> Củ cải đường </li>
<li> Gừng </li>
<li> Khoai tây </li>
<li> Củ cải </li>
</ol>
</body>
</html>

Danh sách định nghĩa

HTML và XHTML hỗ trợ kiểu danh sách được gọi là danh sách định nghĩa trong đó các mục được liệt kê như trong từ điển hoặc bách khoa toàn thư. Danh sách định nghĩa là cách lý tưởng để trình bày bảng chú giải, danh sách thuật ngữ hoặc danh sách tên/giá trị khác.

Danh sách định nghĩa sử dụng ba thẻ sau.
  • <dl> - Xác định bắt đầu danh sách
  • <dt> - Một thuật ngữ
  • <dd> - Định nghĩa thuật ngữ
  • </dl> - Xác định cuối danh sách

HTML
Đây là viết tắt của Hyper Text Markup Language
HTTP
Đây là viết tắt của Hyper Text Transfer Protocol
<!DOCTYPE html>
<html>
<head>
<title> Danh sách định nghĩa HTML </title>
</head>
<body>
<dl>
<dt> <b> HTML </b> </dt>
<dd> Đây là viết tắt của Hyper Text Markup Language </dd>
<dt> <b> HTTP </b> </dt>
<dd> Đây là viết tắt của Hyper Text Tranfer protocol </dd>
</dl>
</body>
</html>