Bài 17: Danh sách trong HTML

Danh sách trong HTML

Danh sách không sắp xếp và danh sách sắp xếp trong HTML

Danh sách không sắp xếp:

  • Mục a
  • Mục b
  • Mục c
  • Mục d

Danh sách sắp xếp:

  1. Mục 1
  2. Mục 2
  3. Mục 3
  4. Mục 4

Danh sách không sắp xếp trong HTML

Danh sách không sắp xếp theo thứ tự bắt đầu với thẻ <ul>. Mỗi mục trong danh sách bắt đầu với thẻ <li>.

Các mục của danh sách sẽ được đánh dấu bằng các kí hiệu đầu mục ( mặc định là vòng tròn nhỏ màu đen).

Ví dụ 1:

<ul>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>

Xem ví dụ 1

Danh sách không sắp xếp trong HTML – Các kiểu thuộc tính

Thuộc tính style có thể được thêm vào danh sách không sắp xếp, để định kiểu cua đầu mục: 

Kiểu Mô tả
list-style-type:disc Danh sách các mục sẽ được đánh dấu mặc định
list-style-type:circle Danh sách các mục sẽ được đánh dấu bằng vòng tròn
list-style-type:square Danh sách các mục sẽ được đánh dấu bằng hình vuông
list-style-type:none Danh sách các mục sẽ không được đánh dấu

Disc:

<ul style=“list-style-type:disc”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>

Xem ví dụ 2

Circle:

<ul style=“list-style-type:circle”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>

Xem ví dụ 3

Square:

<ul style=“list-style-type:square”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ul>

Xem ví dụ 4:

None:

<ul style=“list-style-type:none”>
<li>Cà phê</li>
<li>Trà</lí>
<li>Sữa</li>
</ul>

Xem ví dụ 5

Danh sách sắp xếp trong HTML

Danh sách sắp xếp thứ tự bắt đầu bằng thẻ <ol>. Mỗi mục trong danh sách bắt đầu bằng thẻ <li>.

Danh sách các mục sẽ được đánh dấu bằng các số:

Ví dụ 6:

<ol>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 6

Danh sách sắp xếp – Các kiểu thuộc tính

Thuộc tính type có thể được thêm vào danh sách sắp xếp, để xác định kiểu của đầu mục dấu:

Kiểu Mô tả
type=”1″ Danh sách các mục sẽ được đánh số với các số ở đây là mặc định
type=”A” Danh sách các mục sẽ được đánh số với các chữ hoa
type=”a” Danh sách các mục sẽ được đánh số với các chữ thường
type=”I” Danh sách các mục sẽ được đánh số với  số La mã hoa
type=”i” Danh sách các mục sẽ được đánh số với số La mã thường

Kiểu số:

<ol type=“1”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 7

Kiểu chữ in hoa:

<ol type=“A”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</lì>
</ol>

Xem ví dụ 8

Kiểu chữ thường:

<ol type=“a”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 9

Kiểu số La mã hoa:

<ol type=“I”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 10

Kiểu số La mã thường:

<ol type=“i”>
<li>Cà phê</li>
<li>Trà</li>
<li>Sữa</li>
</ol>

Xem ví dụ 11

Mô tả danh sách trong HTML

Ngoài 2 kiểu danh sách sắp xếp và không sắp xếp như ở trên thì HTML còn hỗ trợ thêm kiểu danh sách mô tả.

Danh sách mô tả 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ả..

Thẻ <dl> Xác định danh sách mô tả, thẻ <dt> Xác định tên danh sách, và thẻ <dd> xác định mô tả cho danh sách.

Ví dụ 12:

<dl>
<dt>Cà phê</dt>
<dd>– một loai đồ uống nóng màu đen</dd>
<dt>Sữa</dt>
<dd>– một loại đồ uống lạnh màu trắng</dd>
</dl>

Xem ví dụ 12

Danh sách lồng nhau trong HTML

Danh sách có thể được lồng trong nhau (Danh sách bên trong danh sách):

Ví dụ 13:

<ul>
<li>Cà phê</li>
<li>Trà</li>
<ul>
<li>Trà đen</li>
<li>Trà xanh</li>
</ul>
</li>
<li>Sữa</li>
</ul>

Xem ví dụ 13

Note Danh sách mục có thể chứa danh sách mới và các thẻ HTML khác như các ảnh, các liên kết, v.v.

Danh sách theo chiều ngang

Danh sách trong HTML được định kiểu theo nhiều cách khác nhau  với CSS.

Một trong những kiểu phổ biến là tạo một kiểu danh sách hiển thị theo chiều ngang:

Ví dụ 14:

<!DOCTYPE html>
<html><head>
<style>
ul#menu li {
display:inline;
}
</style>
</head><body><h2>Danh sách theo chiều ngang</h2><ul id=“menu”>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul></body>
</html>

Xem ví dụ 14

Bổ xung một chút CSS vào kiểu danh sách, bạn có thể thay đổi và thấy nó như một menu:

Ví dụ 15

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;
}

Xem ví dụ 15

Tóm tắt bài học:

  • Sử dụng phần tử <ul> trong HTML để định nghĩa một danh sách không sắp xếp
  • Sử dụng thuộc tính style trong HTML để xác định kiểu đầu mục
  • Sử dụng phần tử <ol> trong HTML để định nghĩa một danh sách sắp xếp
  • Sử dụng thuộc tính type trong HTML để xác định kiểu số dùng cho đầu mục
  • Sử dụng phần tử <li> trong HTML để xác định các mục của danh sách
  • Sử dụng phần tử <dl> trong HTML để định nghĩa một danh sách mô tả
  • Sử dụng phần tử <dt> trong HTML để xác định tên trong danh sách mô tả
  • Sử dụng phần tử <dd> trong HTML để xác định dữ liệu mô tả
  • Các danh sách có thể lồng nhau
  • Các mục của danh sách có thể chứa các phần tử khác của HTML
  • Sử dụng thuộc tính display:inline trong CSS để hiển thị danh sách theo chiều ngang

Danh sách thẻ HTML

Thẻ Mô tả
<ul> Định nghĩa danh sách không sắp xếp
<ol> Định nghĩa danh sách sắp xếp
<li> Định nghĩa các mục của danh sách
<dl> Định nghĩa danh sách mô tả
<dt> Xác định các thuật ngữ ( tên) trong danh sách mô tả
<dd> Xác định các mô tả trong danh sách đó

 

Các thẻ:

Có thể bạn sẽ thích…

1 phản hồi

Trả lời