HTML List

HTML list được sử dụng để trình bày văn bản theo dạnh danh sách (list) có thứ tự cấp bậc (parent, sub) trong tài liệu HTML, HTML List còn được  sử dụng kết hợp với CSS để thiết kế các hệ thống Menu trên trang web.

HTML List được chia thành 2 loại: Có thứ tự  (Ordered) và Không có thứ tự (UnOrdered). Về cơ bản cách sắp xếp phần tử trong danh sách hoàn toàn giống nhau.

- UnOrdered List được bắt đầu bằng thẻ <ul> và kết thúc bằng thẻ </ul>

- Ordered List được bắt đầu bằng thẻ <ol> và kết thúc bằng thẻ </ol>

- Các phần tử trong danh sách được bắt đầu bằng thẻ <li> và kết thúc bằng thẻ </li>

- UnOrdered List: Danh sách các phần tử được dánh dấu bằng các ký tự (bullets)

 

- UnOrdered List: Danh sách các phần tử được dánh dấu bằng  các ký tự  alphabet, số La Mã, tùy theo người viết mã quy định với thuộc tính type.

Ví dụ:
HTML UnOdered List

  • Giới thiệu HTML

  • Cơ bản về HTMLHTML nâng cao

    • Các thành phần HTML

      • Các thẻ trong HTML

      • HTML và các thuộc tính



    • Tạo tài liệu HTML đầu tiên





HTML Odered List

  1. Giới thiệu HTML

  2. Cơ bản về HTMLHTML nâng cao

    1. Các thành phần HTML

      1. Các thẻ trong HTML

      2. HTML và các thuộc tính



    2. Tạo tài liệu HTML đầu tiên





Code










01<p>HTML UnOdered List</p>










02<ul>










03    <li>Giới thiệu HTML</li>










04    <li>










05        Cơ bản về HTML










06        <ul>










07            <li>










08                Các thành phần HTML










09                <ul>










10                    <li>Các thẻ trong HTML</li>










11                    <li>HTML và các thuộc tính</li>










12                </ul>










13            </li>










14            <li>Tạo tài liệu HTML đầu tiên</li>










15        </ul>










16    </li>










17    <li>HTML nâng cao</li>










18</ul>










19 










20<p>HTML Odered List</p>










21<ol type="1">










22    <li>Giới thiệu HTML</li>










23    <li>










24        Cơ bản về HTML










25        <ol type="a">










26            <li>










27                Các thành phần HTML










28                <ol type="i">










29                    <li>Các thẻ trong HTML</li>










30                    <li>HTML và các thuộc tính</li>










31                </ol>










32            </li>










33            <li>Tạo tài liệu HTML đầu tiên</li>










34        </ol>










35    </li>










36    <li>HTML nâng cao</li>










37</ol>




Các giá trị của thuộc tính type:
- Với UnOrdered list: Thuộc tính type có 3 giá trị:
+ circle: chấm tròn trắng
+ disc: chấm tròn đen
+ square: Chấm vuông
- Với Ordered list: Thuộc tính type có 3 giá trị:
+ 1: Hiển thị số theo dạng thập phân
+ a: Hiển thị theo bảng chữ cái ở dạng chữ viết thường
+ A: Hiển thị theo bảng chữ cái ở dạng chữ viết Hoa
+ i: Hiện thị số La Mã ở dạng viết thường
+ I: Hiển thị số La Mã ở dạng viết Hoa
- Tuy nhiên sau này ta có thể sử dụng CSS để quy định thuộc tính hiển thị của các danh sách này như: có hiển thị list hay không, thay thế bằng ảnh nền…
Hôm nay mình sẽ dừng bài viết tại đây, hy vọng rằng qua bài viết này sẽ giúp các bạn có thể hiểu được cách tạo HTML list và khi nào nên dùng HTML list

KẾT LUẬN
Khi nào thì dùng HTML list?
- Khi muốn hiển thị văn bản, tài liệu theo danh sách, danh sách có thứ tự cấp bậc.
- Thiết kế các menu.

Post a Comment

Mới hơn Cũ hơn