Kết nối

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

3.368 lượt xem 
 Cập nhật lần cuối: 26/08/2017 lúc 08:08:18
Thể loại: HTML/HTML5, Thiết kế Web 

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, …)

Liên quan:  [HTML/HTML5] Phần 5: Thuộc tính HTML

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.

Trích dẫn bài viết
  • APA:
    Dammio. (2017). [HTML/HTML5] Phần 17: Danh sách trong HTML. https://www.dammio.com/2017/08/13/htmlhtml5-phan-17-danh-sach-trong-html.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[HTML/HTML5] Phần 17: Danh sách trong HTML},
    year = {2017},
    url = {https://www.dammio.com/2017/08/13/htmlhtml5-phan-17-danh-sach-trong-html},
    urldate = {2024-10-29}
    }
Theo dõi
Thông báo của
guest
2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x