openplanning

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

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

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

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

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.