[HTML cơ bản] Thẻ tạo danh sách trong HTML

Post on: 2016-09-20 10:45:12 | in: HTML

Để khai báo một danh sách trong tài liệu HTML ta sử dụng thẻ tạo danh sách, có ba kiểu danh sách.

Tiếp theo, trong chuỗi bài về các thẻ nằm trong phần nội dung của trang web ta tìm hiểu các thẻ tạo danh sách trong HTML.

Danh sách được sử dụng nhiều trong tài liệu web bằng HTML. Trong một trang web các menu, danh sách thông tin... đều được tạo ra bởi những thẻ tạo danh sách trong HTML.

Có ba kiểu danh sách trong tài liệu HTML đó là unordered list (danh sách không sắp xếp), ordered list (danh sách sắp xếp), description list (danh sách mô tả).

- Danh sách không sắp xếp: danh sách các mục con hiển thị không được sắp xếp mà chỉ được đánh dấu bằng ký tự đặc trưng.

- Danh sách sắp xếp: danh sách các mục con được sắp xếp hiển thị theo thứ tự các chữ cái hoặc chữ số.

- Danh sách mô tả: danh sách các mục con của nó không được đánh dấu thứ tự, nhưng sẽ có kèm theo một đoạn miêu tả.

Xem ví dụ để thấy sự khác nhau của các kiểu danh sách.

Đây là danh sách không sắp xếp
<ul>
<li>HTML</li>
<li>PHP</li>
<li>CSS</li>
</ul>
<ul style="list-style-type:square">
<li>Javascript</li>
<li>CSS</li>
<li>HTML</li>
</ul>
Đây là danh sách sắp xếp
<ol>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ol>
<ol type="A">
<li>PHP</li>
<li>Laravel</li>
<li>phalcon</li>
</ol>
Đây là danh sách mô tả
<dl>
<dt>PHP cơ bản</dt>
<dd>- PHP</dd>
<dt>PHP nâng cao</dt>
<dd>- Phalcon</dd>
<dd>- Laravel</dd>
</dl>
Xem code

Danh sách không sắp xếp (unordered list)

Một danh sách không sắp xếp bắt đầu với thẻ <ul>. Mỗi mục con trong danh sách bắt đầu với thẻ <li>. Danh sách các mục con mặc định được đánh dấu bằng những vòng tròn nhỏ màu đen. Các thuộc tính CSS list-style-type được sử dụng để thay đổi kiểu hiển thị của các mục con với các giá trị: disc, square, circle và none.

- disc: Thiết lập mặc định hiển thị một vòng tròn nhỏ màu đen.

- square: Hiển thị một hình vuông nhỏ màu đen.

- circle: Hiển thị một vòng tròn.

- none: Danh sách mục con sẽ không được đánh dấu.

Danh sách sắp xếp (ordered list)

Một danh sách sách sắp xếp bắt đầu với thẻ <ol>. Mỗi mục con trong danh sách bắt đầu với <li> thẻ. Danh sách mặc định các mục con sẽ được đánh số.
Thẻ <ol> hỗ trợ thêm một thuộc tính là type, thuộc tính này thiết lập kiểu sắp xếp các mục con bên trong danh sách với các giá trị: 1, i, I, a, A.

- type="1": Danh sách các mục sẽ được đánh dấu với số (mặc định).

- type="A": Danh sách các mục sẽ được đánh dấu bằng chữ hoa.

- type="a": Danh sách các mục sẽ được đánh dấu bằng chữ thường.

- type="I": Danh sách các mục sẽ được đánh với số La Mã hoa.

- type="i": Danh sách các mục sẽ được đánh với số La Mã thường.

Danh sách mô tả (description list)

Khác với hai loại trên một danh sách mô tả bắt đầu với thẻ <dl>. Mỗi mục con trong danh sách bắt đầu với <dt>, bên trong các thẻ <dl> là các thẻ <dd> mô tả cho mục con sẽ được khác báo.

Danh sách lồng nhau

Trong HTML các thẻ danh sách có thể lồng vào nhau thành nhiều tầng như ví dụ danh sách lông nhau đơn giản.

<ol>
<li>HTML</li>
<li>PHP
 <ul>
 <li>Laravel</li>
 <li>phalcon</li>
 </ul>
</li>
<li>CSS
 <ul>
 <li>CSS cơ bản</li>
 <li>CSS nâng cao</li>
 </ul>
</li>
</ol>
Xem code

Tóm tắt

Vậy là chúng ta đã biết cách tạo ra một danh sách đơn giản rồi đó, tuy phần này khá đơn giản nhưng nó sẽ giúp chúng ta khá nhiều như tạo một menu đơn giản chẳng hạn.