Danh sách bên trong danh sách html

Thuộc tính giá trị Ví dụ mô tả kiểu danh sách Một hoặc nhiều giá trị của thuộc tính image, position, style bên dưới. kiểu danh sách. Quảng trường; . kiểu danh sách URL hình ảnh kiểu danh sách. url [hình ảnh/danh sách. gif]; . không có kiểu danh sách. không ai; . kế thừa kiểu danh sách. thừa kế; . kiểu danh sách-vị trí bên trong kiểu danh sách. phía trong; . kiểu danh sách bên ngoài. ở ngoài; . kế thừa kiểu danh sách. thừa kế; . kiểu danh sách kiểu danh sách kiểu Armenia. người Armenia;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách vòng tròn. khoanh tròn;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách chữ tượng hình cjk. cjk-chữ tượng hình;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách thập phân. số thập phân;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách kiểu thập phân đứng đầu bằng 0. thập phân-đầu-không;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách đĩa. đĩa;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách Georgian. người Georgia;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách tiếng Do Thái. tiếng Do Thái;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách hiragana. chữ viết hoa;

• List list-style-type 01
• List list-style-type 02

hiragana-iroha danh sách-kiểu-loại. hiragana-iroha;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách katakana. chữ katakana;

• List list-style-type 01
• List list-style-type 02

katakana-iroha danh sách-kiểu-loại. katakana-iroha;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách alpha thấp hơn. alpha thấp hơn;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách tiếng Hy Lạp thấp hơn. hạ-lạp;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách tiếng Latinh thấp hơn. tiếng Latinh thấp hơn;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách kiểu La Mã thấp hơn. hạ-la-mã;

• List list-style-type 01
• List list-style-type 02

không có kiểu danh sách. không ai;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách vuông. Quảng trường;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách alpha trên. alpha trên;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách kiểu chữ Latinh trên. thượng-la-tinh;

• List list-style-type 01
• List list-style-type 02

kiểu danh sách kiểu La Mã trên. thượng-la-mã;

• List list-style-type 01
• List list-style-type 02

kế thừa kiểu danh sách. thừa kế; Ở đầu bài mình nói là các thuộc tính list-style này chỉ có thể áp dụng cho các phần tử

list-style: url[‘hình ảnh’] outside;

0 vì mặc định các phần tử này sẽ hiển thị theo kiểu mục danh sách [tức là mục danh sách]. Nếu bạn muốn sử dụng cho các phần tử khác, thì bắt buộc phải chuyển nó về kiểu mục danh sách hiển thị này. You can convert the display type of it with thuộc tính

list-style: url[‘hình ảnh’] outside;

1. Dưới đây là một ví dụ về hiển thị danh sách với thẻ

list-style: url[‘hình ảnh’] outside;

2

Phần tử danh sách [list] được sử dụng rất thường xuyên trong một trang web tài liệu bằng HTML. Trong một trang web, người ta thường sử dụng các phần tử danh sách rất nhiều, chẳng hạn như menu, danh sách những thông tin nào đó,…v…v…đều được tạo ra bởi các thẻ tạo danh sách trong HTML

Trong HTML có ba kiểu danh sách [loại danh sách] đó là kiểu sắp xếp [danh sách có thứ tự], kiểu không sắp xếp [danh sách không có thứ tự] và kiểu danh sách mô tả [danh sách mô tả]. Tools

• Kiểu sắp xếp [Ordered List]. Là loại hiển thị một danh sách mà các mục con của nó được sắp xếp theo thứ tự bằng số hoặc chữ cái
• Kiểu không sắp xếp [Unordered List]. Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được sắp xếp theo thứ tự mà chỉ được đánh dấu bằng một ký tự đặc trưng
• Type description [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ẽ đi kèm theo một đoạn miêu tả

Dưới đây là hình ảnh khác nhau giữa ba kiểu danh sách do W3School mô tả

Danh sách được yêu cầu

Để khai báo một danh sách với kiểu sắp xếp, bạn phải bắt đầu bằng cặp thẻ

. Bên trong cặp thẻ này sẽ là danh sách các mục con, mỗi mục sẽ đặt trong cặp thẻ

, xem ví dụ bên dưới

Xem ví dụ. http. // codepen. io/thachpham92/pen/QwPewe/

Thẻ

 cũng hỗ trợ thêm một thuộc tính nữa tên làtype, thuộc tính này là để bạn thiết lập kiểu sắp xếp các mục con bên trong danh sách. Giá trị của thuộc tính loại là 1, i,

list-style: url[‘hình ảnh’] outside;

0,

list-style: url[‘hình ảnh’] outside;

1,

list-style: url[‘hình ảnh’] outside;

2

Danh sách không có thứ tự

Giống như Danh sách có thứ tự, kiểu danh sách Danh sách không có thứ tự sẽ bắt đầu bằng cặp thẻ

list-style: url[‘hình ảnh’] outside;

3 và bên trong nó, các mục con sẽ được khai báo bằng cặp thẻ

Xem ví dụ. http. // codepen. io/thachpham92/pen/wBZVvO/

Bạn có thể thay đổi kiểu hiển thị của thẻ

 bằng cách bổ sung kiểu thuộc tính với thuộc tính CSS là
2 và giá trị là
3,
4,
5 và
6

Danh sách mô tả

Với kiểu danh sách này thì cách viết thẻ hơi khác một chút, đó là nó sẽ bắt đầu danh sách bằng cặp thẻ

7, trong đó tên mỗi mục con sẽ được khai báo bằng cặp thẻ
8 và mô tả cho mục con sẽ được khai báo

Xem ví dụ. http. // codepen. io/thachpham92/pen/zxXgxo/

Xếp chồng danh sách

Trong HTML, bạn có thể tiến hành xếp chồng một danh sách vào nhiều tầng bằng cách dài thêm một danh sách nữa vào cặp thẻ

 của mục con mà bạn muốn thêm các tầng cho nó, như ví dụ dưới đây

Xem ví dụ. http. // codepen. io/thachpham92/pen/ogOKgo/

Lời kết

Quá dễ dàng để khai báo phần tử danh sách trong HTML phải không? . Cố gắng lên nào, chỉ còn vài phần tử quan trọng nữa thôi là bạn đã thành chuyên gia HTML rồi