Chương 2-Bài 13. Các thẻ (tag) tạo Danh sách (list)

Danh sách CÓ THỨ TỰ (Ordered List)

Sử dụng thẻ <ol></ol>, mỗi phần tử là một cặp thẻ <li></li>

Ví dụ:

<h3>Danh sách có thứ tự - Sắp xếp 1 2 3</h3>
<ol type="1">
  <li>Phần tử thứ 1</li>
  <li>Phần tử thứ 2</li>
  <li>Phần tử thứ 3</li>
</ol>

<h3>Danh sách có thứ tự - Sắp xếp A B C</h3>
<ol type="A">
  <li>Phần tử thứ 1</li>
  <li>Phần tử thứ 2</li>
  <li>Phần tử thứ 3</li>
</ol>

<h3>Danh sách có thứ tự - Sắp xếp La mã</h3>
<ol type="I">
  <li>Phần tử thứ 1</li>
  <li>Phần tử thứ 2</li>
  <li>Phần tử thứ 3</li>
</ol>

 

---

Danh sách KHÔNG THỨ TỰ (Unordered List)

Sử dụng thẻ <ul></ul>, mỗi phần tử là một cặp thẻ <li></li>

Ví dụ:

<h3>Danh sách không thứ tự - Dạng Square</h3>
<ul type="square">
  <li>Phần tử thứ 1</li>
  <li>Phần tử thứ 2</li>
  <li>Phần tử thứ 3</li>
</ul>

<h3>Danh sách không thứ tự - Dạng Disc</h3>
<ul type="disc">
  <li>Phần tử thứ 1</li>
  <li>Phần tử thứ 2</li>
  <li>Phần tử thứ 3</li>
</ul>

<h3>Danh sách không thứ tự - Dạng Circle</h3>
<ul type="circle">
  <li>Phần tử thứ 1</li>
  <li>Phần tử thứ 2</li>
  <li>Phần tử thứ 3</li>
</ul>

---

Danh sách TỰ ĐỊNH NGHĨA (Defined List)

Sử dụng thẻ <dl></dl>, mỗi phần tử là 2 cặp thẻ <dt></dt><dd></dd> Ví dụ:

<dl>
    <dt>Hello</dt>
    <dd>Xin chào ...</dd>

    <dt>Goodbye</dt>
    <dd>Tạm biệt...</dd>
</dl>

---

Bài tập 1: tạo danh sách lồng vào nhau như sau:

<ul>
    	<li>Trang chủ</li>
        <li>Giới thiệu
            <ul>
            	<li>Lịch sử phát triển</li>
                <li>Hệ thống chi nhánh</li>
                <li>Hình thức thanh toán</li>
            </ul>
        </li>
        <li>Liên hệ</li>
        <li>Góp ý</li>
        <li>Danh sách sản phẩm</li>
        <li>Giỏ hàng</li>
        <li>Đăng nhập</li>
        <li>Đăng ký</li>
</ul>

---

Bài tập 2:

<ol>
        <li><strong>Quá trình hình thành</strong>
            <ul type="square">
                <li>Từ tháng 01/2012 đến 03/2012: Quá trình hoàn thiện hệ thống cửa hàng</li>
                <li>Tháng 03/2012: Chính thức khai trương website NenTang.vn</li>
            </ul>
        </li>

        <li><strong>Đội ngũ nhân sự</strong>
            <ul type="square">
                <li>Phòng kiểm soát nội bộ</li>
                <li>Khối tài chính</li>
                <li>Khối hành chính nhân sự</li>
            </ul>
        </li>
    </ol>