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ề HTML
    • 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 nâng cao

HTML Odered List

  1. Giới thiệu HTML
  2. Cơ bản về HTML
    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
  3. HTML nâng cao

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.

ewebvn

Advertisements

Posted on November 7, 2012, in HTML/CSS and tagged , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: