1:Danh sách
Trong khi trình bày một văn bản, rất hay gặp phải tình huống cần phải liệt kê hàng loạt các đối tượng, ví dụ: các bước để làm một món ăn, các ngôn ngữ lập trình cần phải học, danh mục các thuật ngữ. Để liệt kê các đối tượng như vậy, trong HTML có khái niệm Danh sách (list).
HTML cung cấp ba loại danh sách:
- Danh sách không có thứ tự (unordered list)
- Danh sách có thứ tự (ordered list)
- Danh sách mô tả (description list)
Mặc định, danh sách được hiển thị theo kiểu khối (block), tuy nhiên, có thể thay đổi kiểu hiển thị bằng CSS.
Danh sách không có thứ tự
Danh sách không có thứ tự là một dãy các mục (item), trong đó tính trước sau của mỗi mục là không quan trọng. Mỗi mục thường được đánh dấu bằng một kí tự đầu dòng (dấu đầu dòng) (bullet). Trong thực tế, phần lớn các danh sách sẽ thuộc loại này.
Để tạo danh sách không có thứ tự, sử dụng phần tử ul, viết tắt của unordered list (danh sách không có thứ tự).
Để tạo mỗi mục của danh sách sử dụng phần tử li, viết tắt của list item (mục của danh sách).
Cú pháp là,
<ul>
<li>phần tử 1</li>
<li>phần tử 2</li>
</ul>
Ví dụ,
[HTML]
<ul>
<li>Trái cây</li>
<li>Trái dừa</li>
</ul>
[Kết quả]
· Mãng cầu
· Trái dừa
Mặc định, mỗi mục được đánh dấu bằng dấu chấm tròn, nếu muốn thay bằng dấu khác thì cần sử dụng CSS.
Chú ý: sau phần tử ul phải là một hoặc nhiều phần tử li, chứ không cho phép chèn văn bản hoặc các phần tử khác, tuy nhiên, trong phần tử li thì có thể chứa văn bản hoặc các phần tử bất kì. Ví dụ, đoạn mã dưới đây là không hợp lệ.
[HTML]
<ul>
kiểm tra trên trang validator sẽ bị báo lỗi dòng này!
<li>phần tử</li>
<li>phần tử 1</li>
<li>phần tử 2</li>
</ul>
Danh sách có thứ tự
Danh sách có thứ tự là một dãy các mục, trong đó tính trước sau của mỗi mục là quan trọng, ví dụ, danh sách các bước hướng dẫn để làm một công việc. Để thể hiện tính thứ tự của các mục, trình duyệt sẽ tự động sử dụng các số hoặc các chữ cái để gắn vào phía trước mỗi mục, giá trị của các số/chữ sẽ được tự động tăng cùng với các mục.
Để tạo danh sách có thứ tự, sử dụng phần tử ol, viết tắt của ordered list (danh sách có thứ tự).
Để tạo mỗi mục của danh sách, sử dụng phần tử li, viết tắt của list item (phần tử của danh sách).
Cú pháp là,
<ol>
<li>phần tử 1</li>
<li>phần tử 2</li>
</ol>
Ví dụ,
[HTML]
<ul>
<li>phần tử</li>
<li>phần tử 1</li>
<li>phần tử 2</li>
</ul>
[Kết quả]
1.
2.
3.
Để ý là, mặc dù trong đoạn mã HTML không ghi các số 1, 2, 3, nhưng khi hiển thị ra mà hình lại thấy có các số. Như đã nói ở trên, trình duyệt đã tự đánh số thứ tự cho mỗi mục trong thẻ <ol>. Nếu không muốn đánh số thứ tự là 1, 2, 3, mà muốn là a, b, c, hoặc I, II, III, thì sử dụng CSS.
Sau phần tử ol phải là một hoặc nhiều phần tử li, không cho phép chèn văn bản hoặc các phần tử khác, tuy nhiên, trong phần tử li thì có thể chèn văn bản hoặc các phần tử bất kì trong đó. Ví dụ, đoạn mã dưới đây là không hợp lệ.
[HTML]
<ol>
kiểm tra trên trang validator sẽ bị báo lỗi dòng này!
<li>phần tử</li>
<li>phần tử 1</li>
<li>phần tử 2</li>
</ol>
Với danh sách có thứ tự, giá trị bắt đầu luôn là 1, I, i, A hoặc a. Để thay đổi giá trị bắt đầu, sử dụng thuộc tính start. Ví dụ,
[HTML]
<ol start="4">
<li>phần tử</li>
<li>phần tử 1</li>
<li>phần tử 2</li>
</ol>
[Kết quả]
Danh sách sẽ được đánh số bắt đầu bằng 4.
4. phần tử
5.
6.
Một số ví dụ, sử dụng thuộc tính start,
HTML | Kết quả |
<ol type="i" start="4"> | Danh sách sẽ được đánh số bắt đầu từ iv |
<ol type="I" start="4"> | Danh sách sẽ được đánh số bắt đầu từ IV |
<ol type="A" start="4"> | Danh sách sẽ được đánh thứ tự từ chữ D |
<ol type="a" start="4"> | Danh sách sẽ được đánh thứ tự từ chữ d |
Danh sách mô tả
Danh sách mô tả (description list, definition list) là loại danh sách được sử dụng để biểu diễn dữ liệu theo kiểu từng cặp tên/giá trị (name/value), ví dụ: tên thuật ngữ/mô tả, câu hỏi/đáp án.
Để tạo danh sách kiểu mô tả, sử dụng ba phần tử sau:
- dl để tạo danh sách, dl viết tắt của description list hoặc definition list
- dt để tạo một mục cho danh sách (tên), dt viết tắt của description term hoặc definition term
- dd để tạo phần định nghĩa/mô tả cho một mục (giá trị), dd viết tắt của describe a definition hoặc define a description.
Cú pháp là,
<dl>
<dt>mục từ 1</dt>
<dd>định nghĩa cho mục từ 1</dd>
<dt>mục từ 2</dt>
<dd>định nghĩa cho mục từ 2</dd>
</dl>
Ví dụ,
[HTML]
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>WWW</dt>
<dd>World Wide Web</dd>
</dl>
[Kết quả]
HTML
Hypertext Markup Language
WWW
World Wide Web
Chú ý: phần tử dl chỉ chứa các phần tử dt và dd. Một mục tên (dt) có thể có nhiều giá trị (dd) hoặc ngược lại. Phần tử dt không thể chứa các phần tử Đề mục (heading), tuy nhiên, phần tử dd thì có thể chứa phần tử bất kì.
Ví dụ,
[HTML]
<dl>
<dt><h1>HTML</h1></dt>
<dd><h1>Hypertext Markup Language</h1></dd>
<dt>WWW</dt>
<dd>World Wide Web</dd>
</dl>
[Kết quả]
Kiểm tra trên trang https://validator.w3.org/ sẽ có báo lỗi ở phần tử dt đầu tiên.
Danh sách lồng nhau
Một danh sách có thể chứa danh sách khác, miễn là danh sách con phải được đặt trong phần tử li của danh sách cha.
Ví dụ,
[HTML]
<ol>
<li>Mục 1</li>
<li>Mục 2
<ul>
<li>Nội dung 1</li>
<li>Nội dung 2</li>
</ul>
</li>
<li>Mục 3</li>
</ol>
[Kết quả]
1. Mục 1
2. Mục 2
o Nội dung 1
o Nội dung 2
3. Mục 3
.jpg)
.jpg)
0 Nhận xét