Danh sách trong HTML

  • Nguyễn Lê Điệp
  • 27-12-2016
  • 398
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Danh sách đánh dấu

    Một danh sách trong HTML được bắt đầu với thẻ ul, mỗi phần con trong thẻ ul được xác định với một thẻ li. Theo mặc định thì các thẻ li sẽ được đánh dấu với một chấm bi màu đen.

    <ul>
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ul>
    Xem ví dụ

    Các kiểu danh sách đánh dấu


    Chúng ta có thể chọn kiểu danh sách với thuộc tính list-style-type để tạo các đánh dấu ở mỗi mục trong danh sách bằng CSS. Dưới đây là một số ví dụ về các kiểu dánh sách trong HTML.

    Danh sách disc (chấm bi)

    <ul>
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ul>
    Xem ví dụ

    Danh sách circle (vòng tròn)

    <ul style="list-style-type:circle">
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ul>
    Xem ví dụ

    Danh sách square (chấm vuông)

    <ul style="list-style-type:square">
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ul>
    Xem ví dụ

    Danh sách none (không có đánh dấu)

    <ul style="list-style-type:none">
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ul>
    Xem ví dụ

    Danh sách đánh dấu điều kiện

    Ngoài các kiểu danh sách đánh dấu đầu dòng như bên trên trong HTML còn có các kiểu danh sách có điều kiện. Với kiểu đánh dấu có điều kiện được bắt đầu với thẻ ol và trong thẻ ol có các thẻ li tạo chức năng đánh dấu cho mỗi dòng văn bản. Theo mặc định thẻ li trong ol sẽ có các mục đánh dấu đầu dòng với số thứ tự 1, 2,...
    <ol>
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ol>
    Xem ví dụ

    Các kiểu danh sách đánh dấu điều kiện


    Chúng ta có thể chọn kiểu danh sách đánh dấu có điều kiện với thuộc tính type để tạo các đánh dấu ở mỗi mục trong danh sách bằng CSS. Dưới đây là một số ví dụ về các kiểu dánh sách đánh dấu có điều kiện trong HTML.

    Danh sách type 1 (số)

    <ol type="1">
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ol>
    Xem ví dụ

    Danh sách type A (chữ hoa)

    <ol type="A">
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ol>
    Xem ví dụ

    Danh sách type a (chữ thường)

    <ol type="a">
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ol>
    Xem ví dụ

    Danh sách type I (la mã hoa)

    <ol type="I">
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ol>
    Xem ví dụ

    Danh sách type i (la mã thường)

    <ol type="i">
      <li>Học HTML</li>
      <li>Học CSS</li>
      <li>Học PHP</li>
    </ol>
    Xem ví dụ

    Mô tả danh sách

    Trong HTML cũng hỗ trợ phần mô tả của từng các danh sách chính. Với thẻ dl xác định các danh sách cần mô tả, thẻ dt xác định tên danh sách mô tả, và thẻ dd dùng để mô tả chi tiết hơn về tên danh sách đó.

    <dl>
      <dt>Học HTML</dt>
      <dd>Các bài học HTML căn bản nhất</dd>
      <dt>Học CSS</dt>
      <dd>Các bài học về CSS cho người mới</dd>
      <dt>Học PHP</dt>
      <dd>Cho người mới bắt đầu và nâng cao</dd>
    </dl>

    Xem ví dụ 

    Danh sách lồng

    Trong HTML bạn cũng có thể lồng các danh sách vào nhau.
    <ul>
      <li>Học HTML</li>
      <li>Học CSS
        <ul>
          <li>Học CSS2</li>
          <li>Học CSS3</li>
        </ul>
      </li>
      <li>Học PHP</li>
    </ul>
    Xem ví dụ

    Danh sách dòng

    Trong HTML các danh sách có thể được hiển thị theo nhiều kiểu bằng nhiều cách khác nhau với CSS. Một trong những cách phổ biến nhất là hiển thị theo chiều ngang, để tạo ra một menu.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    	ul {
    	    list-style-type: none;
    	    margin: 0;
    	    padding: 0;
    	    overflow: hidden;
    	    background-color: blue;
    	}
    	li {
    	    float: left;
    	}
    	li a {
    	    display: block;
    	    color: white;
    	    text-align: center;
    	    padding: 16px;
    	    text-decoration: none;
    	}
    	li a:hover {
    	    background-color: yellow;
    	    color: blue;
    	}
    </style>
    </head>
    <body>
    <ul>
      <li><a href="/">Trang chủ</a></li>
      <li><a href="/list/lesson">Bài học</a></li>
      <li><a href="/other/introduce">Giới thiệu</a></li>
      <li><a href="/other/contact">Liên hệ</a></li>
    </ul>
    </body>
    </html>
    Xem ví dụ
    Chúc các bạn học tốt!laugh
    Từ khóa:

    Danh sách trong HTML

    Danh sách trong HTML

    Danh sách trong HTML

    Danh sách trong HTML
    Danh sách trong HTML
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    222
    - Hôm qua:
    425
    - Tuần này:
    2.722
    - Tuần trước:
    3.197
    - Tháng này:
    10.370
    - Tháng trước:
    19.065
    - Năm này:
    234.053
    - Năm trước:
    17.373
    - Tổng cộng:
    251.426