Hướng dẫn và ví dụ HTML Lists

Xem thêm các chuyên mục:

Các hướng dẫn HTML

HTML Lists
Ordered-List Attributes
CSS Lists

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

1- HTML Lists

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>

2- Ordered-List Attributes

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>

3- CSS Lists

CSS Lists

Xem thêm các chuyên mục:

Các hướng dẫn HTML