Danh sách trong HTML

Ví dụ

 

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>

 

 

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>

 

 

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>

 

 

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ả

 

Tác giả: Nguyễn Văn Hợi

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.

Lên trên