HTML Danh Sách

HTML hỗ trợ 3 kiểu danh sách bao gồm danh sách có thứ tự, danh sách không thứ tự và danh sách mô tả.

Danh Sách Không Có Thứ Tự

Một danh sách không theo thứ tự được bắt đầu bằng thẻ <ul> (unordered list). Bên trong thẻ này sẽ có các thẻ <li> với mỗi thẻ <li> ứng với một mục trong danh sách.

<ul>
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ul>

Chạy Thử

Khi hiển thị danh sách không có thứ tự trên trình duyệt mỗi hạng mục trong danh sách sẽ được hiển thị mặc định với một dấu chấm phía trước.

Kiểu Đánh Dấu Hạng Mục (Sử Dụng Đặc Tính CSS)

Đặc tính list-style-type trong CSS có thể được sử dụng để quy định kiểu đánh dấu trước mỗi hạng mục.

Với đặc tính list-style-type trong CSS, chúng ta có thể sử dụng một trong các kiểu đánh dấu hạng mục sau dành cho danh sách không có thứ tự:

  • list-style-type: disc: Đánh dấu hạng mục sử dụng dấu chấm ở phía trước (kiểu mặc định).
  • list-style-type: circle: Đánh dấu hạng mục sử dụng dấu hình tròn ở phía trước.
  • list-style-type: square: Đánh dấu hạng mục sử dụng dấu hình vuông ở phía trước.
  • list-style-type: none: Không đánh dấu bất cứ hạng mục nào trong danh sách.

Đánh Dấu Hạng Mục Sử Dụng Dấu Chấm

Kiểu đánh dấu hạng mục này là mặc định:

<ul style="list-style-type: disc;">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ul>

Chạy Thử

Đánh Dấu Hạng Mục Sử Dụng Hình Tròn

<ul style="list-style-type: circle;">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ul>

Chạy Thử

Đánh Dấu Hạng Mục Sử Dụng Hình Vuông

<ul style="list-style-type: square;">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ul>

Chạy Thử

Không Đánh Dấu Hạng Mục

<ul style="list-style-type: none;">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ul>

Chạy Thử

Danh Sách Có Thứ Tự

Một danh sách không theo thứ tự được bắt đầu bằng thẻ <ol> (ordered list). Bên trong thẻ này sẽ có các thẻ <li> với mỗi thẻ <li> ứng với một mục trong danh sách.

<ol>
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Khi hiển thị danh sách có thứ tự trên trình duyệt mỗi hạng mục trong danh sách sẽ được hiển thị mặc định với số thứ tự tăng dần bắt đầu từ 1 ở phía trước.

Kiểu Đánh Số Thứ Tự (Sử Dụng Thuộc Tính HTML)

Thuộc tính type có thể được sử dụng trong thẻ <ol> được để quy định kiểu đánh số thứ tự. Trong HTML, chúng ta có các kiểu đánh số thứ tự sau dành cho danh sách có thứ tự:

  • type="1": Đánh số theo số tự nhiên bắt đầu từ 1 -> 2 -> 3... Đây là kiểu đánh số thứ tự mặc định.
  • type="A": Đánh số theo chữ cái in hoa bắt đầu từ A -> B -> C...
  • type="a": Đánh số theo chữ cái in thường bắt đầu từ a -> b -> c...
  • type="I": Đánh số theo chữ số la mã in hoa bắt đầu từ I -> II -> III...
  • type="i": Đánh số theo chữ số la mã in thường bắt đầu từ i -> ii -> iii...

Đánh Số Thứ Tự Theo Kiểu Số Tự Nhiên

Đây là kiểu đánh số thứ tự mặc định:

<ol type="1">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Đây là kiểu mặc định và bạn có thể bỏ qua thuộc tính type.

Đánh Số Thứ Tự Theo Kiểu Chữ In Hoa

<ol type="A">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Đánh Số Thứ Tự Theo Kiểu Chữ In Thường

<ol type="a">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Đánh Số Thứ Tự Theo Số La Mã In Hoa

<ol type="I">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Đánh Số Thứ Tự Theo Số La Mã In Thường

<ol type="i">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Thay Đổi Số Thứ Tự Bắt Đầu Hạng Mục

Sử dụng thuộc tính start chúng ta có thể thay đổi số thứ thự của hạng mục đầu tiên trong danh sách có thứ tự.

Với kiểu đánh số thự tự sử dụng số tự nhiên:

<ol type="1" start="100">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Với kiểu đánh số thự tự sử dụng chữ cái in hoa:

<ol type="A" start="5">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Đoạn code trên sẽ hiển thị số thứ tự bắt đầu từ chữ cái E là chữ cái thứ 5 trong số thứ tự A, B, C, D và E.

Với kiểu đánh số thự tự sử dụng chữ cái in thường:

<ol type="a" start="5">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Đoạn code trên sẽ hiển thị số thứ tự bắt đầu từ chữ cái e là chữ cái thứ 5 trong số thứ tự a, b, c, d và e.

Với kiểu đánh số thự tự sử dụng chữ số la mã in hoa:

<ol type="I" start="5">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Đoạn code trên sẽ hiển thị số thứ tự bắt đầu từ chữ cái V là chữ số la mã thứ 5 bắt đầu từ I.

Với kiểu đánh số thự tự sử dụng chữ số la mã in thường:

<ol type="i" start="5">
  <li>Nước Ép</li>
  <li>Cà Phê</li>
  <li>Nước Giải Khát</li>
  <li>Trà Đá</li>
</ol>

Chạy Thử

Đoạn code trên sẽ hiển thị số thứ tự bắt đầu từ chữ cái v là chữ số la mã thứ 5 bắt đầu từ i.

Danh Sách Mô Tả

Với danh sách mô tả mỗi một mục sẽ được thêm một mô tả phía trước thay vì đánh số hoặc dấu chấm tròn.

Danh sách mô tả được bắt đầu bằng thẻ <dl> (definition list). Bên trong thẻ này sẽ có các thẻ <dd> với mỗi thẻ <dd> ứng với một mục trong danh sách. Trước mỗi hạng mục để thêm mô tả chúng ta sử dụng thẻ <dt>.

<dl>
  <dt>Đồ uống giúp bạn tỉnh táo</dt>
  <dd>- Cà Phê</dd>
  <dt>Đồ uống tốt cho sức khoẻ và làn da của bạn</dt>
  <dd>- Nước Ép</dd>
  <dt>Đồ uống giúp bạn bù lượng nước đã mất do tập thể thao</dt>
  <dd>- Nước Giải Khát</dd>
  <dt>Đồ uống khác</dt>
  <dd>- Trà Đã</dd>
</dl>

Chạy Thử

Content must not be empty

Related Tutorial