Định nghĩa danh sách trong HTML/XHTML có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách trong HTML/XHTML.
Danh sách có thứ tự
Để thể hiện danh sách có thứ tự ta sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:
- <ol></ol> là viết tắt của chữ "ordered list" có nghĩa là danh sách có thứ tự.
- <li></li> viết tắt của chữ "list item" có nghĩa là mục của danh sách.
Danh sách sau đây gọi là danh sách có thứ tự:
- 1. Cá lóc kho tiêu
- 2. Cá rô kho tộ
- 3. Cá thu chiên xoài bằm
- 4. Cá điêu hồng nấu ngót
Hoặc:
HTML viết
<!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>Cá lóc kho tiêu</li>
<li>Cá rô kho tộ</li>
<li>Cá thu chiên xoài bằm</li>
<li>Cá điêu hồng nấu ngót</li>
</ol>
</body>
</html>
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<ol>
<li>Cá lóc kho tiêu</li>
<li>Cá rô kho tộ</li>
<li>Cá thu chiên xoài bằm</li>
<li>Cá điêu hồng nấu ngót</li>
</ol>
</body>
</html>
Hiển thị trình duyệt:
- 1. Cá lóc kho tiêu
- 2. Cá rô kho tộ
- 3. Cá thu chiên xoài bằm
- 4. Cá điêu hồng nấu ngót
Số thứ tự của danh sách trình duyệt sẽ tự thêm vào.
Danh sách không có thứ tự
Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:
- <ul></ul> là viết tắt của chữ: unordered list có nghĩa là danh sách không có thứ tự
- <li></li> viết tắt của chữ: list item có nghĩa là mục của danh sách.
Danh sách sau đây gọi là danh sách không có thứ tự:
- Trang chủ
- Giới thiệu
- Sản phẩm
- Dịch vụ
- Liên hệ
Hoặc:
- Học HTML
- Học XHTML
- Học HTML5
- Học CSS2
- Học CSS3
HTML viết
<!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>Trang chủ</li>
<li>Giới thiệu</li>
<li>Sản phẩm</li>
<li>Dịch vụ</li>
<li>Liên hệ</li>
</ul>
</body>
</html>
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<ul>
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Sản phẩm</li>
<li>Dịch vụ</li>
<li>Liên hệ</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
- Trang chủ
- Giới thiệu
- Sản phẩm
- Dịch vụ
- Liên hệ
Cấu trúc thẻ danh sách có thứ tự và không có thứ tự
Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau.
Cấu trúc phải theo các nguyên tắc sau đây:
- Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2:
- Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>.
- Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: <ul></ul>, <li></li>.
- Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất <li></li>.
- Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được chứa một số thẻ sau đây: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>. Và một số thẻ không nênchứa như: <style></style>, <script></script>.
<ol>
<li></li>
<li></li>
</ol>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
</ul>
- Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp thẻ <li></li>, không được xen kẻ bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C:
<ol>
<h2></h2>
<li></li>
<li></li>
</ol>
<h2></h2>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<p></p>
<li></li>
</ul>
<li></li>
<p></p>
<li></li>
</ul>
<ul>
<li></li>
<div>
<li></li>
</div>
</ul>
<li></li>
<div>
<li></li>
</div>
</ul>
Một số cấu trúc của danh sách có thứ tự và không có thứ tự
Cấu trúc <ol></ol> lồng bên trong <ol></ol>
HTML viết
<ol>
<li><p>Cơm trưa</p>
<ol>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ol>
</li>
<li><p>Tráng miệng trái cây</p>
<ol>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ol>
</li>
</ol>
<li><p>Cơm trưa</p>
<ol>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ol>
</li>
<li><p>Tráng miệng trái cây</p>
<ol>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ol>
</li>
</ol>
Hiển thị trình duyệt:
- Cơm trưa
- Cơm chiên hải sản
- Cơm sườn non nấu cam
- Cơm canh chua cá lóc
- Tráng miệng trái cây
- Nho tươi
- Chuối
- Mận
Cấu trúc <ul></ul> lồng bên trong <ul></ul>
HTML viết
<ul>
<li><p>Cơm trưa</p>
<ul>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ul>
</li>
<li><p>Tráng miệng trái cây</p>
<ul>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ul>
</li>
</ul>
<li><p>Cơm trưa</p>
<ul>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ul>
</li>
<li><p>Tráng miệng trái cây</p>
<ul>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ul>
</li>
</ul>
Hiển thị trình duyệt:
- Cơm trưa
- Cơm chiên hải sản
- Cơm sườn non nấu cam
- Cơm canh chua cá lóc
- Tráng miệng trái cây
- Nho tươi
- Chuối
- Mận
Cấu trúc <ul></ul> lồng bên trong <ol></ol>
HTML viết
<ol>
<li><p>Cơm trưa</p>
<ul>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ul>
</li>
<li><p>Tráng miệng trái cây</p>
<ul>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ul>
</li>
</ol>
<li><p>Cơm trưa</p>
<ul>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ul>
</li>
<li><p>Tráng miệng trái cây</p>
<ul>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ul>
</li>
</ol>
Hiển thị trình duyệt:
- Cơm trưa
- Cơm chiên hải sản
- Cơm sườn non nấu cam
- Cơm canh chua cá lóc
- Tráng miệng trái cây
- Nho tươi
- Chuối
- Mận
Vấn đề đặt ra là làm sao ta có thể thay đổi dạng của các số, VD đổi thứ tự 1,2,3,4,... sang I,II,III,IV,... hay đổi hình dạng tròn thành hình vuông,... những vấn đề này chúng ta có thể tham khảo thêm bên phần list-sytle của CSS.
0 nhận xét: