Danh sách trong HTML
HTML cung cấp cho người lập trình web 3 cách để xác định danh sách các thông tin. Tất cả các danh sách phải chứa một hoặc nhiều phần tử list. Danh sách có thể gồm: Danh sách không có thứ tự trong HTML - Thẻ ul trong HTML Là loại danh sách mà chưa được sắp qua thứ tự. Để tạo loại danh ...
HTML cung cấp cho người lập trình web 3 cách để xác định danh sách các thông tin. Tất cả các danh sách phải chứa một hoặc nhiều phần tử list. Danh sách có thể gồm:
Danh sách không có thứ tự trong HTML - Thẻ ul trong HTML
Là loại danh sách mà chưa được sắp qua thứ tự. Để tạo loại danh sách này bạn sử dụng thẻ <ul>. Mỗi mục trong danh sách được kết nối với một bullet.
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du danh sach chua qua sap xep</title> </head> <body> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
Kết quả là như sau:
- Beetroot
- Ginger
- Potato
- Radish
Thuộc tính type trong HTML
Bạn có thể sử dụng thuộc tính type cho thẻ <ul> để xác định kiểu của bullet mà bạn thích. Theo mặc định nó có hình dạng chiếc đĩa tròn (disc). Có các tùy chọn kiểu cho bạn sử dụng:
<ul type="square"> <ul type="disc"> <ul type="circle">
Ví dụ
Ví dụ sau chúng tôi sử dụng <ul type="square">
<!DOCTYPE html> <html> <head> <title>Vi du danh sach chua qua sap xep</title> </head> <body> <ul type="square"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
Kết quả là:
- Beetroot
- Ginger
- Potato
- Radish
Ví dụ
Sau đây chúng tôi sử dụng <ul type="disc"> trong thư viện HTML:
<!DOCTYPE html> <html> <head> <title>Vi du danh sach chua qua sap xep</title> </head> <body> <ul type="disc"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
Kết quả hiển thị là:
- Beetroot
- Ginger
- Potato
- Radish
Ví dụ
Ví dụ sau chúng tôi sử dụng <ul type="circle"> trong thư viện HTML:
<!DOCTYPE html> <html> <head> <title>Vi du danh sach chua qua sap xep</title> </head> <body> <ul type="circle"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
Nó sẽ tạo ra kết quả sau:
- Beetroot
- Ginger
- Potato
- Radish
Danh sách đã qua sắp xếp trong HTML
Nếu bạn được yêu cầu đặt các mục trong danh sách theo thứ tự số thay vì sử dụng các bullet thì loại danh sách đã qua sắp xếp sẽ được sử dụng. Danh sách này được tạo bởi thẻ <ol>. Thứ tự số bắt đầu từ 1 và lượng gia thêm một cho các mục tiếp theo với thẻ <li>.
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du danh sach da qua sap xep</title> </head> <body> <ol> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
Nó sẽ tạo ra kết quả sau:
- Beetroot
- Ginger
- Potato
- Radish
Thuộc tính type trong HTML
Bạn có thể sử dụng thuộc tính type cho thẻ <ol> để xác định kiểu của loại thứ tự số mà bạn thích. Theo mặc định, nó là một số. Dưới đây là các tùy chọn có thể:
<ol type="1"> - Gia tri so mac dinh. <ol type="I"> - Gia tri so La Ma dang chu hoa. <ol type="i"> - Gia tri so La Ma dang chu thuong. <ol type="a"> - Chu cai thuong. <ol type="A"> - Chu cai hoa.
Ví dụ
Ví dụ sau chúng tôi sử dụng <ol type="1">
<!DOCTYPE html> <html> <head> <title>Vi du danh sach da qua sap xep</title> </head> <body> <ol type="1"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
Kết quả là:
- Beetroot
- Ginger
- Potato
- Radish
Ví dụ
Sau đây chúng tôi sử dụng <ol type="I">
<!DOCTYPE html> <html> <head> <title>Vi du danh sach da qua sap xep</title> </head> <body> <ol type="I"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
Kết quả khi chạy đoạn code trên là:
- Beetroot
- Ginger
- Potato
- Radish
Ví dụ
Tại đây chúng tôi sử dụng <ol type="i">
<!DOCTYPE html> <html> <head> <title>Vi du danh sach da qua sap xep</title> </head> <body> <ol type="i"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
Khi chạy đoạn code trên, nó sẽ tạo ra kết quả sau:
- Beetroot
- Ginger
- Potato
- Radish
Ví dụ
Ví dụ này chúng tôi sử dụng <ol type="A">
<!DOCTYPE html> <html> <head> <title>Vi du danh sach da qua sap xep</title> </head> <body> <ol type="A"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
Kết quả là:
- Beetroot
- Ginger
- Potato
- Radish
Ví dụ
Ở đây chúng tôi sử dụng <ol type="a">
<!DOCTYPE html> <html> <head> <title>Vi du danh sach da qua sap xep</title> </head> <body> <ol type="a"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
Nó tạo ra danh sách dạng sau:
- Beetroot
- Ginger
- Potato
- Radish
Thuộc tính start trong HTML
Bạn có thể sử dụng thuộc tính start cho thẻ <ol> để xác định điểm bắt đầu của dãy số bạn muốn. Dưới đây là các tùy chọn có thể:
<ol type="1" start="4"> - Day so bat dau tu 4. <ol type="I" start="4"> - Day so bat dau tu IV. <ol type="i" start="4"> - Day so bat dau tu iv. <ol type="a" start="4"> - Day chu cai bat dau tu d. <ol type="A" start="4"> - Day chu cai bat dau tu D.
Ví dụ
Ví dụ này chúng tôi sử dụng <ol type="i" start="4" >
<!DOCTYPE html> <html> <head> <title>Vi du danh sach da qua sap xep</title> </head> <body> <ol type="i" start="4"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
Nó sẽ tạo kết quả:
- Beetroot
- Ginger
- Potato
- Radish
Danh sách định nghĩa trong HTML - Thẻ dl trong HTML
HTML và XHTML hỗ trợ một kiểu danh sách mà được gọi là Definition list - Danh sách định nghĩa, là nơi mà các mục được liệt kê dưới dạng giống một từ điển hoặc một quyển bách khoa toàn thư. Danh sách này là một cách tuyệt vời để hiển thị một bảng danh sách, bảng chú giải của các mục dữ liệu.
Danh sách định nghĩa sử dụng 3 thẻ theo sau:
Ví dụ
<!DOCTYPE html> <html> <head> <title>Vi du the dl trong HTML</title> </head> <body> <dl> <dt><b>HTML</b></dt> <dd>La viet tat cua Hyper Text Markup Language</dd> <dt><b>HTTP</b></dt> <dd>La viet tat cua Hyper Text Transfer Protocol</dd> </dl> </body> </html>
Kết quả khi chạy đoạn code trên là:
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học HTML phổ biến khác tại code24h.com:
