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:
- Mục 1
- Mục 2
- Mục 3
- 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;.
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
>
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
<
/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 đó