Bài đăng nổi bật

Sử dụng các thẻ tạo danh sách: ul, ol, li

Ví dụ về danh sách trong HTML
Một danh sách không xếp thứ tự:     
  • Item
  • Item
  • Item
  • Item       

Một danh sách có xếp thứ tự:   
  1. First item
  2. Second item
  3. Third item
  4. Fourth item

Danh sách không xếp thứ tự

Ta định nghĩa danh sách không xếp thứ tự bằng thẻ <ul>, viết tắt của unordered list. Mỗi phần tử của danh sách được định nghĩa bằng thẻ  <li> , viết tắt của list item.
Mặc định, các phần tử của danh sách sẽ được hiển thị kèm theo một dấu tròn phía trước:  
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Các biểu tượng cho phần tử trong danh sách không xếp thứ tự

Ta dùng thuộc tính CSS list-style-type để định kiểu cho biểu tượng của phần tử trong danh sách:
Giá trị                Miêu tả
disc                    (Mặc định) Các biểu tượng là hình tròn màu đen
circle                  Các biểu tượng là hình tròn rỗng
square                Các biểu tượng là hình vuông
none                   Không hiển thị các biểu tượng
Ví dụ dùng giá trị disc 
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ dùng giá trị circle  
<ul style="list-style-type:circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
Ví dụ dùng giá trị square 
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ dùng giá trị none
<ul style="list-style-type:none">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Danh sách xếp theo thứ tự

Ta định nghĩa một danh sách xếp theo thứ tự bằng thẻ <ol> (ordered list). Mỗi phần tử của danh sách được định nghĩa bằng thẻ <li> (list item).
Mặc định thì các phần tử sẽ được hiển thị kèm số thứ tự: 
<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

Thuộc tính type của danh sách xếp thứ tự

Thuộc tính type của thẻ <ol>  dùng để định kiểu cho biểu tượng các phần tử:
Type                  Miêu tả
type="1"   Các phần tử sẽ được đánh thứ tự bằng số (Mặc định)
type="A"  Các phần tử sẽ được đánh thứ tự bằng chữ cái hoa
type="a"   Các phần tử sẽ được đánh thứ tự bằng chữ cái thường
type="I"    Các phần tử sẽ được đánh thứ tự bằng chữ số La Mã hoa
type="i"    Các phần tử sẽ được đánh thứ tự bằng chữ số La Mã thường

Đánh thứ tự bằng số: type="1"
<ol type="1">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

Đánh thứ tự bằng chữ cái hoa: type="A"
<ol type="A">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

Đánh thứ tự bằng chữ cái thường: type="a" 
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Đánh thứ tự bằng chữ số La Mã hoa: type="I"
<ol type="I">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

Đánh thứ tự bằng chữ số La Mã thường: type="i"
<ol type="i">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

Danh sách miêu tả

Mã HTML cũng có thẻ danh sách miêu tả.
Một danh sách miêu tả là danh sách các thuật ngữ cùng với miêu tả của chúng. 
Thẻ <dl> định nghĩa một danh sách miêu tả, trong đó, thẻ <dt> định nghĩa thuật ngữ (tên gọi), và thẻ  <dd> miêu tả các thuật ngữ:
<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

Danh sách bên trong danh sách

Ta có thể lồng danh sách vào một danh sách khác, tạo thành danh sách bên trong danh sách, tiếng Anh gọi là nested list:
<ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
            <li>Black tea</li>
            <li>Green tea</li>
        </ul>
    </li>
    <li>Milk</li>
</ul>

Chú ý: Mỗi phần tử không chỉ có thể chứa danh sách khác mà còn có thể chứa các thành phần HTML khác như ảnh hay liên kết v.v.

Danh sách nằm ngang

Danh sách trong HTML có thể được định kiểu theo nhiều cách bằng CSS.
Một cách làm phổ biến là định kiểu chuyển danh sách thành nằm ngang để tạo thành một menu:


<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

Tóm tắt

  • Dùng thẻ <ul> để định nghĩa một danh sách không xếp thứ tự
  • Dùng thuộc tính CSS list-style-type để định nghĩa biểu tượng cho các phần tử trong danh sách
  • Dùng thẻ <ol> để định nghĩa một danh sách xếp thứ tự
  • Dùng thuộc tính type để định nghĩa kiểu đánh thứ tự
  • Dùng thẻ <li> để định nghĩa một phần tử  trong danh sách
  • Dùng thẻ <dl> để định nghĩa một danh sách miêu tả
  • Dùng thẻ <dt> để định nghĩa một thuật ngữ
  • Dùng thẻ <dd> để miêu tả thuật ngữ ngay phía trên nó trong danh sách miêu tả
  • Có thể lồng các danh sách bên trong các danh sách
  • Các phần tử trong danh sách có thể chứa các thành phần HTML khác
  • Dùng thuộc tính CSS float:left hoặc display:inline để hiển thị danh sách nằm ngang
Tags

Post a Comment

إرسال تعليق

أحدث أقدم