Tạo danh sách ngang trong HTML
Show Danh sách không sắp xếp theo thứ tự bắt đầu với thẻ Các mục của danh sách sẽ được đánh dấu bằng các kí hiệu đầu mục ( mặc định là vòng tròn nhỏ màu đen).
<ul> Xem ví dụ 1 Danh sách không sắp xếp trong HTML – Các kiểu thuộc tínhThuộc tính style có thể được thêm vào danh sách không sắp xếp, để định kiểu cua đầu mục:
<ul style=“list-style-type:disc”> Xem ví dụ 2
<ul style=“list-style-type:circle”> Xem ví dụ 3
<ul style=“list-style-type:square”> Xem ví dụ 4:
<ul style=“list-style-type:none”> <li>Sữa</li> </ul> Xem ví dụ 5 Danh sách sắp xếp trong HTMLDanh sách sắp xếp thứ tự bắt đầu bằng thẻ Danh sách các mục sẽ được đánh dấu bằng các số:
<ol> Xem ví dụ 6 Danh sách sắp xếp – Các kiểu thuộc tínhThuộc tính type có thể được thêm vào danh sách sắp xếp, để xác định kiểu của đầu mục dấu:
<ol type=“1”> Xem ví dụ 7
<ol type=“A”> </ol> Xem ví dụ 8
<ol type=“a”> Xem ví dụ 9
<ol type=“I”> Xem ví dụ 10
<ol type=“i”> Xem ví dụ 11 Mô tả danh sách trong HTMLNgoài 2 kiểu danh sách sắp xếp và không sắp xếp như ở trên thì HTML còn hỗ trợ thêm kiểu danh sách mô tả. Danh sách mô tả là kiểu hiển thị danh sách mà các mục con của nó sẽ không được đánh dấu thứ tự, nhưng sẽ có kèm theo một đoạn miêu tả.. Thẻ
<dl> Xem ví dụ 12 Danh sách lồng nhau trong HTMLDanh sách có thể được lồng trong nhau (Danh sách bên trong danh sách):
<ul> Xem ví dụ 13
Danh sách theo chiều ngangDanh sách trong HTML được định kiểu theo nhiều cách khác nhau với CSS. Một trong những kiểu phổ biến là tạo một kiểu danh sách hiển thị theo chiều ngang:
<!DOCTYPE html> </style> </head><body><h2>Danh sách theo chiều ngang</h2><ul id=“menu”> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> </ul></body> </html> Xem ví dụ 14 Bổ xung một chút CSS vào kiểu danh sách, bạn có thể thay đổi và thấy nó như một menu:
ul#menu { ul#menu li { display: inline; } ul#menu li a { background-color: black; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: orange; } Xem ví dụ 15 Tóm tắt bài học:
Danh sách thẻ HTML
|