Thực đơn
trang chủTập tin và thư mục

Danh sách HTML được đánh số. Danh sách có dấu đầu dòng và đánh số HTML

Danh sách ở khắp mọi nơi. Chúng được sử dụng cho:

  • chia các đoạn văn bản lớn thành nhiều phần;
  • nêu bật những điểm quan trọng;
  • tuyên bố về “kế hoạch hành động” và danh sách các hoạt động ( danh sách đánh số trong HTML).

Sử dụng dấu đầu dòng giúp mọi người hiểu những gì bạn nói dễ dàng hơn. Nhưng chúng được đặt trên một trang web như thế nào?

Danh sách có dấu đầu dòng (hoặc danh sách không có thứ tự)

Loại danh sách đầu tiên chúng ta xem xét có dấu đầu dòng.

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

    Danh sách có dấu đầu dòng còn được gọi là danh sách không đánh số vì không có cách đánh số mục. Danh sách có dấu đầu dòng sử dụng một cặp thẻ. Dưới đây là một ví dụ đơn giản:

    • Đoạn 1
    • điểm 2
    • Điểm 3

    Đầu tiên, toàn bộ danh sách được đưa vào thẻ. Khi bạn mở thẻ danh sách, hãy đảm bảo bạn đóng thẻ đó rồi chuyển sang điền các mục trong danh sách.

    thuộc tính loại

    Thuộc tính type xác định loại điểm đánh dấu bạn sẽ thấy trên trang. Mặc dù bạn có thể xác định nhiều kiểu dấu đầu dòng bằng CSS và thậm chí sử dụng hình ảnh của riêng mình, nhưng tốt nhất bạn nên tuân theo các kiểu cơ bản ( bao gồm trong một danh sách đánh số HTML):

    Liệt kê các mục - gắn thẻ

  • Mỗi phần tử trong danh sách được gói trong một cặp thẻ riêng biệt

  • . Bạn có thể thường xuyên làm mà không cần
  • , nhưng tôi khuyên bạn nên tuân thủ quy tắc này.

    Danh sách trên được đặt trong một thẻ riêng

      , nhung moi nguoi
    • cũng hỗ trợ thuộc tính loại riêng của nó và danh sách sau có thể được tạo theo cách này:


      Thụt lề danh sách dấu đầu dòng

      Trước khi áp dụng bất kỳ kiểu CSS nào cho danh sách, HTML ( hay đúng hơn là một trình duyệt) áp dụng thụt lề cho nó, vì vậy nó trông khác với một đoạn thông thường có thẻ

      Danh sách được sắp xếp/đánh số - thẻ

        Nếu bạn muốn sắp xếp các mục trong danh sách thì thẻ

          sẽ giúp với điều này. Theo mặc định, nó chỉ định một danh sách HTML được đánh số:

          1. Yếu tố 1
          2. Yếu tố 2
          3. Yếu tố 3

          cung cấp cho chúng tôi đầu ra:

          A. Yếu tố 1
          B. Yếu tố 2
          C. Yếu tố 3

          Thuộc tính type cho phép bạn sử dụng một số tùy chọn thiết kế bổ sung cho danh sách được đánh số so với danh sách có dấu đầu dòng.

          Bắt đầu một danh sách được đánh số ở một số cụ thể

          Giả sử bạn đang tập hợp các hướng dẫn để tạo bảng. Bạn có thể sử dụng một danh sách được đánh số cho việc này. Sau mỗi mục, bạn muốn đặt hình ảnh và văn bản bổ sung, và trong trường hợp này, bạn sẽ cần một số danh sách.

          Vấn đề là theo mặc định, mọi danh sách đều bắt đầu bằng số 1 (hoặc chữ A). Điều này sẽ tạo ra sự nhầm lẫn trong công tác quản lý của bạn!

          May mắn thay, HTML có thuộc tính bắt đầu cho phép bạn bắt đầu đánh số ở một số được chỉ định:

          1. Bước bốn
          2. Bước năm
          3. Bước sáu

          Cung cấp cho chúng tôi những điều sau đây:
          4. Bước bốn
          5. Bước năm
          6. Bước sáu

          Đảo ngược thứ tự

          Nếu bạn muốn hiển thị số (hoặc chữ cái) theo thứ tự ngược lại, bạn có thể thực hiện việc này bằng cách thêm từ khóa đảo ngược vào thẻ danh sách được đánh số trong HTML của mình:

          1. Điểm đầu tiên
          2. Điểm thứ hai
          3. Điểm thứ ba
          4. Điểm thứ tư
          5. Điểm thứ năm

          Danh sách kết quả sẽ trông như thế này:
          5. Điểm thứ năm.
          4. Điểm thứ tư.
          3. Điểm thứ ba.
          2. Điểm thứ hai.
          1. Điểm đầu tiên.

          Danh sách dấu đầu dòng đa cấp trong HTML

          Sử dụng các bản vá hỗ trợ được cài đặt trong trình duyệt ( và đôi khi có tính năng ghi đè CSS cho một số trang web), bạn có thể tạo danh sách đánh số nhiều cấp HTML. Điều này đạt được bằng cách nhúng một danh sách vào trong một danh sách khác:

          • Yếu tố cấp cao nhất
            • Yếu tố phụ 1
            • Cấp dưới 2
          • Yếu tố cấp cao nhất

          Điều gì mang lại cho chúng tôi:

          Yếu tố cấp cao nhất
          o Cấp dưới 1
          o Nô lệ 2
          Yếu tố cấp cao nhất

          Bạn có thể sử dụng kết hợp các thẻ

            Và
              . Điều này có thể hữu ích nếu bạn cần đánh dấu các mục phụ trong danh sách được đánh số bằng bút đánh dấu.

              1. Yếu tố cấp cao nhất
              o Cấp dưới 1
              o Nô lệ 2
              2. Yếu tố cấp cao nhất

              Sử dụng danh sách đánh số HTML trên các trang của bạn.

              Phần kết luận

              Đây chỉ là phần giới thiệu nhanh về cách sử dụng danh sách trong thiết kế web nhưng đây là nơi tốt để bắt đầu. Nếu bạn có bất kỳ câu hỏi nào, xin vui lòng hỏi họ trong phần bình luận!

              Dịch bài viết" Danh sách được đánh số và dấu đầu dòng trong HTML"đã được chuẩn bị bởi nhóm dự án thân thiện.

              Danh sách đánh số

              Danh sách được đánh số đôi khi còn được gọi là danh sách có thứ tự. Danh sách loại này là một chuỗi các phần tử riêng lẻ được sắp xếp theo thứ tự. Sự khác biệt so với danh sách có dấu đầu dòng là trong danh sách đánh số, mỗi phần tử tự động được đặt trước một số sê-ri. Kiểu đánh số phụ thuộc vào trình duyệt và có thể được chỉ định bởi thuộc tính của thẻ danh sách. Mặt khác, việc triển khai danh sách đánh số rất giống với việc triển khai danh sách dấu đầu dòng.

              Để tạo danh sách được đánh số, bạn nên sử dụng thẻ container<CV> CV>, bên trong chứa tất cả các phần tử của danh sách.

              Mỗi thành phần danh sách phải bắt đầu bằng một thẻ<LI> và kết thúc bằng thẻLI>.

              Đặc điểm phần tử OL:

              TYPE="kiểu đánh số"

              START="vị trí bắt đầu">

              Thuộc tính TYPE chỉ định kiểu đánh số được sử dụng để đánh dấu các thành phần trong danh sách. Nó có thể có những ý nghĩa sau:

               A – dấu hiệu ở dạng chữ Latinh in hoa;

               a – dấu hiệu ở dạng chữ Latinh viết thường;

               Ký hiệu I- ở dạng chữ số La Mã lớn;

               i- dấu hiệu ở dạng chữ số La Mã nhỏ;

               1- dấu hiệu ở dạng chữ số Ả Rập, giá trị này được sử dụng theo
              mặc định.

              Thuộc tính START chỉ định vị trí bắt đầu đánh số danh sách. Sử dụng thuộc tính này, bạn có thể bắt đầu đánh số, ví dụ: bằng số 5 hoặc chữ E, tùy thuộc vào kiểu đánh số. Giá trị của thuộc tính START là một số, bất kể kiểu đánh số nào.

              Đặc tả phần tử LI cho danh sách được đánh số:

              TYPE="kiểu đánh số"

              VALUE="số phần tử">!}

              Thuộc tính TYPE chỉ định kiểu đánh số; nó có thể lấy các giá trị giống như thuộc tính phần tử OL có cùng tên. Giá trị mặc định của thuộc tính này là 1.

              Thuộc tính VALUE cho phép bạn thay đổi số lượng phần tử này và số lượng các phần tử tiếp theo cũng sẽ thay đổi.

              Ví dụ sử dụng danh sách đánh số:

              Danh sách Ví dụ

              Các thành phố của Nga theo quy mô:

            1. Mátxcơva

            2. Saint Petersburg

            3. Novosibirsk

              4. Đây là cách trình duyệt sẽ hiển thị ví dụ này:

              Danh sách các định nghĩa

              Danh sách định nghĩa, còn được gọi là từ điển định nghĩa, là một loại danh sách đặc biệt. Không giống như các loại danh sách khác, mỗi phần tử của danh sách định nghĩa luôn bao gồm hai phần. Phần đầu tiên của thành phần danh sách cho biết thuật ngữ đang được xác định và phần thứ hai chứa văn bản dưới dạng mục từ điển tiết lộ ý nghĩa của thuật ngữ.

              Danh sách định nghĩa được chỉ định bằng thẻ vùng chứa<D.L.>. Bên trong nó được gắn thẻ<D.T.> thuật ngữ đang được xác định được đánh dấu và thẻ<ĐĐ> – một đoạn văn có định nghĩa của nó. Bên trong một phần tử

              Không thể sử dụng đoạn văn (P) và tiêu đề (H1-H6), nhưng chúng có thể được sử dụng bên trong một phần tử
              . Không có thuộc tính nào cho các phần tử danh sách định nghĩa. Nói chung, danh sách các định nghĩa được viết như sau:

              Thuật ngữ

              Định nghĩa của thuật ngữ

              Một ví dụ về sử dụng danh sách định nghĩa:

              Ví dụ về danh sách định nghĩa

              Thành phần của Microsoft Office

              Phần mềm soạn thảo văn bản

              Trình xử lý văn bản đa chức năng

              Microsoft Excel

              Chương trình làm việc với điện tử

              những cái bàn

              Sự khác biệt duy nhất là thẻ này được tạo ra hoàn toàn cho danh sách đánh số. Tên của thẻ xuất phát từ chữ viết tắt tiếng Anh “Ordered List” – một danh sách được đánh số.

              Cú pháp thẻ

                1. Yếu tố số 1
                2. Yếu tố số 2
                3. Yếu tố số 3
                4. ...

          Trong đó thuộc tính type="value" có thể nhận các giá trị sau

          • A - đặt dấu ở dạng chữ Latinh in hoa (A, B, C..);
          • a - đặt các điểm đánh dấu ở dạng chữ Latinh viết thường (a, b, c..);
          • I - đặt dấu hiệu dưới dạng chữ số La Mã lớn (I, II, III, IV..);
          • i - đặt dấu hiệu dưới dạng chữ số La Mã nhỏ (i, ii, iii, iv..);
          • 1 (mặc định) - đặt điểm đánh dấu ở dạng chữ số Ả Rập (1, 2, 3..);

          Thuộc tính start="value" chỉ định giá trị ban đầu (giá trị bắt đầu) của báo cáo.

          Thuộc tính đảo ngược chỉ định việc đếm ngược (nếu cần).

          Nhãn

            yêu cầu bắt buộc sử dụng thẻ đóng

          Để tạo thành phần tử danh sách, thẻ ghép nối được sử dụng

        1. . Giữa các thẻ mở và đóng là các từ, cụm từ, đoạn văn, hình ảnh, đoạn mã và nhiều nội dung khác là nội dung của danh sách dấu đầu dòng.

          Ghi chú

          Trong danh sách, bạn có thể thay đổi tài khoản thành tài khoản của riêng bạn. Có một giá trị thuộc tính đặc biệt="" trên thẻ cho mục đích này.

        2. , được gán một số giá trị số. Ví dụ

          1. Yếu tố số 1
          2. Yếu tố số 2
          3. Yếu tố số 3

      Ví dụ với danh sách được đánh số trong html (
        )

      Ví dụ 1. Danh sách đánh số HTML bằng chữ cái Latin

      Ví dụ với chữ in hoa

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3
      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3

      Ví dụ với chữ thường

      1. Yếu tố số 10
      2. Yếu tố số 11
      3. Yếu tố số 12

      Đây là những gì nó trông giống như trên trang:

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3

      Ví dụ 2. Danh sách đánh số HTML bằng chữ La Mã

      Ví dụ với chữ in hoa

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3

      Đây là những gì nó trông giống như trên trang:

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3

      Ví dụ với chữ thường

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3

      Đây là những gì nó trông giống như trên trang:

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3

      Ví dụ 3. Danh sách đánh số html khác vị trí bắt đầu

      Một ví dụ cho thấy khả năng của thuộc tính bắt đầu, cho phép bạn đặt giá trị bắt đầu của bộ đếm.

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3

      Đây là những gì nó trông giống như trên trang:

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3

      Ví dụ 4. Thay đổi số đếm trong danh sách đánh số html

      Dưới đây là một ví dụ với khả năng thay đổi giá trị bộ đếm bằng thuộc tính value khi hiển thị phần tử mới trong thẻ

    • .

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3
      4. Yếu tố số 4

      Đây là những gì nó trông giống như trên trang:

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3
      4. Yếu tố số 4

      Ví dụ 5. Đảo ngược danh sách trong html

      Dưới đây là ví dụ về danh sách được đánh số ngược (đếm theo thứ tự ngược lại).

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3
      4. Yếu tố số 4

      Đây là những gì nó trông giống như trên trang:

      1. Yếu tố số 1
      2. Yếu tố số 2
      3. Yếu tố số 3
      4. Yếu tố số 4

      Danh sách được đánh số là tập hợp các phần tử có số sê-ri. Kiểu và kiểu đánh số phụ thuộc vào thuộc tính thẻ

        , được sử dụng để tạo danh sách. Mỗi mục trong danh sách đánh số được biểu thị bằng một thẻ
      1. như hình dưới đây.

        1. Điểm đầu tiên
        2. Điểm thứ hai
        3. Điểm thứ ba

        Nếu bạn không chỉ định bất kỳ thuộc tính bổ sung nào và chỉ viết thẻ

          , thì mặc định là danh sách có các số Ả Rập (1, 2, 3,...), như trong Ví dụ 11.3.

          Ví dụ 11.3. Tạo một danh sách đánh số

          Danh sách đánh số

          Làm việc với thời gian

          1. tạo ra sự đúng giờ (bạn sẽ không bao giờ bị trễ bất cứ điều gì);
          2. chữa bệnh đúng giờ (bạn sẽ không bao giờ vội vàng);
          3. thay đổi nhận thức về thời gian và đồng hồ.

          Kết quả của ví dụ này được hiển thị trong Hình. 11.3.

          Cơm. 11.3. Chế độ xem danh sách được đánh số

          Lưu ý rằng danh sách được đánh số cũng thêm thụt lề tự động vào đầu, cuối và bên trái của văn bản.

          Các giá trị sau có thể dùng làm phần tử đánh số:

          • số Ả Rập (1, 2, 3, ...);
          • chữ Latinh viết hoa (A, B, C,...);
          • chữ cái Latinh viết thường (a, b, c, ...);
          • chữ số La Mã in hoa (I, II, III,...);
          • chữ số La Mã viết thường (i, ii, iii, ...).

          Để chỉ ra loại danh sách được đánh số, hãy sử dụng thuộc tính type của thẻ

            . Các giá trị có thể có của nó được đưa ra trong bảng. 11.2.

            Bàn 11.2. Các loại danh sách đánh số
            Loại danh sách Mã HTML Ví dụ
            số Ả Rập

            		1. Cheburashka
            2. Cá sấu Gena
            3. Shapoklyak
            Chữ in hoa của bảng chữ cái Latinh

            		A. Cheburashka
            B. Cá sấu Gena
            C. Shapoklyak
            Chữ thường của bảng chữ cái Latinh

            		Một. Cheburashka
            b. cá sấu Gena
            c. Shapoklyak
            Chữ số La Mã viết hoa

            		I. Cheburashka
            II. cá sấu Gena
            III. Shapoklyak
            Chữ số La Mã ở dạng chữ thường

            		Tôi. Cheburashka
            ii. cá sấu Gena
            iii. Shapoklyak

            Để bắt đầu một danh sách với một giá trị cụ thể, hãy sử dụng thuộc tính bắt đầu của thẻ

              . Việc sử dụng loại danh sách nào không quan trọng, thuộc tính bắt đầu hoạt động giống nhau với cả chữ số La Mã và Ả Rập. Ví dụ 11.4 cho thấy cách tạo danh sách bằng chữ số La Mã viết hoa bắt đầu bằng số 8.

              Ví dụ 11.4. Đánh số danh sách

              số La Mã

              1. Vua Magnum XLIV
              2. Vua Siegfried XVI
              3. Vua Sigismund XXI
              4. Vua Husbrandt I

              Kết quả của ví dụ này được hiển thị trong Hình. 11.4.

              Cơm. 11.4. Danh sách được đánh số bằng chữ số La Mã

              Danh sách thường được sử dụng trên các trang web nên vấn đề này rất phù hợp. Có hai loại danh sách trong HTML: được đánh số và không được đánh số (có dấu đầu dòng). Các thẻ đặc biệt được sử dụng để xây dựng danh sách. Chúng ta sẽ làm quen với các thẻ chính trong bài học này. Chúng ta hãy xem xét các loại danh sách trong HTML theo thứ tự và sử dụng các ví dụ thực tế để hiểu chúng khác nhau như thế nào và chúng được xuất ra như thế nào.

              Danh sách được đánh số trong HTML

              Danh sách được đánh số trong HTML là một chuỗi các phần tử được sắp xếp theo thứ tự. Trong danh sách được đánh số, mỗi phần tử sẽ tự động được đặt trước một số sê-ri. Danh sách được đánh số trông như thế này:

              1. Phần tử đầu tiên của danh sách
              2. Phần tử danh sách thứ hai
              3. Phần tử thứ ba của danh sách
              4. Phần tử thứ tư của danh sách
              5. Phần tử thứ năm của danh sách

              Trong ví dụ này, danh sách sẽ được hiển thị bằng chữ số Ả Rập. Danh sách được đánh số có các thuộc tính có thể được sử dụng để đặt định dạng hiển thị đánh số danh sách:

              1. Thuộc tính “I” hoặc “i” - danh sách được đánh số bằng chữ La Mã (viết hoa hoặc viết thường);
              2. Thuộc tính “A” hoặc “a” - đánh số bằng chữ Latinh (viết hoa hoặc viết thường);
              3. Thuộc tính “bắt đầu” được sử dụng để đảm bảo rằng việc đánh số không bắt đầu từ mục đầu tiên, số sê-ri mà danh sách cần được tạo ra được chỉ định làm tham số.

              Ví dụ. Một danh sách đánh số được hình thành từ các chữ cái La Mã và bắt đầu bằng phần tử thứ hai:

              1. Phần tử đầu tiên của danh sách
              2. Phần tử danh sách thứ hai
              3. Phần tử thứ ba của danh sách
              4. Phần tử thứ tư của danh sách
              5. Phần tử thứ năm của danh sách

              Danh sách có dấu đầu dòng trong HTML

              Danh sách không có thứ tự còn được gọi là danh sách không có thứ tự hoặc danh sách có dấu đầu dòng. Để làm nổi bật các thành phần của danh sách như vậy, các ký tự đặc biệt (điểm đánh dấu) được sử dụng. Loại điểm đánh dấu danh sách được chỉ định trong mã HTML bằng các thuộc tính đặc biệt. Ví dụ về danh sách có dấu đầu dòng trong HTML:

              • Phần tử đầu tiên của danh sách
              • Phần tử danh sách thứ hai
              • Phần tử thứ ba của danh sách
              • Phần tử thứ tư của danh sách
              • Phần tử thứ năm của danh sách

              Trong trường hợp này, danh sách sẽ được hình thành từ các điểm đánh dấu dưới dạng dấu chấm đậm. Các thuộc tính của danh sách không có thứ tự là:

              1. Đĩa đĩa - điểm đánh dấu ở dạng vòng tròn đầy
              2. “vòng tròn” - điểm đánh dấu ở dạng vòng tròn trống
              3. "hình vuông" - các điểm đánh dấu ở dạng hình vuông đầy

              Một ví dụ về việc chỉ định một điểm đánh dấu cụ thể trong danh sách:

              • Phần tử đầu tiên của danh sách
              • Phần tử danh sách thứ hai
              • Phần tử thứ ba của danh sách
              • Phần tử thứ tư của danh sách
              • Phần tử thứ năm của danh sách

              Bạn cũng có thể sử dụng hình ảnh đồ họa làm điểm đánh dấu danh sách, điều này cho phép bạn thiết kế đẹp mắt tài liệu HTML của mình. Trong thực tế, điều này được sử dụng rất thường xuyên. Để thực hiện tác vụ này, bạn cần viết mã đường dẫn đến hình ảnh sẽ đóng vai trò là điểm đánh dấu:

                Phần tử đầu tiên của danh sách
                Phần tử danh sách thứ hai
                Phần tử thứ ba của danh sách
                Phần tử thứ tư của danh sách
                Phần tử thứ năm của danh sách

              Các danh sách cũng có thể được lồng vào nhau; chúng bao gồm một số danh sách:

              1. Phần tử đầu tiên của danh sách
              2. Phần tử danh sách thứ hai
                • Mục con đầu tiên của danh sách
                • Mục con thứ hai của danh sách
              3. Phần tử thứ ba của danh sách
              4. Phần tử thứ tư của danh sách
              5. Phần tử thứ năm của danh sách

              Đó có lẽ là tất cả những gì tôi muốn nói với bạn về danh sách trong HTML. Danh sách rất phổ biến trên các trang web. Để hình thành chúng, bạn cần biết một số quy tắc suy luận nhất định.