Danh sách có thứ tự trong HTML

(9)
141 lượt xem
Share

Danh sách trong HTML có hai loại, một là danh sách có thứ tự, hai là danh sách không có thứ tự. Hôm nay, eLib.VN sẽ cùng bạn đọc tìm hiểu về danh sách có thứ tự trong HTML qua bài viết dưới đây.

Mục lục nội dung

Danh sách có thứ tự trong HTML

1. Danh sách có thứ tự trong HTML

Danh sách có thứ tự trong HTML hay còn gọi là danh sách được đánh số trong HTML. Mặc định tất cả các mục của danh sách được đánh dấu bằng các con số tăng dần. Danh sách có thứ tự bắt đầu với thẻ <ol> và các mục danh sách bắt đầu bằng thẻ <li>. Danh sách đánh số có 5 kiểu như sau:

  • Kiểu số (1, 2, 3)
  • Kiểu số La Mã (I, II, III)
  • Kiểu số La Mã thường (i, ii, iii)
  • Kiểu chữ hoa (A, B, C)
  • Kiểu chữ thường (a, b, c)

Để biển diễn 5 kiểu trên ta phải sử dụng thuộc tính type trong thẻ <ol>

Type Description
type="1" Đây là kiểu mặc định, ở đó các danh mục được đánh bằng các con số.
type="I" Với kiểu này, danh mục được đánh bằng các ký tự La Mã.
type="i" Với kiểu này, danh mục được đánh bằng các ký tự La Mã thường.
type="A" Với kiểu này, danh mục được đánh bằng các ký tự chữ hoa.
type="a" Với kiểu này, danh mục được đánh bằng các ký tự chữ thường.

2. Các ví dụ về danh sách có thứ tự trong HTML

Dưới đây là 5 ví dụ về hiển thị danh sách có thứ tự trong HTML có sử dụng thuộc tính type như mô tả bên trên.

Ví dụ 1: type mặc định

<ol> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li>  
 <li>SQL</li> 
</ol>

Kết quả:

Ví dụ 2: type="I"

<ol type="I"> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li>  
 <li>SQL</li> 
</ol>

Kết quả:

Ví dụ 3: type="i"

<ol type="i"> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li>  
 <li>SQL</li> 
</ol>

Kết quả:

Ví dụ 4: type="A"

<ol type="A"> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li>  
 <li>SQL</li> 
</ol>

Kết quả:

Ví dụ 5: type="a"

<ol type="a"> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li>  
 <li>SQL</li> 
</ol>

Kết quả:

3. Thuộc tính start

Thuộc tính start của thẻ ol được sử dụng để xác định danh mục bắt được được đánh số hay ký tự từ bao nhiêu, giá trị của start phải là một chữ số.

<ol type="1" start="5"> : giá trị bắt đầu là "5".

<ol type="A" start="5"> : giá trị bắt đầu là "E".

<ol type="a" start="5"> : giá trị bắt đầu là "e".

<ol type="I" start="5"> : giá trị bắt đầu là "V".

<ol type="i" start="5"> : giá trị bắt đầu là "v".

Ví dụ:

<ol type="a" start="5">  
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li> 
 <li>SQL</li> 
</ol>

Kết quả:

Trên đây là bài viết của eLib.VN về Danh sách có thứ tự trong HTML. Thường thì những danh sách được áp dụng trong việc tạo menu trong thiết kế web. Kiến thức khá đơn giản nên bạn đọc cần lưu tâm và thực hành thật nhiều để thuần thục hơn. Chúc các bạn thành công!

(9)
141 lượt xem
Share
Ngày:07/11/2020 Chia sẻ bởi:Xuân Quỳnh
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM