Thẻ danh sách trong HTML

HTML cung cấp cho các nhà phát triển web ba cách để chỉ định danh sách thông tin. Tất cả các danh sách phải chứa một hoặc nhiều phần tử con trong danh sách. Có 3 kiểu danah sách:

  • <ul> – Một danh sách không có thứ tự. Điều này sẽ liệt kê các mục của bạn bằng dấu chấm đầu dòng đơn giản.
  • <ol> – Một danh sách có thứ tự. Điều này sẽ sử dụng các lược đồ số khác nhau để liệt kê các mục của bạn.
  • <dl> – Một danh sách định nghĩa. Điều này sắp xếp các mục của bạn theo cách giống như chúng được sắp xếp trong từ điển.

     1. Danh sách không có thứ tự trong HTML (<ul>)

Danh sách không có thứ tự là một tập hợp các mục liên quan không có thứ tự hoặc trình tự đặc biệt. Danh sách này được tạo bằng cách sử dụng thẻ  <ul> trong HTML . Mỗi mục trong danh sách được đánh dấu bằng dấu chấm đầu dòng.

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ul>
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ul>
   </body>
   
</html>

See the Pen qBZqBmZ by DavidKhai (@davidkhai) on CodePen.dark

 

Thuộc tính:

Bạn có thể sử dụng thuộc tính type cho thẻ <ul> để chỉ định loại dấu đầu dòng bạn thích. Theo mặc định, nó là một dấu chấm đên. Sau đây là các tùy chọn bạn có thể tham khảo:

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = “square”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ul type = "square">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ul>
   </body>
   
</html>

See the Pen eYZBYEq by DavidKhai (@davidkhai) on CodePen.dark

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = “disk”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ul>
   </body>
   
</html>

See the Pen yLOVLzr by DavidKhai (@davidkhai) on CodePen.dark

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = “circle”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ul type = "circle">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ul>
   </body>
   
</html>

See the Pen gOrLOXo by DavidKhai (@davidkhai) on CodePen.dark

 

     2. Danh sách có thứ tự trong HTML (<ol>)

Nếu bạn được yêu cầu đặt các mục của mình trong một danh sách được đánh số thay vì đánh dấu đầu dòng, thì danh sách có thứ tự HTML sẽ được sử dụng. Danh sách này được tạo bằng cách sử dụng thẻ <ol> . Việc đánh số bắt đầu từ một và được tăng lên một cho mỗi phần tử danh sách có thứ tự liên tiếp được gắn thẻ <li>.

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol>
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>

See the Pen rNeWNJN by DavidKhai (@davidkhai) on CodePen.dark

 

Thuộc tính:

Bạn có thể sử dụng thuộc tính type cho thẻ <ol> để chỉ định kiểu đánh số mà bạn thích. Theo mặc định, nó là một số. Sau đây là các tùy chọn mà bạn có thể tham khảo:

<ol type = "1"> - Kiểu số
<ol type = "I"> - Kiểu số La Mã in hoa.
<ol type = "i"> - Kiểu số La Mã in thường.
<ol type = "A"> - Kiểu chữ cái từ A-Z in hoa.
<ol type = "a"> - Kiểu chữ cái từ a-z in thường.

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “1”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "1">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>

See the Pen zYqoYav by DavidKhai (@davidkhai) on CodePen.dark

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “I”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>

See the Pen rNeWNra by DavidKhai (@davidkhai) on CodePen.dark

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “i”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>

See the Pen bGpBGjm by DavidKhai (@davidkhai) on CodePen.dark

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “A”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>

See the Pen GRZNRXx by DavidKhai (@davidkhai) on CodePen.dark

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “a”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>

See the Pen oNxYNaW by DavidKhai (@davidkhai) on CodePen.dark

 

Thuộc tính bắt đầu:

Bạn có thể sử dụng thuộc tính start cho thẻ <ol> để chỉ định điểm bắt đầu đánh số mà bạn cần. Sau đây là các tùy chọn mà bạn có thể tham khảo:

<ol type = "1" start = "4">    - Bắt đầu bằng con số "4"
<ol type = "I" start = "4">    - Bắt đầu bằng chữ La Mã in hoa "IV".
<ol type = "i" start = "4">    - Bắt đầu bằng chữ La Mã in thường "iv".
<ol type = "a" start = "4">    - Bắt đầu bằng chữ cái in thường "d".
<ol type = "A" start = "4">    - Bắt đầu bằng chữ cái in hoa "D".

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>

See the Pen GRZNRPd by DavidKhai (@davidkhai) on CodePen.dark

 

     3. Danh sách định nghĩa trong HTML

HTML và XHTML hỗ trợ một kiểu danh sách được gọi là danh sách định nghĩa nơi các mục nhập được liệt kê giống như trong từ điển. Danh sách định nghĩa là cách lý tưởng để trình bày bảng thuật ngữ, danh sách các thuật ngữ hoặc danh sách tên / giá trị khác.

Danh sách định nghĩa sử dụng ba thẻ sau:

  • <dl> – Xác định đầu danh sách
  • <dt> – Một thuật ngữ
  • <dd> – Định nghĩa thuật ngữ
  • </dl> – Xác định phần cuối của danh sách

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về danh sách định nghĩa trong HTML</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>
Đây là viết tắt của Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>Đây là viết tắt của Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

See the Pen PoNboLB by DavidKhai (@davidkhai) on CodePen.dark

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *