Trong HTML, có ba loại danh sách chính: danh sách không có thứ tự, có thứ tự và danh sách mô tả. Mỗi người trong số họ được xác định bằng các thẻ khác nhau

Bạn đang xem: 3 loại danh sách trong html

Trong HTML, có ba loại danh sách: không có thứ tự, có thứ tự và danh sách mô tả. Mỗi người trong số họ được xác định bằng cách sử dụng các thẻ khác nhau. Hãy xem qua.

HTML Danh sách không theo thứ tự

Chúng tôi sử dụng danh sách không có thứ tự để nhóm các mục không có thứ tự số. Khi thay đổi thứ tự của các mục trong danh sách, ý nghĩa sẽ không thay đổi. Để tạo danh sách không có thứ tự, chúng tôi sử dụng thẻ & lt; ul & gt; . Thẻ này đi theo từng cặp, nội dung được viết giữa phần mở & lt; ul & gt; và đóng & lt; / ul & gt; thẻ.

Mỗi phần tử của danh sách không có thứ tự được khai báo bên trong thẻ & lt; li & gt; .

Ví dụ về HTML & lt; ul & gt ; để tạo danh sách không có thứ tự:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

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

& lt; /

h1

& gt;

& lt;

ul

& gt;

& lt;

li

& gt;

Đây là một mục danh sách

& lt; /

li

& gt;

& lt;

li

& gt;

Đây là một mục danh sách khác

& lt; /

li

& gt;

& lt;

li

& gt;

Đây là một mục danh sách khác

& lt ; /

li

& gt;

& lt; /

ul

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Các mục trong danh sách không có thứ tự được đánh dấu bằng dấu đầu dòng (vòng tròn nhỏ màu đen) theo mặc định. Tuy nhiên, kiểu dấu đầu dòng mặc định cho các mục trong danh sách có thể được thay đổi bằng thuộc tính type.

Thuộc tính type được sử dụng để thay đổi kiểu dấu đầu dòng mặc định cho các mục trong danh sách.

Ví dụ về HTML & lt; ul & gt; để tạo danh sách không có thứ tự, trong đó các mục được đánh dấu bằng dấu đầu dòng:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

ul

type

=

" circle "

& gt;

& lt;

li

& gt;

Mục danh sách

& lt; /

li

& gt;

& lt;

li

& gt;

Mục danh sách

& lt; /

li

& gt;

& lt;

li

& gt;

Mục danh sách

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt;

ul

type

=

" square "

& gt;

& lt;

li

& gt;

Mục danh sách

& lt; /

li

& gt;

& lt;

li

& gt;

Mục danh sách

& lt; /

li

& gt;

& lt;

li

& gt;

Mục danh sách

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Bạn cũng có thể sử dụng thuộc tính CSS list-style-type hoặc list-style-image để chỉ định loại phần tử mục danh sách.

Ví dụ về HTML & lt; ul & gt; được sử dụng với thuộc tính CSS list-style-type để tạo danh sách không có thứ tự:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về danh sách không có thứ tự:

& lt; /

h2

& gt;

& lt;

ul

style

=

" list-style-type: square; "

& gt;

& lt;

li

& gt;

Đồ uống lạnh

& lt; /

li

& gt;

& lt;

li

& gt;

Đồ uống nóng

& lt; /

li

& gt;

& lt;

li

& gt;

Kem

& lt; / < p class = "hljs-name"> li

& gt;

& lt; /

ul

& gt;

& lt;

ul

style

=

" list-style-type: disk; "

& gt;

& lt;

li

& gt;

Coca-Cola

& lt; / < p class = "hljs-name"> li

& gt;

& lt;

li

& gt;

Fanta

& lt; /

li

& gt;

& lt;

li

& gt;

Trà đá

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt;

ul

style

=

" list-style-type: circle; "

& gt;

& lt;

li

& gt;

Coca-Cola

& lt; / < p class = "hljs-name"> li

& gt;

& lt;

li

& gt;

Fanta

& lt; /

li

& gt;

& lt;

li

& gt;

Trà đá

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Xem Thêm  Làm thế nào để gửi một BÀI ĐĂNG với Yêu cầu Python? - làm thế nào để thực hiện yêu cầu bài đăng python

HTML Danh sách có Thứ tự

Danh sách có thứ tự HTML được sử dụng để liệt kê các mục được đánh dấu bằng số. Nó bắt đầu bằng thẻ & lt; ol & gt; . Thẻ này đi theo từng cặp, nội dung được viết giữa phần mở & lt; ol & gt; và đóng & lt; / ol & gt; thẻ.

Mỗi mục trong danh sách đã đặt hàng bắt đầu bằng cách mở & lt; li & gt; và kết thúc bằng & lt; / li & gt; thẻ đóng.

Ví dụ về HTML & lt; ol & gt ; để tạo danh sách có thứ tự:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Danh sách có thứ tự:

& lt; /

h1

& gt;

& lt;

ol

& gt;

& lt;

li

& gt;

Đây là mục Danh sách số 1

& lt ; /

li

& gt;

& lt;

li

& gt;

Đây là mục Danh sách số 2

& lt ; /

li

& gt;

& lt;

li

& gt;

Đây là mục Danh sách số 3

& lt; /

li

& gt;

& lt; /

ol

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Các mục trong danh sách đã sắp xếp được đánh dấu bằng số theo mặc định. Nếu bạn muốn tạo danh sách có thứ tự bằng bảng chữ cái hoặc số La Mã, bạn chỉ cần thêm type = “a” hoặc type = “I” vào & lt; ol & gt; thẻ.

Ví dụ về HTML & lt; ol & gt; để tạo danh sách có thứ tự với bảng chữ cái và số La Mã:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h3

& gt;

Danh sách được đánh số:

& lt; /

h3

& gt;

& lt;

ol

& gt;

& lt;

li

& gt;

Đào

& lt; /

li

& gt;

& lt;

li

& gt;

Hoa mai

& lt; /

li

& gt;

& lt;

li

& gt;

Banana

& lt; /

li

& gt;

& lt;

li

& gt;

Dâu

& lt; /

li

& gt;

& lt; /

ol

& gt;

& lt;

h3

& gt;

Danh sách theo thứ tự bảng chữ cái:

& lt; /

h3

& gt;

& lt;

ol

type

=

" A "

& gt;

& lt;

li

& gt;

Đào

& lt; /

li

& gt;

& lt;

li

& gt;

Hoa mai

& lt; /

li

& gt;

& lt;

li

& gt;

Banana

& lt; /

li

& gt;

& lt;

li

& gt;

Dâu

& lt; /

li

& gt;

& lt; /

ol

& gt;

& lt;

h3

& gt;

Danh sách theo thứ tự bảng chữ cái (chữ thường):

& lt; /

h3

& gt;

& lt;

ol

type

=

" a "

& gt;

& lt;

li

& gt;

Đào

& lt; /

li

& gt;

& lt;

li

& gt;

Hoa mai

& lt; /

li

& gt;

& lt;

li

& gt;

Banana

& lt; /

li

& gt;

& lt;

li

& gt;

Dâu

& lt; /

li

& gt;

& lt; /

ol

& gt;

& lt;

h3

& gt;

Một danh sách được đánh số (chữ số La Mã):

& lt; /

h3

& gt;

& lt;

ol

type

=

" I "

& gt;

& lt;

li

& gt;

Đào

& lt; /

li

& gt;

& lt;

li

& gt;

Hoa mai

& lt; /

li

& gt;

& lt;

li

& gt;

Banana

& lt; /

li

& gt;

& lt;

li

& gt;

Dâu

& lt; /

li

& gt;

& lt; /

ol

& gt;

& lt;

h3

& gt;

Danh sách được đánh số (chữ số La Mã viết thường):

& lt; /

h3

& gt;

& lt;

ol

type

=

"i"

& gt;

& lt;

li

& gt;

Đào

& lt; /

li

& gt;

& lt;

li

& gt;

Hoa mai

& lt; /

li

& gt;

& lt;

li

& gt;

Banana

& lt; /

li

& gt;

& lt;

li

& gt;

Dâu

& lt; /

li

& gt;

& lt; /

ol

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Xem Thêm  Câu lệnh vượt qua Python | Pass làm gì trong Python - pass python là gì

Danh sách mô tả HTML

Danh sách mô tả HTML được sử dụng để sắp xếp các thuật ngữ hoặc tên với mô tả giống như cách chúng được sắp xếp trong từ điển.

Để tạo danh sách mô tả, chúng tôi sử dụng thẻ & lt; dl & gt; . Thẻ này đi theo từng cặp.

Trong & lt; dl & gt ;, chúng tôi sử dụng thẻ & lt; dt & gt; cho một thuật ngữ / tên trong danh sách mô tả và & lt; dd & gt; cho mô tả một thuật ngữ / tên trong danh sách mô tả.

Ví dụ về HTML & lt; dl & gt ; để tạo danh sách mô tả:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Danh sách mô tả:

& lt; / < p class = "hljs-name"> h1

& gt;

& lt;

dl

& gt;

& lt;

dt

& gt;

Trà

& lt; /

dt

& gt;

& lt;

dd

& gt;

- đồ uống nóng

& lt; / < p class = "hljs-name"> đ

& gt;

& lt;

dt

& gt;

Nước trái cây

& lt; /

dt

& gt;

& lt;

dd

& gt;

- đồ uống lạnh

& lt; / < p class = "hljs-name"> đ

& gt;

& lt; /

dl

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

HTML Danh sách lồng nhau:

Một danh sách lồng nhau chứa một danh sách bên trong một danh sách.

Ví dụ về danh sách lồng nhau trong HTML:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Danh sách HTML lồng nhau

& lt; /

h2

& gt;

& lt;

p

& gt;

Một danh sách lồng nhau chứa một danh sách bên trong một danh sách.

& lt; /

p

& gt;

& lt;

ul

& gt;

& lt;

li

& gt;

Sách sao chép

& lt; /

li

& gt;

& lt;

li

& gt;

Sách

& lt;

ul

& gt;

& lt;

li

& gt;

Sách trinh thám

& lt; /

li

& gt;

& lt;

li

& gt;

Sách La Mã

& lt; /

li

& gt;

& lt;

li

& gt;

Sách truyện cổ tích

& lt; / < p class = "hljs-name"> li

& gt;

& lt; /

ul

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kiểm soát đếm danh sách

Theo mặc định, phép liệt kê trong danh sách có thứ tự bắt đầu từ 1. Sử dụng thuộc tính start để bắt đầu đếm từ một số đã chỉ định.

Ví dụ về danh sách HTML để đếm từ một số cụ thể :

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Điều khiển đếm danh sách

& lt; / < p class = "hljs-name"> h2

& gt;

& lt;

p

& gt;

Theo mặc định, số trong danh sách có thứ tự bắt đầu từ 1. Sử dụng thuộc tính start để bắt đầu đếm từ một số được chỉ định.

& lt; /

p

& gt;

& lt;

ol

start

=

" 40 "

& gt;

& lt;

li

& gt;

Bút

& lt; /

li

& gt;

& lt;

li

& gt;

Bút chì

& lt; /

li

& gt;

& lt;

li

& gt;

Sách chép

& lt; /

li

& gt;

& lt; /

ol

& gt;

& lt;

ol

type

=

" I "

start

=

" 40 "

& gt;

& lt;

li

& gt;

Bút

& lt; /

li

& gt;

& lt;

li

& gt;

Bút chì

& lt; /

li

& gt;

& lt;

li

& gt;

Sách chép

& lt; /

li

& gt;

& lt; /

ol

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Danh sách ngang có CSS ​​

Danh sách HTML có thể được tạo kiểu theo nhiều cách khác nhau với CSS.

Bạn có thể tạo kiểu cho danh sách HTML bằng các thuộc tính CSS khác nhau. Ví dụ: bạn có thể tạo menu điều hướng tạo kiểu danh sách theo chiều ngang.

Xem Thêm  Kiểu nội tuyến CSS - nội tuyến trong css là gì

Ví dụ về danh sách ngang với CSS:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

ul

{

list-style-type

: none;

margin

:

0

;

padding

:

0

;

tràn

: hidden;

background-color

:

# F44336

; }

li

{

float

: left; }

li

a

{

display

: block;

color

: trắng;

text-align

: center;

padding

:

16px

;

text-decoration

: không có; }

li

a

: di chuột

{

background-color

:

# 981816

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về menu điều hướng

& lt; / < p class = "hljs-name"> h2

& gt;

& lt;

p

& gt;

Bạn có thể tạo kiểu cho danh sách HTML bằng các thuộc tính CSS khác nhau. Ví dụ: bạn có thể tạo menu điều hướng tạo kiểu cho danh sách theo chiều ngang.

& lt; /

p

& gt;

& lt;

ul

& gt;

& lt;

li

& gt;

& lt;

a

href

=

" # home "

& gt;

Trang chủ

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

& gt;

& lt;

a

href

=

" https://www.w3docs.com/tool/ "

& gt;

Công cụ

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

& gt;

& lt;

a

href

=

" https://www.w3docs.com/snippets "

& gt;

Đoạn trích

& lt; /

một

& gt;

& lt; /

li

& gt;

& lt;

li

& gt;

& lt;

a

href

=

" https://www.w3docs.com/quiz/ "

& gt;

Câu đố

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

& gt;

& lt;

a

href

=

" https://www.w3docs.com/string-functions/ "

& gt;

Hàm chuỗi

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề 3 loại danh sách trong html

Danh sách (List) trong HTML

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2020-09-18
  • Đánh giá: 4 ⭐ ( 2316 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn tạo danh sách trong HTML: ul (unorder list), ol (order list), dl (description/define list)
    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    https://sites.google.com/view/nguyenthithuylien/buy-me-a-coffee
    html css nguyenthithuylien

Các thẻ danh sách có thứ tự và không có thứ tự

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 7873 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thẻ danh sách có thứ tự và không có thứ tự giúp trình duyệt xác định danh sách có thứ tự hay không, Học web chuẩn, học miễn phí thiết kế web bằng html, css, xhtml, css3, html5, jquery, javascript, wordpress, php qua ví dụ mẫu, chuyên đề, cấu trúc, bài học, tham khảo.

Danh sách trong HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 4320 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Danh sách trong HTML được sử dụng để hiển thị danh sách thông tin. Có 3 loại khác nhau của danh sách HTML. Danh sách có thứ tự hay danh sách có đánh số (ol)

Tạo danh sách (list) trong HTML với 3 kiểu

  • Tác giả: thachpham.com
  • Đánh giá: 5 ⭐ ( 7653 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML hỗ trợ 3 kiểu hiển thị một danh sách là kiểu sắp xếp (Ordered List), kiểu không sắp xếp (Unordered List) và kiểu mô tả (Description List).

Thẻ ul, ol và li trong HTML

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 5049 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Danh sách trong HTML (HTML lists)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 9469 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Danh sách là gì?, Các loại danh sách trong HTML

Cách tạo danh sách (list) trong HTML

  • Tác giả: webcoban.vn
  • Đánh giá: 3 ⭐ ( 4834 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tạo danh sách (list) trong HTML, Tạo danh sách trong HTML, tạo danh sách có thứ tự, tạo danh sách không có thứ tự, tạo danh sách hai cấp, đa cấp

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php