Học HTML, Tất Cả Bài Viết, Tự Học Online

Danh sách trong HTML – Cách sử dụng và thuộc tính – Học HTML


Giới thiệu về danh sách trong HTML. Trong bài viết này chúng ta sẽ đi tìm hiểu về danh sách và hướng dẫn cách sử dụng các thuộc tính của danh sách <li> <ol> <dl> <ul> <dt> <dd>,…

Ví Dụ:

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ự

  1. Nội dung một
  2. Nội dung hai
  3. Nội dung ba
  4. Nội dung bốn

Miêu tả

Cà phê
– Đồ uống nóng và sẫm màu
Milk
– Đồ uống lạnh và màu trắng

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>
  <li>Nội dung một</li>
  <li>Nội dung hai</li>
  <li>Nội dung ba</li>
</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 styleMiêu tả
list-style-type:discNội dung sẽ được đánh dấu bằng một chấm tròn màu đen (Mặc định)
list-style-type:circleNội dung sẽ được đánh dấu bằng một vòng tròn
list-style-type:squareNội dung sẽ được đánh dấu bằng một hình vuông
list-style-type:noneNộ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 style="list-style-type:disc">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>
 
</body>
</html>

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 style="list-style-type:circle">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>
 
</body>
</html>

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 style="list-style-type:square">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>
 
</body>
</html>

Bỏ đánh dấu

<!DOCTYPE html>
<html>
<body>
 
<h2>Bỏ đánh dấu danh sách không theo thứ tự</h2>
 
<ul style="list-style-type:none">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>
 
</body>
</html>

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>
 
<h2>Danh sách Theo Thứ Tự</h2>
 
<ol>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>
 
</body>
</html>

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ểuMiê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>
 
<h2>Đánh dấu danh sách bằng số</h2>
 
<ol type="1">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>
 
</body>
</html>

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

<!DOCTYPE html>
<html>
<body>
 
<h2>Đánh dấu danh sách bằng chữ hoa</h2>
 
<ol type="A">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>
 
</body>
</html>

Đá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 type="a">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>
 
</body>
</html>

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

<!DOCTYPE html>
<html>
<body>
 
<h2>Đánh dấu danh sách bằng chữ La Mã hoa</h2>
 
<ol type="I">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>
 
</body>
</html>

Đá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 type="i">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>
 
</body>
</html>

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>
 
<h2>Danh sách miêu tả</h2>
 
<dl>
<dt>Cà phê</dt>
<dd>- Đồ uống nóng và sẫm màu</dd>
<dt>Milk</dt>
<dd>- Đồ uống lạnh và màu trắng</dd>
</dl>
 
</body>
</html>

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>
 
<h2>Danh sách lồng nhau</h2>
 
<ul>
<li>Cà phê</li>
<li>Trà
<ul>
<li>Trà đen</li>
<li>Trà xanh</li>
</ul>
</li>
<li>Sữa</li>
</ul>
 
</body>
</html>

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 id="menu">
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
<li>Nước Cam</li>
</ul>
 
</body>
</html>

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 id="menu">
<li><a href="/html/hoc-html/">Học HTML</a></li>
<li><a href="/thu-vien/thu-vien-html/">Thư viện HTML</a></li>
<li><a href="/thu-vien/thu-vien-html/thu-vien-su-kien/">Sự kiện HTML</a></li>
</ul>
 
</body>
</html>

Tổng kết

Trong bài viết này chúng ta đã biết đượ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

Nếu có thắc mắc hay góp ý về bài viết này hãy để lại bình luận cho tôi phía dưới nhé. Chúc các bạn học tốt với HTML Online ^^

Tagged , , , , , , , , , , , ,

About HoanTN

Cố gắng hơn nữa ....
View all posts by HoanTN →

Leave a Reply

Your email address will not be published. Required fields are marked *