Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
Tiếp nối chuỗi bài viết về lập trình web cơ bản với HTML, thì trong bài viết hôm nay tôi sẽ đề cập đến các thẻ định dạnh danh sách (ul, ol, li) trong HTML. Các thẻ danh sách là những thẻ được sử dụng khá phổ biến trong một trang web ví dụ như tạo menu trang web, thể hiện danh sách có cùng tính chất v.v.

Giới thiệu

Tiếp nối chuỗi bài viết về lập trình web cơ bản với HTML, thì trong bài viết hôm nay tôi sẽ đề cập đến các thẻ định dạnh danh sách (ul, ol, li) trong HTML. Các thẻ danh sách là những thẻ được sử dụng khá phổ biến trong một trang web ví dụ như tạo menu trang web, thể hiện danh sách có cùng tính chất v.v. 

Tiền đề bài viết

Bài viết nằm trong CHƯƠNG TRÌNH TỰ HỌC HTML của stdio.vn.

Đối tượng hướng đến

Những lập lập trình viên bắt đầu với lập trình web cơ bản với HTML và đã xem qua những bài viết trước trong chuỗi bài viết HTML.

Danh sách có thứ tự

Danh sách có thứ tự (Ordered List) trong HTML định nghĩa bởi cặp thẻ đóng mở <ol></ol>. Và mỗi item trong ol được định nghĩa bởi thẻ <li> (list item).

Ví dụ danh sách một số tác giả các tác giả của stdio.vn:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 3: Các Thẻ Định Dạng Danh Sách</title>
	</head>
	<body>
		<h3>Danh sách một số tác giả của stdio.vn</h3>
		<ol>
			<li>Kevin La</li>
			<li>Taco Nguyen</li>
			<li>Brian Vu</li>
			<li>Nguyễn Nghĩa</li>
			<li>Hoàng Thái</li>
			<li>Phan Khôi Nguyên</li>
		</ol>
	</body>
</html>

Kết quả chạy với trình duyệt

ss_1

Một ví dụ khác về danh sách các bài viết HTML

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 3: Các Thẻ Định Dạng Danh Sách</title>
	</head>
	<body>
		<h3>Danh sách các bài viết về lập trình web HTML</h3>
		<ol>
			<li>HTML - Phần 1: Cơ Bản Về HTML.</li>
			<li>HTML - Phần 2: Các Thẻ Định Dạng Văn Bản.</li>
			<li>HTML - Phần 3: Các Thẻ Định Dạng Danh Sách.</li>
			<li>HTML - Phần 4: Thẻ Liên Kết HTML.</li>
			<li>HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio.</li>
			<li>HTML - Phần 6: Các Thẻ Input trong HTML.</li>
			<li>HTML - Phần 7: Thẻ Table Trong HTML.</li>
			<li>HTML - Phần 8: Thẻ Form Trong HTML.</li>
		</ol>
	</body>
</html>

Kết quả

ss_2

Mặc định thì các item trong danh sách sẽ được sắp xếp theo số thứ tự tăng dần bắt đầu tử 1. Thẻ ol có một thuộc tính type giúp chúng ta xác định danh sách sẽ được sắp sếp như thế nào. Chi tiết được mô tả ở bảng sau:

Type Description
type="1" Các item trong danh sách sẽ được sắp sếp theo thứ tự tăng dần (mặc định).
type="A"  Các item trong danh sách sẽ được sắp xếp tăng dần theo bảng chữ cái viết hoa.
type="a" Các item trong danh sách sẽ được sắp xếp tăng dần theo bảng chữ cái viết thường.
type="I" Các item trong danh sách sẽ được sắp xếp theo kí tự La Mã viết in hoa.
type="i"  Các item trong danh sách sẽ được sắp xếp theo kí tự La Mã viết thường.

Thử lại với ví dụ trên với thuộc tính type của <ol>type="a"

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 3: Các Thẻ Định Dạng Danh Sách</title>
	</head>
	<body>
		<h3>Danh sách một số tác giả của stdio.vn</h3>
		<ol type="a">
			<li>Kevin La</li>
			<li>Taco Nguyen</li>
			<li>Brian Vu</li>
			<li>Nguyễn Nghĩa</li>
			<li>Hoàng Thái</li>
			<li>Phan Khôi Nguyên</li>
		</ol>
	</body>
</html>

Và kết quả sẽ như sau

ss_3

Các bạn hãy thử từng giá trị của type để hiễu rõ hơn.

Danh sách không thứ tự

Cũng tương tự như danh sách có thứ tự <ol> (Ordered List) thì danh sách không có thứ tự (UnOrdered List) được định nghĩa bởi cặp thẻ đóng mở <ul></ul> với mỗi item trong danh sách được định nghĩa bởi thẻ <li> (list item).

Ví dụ danh sách các CHƯƠNG TRÌNH TỰ HỌC của stdio.vn

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 3: Các Thẻ Định Dạng Danh Sách</title>
	</head>
	<body>
		<h3>Danh sách các chương trình tự học của stdio.vn</h3>
		<ul>
			<li>Chương trình tự học C++</li>
			<li>Chương trình tự học Cocos2d-x</li>
			<li>Chương trình tự học Unity</li>
			<li>Chương trình tự học HTML</li>
		</ul>
	</body>
</html>

Kết quả thấy được khi chạy với trình duyệt

ss_4

Các bạn thấy rằng giữa danh sách có thứ tự vào danh sách không có thứ tự chỉ khác nhau là danh sách có thứ tự thì các item trong danh sách được sắp xếp theo một quy luật nào đó dựa vào thuộc tính type của thẻ ol còn danh sách không có thứ tự thì không.

Nâng cao

Ở hai phần trên các bạn đã hiểu được cách sử dụng danh sách có thứ tự ol và danh sách không có thứ tự ul. Ở phần này tôi sẽ đi sâu hơn một chút về hai loại danh sách này cũng như cách sử dụng kết hợp giữa hai loại danh sách này.

Mỗi li (list item) có thể chứa một danh sách (có thể là danh sách có thứ tự hay là danh sách không có thứ tự).

Ví dụ Danh sách một số bài viết của tác giả Kevin La và tác giả Nguyễn Nghĩa:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 3: Các Thẻ Định Dạng Danh Sách</title>
	</head>
	<body>
		<h3>Danh sách một số bài viết của tác giả Kevin La và tác giả Nguyễn Nghĩa.</h3>
		<ol>
			<li>Kevin La
				<ul>
					<li>Gửi SMS Và Thực Hiện Cuộc Gọi Từ Android </li>
					<li>Blur - Ý Tưởng Và Giải Thuật Làm Mờ Ảnh Đơn Giản</li>
					<li>C++14 - Generic Lambda</li>
				</ul>
			</li>
			<li>Nguyễn Nghĩa
				<ul>
					<li>Struct Alignment Trong C++</li>
					<li>Các Thao Tác Trên Bit</li>
				</ul>
			</li>
		</ol>
	</body>
</html>

Và kết quả sẽ như sau:

ss_5

Cách bạn có thể định nghĩa danh sách nhiều cấp (ví dụ trên là cấp 2). Nhưng thông thường chỉ dừng lại ở cấp thứ 3.

Lời kết

Qua bài viết các thẻ danh sách trong HTML tôi đã giới thiệu cho các bạn các thẻ danh sách (danh sách không tứ tự và danh sách thứ tự) cũng như cách sử dụng chúng như thế nào. Qua bài viết này tôi mong rằng các bạn có thể hiểu được rõ ràng những danh sách này và luyện tập viết lại những danh sách do mình nghĩ ra để có kết quả cao nhất.

 

THẢO LUẬN