Hướng dẫn sử dụng HTML List

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

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

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 list-style-type

Thuộc tính (property) CSS list-style-type được sử dụng cho thẻ <UL> (Unordered List) để thiết lập kiểu dáng cho các mục (item) của danh sách.
CSS list-style-type có thể nhận một trong các giá trị:
  • disc
  • circle
  • square
  • none
ul-styles-example.html
<h3>list-style-type: dist (Default)</h3>

<ul style="list-style-type: dist;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: circle</h3>

<ul style="list-style-type: circle;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: square</h3>

<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: none</h3>

<ul style="list-style-type: none;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

4- CSS list-style-image

Thuộc tính (property) CSS list-style-image được sử dụng cho thẻ <UL> để hiển thị hình ảnh thay thế cho các ::marker.
Chú ý: list-style-image được ưu tiên hơn so với list-style-type. Nếu hình ảnh được cung cấp bởi list-style-image không tồn tại hoặc không thể hiển thị list-style-type sẽ được sử dụng.
<ul style="list-style-image: URL('../../_testdatas_/right-arrow-16.png')">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

5- CSS list-style-position

Thuộc tính (property) CSS list-style-position được sử dụng cho thẻ <UL>, <OL> để thiết lập vị trí của các ::marker.
Các giá trị có thể của CSS list-style-position:
  • outside
  • inside
  • initial
  • inherit
list-style-position Mô tả
outside Các ::marker sẽ nằm ngoài các mục (item) của danh sách.
inside Các ::marker sẽ nằm trong các mục (item) của danh sách.
list-style-position-example.html
<h3>list-style-position: outside (Default)</h3>

<ul style="list-style-position: outside">
    <li>
        Coffee - A brewed drink prepared from roasted coffee beans,
        which are the seeds of berries from the Coffea plant
    </li>
    <li>
        Tea - An aromatic beverage commonly prepared by pouring hot
        or boiling water over cured leaves of the Camellia sinensis,
        an evergreen shrub (bush) native to Asia
    </li>
</ul>

<h3>list-style-position: inside</h3>

<ul style="list-style-position: inside">
    <li>
        Coffee - A brewed drink prepared from roasted coffee beans,
        which are the seeds of berries from the Coffea plant
    </li>
    <li>
        Tea - An aromatic beverage commonly prepared by pouring hot
        or boiling water over cured leaves of the Camellia sinensis,
        an evergreen shrub (bush) native to Asia
    </li>
</ul>

6- CSS margin, padding

Hình ảnh dưới đây cho thấy cấu trúc của HTML List, và bạn có thể sử dụng CSS để thay đổi margin/padding của nó.
Ví dụ tùy biến margin/padding của HTML List:
margin-padding-example.css
ul {
  background: #3399ff;
  padding: 20px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

ol {
  background: #ff9999;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
margin-padding-example.html
<!DOCTYPE html>
<html>

<head>
    <title>CSS List</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="margin-padding-example.css" />
</head>

<body>

    <h3>ul {padding: 20px;} ul li {margin: 5px}</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>

    <h3>ol {padding: 20px;} ol li {margin-left: 35px; padding: 5px;}</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>

</body>

</html>

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