Danh sách trong HTML

Danh sách trong HTML

Danh sách không sắp đặt & danh sách sắp đặt trong HTML

Danh sách không sắp đặt:

  • Mục a
  • Mục b
  • Mục c
  • Mục d

Danh sách sắp đặt:

  1. Mục 1
  2. Mục 2
  3. Mục 3
  4. Mục 4

Danh sách không sắp đặt trong HTML

Danh sách không sắp đặt theo thứ tự khởi đầu với thẻ <ulvàgt;. Mỗi mục trong danh sách khởi đầu với thẻ <livàgt;.

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).

Chẳng hạn 1:

<

ul

>

<

li

>Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<

li

>Sữa

<

/li

>

<

/ul

>

Xem chẳng hạn 1

Danh sách không sắp đặt trong HTML – Các kiểu tính chất

Tính chất style có thể được thêm vào danh sách không sắp đặt, để định kiểu cua đầu mục

Kiểu
Miêu tả

list-style-type:disc
Danh sách các mục sẽ được đánh dấu mặc định

list-style-type:circle
Danh sách các mục sẽ được đánh dấu bằng vòng tròn

list-style-type:square
Danh sách các mục sẽ được đánh dấu bằng hình vuông

list-style-type:none
Danh sách các mục sẽ không được đánh dấu

Disc:

<

ul

style=

“list-style-type:disc”

>

<

li

>Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<

li

>Sữa

<

/li

>

<

/ul

>

Xem chẳng hạn 2

Circle:

<

ul

style=

“list-style-type:circle”

>

<

li

>Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<

li

>Sữa

<

/li

>

<

/ul

>

Xem chẳng hạn 3

Square:

<

ul

style=

“list-style-type:square”

>

<

li

>

Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<

li

>Sữa

<

/li

>

<

/ul

>

Xem chẳng hạn 4:

None:

<

ul

style=

“list-style-type:none”

>

<

li

>

Cà phê

<

/li

>

<livàgt;Tràvàlt;/lívàgt;

<

li

>Sữa

<

/li

>

<

/ul

>

Xem chẳng hạn 5

Danh sách sắp đặt trong HTML

Danh sách sắp đặt thứ tự khởi đầu bằng thẻ <olvàgt;. Mỗi mục trong danh sách khởi đầu bằng thẻ <livàgt;.

Xem Thêm  in this video we have shown you how to get all ships and drones with max evolution

Danh sách các mục sẽ được đánh dấu bằng các số:

Chẳng hạn 6:

<

ol

>

<

li

>

Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<

li

>Sữa

<

/li

>

<

/ol

>

Xem chẳng hạn 6

Danh sách sắp đặt – Các kiểu tính chất

Tính chất type có thể được thêm vào danh sách sắp đặt, để xác nhận kiểu của đầu mục dấu:

Kiểu
Miêu tả

type=”1″
Danh sách các mục sẽ được đánh số với các số ở giai đoạn này là mặc định

type=”A”
Danh sách các mục sẽ được đánh số với các chữ hoa

type=”a”
Danh sách các mục sẽ được đánh số với các chữ thường

type=”I”
Danh sách các mục sẽ được đánh số với  số La mã hoa

type=”i”
Danh sách các mục sẽ được đánh số với số La mã thường

Kiểu số:

<

ol

type=

“1”

>

<

li

>

Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<

li

>Sữa

<

/li

>

<

/ol

>

Xem chẳng hạn 7

Kiểu chữ in hoa:

<

ol

type=

“A”

>

<

li

>

Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<livàgt;Sữavàlt;/lìvàgt;

<

/ol

>

Xem chẳng hạn 8

Kiểu chữ thường:

<

ol

type=

“a”

>

<

li

>

Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<

li

>Sữa

<

/li

>

<

/ol

>

Xem chẳng hạn 9

Kiểu số La mã hoa:

<

ol

type=

“I”

>

<

li

>

Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<

li

>Sữa

<

/li

>

<

/ol

>

Xem chẳng hạn 10

Kiểu số La mã thường:

<

ol

type=

“i”

>

<

li

>

Cà phê

<

/li

>

<

li

>

Xem Thêm  Tên Dễ Thương Nhất 2022 ❤️ Top 1001 Mẫu Tên Đủ Loại - tên dễ thương cho người yêu

Trà

<

/li

>

<

li

>Sữa

<

/li

>

<

/ol

>

Xem chẳng hạn 11

Miêu tả danh sách trong HTML

Ngoài 2 kiểu danh sách sắp đặt & không sắp đặt như ở trên thì HTML còn khiến cho thêm kiểu danh sách miêu tả.

Danh sách miêu 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 diễn đạt..

Thẻ <dlvàgt; Xác nhận danh sách miêu tả, thẻ <dtvàgt; Xác nhận tên danh sách, & thẻ <ddvàgt; xác nhận miêu tả cho danh sách.

Chẳng hạn 12:

<

dl

>

<

dt

>

Cà phê

<

/dt

>

<

dd

>

– một loai đồ uống nóng màu đen

<

/dd

>

<

dt

>Sữa

<

/dt

>

<

dd

>

– một loại đồ uống lạnh màu trắng

<

/dd

>

<

/dl

>

Xem chẳng hạn 12

Danh sách lồng nhau trong HTML

Danh sách có thể được lồng trong nhau (Danh sách bên trong danh sách):

Chẳng hạn 13:

<

ul

>

<

li

>

Cà phê

<

/li

>

<

li

>

Trà

<

/li

>

<

ul

>

<

li

>Trà đen

<

/li

>

<

li

>Trà xanh

<

/li

>

<

/ul

>

<

/li

>

<

li

>Sữa

<

/li

>

<

/ul

>

Xem chẳng hạn 13


Danh sách mục có thể chứa danh sách mới & các thẻ HTML khác như các ảnh, các link, v.v.

Danh sách theo chiều ngang

Danh 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 thông dụng là tạo một kiểu danh sách hiển thị theo chiều ngang:

Chẳng hạn 14:

<

!DOCTYPE

html

>

<

html

>

<

head

>

<

style

>

ul#danh sách li {
display:inline;
}

<

/style

>

<

/head

>

<

body

>

<

h2

>Danh sách theo chiều ngang

Xem Thêm  Machine Learning Glossary - thuật toán random forest

<

/h2

>

<

ul

id=

“menu”

>

<

li

>

HTML

<

/li

>

<

li

>

CSS

<

/li

>

<

li

>

JavaScript

<

/li

>

<

li

>

PHP

<

/li

>

<

/ul

>

<

/body

>

<

/html

>

Xem chẳng hạn 14

Bổ xung một tí CSS vào kiểu danh sách, bạn có thể biến đổi & thấy nó như một danh sách:

Chẳng hạn 15

ul#danh sách

{

padding:

0;

}

ul#danh sách li

{

display:

inline;

}

ul#danh sách li a

{

background-color:

black;

color:

white;

padding:

10px 20px;

text-decoration:

none;

border-radius:

4px 4px 0 0;

}

ul#danh sách li a:hover

{

background-color:

orange;

}

Xem chẳng hạn 15

Tóm lược bài học:

  • Sử dụng phần tử <ulvàgt; trong HTML để khái niệm một danh sách không sắp đặt
  • Sử dụng tính chất style trong HTML để xác nhận kiểu đầu mục
  • Sử dụng phần tử <ol> trong HTML để khái niệm một danh sách sắp đặt
  • Sử dụng tính chất type trong HTML để xác nhận kiểu số dùng cho đầu mục
  • Sử dụng phần tử <livàgt; trong HTML để xác nhận các mục của danh sách
  • Sử dụng phần tử <dlvàgt; trong HTML để khái niệm một danh sách miêu tả
  • Sử dụng phần tử <dtvàgt; trong HTML để xác nhận tên trong danh sách miêu tả
  • Sử dụng phần tử <ddvàgt; trong HTML để xác nhận dữ liệu miêu tả
  • Các danh sách có thể lồng nhau
  • Các mục của danh sách có thể chứa các phần tử khác của HTML
  • Sử dụng tính chất display:inline trong CSS để hiển thị danh sách theo chiều ngang

Danh sách thẻ HTML

Thẻ
Miêu tả

<ulvàgt;
Khái niệm danh sách không sắp xếp

<olvàgt;
Khái niệm danh sách sắp xếp

<livàgt;
Khái niệm các mục của danh sách

<dlvàgt;
Khái niệm danh sách miêu tả

<dtvàgt;
Xác nhận các thuật ngữ ( tên) trong danh sách miêu tả

<ddvàgt;
Xác nhận các miêu tả trong danh sách đó

Viết một bình luận