[HTML/HTML5] Phần 17: Danh sách trong HTML

39 lượt xem

Danh sách không có thứ tự
Một danh sách không có thứ tự bắt đầu bằng thẻ ul. Mỗi phần tử bắt đầu với thẻ li. Mỗi phần tử trong danh sách mặc định được đánh dấu bằng nút đen vuông hoặc tròn.

<ul>
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ul>

Chọn kiểu nút cho phần tử
Bạn có thể dùng thuộc tính list-style-type để định nghĩa kiểu nút cho phần tử. Thuộc tính list-style-type gồm các giá trị như sau:

  • disc: thiết lập kiểu nút mặc định
  • circle: kiểu nút tròn
  • square: kiểu nút vuông
  • none: Các phần tử không được đánh dấu (không có kiểu nút)

<br/>Nút mặc định:<br/>
<ul style="list-style-type:disc">
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ul>
<br/>Nút tròn:<br/>
<ul style="list-style-type:circle">
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ul>
<br/>Nút vuông:<br/>
<ul style="list-style-type:square">
  <li>Red</li>
  <li>Blue</li>
  <li>Green</li>
</ul>
<br/>Không có nút:<br/>
<ul style="list-style-type:none">
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ul>

Danh sách có thứ tự
Để tạo danh sách có thứ tự, bạn hãy dùng thẻ ol với mỗi phần tử là thẻ li.

Mỗi phần tử sẽ được đánh dấu với các số theo mặc định.

<ol>
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ol>

Thuộc tính type
Thuộc tính type cho phép định nghĩa dạng nút của các phần tử trong danh sách có thứ tự.

  • type=”1″: Các phần tử có dạng nút là số mặc định.
  • type=”A”: Các phần tử có dạng nút là ký tự chữ cái hoa (A, B, C, …).
  • type=”a”: Các phần tử có dạng nút là ký tự chữ cái thường (a, b, c, …).
  • type=”I”: Các phần tử có dạng nút là số La Mã viết hoa.
  • type=”i”: Các phần tử có dạng nút là số La Mã viết thường.

Số:
<ol type="1">
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ol>
<br/>
Ký tự viết hoa:<br/>
<ol type="A">
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ol>
<br/>Ký tự viết thường:<br/>
<ol type="a">
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ol>
<br/>Số La Mã viết hoa:<br/>
<ol type="I">
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ol>
<br/>Số La Mã viết thường:<br/>
<ol type="i">
  <li>Red --- dammio.com</li>
  <li>Blue</li>
  <li>Green</li>
</ol>

Danh sách mô tả
Danh sách mô tả là danh sách với các thuật ngữ kèm theo mô tả ngắn cho các thuật ngữ đó. Bạn có thể dùng thẻ dl để định nghĩa danh sách mô tả, thẻ dt định nghĩa tên thuật ngữ, thẻ dd định nghĩa mô tả mỗi phần tử.

<dl>
  <dt>Thiết kế Web --- dammio.com</dt>
  <dd>- Cách thiết kế giao diện Web tĩnh</dd>
  <dt>Lập trình Web</dt>
  <dd>- Xây dựng và phát triển Web động</dd>
</dl>

Danh sách con
Một danh sách có thể là danh sách con của 1 danh sách khác.

<ul>
  <li>Cà phê --- dammio.com</li>
  <li>Trà
    <ul>
      <li>Trà Ô Long</li>
      <li>Trà Đào</li>
    </ul>
  </li>
  <li>Soda</li>
</ul>

Lưu ý: Mỗi phần tử trong danh sách chứa 1 danh sách con, và có thể cả các phần tử HTML khác (hình ảnh, liên kết, …)

Danh sách theo chiều ngang
Danh sách HTML có thể hiển thị theo nhiều phong cách khác nhau, trong đó có 1 cách dạng phổ biến là hiển thị theo chiều ngang. Ví dụ sau trình bày 1 menu là 1 danh sách hiển thị theo chiều ngang.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Trang chủ</a></li>
  <li><a href="#news">Tin tức</a></li>
  <li><a href="#contact">Liên hệ</a></li>
  <li><a href="#about">Về trang này?</a></li>
</ul>

</body>
</html>

Kết luận: Bài viết đã cung cấp kiến thức về danh sách và cách dùng danh sách thông qua các ví dụ đơn giản.

Bình luận Facebook

Để lại bình luận

2 Comments on "[HTML/HTML5] Phần 17: Danh sách trong HTML"

Thông báo khi có
avatar
1000
Sắp xếp theo:   mới nhất | cũ nhất | nhiều bình chọn nhất
trackback

[…] Đăng ngày 12 Tháng Tám, 201713 Tháng Tám, 2017 bởi dammio 13 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo >> […]

trackback

[…] 2017 bởi dammio 0 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo […]

wpDiscuz