HTML – Danh sách

96
HTML – Danh sách

Có 3 cách để xác định danh sách trong HTML. Tất cả các danh sách phải chứa một hoặc nhiều phần tử list. Danh sách có thể gồm:

  • <ul> : danh sách không thứ tự.
  • <ol> : danh sách theo thứ tự.
  • <dl> : danh sách định nghĩa.

Danh sách không thứ tự

Là loại danh sách chưa được sắp xếp thứ tự. Để tạo loại danh sách này bạn sử dụng thẻ <ul>. Mỗi mục trong danh sách là một bullet.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

Kết quả:

HTML – Danh sách - 01

Thuộc tính type

Bạn có thể sử dụng thuộc tính type cho thẻ <ul> để xác định kiểu của bullet mà bạn thích. Theo mặc định nó có hình dạng chiếc đĩa tròn (disc). Có các tùy chọn kiểu cho bạn sử dụng:

<ul type="square">
<ul type="disc">
<ul type="circle">

Ví dụ type = “disc”:

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

Kết quả:

HTML – Danh sách - 02

Ví dụ type = “square”:

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

Kết quả:

HTML – Danh sách - 03

Ví dụ type = “circle”:

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

Kết quả:

HTML – Danh sách - 04

Danh sách có thứ tự

Đây là loại danh sách được xếp theo thứ tự số thay vì sử dụng các bullet. Danh sách này được tạo bởi thẻ <ol>. Thứ tự số bắt đầu từ 1 và tăng thêm một cho các mục tiếp theo với thẻ <li>.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

Kết quả:

HTML - Danh sách - 12

Thuộc tính type

Thuộc tính type của thẻ <ol> xác định kiểu của loại thứ tự số mà bạn thích. Theo mặc định, nó là một số. Dưới đây là các tùy chọn có thể:

<ol type="1"> - 1 nhỏ.
<ol type="I"> - I la mã.
<ol type="i"> - i la mã nhỏ.
<ol type="a"> - a nhỏ.
<ol type="A"> - A lớn.

Ví dụ type = “1”

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="1">
<li>Tí</li>
<li>Sửu</li>
<li>Dần</li>
<li>Mẹo</li>
</ol>
</body>
</html>

Kết quả:

HTML – Danh sách - 05

Ví dụ type=”I”:

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="I">
<li>Tí</li>
<li>Sửu</li>
<li>Dần</li>
<li>Mẹo</li>
</ol>
</body>
</html>

Kết quả:

HTML – Danh sách - 06

Ví dụ type=”i”:

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i">
<li>Tí</li>
<li>Sửu</li>
<li>Dần</li>
<li>Mẹo</li>
</ol>
</body>
</html>

Kết quả:

HTML – Danh sách - 07

Ví dụ type=”A”:

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="A">
<li>Tí</li>
<li>Sửu</li>
<li>Dần</li>
<li>Mẹo</li>
</ol>
</body>
</html>

Kết quả:

HTML – Danh sách - 08

Ví dụ type=”a”:

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="a">
<li>Tí</li>
<li>Sửu</li>
<li>Dần</li>
<li>Mẹo</li>
</ol>
</body>
</html>

Kết quả:

HTML – Danh sách - 09

Thuộc tính start

Thuộc tính start của thẻ <ol> xác định điểm bắt đầu của dãy số bạn muốn. Dưới đây là các tùy chọn có thể:

<ol type="1" start="4"> - Bắt đầu bằng 4.
<ol type="I" start="4"> - Bắt đầu bằng IV.
<ol type="i" start="4"> - Bắt đầu bằng iv.
<ol type="a" start="4"> - Bắt đầu là d.
<ol type="A" start="4"> - Bắt đầu là D.

Ví dụ <ol type=”i” start=”4″ >

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="1" start="4">
<li>Thìn</li>
<li>Tị</li>
<li>Ngọ</li>
<li>Mùi</li>
</ol>
</body>
</html>

Kết quả:

HTML – Danh sách - 10

Description Lists

Description lists là kiểu hiển thị danh sách mà các mục con của nó sẽ không được đánh dấu thứ tự, nhưng sẽ có kèm theo một đoạn miêu tả.

Danh sách định nghĩa sử dụng 3 thẻ theo sau:

<dl> - Xác định phần bắt đầu của danh sách
<dt> - Xác định một mục
<dd> - Miêu tả mục
</dl> - Xác định phần kết thúc của danh sách

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>

Kết quả:

HTML – Danh sách - 11