Thẻ ul li ol trong html

Trong bài học này chúng ta cùng tìm hiểu 3 cặp thẻ ul li ol để tạo một danh sách, bài này rất quan trọng trong mã nguồn html bởi 3 cặp thẻ ul li ol thường được sử dụng trong thiết kế website.

Thẻ ul li ol trong html là gì

Tất nhiên là thẻ ul li ol là dùng để tạo danh sách cho website rồi, các lập trình viên thường dùng những cặp thẻ này code thành menu của một website, hoặc là tạo từng mục có danh sách rõ ràng nhằm giúp người đọc dễ hiểu nội dung hơn.

Thẻ ul trong html

Thẻ ul trong html dùng để tạo ra một danh sách không có thứ tự, thẻ ul được viết tắt bởi từ unordered list chắc là bạn đã hiểu ý nghĩa của nó rồi đúng không nào.

Cấu trúc của cặp thẻ ul như sau : <ul></ul> bạn cũng nên lưu ý là thẻ ul là một cặp thẻ nhé.

Thẻ li trong html

Thẻ li trong html dùng để tạo ra từng mục cho website, nó sẽ nằm trong cặp thẻ <ul></ul> và đây là nguyên tắc không bao giờ thay đổi.

cấu trúc của cặp thẻ li như sau : <ul><li></li></ul> trong cặp thẻ ul sẽ có rất nhiều cặp thẻ li.

Cách tạo danh sách không có thứ tự

Bây giờ các bạn cần phải tìm hiểu sự kết hợp của thẻ ul li để có cái nhìn trực quan hơn, hai cặp thẻ này kết hợp lại với nhau sẽ tạo ra một danh sách không có thứ tự.

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ảnh minh họa cho code html trên :

cách tạo danh sách không có thứ tự trong html
cách tạo danh sách không có thứ tự trong html

Thẻ ol trong html

Nếu như nói thẻ ul là thẻ tạo ra một danh sách không có thứ tự thì thẻ ol sẽ tạo ra một danh sách có số thứ tự, cấu trúc cặp thẻ <ol><li></li></ol>, mặc định thẻ li sẽ nằm trong thẻ ol đó là quy tắc không thẻ thay đổi.

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Ảnh minh họa cho code html trên :

cách tạo danh sách có thứ tự trong html
cách tạo danh sách có thứ tự trong html

Cách tạo thẻ ul lòng nhau trong html

Bạn hiểu như thế này trong một menu website có những menu con mà những menu con lại có thêm những menu con nữa đó chính là thẻ ul lòng nhau.

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Ảnh minh họa cho đoạn code html trên :

thẻ ul lòng nhau trong html
thẻ ul lòng nhau trong html

Cách tạo thẻ ol lòng nhau trong html

Bạn đã hiểu ý nghĩa của thẻ ol rồi đúng không nào và cũng hiểu được thẻ ul lòng nhau rồi, bây giờ tiếp tục với thẻ ol lòng nhau trong html.

<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>

Ảnh minh họa cho đoạn code html trên :

thẻ ol lòng nhau trong html
thẻ ol lòng nhau trong html

Lời kết : Trong bài này khá đơn giản đúng không nào, các bạn chỉ cần nhìn lướt qua là thuộc ngay, mình biết những bạn học lập trình rất thông minh mà cũng có một phần nào đó nhưng siêng học lập trình là thông minh lên ( đó là sự thật khoa học đã chứng minh).

-

Trả lời