[HTML] Bài 6: Nhóm Các thẻ Block - Thẻ Danh Sách

Việc liệt kê danh sách sẽ làm cho văn bản trở nên sáng sủa và dễ theo dõi. Trong HTML có một số kiểu danh sách như danh sách đánh số thứ tự, danh sách không đánh số thứ tự, danh sách định nghĩa, danh sách kiểu bảng chọn và danh sách kiểu thư mục.

1. Thẻ Xác Định Danh Sách

Danh sách các định nghĩa trông giống như một bảng từ vựng hay bảng giải thích các thuật ngữ lùi vào trong. thẻ xác định danh sách sử dụng cho các danh sách có các mục và có nội dung mô tả cho các mục không sử dụng cho danh sách không có phần mô tả.
Thẻ xác định danh sách gồm 3 thẻ:
Thẻ: <DL>....<DL> : dùng để xác định danh sách
Thẻ: <DT>...<DT> : dùng để xác định một mục.
Thẻ: <DD>...<DD> : dùng để xác định một mục trong một mục.
Ví Dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<dl>
<dt>Hữu Trọng:</dt>
<dd>Đep Trai dể thương đáng iu, là một mẫu người lí tưởng chỉ có khuyết điểm là hơi nổ và khùm khùm .</dd>
<dt>Nhật Thanh:</dt>
<dd>Đep trai nhưng còn xa lắm mới bằng được anh Trọng nhà F</dd>
<dt>Hữu Hiền:</dt>
<dd>Chàng trai suy tình dễ thương với bản tình ca sâu lắng.</dd>
</dl>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

2. Thẻ Danh Sách không có số thứ tự:

Để thể hiện danh sách không có số thứ tự la dùng 2 cập thẻ: <UL></UL> và <LI></LI>
Cú pháp:

<UL>
<LI> Mục thứ 1
<LI> Mục thứ 2
……
</UL>

Cặp thẻ <UL>…</UL> đánh dấu bắt đầu và kết thúc danh sách. Nó có tác dụng lùi lề trái danh sách vào sâu hơn.
Các thẻ <LI> có tác dụng thể hiện bắt đầu một dòng mới với một chấm tròn.
Ví Dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<ul>
  <li>HTML</li>
  <li>HTML5</li>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>JQuery</li>
 </ul>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Theo mặc định, mỗi mục thuộc mức thứ nhất của danh sách không đánh số thứ tự bắt đầu bằng một chấm tròn, còn mỗi mục thuộc mức thứ hai sẽ bắt đầu bằng một vòng tròng.
Ta vẫn có thể thay đổi bằng cách sử dụng thuộc tính TYPE
Cú pháp:
<UL TYPE=DISC|CIRCLE|SQUARE>
hoặc
<UI TYPE=DISC|CIRCLE|SQUARE>
Để hiểu rỏ ta xem ví dụ sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
  <h3>Danh sach DISC</h3>
<ul TYPE=DISC>
  <li>HTML</li>
  <li>HTML5</li>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>JQuery</li>
 </ul>
 <h3>Danh sach CIRCLE</h3>
 <ul TYPE=CIRCLE>
  <li>HTML</li>
  <li>HTML5</li>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>JQuery</li>
 </ul>
<h3>Danh sach SQUARE</h3>
<ul TYPE=SQUARE>
  <li>HTML</li>
  <li>HTML5</li>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>JQuery</li>
 </ul>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

3. Danh Sách Có Số thứ tự:

Để thể hiện danh sách có đánh số thứ tự ta dùng cập thẻ <OL></OL>, <LI></LI>.
Cú pháp:
<OL>
<LI> Mục thứ 1
<LI> Mục thứ 2
……
</OL>
Cặp thẻ <OL>…</OL> đánh dấu bắt đầu và kết thúc danh sách. Nó có tác dụng lùi lề trái danh sách vào sâu hơn.
Các thẻ <LI> có tác dụng thể hiện bắt đầu một dòng mới với một số thứ tự tương ứng.
Ví Dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
  <h3>Danh sách Thứ Tự</h3>
<ol>
  <li>HTML</li>
  <li>HTML5</li>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>JQuery</li>
 </ol>

</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Có thể dùng thuộc tính TYPE để lựa chọn các cách đánh thứ tự khác nhau khi bắt đầu mỗi mục trong một danh sách có đánh số thứ tự:
Chữ in hoa A,B,C,… (TYPE=A)
Chữ in thường a,b,c,… (TYPE=a)
Chữ số La mã lớn I,II,III,… (TYPE=I)
Chữ số La mã nhỏ i, ii, iii,… (TYPE=i)
Số thứ tự 1,2,3,4,… (TYPE=1), đây là lựa chọn mặc định
Cú Pháp:
<OL TYPE=A|a|I|i|1>
Hoặc
<LI TYPE=A|a|I|i|1>

Ví Dụ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
  <h3>Danh sach Chữ Cái</h3>
<OL TYPE=A>
  <li>HTML</li>
  <li>HTML5</li>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>JQuery</li>
 </OL>
 <h3>Danh sach Hi Lạp</h3>
<OL TYPE=I>
  <li>HTML</li>
  <li>HTML5</li>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>JQuery</li>
 </OL>
<h3>Danh sach Chữ Số</h3>
<OL TYPE=1>
  <li>HTML</li>
  <li>HTML5</li>
  <li>CSS</li>
  <li>CSS3</li>
  <li>PHP</li>
  <li>JQuery</li>
</OL>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

4. Danh Sách Lòng Nhau:

4.1 Cấu Trúc <ol></ol> lòng trong <ol></ol>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<OL>
  <li>DESIGN</li>
    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JQUERI</li>
      <li>PHOTOSHOP</li>
    </ol>
  <li>LẬP TRÌNH</li>
    <ol>
      <li>PHP và MYSQL</li>
      <li>AJAX</li>
      <li>C/C++</li>
      <li>C#</li>
    </ol>
  <li>DOWNLOAD</li>
    <ol>
    <li>Phần mềm</li>
    <li>Ebooks</li>
    </ol>
 </OL>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

4.2 Cấu Trúc <ul></ul> lòng trong <ul></ul>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<UL>
  <li>DESIGN</li>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JQUERI</li>
      <li>PHOTOSHOP</li>
    </ul>
  <li>LẬP TRÌNH</li>
    <ul>
      <li>PHP và MYSQL</li>
      <li>AJAX</li>
      <li>C/C++</li>
      <li>C#</li>
    </ul>
  <li>DOWNLOAD</li>
    <ul>
    <li>Phần mềm</li>
    <li>Ebooks</li>
    </ul>
 </UL>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

4.3 Cấu Trúc <ul></ul> lòng trong <ol></ol>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<OL>
  <li>DESIGN</li>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JQUERI</li>
      <li>PHOTOSHOP</li>
    </ul>
  <li>LẬP TRÌNH</li>
    <ul>
      <li>PHP và MYSQL</li>
      <li>AJAX</li>
      <li>C/C++</li>
      <li>C#</li>
    </ul>
  <li>DOWNLOAD</li>
    <ul>
    <li>Phần mềm</li>
    <li>Ebooks</li>
    </ul>
 </OL>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

abcdasdasd

Thứ Năm, 15 tháng 8, 2013