Thẻ <ol> trong HTML
1) Giới thiệu các loại danh sách trong HTML
- Trong HTML có hai loại danh sách cơ bản:
- Danh sách có thứ tự.
- Danh sách không có thứ tự.
1.1) Danh sách có thứ tự
- Danh sách có thứ tự là loại danh sách mà "chỉ mục" của các danh mục trong danh sách sẽ có thứ tự.
- Ví dụ: Bên dưới là một số mẫu danh sách có thứ tự.
|
|
|
1.2) Danh sách không có thứ tự
- Danh sách không có thứ tự là loại danh sách mà "chỉ mục" của các danh mục trong danh sách đều có chung một kiểu.
- Ví dụ: Bên dưới là một số mẫu danh sách không có thứ tự.
|
|
|
2) Thẻ <ol> trong HTML
- Thẻ <ol> dùng để xác định một "danh sách có thứ tự"
- Tuy nhiên, để tạo các danh mục trong danh sách thì phải sử dụng kết hợp với thẻ <li>.
- Thẻ <li> phải được đặt bên trong phần tử <ol>.
- Dưới đây là đoạn mã dùng để tạo một danh sách có thứ tự
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>MySQL</li>
<li>PHP</li>
</ol>
Xem ví dụ
3) Các thuộc tính của thẻ <ol>
- Thẻ <ol> có ba thuộc tính thường hay được sử dụng nhất.
- Dưới đây là bảng mô tả sơ lược về ba thuộc tính đó:
type | Xác định "kiểu chỉ mục" cho các danh mục trong danh sách |
reversed | Đảo ngược thứ tự chỉ mục của các danh mục trong danh sách |
start | Xác định "thứ tự bắt đầu" của chỉ mục của danh mục đầu tiên trong danh sách |
3.1) Thuộc tính type
- Thuộc tính type dùng để xác định "kiểu chỉ mục" cho các danh mục trong danh sách.
- Thuộc tính type có năm giá trị cơ bản:
1 |
|
(đây là kiểu mặc định của danh sách có thứ tự) |
a |
|
|
A |
|
|
i |
|
|
I |
|
- Lưu ý: Ngoài việc sử dụng thuộc tính type của thẻ <ol> để xác định kiểu chỉ mục cho các danh mục trong danh sách thì chúng ta cũng có thể dùng thuộc tính list-style-type trong CSS để thay thế.
- Tuy nhiên, giá trị của thuộc tính list-style-type trong CSS tương đối khác so với giá trị của thuộc tính type trong thẻ <ol>
decimal |
|
lower-alpha |
|
upper-alpha |
|
lower-roman |
|
upper-roman |
|
<ul style="list-style-type:upper-alpha">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Xem ví dụ
3.2) Thuộc tính reversed
- Thuộc tính reversed dùng để đảo ngược thứ tự chỉ mục của các danh mục trong danh sách.
3.3) Thuộc tính start
- Thuộc tính start xác định "thứ tự bắt đầu" của chỉ mục của danh mục đầu tiên trong danh sách.
<ol type="a" start="3">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySQL</li>
</ol>
Xem ví dụ
4) Định dạng CSS mặc định
- Hầu hết các trình duyệt sẽ hiển thị phần tử <ol> với định dạng CSS như sau:
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}