Ví dụ và cách sử dụng list (danh sách) trong HTML.

Danh sách trong HTML

Trong HTML bạn có thể tạo được danh sách Không Theo Thứ Tự (Unordered list), danh sách Theo Thứ Tự (Ordered list) và danh sách Miêu Tả (Description list)

Không theo thứ tự

Nội dung một
Nội dung hai
Nội dung ba
Nội dung bốn

Theo thứ tự

Nội dung một
Nội dung hai
Nội dung ba
Nội dung bốn

Miêu tả

Nội dung một: – Miêu tả cho nội dung một
Nội dung hai: – Miêu tả cho nội dung hai

Danh sách không theo thứ tự trong HTML

Danh sách không theo thứ tự bắt đầu bằng thẻ <ul>. Mỗi nội dung trong danh sách bắt đầu bằng thẻ <li>.

Nội dung của danh sách sẽ được đánh dấu bằng một vòng tròn nhỏ màu đen

<ul>

</ul>

Danh sách không theo thứ tự – thuộc tính style

Thuộc tính style được thêm vào danh sách không theo thứ tự để thay đổi cách đánh dấu nội dung:

Thuộc tính style	Miêu tả
list-style-type:disc	Nội dung sẽ được đánh dấu bằng một chấm tròn màu đen (Mặc định)
list-style-type:circle	Nội dung sẽ được đánh dấu bằng một vòng tròn
list-style-type:square	Nội dung sẽ được đánh dấu bằng một hình vuông
list-style-type:none	Nội dung sẽ không được đánh dấu

Chấm tròn

<!DOCTYPE html>

<html>

<body>

<h2>Danh sách không theo thứ tự được đánh dấu bằng dấu chấm tròn</h2>

</ul>

</body>

</html>

Demo

Hình tròn

<!DOCTYPE html>

<html>

<body>

<h2>Danh sách không theo thứ tự được đánh dấu bằng hình tròn</h2>

</ul>

</body>

</html>

Demo

Hình vuông

<!DOCTYPE html>

<html>

<body>

<h2>Danh sách không theo thứ tự được đánh dấu bằng hình vuông</h2>

</ul>

</body>

</html>

Demo

Bỏ đánh dấu

<!DOCTYPE html>

<html>

<body>

<h2>Bỏ đánh dấu danh sách không theo thứ tự</h2>

</ul>

</body>

</html>

Demo

Bạn cũng có thể sử dụng thuộc tính type : <ul type=”disc”>, cách thức làm việc cũng tương tự như <ul style=”list-style-type:disc”>.

Nhưng trong HTML5, thuộc tính type không sử dụng trong danh sách Không Theo Thứ Tự mà chỉ được sử dụng trong danh sách Theo Thứ Tự.

Danh sách Theo Thứ Tự trong HTML

Danh sách không theo thứ tự bắt đầu bằng thẻ <ol>. Mỗi nội dung trong danh sách bắt đầu bằng thẻ <li>.

Nội dung của danh sách sẽ được đánh dấu bằng số hoặc chữ.

<!DOCTYPE html>

<html>

<body>

<ol>

</ol>

</body>

</html>

Demo

Danh sách theo thứ tự – Thuộc tính Type

Thêm thuộc tính type vào danh sách Theo Thứ Tự để quy định cách đánh dấu nội dung :

Kiểu	Miêu tả
type="1"	Danh sách được đánh dấu bằng số
type="A"	Danh sách được đánh dấu bằng chữ in hoa
type="a"	Danh sách được đánh dấu bằng chữ in thường
type="I"	Danh sách được đánh dấu bằng ký tự La Mã hoa
type="i"	Danh sách được đánh dấu bằng ký tự La Mã thường

Đánh dấu danh sách bằng số

<!DOCTYPE html>

<html>

<body>

</ol>

</body>

</html>

Demo

Đánh dấu danh sách bằng chữ hoa

<!DOCTYPE html>

<html>

<body>

</ol>

</body>

</html>

Demo

Đánh dấu danh sách bằng chữ thường

<!DOCTYPE html>

<html>

<body>

<h2>Đánh dấu danh sách bằng chữ thường</h2>

</ol>

</body>

</html>

Demo

Đánh dấu danh sách bằng chữ La Mã hoa

<!DOCTYPE html>

<html>

<body>

</ol>

</body>

</html>

Demo

Đánh dấu danh sách bằng chữ La Mã thường

<!DOCTYPE html>

<html>

<body>

<h2>Đánh dấu danh sách bằng chữ La Mã thường</h2>

</ol>

</body>

</html>

Demo

Danh sách Miêu Tả trong HTML

Danh sách Miêu tả bao gồm nhiều chủ đề, mỗi chủ đề có miêu tả đi kèm.

Thẻ <dl> sử dụng để tạo một danh sách miêu tả.

Thẻ <dt> dùng để tạo chủ đề và thẻ <dd> sử dụng để miêu tả về chủ đề đó.

<!DOCTYPE html>

<html>

<body>

<dl>

<dd>- Đồ uống lạnh và màu trắng</dd>

</dl>

</body>

</html>

Demo

Lồng ghép các danh sách

Các danh sách có thể được lồng ghép vào với nhau (danh sách trong danh sách):

<!DOCTYPE html>

<html>

<body>

<ul>

<li>Trà

<ul>

</ul>

</li>

</ul>

</body>

</html>

Demo

Danh sách có thể chứa một danh sách khác hoặc các thành phần của HTML như ảnh, liên kết …

Danh sách ngang

Danh sách trong HTML có thể được trang trí theo rất nhiều cách bằng CSS.

Cách phổ biến là trang trí danh sách hiển thị theo chiều ngang:

<!DOCTYPE html>

<html>

<head>

<style>

ul#menu li {

display:inline;

}

</style>

</head>

<body>

<h2>Danh sách ngang</h2>

</ul>

</body>

</html>

Demo

Chỉ cần thêm một vài dòng trang trí, danh sách sẽ hiển thị giống như một menu:

<!DOCTYPE html>

<html>

<head>

<style>

ul#menu {

padding: 0;

}

ul#menu li {

display: inline;

}

ul#menu li a {

background-color: black;

color: white;

padding: 10px 20px;

text-decoration: none;

border-radius: 4px 4px 0 0;

}

ul#menu li a:hover {

background-color: orange;

}

</style>

</head>

<body>

<h2>Hiển thị danh sách ngang như một menu</h2>

</ul>

</body>

</html>

Demo

Tổng kết bài học

Sử dụng thẻ <ul> trong HTML để tạo danh sách Không Theo Thứ Tự
Sử dụng thuộc tính style để thay đổi cách trang trí danh sách Không Theo Thứ Tự
Sử dụng thẻ <ol> trong HTML để tạo danh sách Theo Thứ Tự
Sử dụng thuộc tính type để thay đổi cách trang trí danh sách Theo ThứTự
Sử dụng thẻ <li> trong HTML để tạo từng phần tử trong danh sách
Sử dụng thẻ <dl> trong HTML để tạo danh sách Miêu Tả
Sử dụng thẻ <dt> trong HTML để tạo chủ đề trong danh sách Miêu Tả
Sử dụng thẻ <dd> trong HTML để tạo miêu tả cho chủ đề trong danh sách Miêu Tả
Danh sách có thể chứa một danh sách khác
Danh sách có thể chứa những thành phần HTML khác
Sử dụng thuộc tính display:inline trong CSS để hiển thị danh sách theo chiều ngang

Bài tập

Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4 Bài tập 5 Bài tập 6

« Bài Trước Bài Tiếp »

WebVN Cộng đồng web Việt Nam

Leave a Reply Cancel reply