Ví dụ
.png)
Danh sách không có thứ tự
Một danh sách không có thứ tự bắt đầu với thẻ <ul>. Mỗi mục trong danh sách bắt đầu với thẻ <li>.
Danh mục sẽ được đánh dấu bằng các chấm tròn nhỏ theo mặc định.
Chọn kiểu đánh dấu
Thuộc tính CSS list-style-type được dùng để xác định kiểu đánh dấu
|
Giá trị |
Mô tả |
|
Disc |
Đặt kiểu đánh dấu là chấm tròn (mặc định) |
|
Circle |
Đặt kiểu đánh dấu là hình tròn |
|
Square |
Đặt kiểu đánh dấu là hình vuông |
|
None |
Danh sách sẽ không được đánh dấu |
Ví dụ
<ul>
<li style="list-style-type: disc">Disc</li>
<li style="list-style-type: circle">Circle</li>
<li style="list-style-type: square">Square</li>
<li style="list-style-type: none">None</li>
</ul>
.png)
Danh sách có thứ tự - Thuộc tính type
Thuộc tính type của thẻ <ol> xác định kiểu đánh dấu của danh sách:
|
Type |
Mô tả |
|
type="1" |
Danh sách sẽ được đánh dấu bằng số (mặc định) |
|
type="A" |
Danh sách sẽ được đánh dấu bằng chữ cái in hoa |
|
type="a" |
Danh sách sẽ được đánh dấu bằng chữ cái thường |
|
type="I" |
Danh sách sẽ được đánh dấu bằng chữ La Mã in hoa |
|
type="i" |
Danh sách sẽ được đánh dấu bằng chữ La Mã thường |
Ví dụ
Kiểu số
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Kiểu chữ in hoa
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Kiểu chữ thường
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Kiểu chữ La Mã in hoa
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Kiểu chữ La Mã thường
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Danh sách mô tả trong HTML
HTML cũng hỗ trợ danh sách dùng để mô tả.
Một danh sách mô tả là một danh sách các thuật ngữ, với mô tả cho mỗi thuật ngữ.
Thẻ <dl> xác định danh xách mô tả, thẻ <dt> xác định thuật ngữ(tên) và thẻ <dd> mô tả từng thuật ngữ.
Ví dụ
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Danh sách lồng nhau
Danh sách có thể được lồng (danh sách bên trong danh sách)
Ví dụ
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
.png)
Note: Thẻ <li> có thể bao gồm một danh sách mới, hoặc một phần tử HTML như hình ảnh, liên kết, v.v
Điều khiển bộ đếm của danh sách
Mặc định, một danh sách có thứ tự sẽ bắt đầu đếm từ 1. Nếu bạn muốn bắt đầu từ một số cụ thể thì có thể dùng thuộc tính start.
Ví dụ
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Tạo danh sách ngang với CSS
Một danh sách trong HTML có thể được style nhiều cách khác nhau với CSS.
Một cách phổ biến là style danh sách ngang, để tạo menu điều hướng:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
.png)
Tổng kết chương
- Dùng phần tử <ul> để xác định một danh sách không có thứ tự
- Dùng thuộc tính CSS list-style-type để xác định kiểu đánh dấu danh sách
- Dùng phần tử <ol> để xác định một danh sách có thứ tự
- Dùng thuộc tính type để chọn kiểu đánh số cho danh sách có thứ tự
- Dùng phần tử <li> để xác định một danh mục
- Dùng phần tử <dl> để xác định một danh sách mô tả
- Dùng phần tử <dt> để xác định thuật ngữ (tên)
- Dùng phần tử <dd> để mô tả thuật ngữ trong danh sách
- Danh sách có thể được lồng trong danh sách khác
- Danh sách có thể chứa các phần tử HTML khác
- Sử dụng thuộc tính CSS float:left hoặc display:inline để hiển thị danh sách theo chiều ngang
Bảng tham khảo
|
Thẻ |
Mô tả |
|
<ul> |
Xác định một danh sách không có thứ tự |
|
<ol> |
Xác định một danh sách có thứ tự |
|
<li> |
Xác định một danh mục |
|
<dl> |
Xác định một danh mục mô tả |
|
<dt> |
Xác định một thuật ngữ (tên) |
|
<dd> |
Mô tả một thuật ngữ trong danh sách mô tả |
Trích nguồn từ: (https://www.w3schools.com/html/html_lists.asp)
