Danh sách có thứ tự html

Danh sách có thứ tự [

] giống như danh sách không có thứ tự, ngoại trừ mỗi mục danh sách được đánh số. Chúng hữu ích khi bạn cần liệt kê các bước khác nhau trong một quy trình hoặc xếp hạng các mục từ đầu đến cuối

Bạn có thể tạo danh sách theo thứ tự với

thẻ và sau đó thêm các mục danh sách riêng lẻ vào danh sách bằng cách sử dụng
1. thẻ.

   
     
   Preheat the oven to 350 degrees.
     
   Mix whole wheat flour, baking soda, and salt.
     
   Cream the butter, sugar in separate bowl.
     
   Add eggs and vanilla extract to bowl.
   Đầu ra sẽ trông như thế này
   Làm nóng lò ở 350 độ
   Trộn đều bột mì, muối nở và muối
   Đánh bông bơ, đường trong tô riêng
   Cho trứng và chiết xuất vani vào tô

Tiết lộ. Hỗ trợ của bạn giúp giữ cho trang web hoạt động. Chúng tôi kiếm được phí giới thiệu cho một số dịch vụ chúng tôi đề xuất trên trang này. Tìm hiểu thêm

Danh sách được sử dụng mọi lúc trên web. Các bài báo, menu điều hướng trang web và tính năng sản phẩm trên các trang web thương mại điện tử đều sử dụng danh sách thường xuyên – ngay cả khi bạn không thể biết rằng danh sách đang được sử dụng chỉ bằng cách nhìn vào trang web

Có ba loại danh sách bạn có thể sử dụng và hướng dẫn nhanh này sẽ chỉ cho bạn cách sử dụng từng loại.

nội dung

• 1 Danh sách không có thứ tự
• 2 Danh sách được sắp xếp
  • 2. 1 Thay đổi cách đánh số
    • 2. 1. 1 Tạo danh sách đếm ngược
    • 2. 1. 2 Bắt đầu một danh sách trên một số cụ thể
    • 2. 1. 3 Thay đổi kiểu đánh số
• 3 Danh sách mô tả
• 4 Danh sách lồng nhau
• 5 Sử dụng Danh sách cho Menu
• 6 Danh sách tạo kiểu
• 7 Suy nghĩ kết thúc
• 8 Các yếu tố liên quan

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

Danh sách không có thứ tự là danh sách trong đó thứ tự của các mục trong danh sách không quan trọng. Danh sách không có thứ tự nên được sử dụng khi sắp xếp lại thứ tự của các mục danh sách sẽ không gây nhầm lẫn hoặc thay đổi ý nghĩa của thông tin trong danh sách

Phần tử

    
Step 1
    
Step 2
    
Step 3

5 mở và đóng một danh sách không có thứ tự. Các mục trong danh sách được chứa giữa mục danh sách,

    
Step 1
    
Step 2
    
Step 3

6, thẻ. Một danh sách không có thứ tự đơn giản chứa ba mục có thể được tạo bằng HTML sau

    
Item A
    
Item B
    
Item C

Trừ khi các quy tắc CSS được tạo để thay đổi giao diện của danh sách, cách trình bày mặc định của danh sách không có thứ tự là thêm một dấu đầu dòng kiểu đĩa ở phía bên trái của mỗi mục danh sách và thụt lề toàn bộ danh sách

Đây là cách danh sách ngắn không có thứ tự của chúng tôi hiển thị trong trình duyệt

• Mục A
• Mục B
• Mục C

Danh sách theo thứ tự

Danh sách có thứ tự được sử dụng cho danh sách các mục mà thứ tự của các mục không quan trọng. Cú pháp của danh sách có thứ tự hoàn toàn giống với cú pháp của danh sách không có thứ tự. Tuy nhiên, để tạo danh sách có thứ tự, thẻ

    
Step 1
    
Step 2
    
Step 3

0 được sử dụng thay vì thẻ

    
Step 1
    
Step 2
    
Step 3

5. Bằng cách thực hiện thay đổi này, chúng ta có thể chuyển đổi danh sách không có thứ tự trong ví dụ trước thành danh sách có thứ tự

Chúng tôi cũng sẽ thay đổi văn bản của các mục trong danh sách để làm rõ rằng đây là những mục cần xuất hiện theo một thứ tự tuần tự cụ thể

    
Step 1
    
Step 2
    
Step 3

Như bạn có thể thấy bên dưới, thay vì danh sách có dấu đầu dòng, chúng tôi hiện có một danh sách được đánh số

1. Bước 1
2. Bước 2
3. Bước 3

Thay đổi đánh số

Có những lúc bạn muốn kiểm soát việc đánh số thứ tự của danh sách. Ví dụ: danh sách của bạn có thể được chia nhỏ bằng một đoạn xuất hiện ở giữa danh sách để mở rộng theo một khái niệm nhất định hoặc bạn có thể tạo danh sách đếm ngược bắt đầu bằng một số cao và đếm ngược. Cuối cùng, có lẽ bạn muốn sử dụng chữ số La Mã hơn. HTML và CSS giúp dễ dàng kiểm soát việc đánh số thứ tự của danh sách

Tạo danh sách đếm ngược

Để đảo ngược số của một danh sách, chỉ cần thêm

    
Step 1
    
Step 2
    
Step 3

2 được gán cho thẻ mở đầu

    
Step 1
    
Step 2
    
Step 3

0

    
Item 3
    
Item 2
    
Item 1

Khi được hiển thị trong hầu hết các trình duyệt, số thứ tự của danh sách này sẽ bị đảo ngược

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

Lưu ý rằng các trình duyệt của Microsoft không hỗ trợ thuộc tính

    
Step 1
    
Step 2
    
Step 3

2. Nếu bạn sử dụng thuộc tính này, hãy nhớ rằng khách truy cập sử dụng Internet Explorer hoặc Edge sẽ thấy cách đánh số chuẩn

Bắt đầu một danh sách trên một số cụ thể

Thuộc tính

    
Step 1
    
Step 2
    
Step 3

5 được sử dụng để chỉ định số bắt đầu danh sách có thứ tự. Ví dụ: hãy tưởng tượng bạn có một danh sách gồm 5 mục và sau mục thứ hai và mục thứ tư, bạn muốn thêm một hoặc hai câu với các chi tiết bổ sung. Bạn có thể sử dụng HTML sau để thực hiện việc này mà không cần khởi động lại danh sách đánh số sau mỗi đoạn

    
Step 1
    
Step 2

A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of additional details

    
Step 3
    
Step 4

Notice that we used the start attribute on the ol tag to restart the numbering at "3" following the break in the list above. We'll use the same technique to properly number Step 5 below.

    
Step 5

Đây là cách danh sách đó hiển thị trong trình duyệt

1. Bước 1
2. Bước 2

Một vài câu ngắn gọn về Mục 2 mà chúng tôi không muốn xuất hiện thêm vào mục danh sách. Một câu thứ hai của các chi tiết bổ sung

1. Bước 3
2. Bước 4

Lưu ý rằng chúng tôi đã sử dụng thuộc tính

    
Step 1
    
Step 2
    
Step 3

5 trên thẻ

    
Step 1
    
Step 2
    
Step 3

0 để bắt đầu lại việc đánh số ở “3” sau dấu ngắt trong danh sách trên. Chúng tôi sẽ sử dụng kỹ thuật tương tự để đánh số đúng Bước 5 bên dưới

1. Bước 5

Thay đổi kiểu đánh số

Bạn có thể sử dụng CSS để thay đổi kiểu đánh dấu của danh sách có thứ tự. Ngoài cách đánh số tiêu chuẩn [được gọi là

    
Step 1
    
Step 2
    
Step 3

8 trong CSS], bạn cũng có thể sử dụng

• 
      
  Step 1
      
  Step 2
      
  Step 3
  
  

  9 cho chữ số la mã viết hoa

• 
      
  Item 3
      
  Item 2
      
  Item 1
  
  

  0 cho chữ số la mã viết thường

• 
      
  Item 3
      
  Item 2
      
  Item 1
  
  

  1 để thêm một trình giữ chỗ “0” trước các mục danh sách một chữ số

Chúng tôi đề cập đến thuộc tính CSS

    
Item 3
    
Item 2
    
Item 1

2 được sử dụng để triển khai các kiểu đánh số này bên dưới

Danh sách mô tả

Danh sách mô tả được tạo bằng thẻ

    
Item 3
    
Item 2
    
Item 1

3. Được sử dụng ít thường xuyên hơn so với các đồng nghiệp có thứ tự và không có thứ tự, danh sách mô tả được sử dụng để chứa các nhóm giá trị tên. Mỗi nhóm tên-giá trị bao gồm một tên hoặc thuật ngữ, được đặt giữa các thẻ

    
Item 3
    
Item 2
    
Item 1

4, theo sau là một hoặc nhiều giá trị với mỗi giá trị hoặc mô tả, được đặt giữa các thẻ

    
Item 3
    
Item 2
    
Item 1

5

Ví dụ: nếu chúng tôi muốn sử dụng danh sách mô tả để giải thích mối quan hệ giữa các thành viên trong gia đình, chúng tôi có thể sử dụng đoạn mã sau

    
Step 1
    
Step 2
    
Step 3

0

Khi danh sách đó được hiển thị, nó sẽ được hiển thị theo cách mà mối quan hệ giữa các điều khoản [

    
Item 3
    
Item 2
    
Item 1

4] và giá trị [

    
Item 3
    
Item 2
    
Item 1

5] rõ ràng

Cha MẹJamieCharlieTrẻ EmLandryOakleySkylerThú CưngMèoChóGerbil

Danh sách lồng nhau

Một danh sách lồng nhau là một danh sách trong một danh sách. Nếu bạn đã từng tạo đường viền có dấu đầu dòng trong tài liệu soạn thảo văn bản, có lẽ bạn đã sử dụng nhiều loại dấu đầu dòng và dấu đầu dòng khác nhau để biểu thị các mục là điểm phụ của một mục khác trong đường viền. Đây là hiệu ứng chúng ta sẽ thực hiện khi tạo danh sách lồng nhau

Để tạo danh sách lồng nhau, chỉ cần thêm danh sách mới trong danh sách mẹ như thế này

    
Step 1
    
Step 2
    
Step 3

3

Khi danh sách đó được tải trong trình duyệt, danh sách lồng nhau sẽ được thụt vào xa hơn danh sách mẹ và một loại điểm đánh dấu mục khác sẽ được hiển thị

• Mục A
• Mục B
  • tiểu mục B. 1
  • tiểu mục B. 2
• Mục C

Danh sách lồng nhau không chỉ được sử dụng để tổ chức biểu diễn thông tin trực quan. Trình đọc màn hình và các công nghệ hỗ trợ khác dựa vào cấu trúc lồng nhau của các danh sách phức tạp để hiểu được cấu trúc phân cấp và logic của dữ liệu trong danh sách

Bạn có thể sử dụng các lớp gán để liệt kê các mục và sử dụng CSS để tạo hiệu ứng hình ảnh giống như một danh sách lồng nhau. Tuy nhiên, nếu bạn làm như vậy, cấu trúc phân cấp và logic của danh sách sẽ bị mất đối với khách truy cập trang web sử dụng công nghệ hỗ trợ. Nói cách khác, đừng sử dụng CSS để tạo các danh sách lồng nhau một cách trực quan, hãy sử dụng HTML để tạo chúng

Sử dụng Danh sách cho Menu

Một trong những cách sử dụng phổ biến nhất của danh sách là tạo menu điều hướng trang web. Danh sách không có thứ tự thường là danh sách lựa chọn cho mục đích này. Chỉ với vài dòng CSS, chúng ta có thể chuyển đổi danh sách không có thứ tự thành menu điều hướng ngang hấp dẫn

    
Step 1
    
Step 2
    
Step 3

4

Nếu chúng tôi tải mã đó trong trình duyệt, bạn sẽ nhận thấy rằng mỗi mục menu thay đổi khi bạn di chuột qua nó

• Nhà
• Về chúng tôi
• Liên hệ chúng tôi

Có thể làm được nhiều điều hơn nữa với danh sách, CSS và JavaScript để tạo menu thả xuống tương tác và hướng dẫn về menu của chúng tôi sẽ hướng dẫn bạn cách tạo menu đẹp, hiện đại, tương tác và được tổ chức tốt

Danh sách tạo kiểu

Kiểu chữ danh sách thường được tạo kiểu tốt nhất để phù hợp với kiểu chữ của văn bản đoạn văn trên trang web. Kiểu dáng danh sách cụ thể có thể được thực hiện bằng CSS

Có ba thuộc tính danh sách có thể được tạo kiểu bằng CSS

• 
      
  Item 3
      
  Item 2
      
  Item 1
  
  

  2. Xác định loại điểm đánh dấu đứng trước mỗi mục danh sách. Các giá trị phổ biến bao gồm

  
      
  Item 3
      
  Item 2
      
  Item 1
  
  

  9 [kiểu kiểu danh sách không có thứ tự mặc định],

  
      
  Step 1
      
  Step 2
      
  Step 3
  
  

  8 [kiểu kiểu danh sách có thứ tự mặc định], hình tròn, hình vuông, chữ thường hoặc chữ hoa, và chữ thường hoặc chữ trên, mặc dù một số kiểu bổ sung cũng có thể được sử dụng

• 
      
  Step 1
      
  Step 2
  
  A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of additional details
  
      
  Step 3
      
  Step 4
  
  Notice that we used the start attribute on the ol tag to restart the numbering at "3" following the break in the list above. We'll use the same technique to properly number Step 5 below.
  
      
  Step 5
  
  

  1. Xác định xem nên đặt điểm đánh dấu mục danh sách vào ____92 hộp nội dung hay ____93 của hộp nội dung trong khu vực đệm bên trái của mục

• 
      
  Step 1
      
  Step 2
  
  A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of additional details
  
      
  Step 3
      
  Step 4
  
  Notice that we used the start attribute on the ol tag to restart the numbering at "3" following the break in the list above. We'll use the same technique to properly number Step 5 below.
  
      
  Step 5
  
  

  4. Một hình ảnh cũng có thể được sử dụng làm điểm đánh dấu mục. Thuộc tính này được sử dụng để chỉ định tệp hình ảnh sẽ được sử dụng

Mỗi thuộc tính trong số ba thuộc tính này có thể được áp dụng riêng biệt bằng cách sử dụng tên thuộc tính riêng lẻ hoặc đồng thời với thuộc tính tốc ký ________ 95. Cú pháp thuộc tính

    
Step 1
    
Step 2

A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of additional details

    
Step 3
    
Step 4

Notice that we used the start attribute on the ol tag to restart the numbering at "3" following the break in the list above. We'll use the same technique to properly number Step 5 below.

    
Step 5

5 bao gồm kiểu danh sách, vị trí và giá trị hình ảnh theo thứ tự đó. Ví dụ: nếu chúng tôi muốn chọn điểm đánh dấu hình vuông, đặt nó bên trong hộp nội dung và cũng chỉ định tệp hình ảnh, CSS của chúng tôi sẽ trông giống như thế này

    
Step 1
    
Step 2
    
Step 3

4

Vì chúng tôi đã chỉ định cả điểm đánh dấu danh sách và hình ảnh nên hình ảnh sẽ được sử dụng trừ khi không có sẵn, trong trường hợp đó, điểm đánh dấu hình vuông sẽ được hiển thị

Bớt tư tưởng

Danh sách là một trong những công cụ đa dạng và hiệu quả nhất trong hộp công cụ của nhà thiết kế web. Chúng cung cấp cấu trúc logic, phân cấp cho dữ liệu và có thể được sử dụng theo nhiều cách khác nhau. Hiểu được toàn bộ khả năng của danh sách trong HTML làm cho phần tử HTML mạnh mẽ này thậm chí còn hữu ích hơn

Jon Penland

Jon là một nhà văn tự do, người đam mê du lịch, người chồng và người cha. Anh ấy viết về các công nghệ web như WordPress, HTML và CSS

Danh sách theo thứ tự HTML là gì?

Thẻ OL và UL là gì?

Danh sách có thứ tự có phải là danh sách có dấu đầu dòng không?

Việc sử dụng danh sách có thứ tự là gì?