HTML List - Danh Sách

Có ba loại list:

<ul> - unordered list; bullets
<ol> - ordered list; numbers
<dl> - definition list; dictionary

Nhưng mà chỉ dùng đa số là <ol> và <ul>, cái <dl> nói thiệt chả thấy gì khác biệt cho lắm! Nhưng tag <ol> thì có tính tuỳ biến cao nhất!
bên trong danh sách luôn có những à...ờ....nói chung là danh sách. Xem ví dụ sẻ rỏ:

<ul> list
<ul>

<li>Nguyễn Văn Tí</li>

<li>Trần Văn Trội</li>

<li>Quách yên Quẩy</li>
</ul>

Kết quả:

---

• Nguyễn Văn Tí
• Trần Văn Trội
• Quách yên Quẩy

---

<ol> list
<ol>

<li>Nguyễn Văn Tí</li>

<li>Trần Văn Trội</li>

<li>Quách yên Quẩy</li>
</ol>

Kết quả:

---

1. Nguyễn Văn Tí
2. Trần Văn Trội
3. Quách yên Quẩy

---

<dl> list
<dl>

<li>Nguyễn Văn Tí</li>

<li>Trần Văn Trội</li>

<li>Quách yên Quẩy</li>
</dl>

Kết quả:

---

Nguyễn Văn Tí

Trần Văn Trội

Quách yên Quẩy

---

Qua ví dụ bạn sẽ thấy <dl> và <ul> không có gì khác nhau! Nhưng đó là bởi vì ta chưa hề thêm sự tuỳ biến vào.

Tuỳ chỉnh thêm cho list
Phần này đa số ta xoáy vào <ol> list

Bạn thấy với ví dụ trên của <ol> list, list đó bắt đầu với 1, rồi tới 2,3...... Ta có thể để list này bắt đầu với một số tuỳ chọn, trong ví dụ này mình bắt đầu với 4


<ol start="4">

<li>Nguyễn Văn Tí</li>

<li>Trần Văn Trội</li>

<li>Quách yên Quẩy</li>
</ol>

Kết quả:

---

4. Nguyễn Văn Tí
5. Trần Văn Trội
6. Quách yên Quẩy

---

Trong list <ol> không những có thể đánh số thứ tự bằng số, mà còn có thể đánh số thứ tự với chữ cái hoặc số La Mã bằng cách thêm thuộc tính type với giá trị theo  sau: a,A,i,I
a,A sẽ đánh thứ tự theo chữ cái, nhưng khác nhau là a in thường, A in hoa.
Tương tự như thế với i và I

Ví dụ:
<ol type="a">

<li>Mỹ</li>

<li>Nhật</li>

<li>Pháp</li>

<li>Đức</li>

<li>Anh</li>
</ol>

kết quả:

---

1. Mỹ
2. Nhật
3. Pháp
4. Đức
5. Anh

---

Những cái khác các bạn có thể tự hiểu mà không cần ví dụ rồi ha!

Còn với <ul> list, ta lại có một số giá trị của thuộc tính type giúp định dạng cái dấu, các giá trị đó là: type="square",type="disc",type="circle"

Ví dụ thử cái square
<ul type="square">

<li>Mỹ</li>

<li>Nhật</li>

<li>Pháp</li>

<li>Đức</li>

<li>Anh</li>
</ul>

Kết quả

---

• Mỹ
• Nhật
• Pháp
• Đức
• Anh

---

Trong list bạn còn có thể thụt ra thụt vô bằng cách dùng các thẻ <dt> và <dd>

<ul type="square">

<li>Mỹ</li>

<li>Nhật</li>

<li>Pháp</li>

<li>Đức</li>

<li>Anh</li>

<dt>Hàn Quấc</dt>

<dd>Trung Quấc</dd>
</ul>

Kết quả:

---

• Mỹ
• Nhật
• Pháp
• Đức
• Anh
Hàn Quấc
Trung Quấc

---

Và dĩ nhiên bạn cũng có thể lồng list vào list
<ol>

<li>Châu Mỹ</li>

<ol type="a">

<li>Mỹ</li>

<li>Brazil</li>

</ol>

<li>Châu Âu</li>

<ul>

<li>Anh</li>

<li>Pháp</li>

</ul>

<li>Châu Á</li>

<ul type="square">

<li>Trung Quấc</li>

<li>Nhật Bản</li>

</ul>

</ol>

Kết quả:

---

1. Châu Mỹ
1. Mỹ
2. Brazil
2. Châu Âu
• Anh
• Pháp
3. Châu Á
• Trung Quấc
• Nhật Bản

---

bấy nhiêu đây cũng đả dủ để kết thúc phần html list rồi ha!



bản quyền thuộc http://hocvui.net có copy đi đâu thì cũng cho xin cái bản quyền nha, công sức ngồi viết mà!

hiii bài viết cơ bản nhưng rất bổ ích cho những người mới học như tôi,thanhk bạn nhiều nhé

Anh ơi cho em hỏi <li> gọi là gì ? Nó có tác dụng gì ? Em thử bỏ <li> thì nó ko tự xuống hàng và em thêm </br> sau mỗi tên thì nó vẫn ra kết quả như nhau. Anh hướng dẫn rõ hơn chỗ này giúp em với. Thk anh nhiều !

<li> là 1 tag đánh dấu phần nhỏ của 1 danh sách, nó không thể tự đứng 1 mình! Ví dụ:
<ul>
   <li>Nguyễn Văn Tí</li>
   <li>Trần Văn Trội</li>
   <li>Quách yên Quẩy</li>
</ul>


code như thế này :
<ol type= "a">
a</br>
b</br>
c</ol>
Nó vẫn cho ra kết quả :
a
b
c
Như vậy thì mình đâu cần thiết <li> ? Lý do gì nhỉ ? :)

đuơng nhiên là nếu bạn thể thẻ <br /> vào thì đâu cần phải dùng tới các thẻ của list để cho nó xuống hàng, thậm chí chả cần <ol type= "a"> làm chi, nhưng tác dụng của list đâu phải chỉ là để xuống dòng!

List có thể tự động đánh số thứ tự:
<ol start="4">
   <li>Nguyễn Văn Tí</li>
   <li>Trần Văn Trội</li>
   <li>Quách yên Quẩy</li>
</ol>
List có thể đánh thứ tự với chử cái:
<ol type="a">
   <li>Mỹ</li>
   <li>Nhật</li>
   <li>Pháp</li>
   <li>Đức</li>
   <li>Anh</li>
</ol>

Và có những cọ6ng dụng hữu ít trong việc trình bày những gì có tính dây chuyền, thanh menu, dãy các nút....với các website, Forum hiện nay đều dùng list.

Cái đó để lam chi vậy có xài được cho wap không.

dùng được, thử đi rồi sẻ rỏ!

Cái đó để lam chi vậy có xài được cho wap không.

bó tay

Công dụng của <ul><li> hay <ol><li>:
một cấu trúc list hoàn chỉnh thì cần như sau:

* Đối với danh sách không cần thứ tự: thì dùng <ul> <li>
VD: Menu
<ul>
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Liên hệ</li>
</ul>

* Đối với danh sách cần thứ tự: thì dùng <ol> <li>
VD: danh sách món ăn theo thứ tự a b c
<ol>
<li>a. món 1</li>
<li>b. món 2</li>
<li>c. món 3</li>
</ol>

Còn muốn hiểu tại sao dùng hay không kết quả cũng vậy, thì giải thích như vầy:
_ Thứ nhất: nó là chuẩn web (w3c) bắt buộc phải theo, nếu không theo thì một số trình duyệt sẽ hiển thị sai.
_ Thứ hai: Check lỗi validator sẽ báo errors (web sẽ không chuyên nghiệp).
_ Thứ ba: dành cho SEO tìm kiếm, các bộ máy tìm kiếm sẽ dựa vào các nội dung khác nhau mà tìm tới các thẻ khác nhau.
VD: khi nội dung có ý nghĩa là danh sách thì sẽ ưu tiên tìm theo danh sách (ở đây là list cũng chính là các thẻ <li>)
Giả sử một trang web viết:
<p>a. mon 1<br />b. mon 2<br />c. mon 3</p>

Thì khi người dùng tìm "món 2", khi đó bọ tìm kiếm sẽ tìm theo cấu trúc ở <ol><li>

=========================
duonghc
0983204274
duonghc@gmail.com

Bài viết hay lắm. Cám ơn bạn nhiều nhé!!!