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: cách tạo danh sách có thứ tự 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; các 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  Thẻ meta Viewport cho Thiết kế web đáp ứng - GeeksforGeeks - meta name viewport content width

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; các 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 SQL CREATE TABLE (Có ví dụ) - tạo bảng từ sql

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ểm tra xem Chuỗi có chứa Ký tự cụ thể trong JavaScript hay không - cách tìm ký tự cụ thể trong chuỗi javascript

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ủ đề cách tạo danh sách có thứ tự 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 ⭐ ( 3497 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ách tạo một danh sách có thứ tự trong HTML

  • Tác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 8011 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: cách tạo một danh sách có thứ tự trong html, cach tao mot danh sach co thu tu trong HTML

Thẻ tạo danh sách ul, ol, li trong HTML

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 5387 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phần tử danh sách (list) được sử dụng rất thường xuyên trong một tài liệu web bằng HTML. Trong một trang web thường người ta sử dụng các phần tử danh sách

Bài 06: Tạo Danh Sách Trong HTML

  • Tác giả: hocban.vn
  • Đánh giá: 5 ⭐ ( 1849 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ cùng tìm hiểu cách tạo danh sách trong HTML. Cái này các bạn sẽ sử dụng nhiều trong tạo menu và danh sách trong bài viết.

Danh sách có thứ tự

  • Tác giả: www.hiepsiit.com
  • Đánh giá: 3 ⭐ ( 7226 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Các Thẻ Tạo Danh Sách (Tạo List) Trong HTML

  • Tác giả: nguyenhung.net
  • Đánh giá: 3 ⭐ ( 1671 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thẻ tạo danh sách (tạo list) trong HTML được sử dụng khá thường xuyên, chẳng hạn như tạo menu, tạo danh sách chuyên mục. Học cách dùng thẻ list

Danh sách (list) trong HTML, cú pháp, ví dụ, cách sử dụng

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 1634 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: danh sach list trong html, Danh sách (list) trong HTML, cú pháp, ví dụ, cách sử dụng

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