Hướng dẫn và ví dụ HTML Lists
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
Trong HTML để tạo ra một danh sách (List) bạn có thể sử dụng cặp thẻ <ul>, <li> hoặc cặp thẻ <ol>, <li>:
<h3>Unordered List (UL + LI)</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<h3>Ordered List (OL + LI)</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
- <UL> là từ viết tắt của Unordered List, giúp bạn tạo ra một danh sách không có thứ tự.
- <OL> là từ viết tắt của Ordered List, giúp bạn tạo ra một danh sách có thứ tự.
- <LI> là từ viết tắt của List Item. Một mục (item) của danh sách.
Các danh sách có thể lồng vào với nhau:
nested-example.html
<h3>Nested Unordered List</h3>
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Basic CSS</li>
<li>Advanced CSS</li>
</ul>
</li>
<li>Javascript</li>
</ul>
<h3>Nested Ordered List</h3>
<ol>
<li>HTML</li>
<li>CSS
<ol>
<li>Basic CSS</li>
<li>Advanced CSS</li>
</ol>
</li>
<li>Javascript</li>
</ol>
<h3>Nested List (3)</h3>
<ol>
<li>HTML</li>
<li>CSS
<ul>
<li>Basic CSS</li>
<li>Advanced CSS</li>
</ul>
</li>
<li>Javascript</li>
</ol>
<h3>Nested List (4)</h3>
<ul>
<li>HTML</li>
<li>CSS
<ol>
<li>Basic CSS</li>
<li>Advanced CSS</li>
</ol>
</li>
<li>Javascript</li>
</ul>
Khác với thẻ <UL>, thẻ <OL> có một vài thuộc tính (attribute) quan trọng, chúng bao gồm:
- type
- start
- reversed
type
Thuộc tính type chỉ định kiểu đánh số (numbering type), nó có thể nhận một trong các giá trị sau:
| Type | Mô tả |
| "1" | Sử dụng các con số (1,2,..) để đánh số cho danh sách. (Mặc định) |
| "a" | Sử dụng các ký tự viết thường (lowercase) để đánh số cho danh sách. |
| "A" | Sử dụng các ký tự viết hoa (uppercase) để đánh số cho danh sách. |
| "i" | Sử dụng các số La mã (Roman numerals) viết thường (lowercase) để đánh số cho danh sách. |
| "I" | Sử dụng các số La mã (Roman numerals) viết hoa (uppercase) để đánh số cho danh sách. |
<h3>OL type="1" (Default)</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<h3>OL type="i"</h3>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<h3>OL type="I"</h3>
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<h3>OL type="a"</h3>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<h3>OL type="A"</h3>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
reversed
Thuộc tính reversed có giá trị true/false, Nếu giá trị là true, danh sách sẽ được đánh số theo thứ tự đảo ngược.
ol-reversed-example.html
<h3>OL reversed = "false" (Default)</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<h3>OL reversed = "true"</h3>
<ol reversed="true">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
start
Thuộc tính start chỉ định giá trị bắt đầu để đánh số cho danh sách.
ol-start-example.html
<h3>OL start ="3" type="1"</h3>
<ol start="3">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<h3>OL start ="3" type="i"</h3>
<ol start="3" type="i">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<h3>OL start ="3" type="a"</h3>
<ol start="3" type="a">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
*
