Liệt kê các mục trên một trang web là một nhiệm vụ phổ biến mà bạn sẽ phải làm với tư cách là một nhà phát triển web. Bạn có thể phải liệt kê các mặt hàng trong giỏ hàng, thứ tự của học sinh dựa trên điểm số của họ, những con chó sủa to nhất – v.v. Vì vậy, bạn cần biết sự khác biệt

Bạn đang xem: danh sách có thứ tự html so với danh sách không có thứ tự

Liệt kê các mục trên một trang web là một nhiệm vụ phổ biến mà bạn sẽ phải thực hiện làm như một nhà phát triển web. Bạn có thể phải liệt kê các mặt hàng trong giỏ hàng, thứ tự của học sinh dựa trên điểm số của họ, những con chó sủa to nhất – v.v..

Vì vậy, bạn cần biết các cách khác nhau để liệt kê các mặt hàng bằng HTML. Mặc dù bạn có thể nghĩ rằng đó là một điều tầm thường để học, nhưng nó rất quan trọng. Và đây là một trong những tính năng được sử dụng phổ biến nhất của HTML trong phát triển web.

Trong bài viết này, bạn sẽ tìm hiểu tất cả về các phần tử danh sách HTML, thuộc tính, kiểu dáng của chúng và cách thực sự sử dụng chúng để tạo ra danh sách. Tôi hy vọng bạn thấy nó hữu ích.

Cách tạo danh sách trong HTML

Trong HTML, chúng ta có thể liệt kê các mục theo kiểu có thứ tự hoặc không theo thứ tự.

Một danh sách có thứ tự sử dụng các con số hoặc một số loại ký hiệu biểu thị một loạt các mục.

Ví dụ: một danh sách có thứ tự có thể bắt đầu bằng số 1 và tiếp tục đến 2, 3, 4, v.v. Danh sách có thứ tự của bạn cũng có thể bắt đầu bằng chữ A và chuyển qua B, C, D, v.v.

Đây là ví dụ về danh sách có thứ tự có tên và điểm của học sinh.

< img alt = "Order-1" class = "kg-image" height = "400" src = "https://www.freecodecamp.org/news/content/images/2021/07/ordered-1.png" width = "600" /> Danh sách sinh viên có thứ tự

Mặt khác, chúng tôi có các danh sách không có thứ tự, chẳng hạn như danh sách CẦN LÀM. Ở đây, tôi đam mê viết mã đến nỗi tôi đã bỏ qua bữa sáng của mình 🤓.

unardered-1 Danh sách VIỆC CẦN LÀM không có thứ tự

Có một loại danh sách nữa được gọi là danh sách mô tả đó chúng ta cũng sẽ tìm hiểu bên dưới.

Bây giờ chúng ta hãy đi vào chi tiết hơn một chút và xem cách tạo từng loại danh sách trong HTML.

Cách tạo danh sách có thứ tự bằng HTML

Trong HTML, chúng ta có thể tạo danh sách có thứ tự bằng thẻ & lt; ol & gt; . ol trong thẻ là viết tắt của o r Powder l ist. Bên trong mỗi phần tử danh sách có thứ tự & lt; ol & gt; & lt; ol / & gt; , chúng ta phải xác định các mục danh sách. Chúng tôi có thể xác định các mục trong danh sách bằng thẻ & lt; li & gt; .

Đây là cấu trúc HTML hoàn chỉnh cho danh sách có thứ tự:

  & lt; ol & gt;
  & lt; li & gt; Ăn & lt; / li & gt;
  & lt; li & gt; Mã & lt; / li & gt;
  & lt; li & gt; Ngủ & lt; / li & gt;
& lt; / ol & gt;  

Kết quả của danh sách có thứ tự ở trên là:

image

Vì vậy, chúng tôi có danh sách các phần tử được sắp xếp bằng số bắt đầu bằng 1 và tăng dần lên 2 và 3. Hãy thử CodePen này và xem liệu bạn có thể thay đổi và chơi với ol-li hay không.

danh sách các mặt hàng có thứ tự

Các loại danh sách có thứ tự trong HTML

Điều gì xảy ra nếu bạn không muốn sắp xếp danh sách của mình theo số lượng? Thay vào đó, bạn muốn đặt hàng bằng cách sử dụng bảng chữ cái như A, B, C hoặc a, b, c. Bạn có thể thực hiện những điều này bằng cách chỉ định giá trị của thuộc tính type của thẻ & lt; ol & gt; .

Bạn có thể sắp xếp danh sách bằng A, B , Các chữ cái C bằng cách chuyển A làm giá trị kiểu.

  & lt; ol type = "A" & gt;
  & lt; li & gt; Ăn & lt; / li & gt;
  & lt; li & gt; Mã & lt; / li & gt;
  & lt; li & gt; Ngủ & lt; / li & gt;
& lt; / ol & gt;  

Đầu ra có dạng như sau:

image-10

Tương tự, bạn có thể sử dụng các chữ cái thường như a < / code> làm giá trị kiểu để liệt kê các phần tử có a, b, c, v.v..

  & lt; ol type = "a" & gt;
  & lt; li & gt; Ăn & lt; / li & gt;
  & lt; li & gt; Mã & lt; / li & gt;
  & lt; li & gt; Ngủ & lt; / li & gt;
& lt; / ol & gt;  

Đây là kết quả:

image-2

Nếu bạn muốn sử dụng chữ số La Mã, hãy sử dụng giá trị I < / code> cho danh sách có thứ tự bằng chữ số La Mã:

  & lt; ol type = "I" & gt;
  & lt; li & gt; Ăn & lt; / li & gt;
  & lt; li & gt; Mã & lt; / li & gt;
  & lt; li & gt; Ngủ & lt; / li & gt;
& lt; / ol & gt;  

Đầu ra có dạng như sau:

image-3

Hãy xem CodePen bên dưới để thử các loại khác:

Các loại danh sách có thứ tự

Cách Sử dụng Thuộc tính Bắt đầu trong Danh sách HTML

Phần tử & lt; ol & gt; có một thuộc tính thú vị được gọi là start . Bạn có thể chỉ định một giá trị cho thuộc tính start để bắt đầu danh sách có thứ tự từ một số cụ thể.

Giả sử bạn muốn bắt đầu danh sách bằng số 30 thay vì 1 . Bạn có thể chỉ định số 30 làm giá trị của thuộc tính start như sau:

  & lt; ol start = "30" & gt;
  & lt; li & gt; Ba mươi & lt; / li & gt;
  & lt; li & gt; Ba mươi mốt & lt; / li & gt;
  & lt; li & gt; Ba mươi Hai & lt; / li & gt;
& lt; / ol & gt;  

Đầu ra có dạng như sau:

image-4

Hãy thoải mái chơi với start thuộc tính này sử dụng thuộc tính CodePen:

start

Thật tình cờ, gần đây tôi đã chia sẻ các mẹo tương tự trên Twitter. Bạn cũng có thể tìm thấy một số cuộc thảo luận thú vị ở đó:

Cách tạo danh sách không có thứ tự trong HTML

Bây giờ hãy chuyển sang danh sách không có thứ tự. Chúng tôi sử dụng thẻ & lt; ul & gt; để tạo danh sách không có thứ tự. Như thường lệ, chúng tôi cần sử dụng các thẻ & lt; li & gt; trong & lt; ul & gt; & lt; ul / & gt; để tạo danh sách mặt hàng.

Các mục danh sách ( li ) bên trong danh sách không có thứ tự ( ul ) đi kèm với kiểu dấu đầu dòng mặc định - vì vậy mỗi mục danh sách là đứng trước dấu chấm đen.

Hãy tạo danh sách các tài nguyên trực tuyến yêu thích của tôi để tìm hiểu về lập trình web:

  Học phát triển web yêu thích của tôi Các trang web
& lt; div & gt;
  & lt; ul & gt;
    & lt; li & gt; freeCodeCamp & lt; / li & gt;
    & lt; li & gt; CSS-Thủ thuật & lt; / li & gt;
    & lt; li & gt; Traversy Media & lt; / li & gt;
  & lt; / ul & gt;
& lt; / div & gt;  

Đầu ra có dạng như sau:

image-5

Bạn có thể thấy các gạch đầu dòng cho từng mục danh sách ở trên, nhưng bạn có thể tùy chỉnh chúng. Chúng tôi cũng sẽ tìm hiểu điều đó.

Nhưng trước đó, vui lòng sử dụng CodePen này để thay đổi và chạy mã.

dấu đầu dòng

Chúng tôi có thể sử dụng các liên kết (thẻ neo & lt; a & gt; ) trong các mục danh sách (thẻ & lt; li & gt; ) để liên kết từng mục với bất kỳ trang web bên trong hoặc bên ngoài nào.

Đây là một ví dụ cho bạn biết cách liên kết từng tài nguyên lập trình web với các trang web tương ứng của chúng:

  Học phát triển web yêu thích của tôi Các trang web
& lt; div & gt;
  & lt; ul & gt;
    & lt; li & gt;
      & lt; a href = "https://www.freecodecamp.org/" target = "_ blank" & gt; freeCodeCamp & lt; / a & gt;
    & lt; / li & gt;
    & lt; li & gt;
      & lt; a href = "https://css-tricks.com/" target = "_ blank" & gt; CSS-Thủ thuật & lt; / a & gt;
    & lt; / li & gt;
    & lt; li & gt;
      & lt; a href = "https://www.traversymedia.com/" target = "_ blank" & gt; Traversy Media & lt; / a & gt;
    & lt; / li & gt;
  & lt; / ul & gt;
& lt; / div & gt;  

Đầu ra có dạng như sau:

image-6

Bạn có thể sử dụng CodePen bên dưới để thử tương tự. Vui lòng sửa đổi nó theo ý bạn muốn:

các gạch đầu dòng với các liên kết

Các loại danh sách không theo thứ tự trong HTML

Như chúng tôi đã thảo luận ngắn gọn, chúng ta có thể tùy chỉnh kiểu dấu đầu dòng của một danh sách không có thứ tự, mà chúng ta sẽ thấy hoạt động ngay bây giờ. Chúng tôi có thể thực hiện việc này bằng cách sử dụng thuộc tính kiểu CSS có tên là list-style .

Có bốn giá trị chính của thuộc tính list-style giúp chúng tôi tùy chỉnh này:

kiểu danh sách
Hiệu ứng

không ai
Sẽ không có bất kỳ dấu đầu dòng nào xuất hiện trước mục danh sách

vòng tròn
Dấu đầu dòng hình tròn (rỗng) xuất hiện phía trước mục danh sách

đĩa
Đây là dấu đầu dòng tròn được điền mặc định

Quảng trường
Dấu đầu dòng hình vuông điền đầy xuất hiện phía trước mục danh sách

kiểu danh sách không có thứ tự

Bạn có thể sử dụng CodePen ở trên để thử các tùy chọn list-style khác nhau.

Bạn có biết - Cũng có một danh sách mô tả?

Còn một loại HTML nữa danh sách, nhưng nó không được sử dụng thường xuyên. Nó được gọi là Danh sách mô tả .

Chúng tôi có thể xác định danh sách mô tả bằng phần tử thẻ & lt; dl & gt; . Bên trong & lt; dl & gt; .. & lt; / dl & gt; , chúng ta cần xác định cụm từ mô tả bằng thẻ & lt; dt & gt; . Thuật ngữ này thường là một số văn bản nhỏ về một cái gì đó. Sau đó, chúng tôi có thể xác định bộ mô tả mô tả để mô tả thuật ngữ sâu hơn bằng cách sử dụng thẻ & lt; dd & gt; .

Quá nhiều thứ để đọc? Hãy xem nó hoạt động như thế nào với một ví dụ mã.

Giả sử rằng chúng tôi muốn mô tả một số thông tin về mã hóa, buôn chuyện và ngủ trên trang web của chúng tôi. Trước tiên, chúng ta có thể xác định thẻ & lt; dl & gt; . Bây giờ chúng tôi xác định ba cặp thẻ & lt; dt & gt; & lt; dd & gt; để mô tả tương ứng về việc viết mã, nói chuyện phiếm và ngủ.

  & lt; dl & gt;
  & lt; dt & gt; Mã hóa & lt; / dt & gt;
  & lt; đ & gt; Một hoạt động giúp bạn luôn vui vẻ, ngay cả khi đang ngủ. & lt; / dd & gt;
  & lt; dt & gt; Nói chuyện phiếm & lt; / dt & gt;
  & lt; đ & gt; Không thể sống thiếu nó. & lt; / đ & gt;
  & lt; dt & gt; Đang ngủ & lt; / dt & gt;
  & lt; đ & gt; Yêu thích nhất mọi thời đại của tôi. & lt; / dd & gt;
& lt; / dl & gt;  

Đầu ra có dạng như sau:

image-7

Hãy dùng thử CodePen này để thử nghiệm thêm với danh sách mô tả: description list

Chắc hẳn bạn đang thắc mắc, tại sao chúng ta không sử dụng loại danh sách này nhiều? Chà, bạn có thể tạo cấu trúc này bằng cách sử dụng danh sách không có thứ tự (ul), danh sách các mục (li) và các kiểu CSS.

Nhưng nếu bạn xem xét ngữ nghĩa HTML, bạn nên dành một vị trí cho danh sách mô tả trong mã của mình khi bạn có một trường hợp sử dụng phù hợp cho nó.

Cách Tạo Tiêu đề Trang bằng Phần tử Danh sách HTML

Chúng ta sắp kết thúc hướng dẫn này. Nhưng tôi cảm thấy như nó chưa hoàn chỉnh nếu không có ít nhất một ví dụ trường hợp sử dụng về danh sách và thẻ HTML. Điều yêu thích của tôi là liệt kê các mục trong tiêu đề của trang web.

Hãy tạo một tiêu đề rất cơ bản với biểu trưng mẫu và ba liên kết: Trang chủ , Sản phẩm < / code> và Giới thiệu về chúng tôi . Đầu tiên chúng ta sẽ tạo cấu trúc HTML như sau:

  & lt; nav & gt;
  & lt; span class = "logo" & gt; Biểu trưng & lt; / span & gt;
  
  & lt; ul & gt;
    & lt; li & gt; & lt; a href = "# / home" & gt; Home & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "# / products" & gt; Sản phẩm & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "# / about" & gt; Giới thiệu & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;  

Ở đây, chúng tôi đã lấy một danh sách không có thứ tự với ba mục danh sách để xác định các liên kết Trang chủ, Sản phẩm và Giới thiệu. Bạn cũng sẽ nhận thấy một phần tử span có Logo văn bản cho biết đó là một logo. Chúng tôi có thể sử dụng một hình ảnh phù hợp ở đó, dựa trên nhu cầu của chúng tôi sau này.

Cho đến nay, tiêu đề sẽ giống như sau:

image-8

Chà, đây không phải là điều chúng tôi muốn. Vì vậy, tiếp theo, chúng tôi sẽ viết một vài quy tắc và thuộc tính CSS để làm cho nó trông giống như một tiêu đề trang (ít nhất là gần giống với nó).

  nav {
  màu nền: # 273032;
  màu: #FFF;
  đệm: 10px;
  hiển thị: flex;
}

.Logo {
  background-color: blue
}

ul {
  lề: 0px;
}

li {
  list-style: none;
  Hiển thị nội dòng;
  margin-right: 0,2rem;
}

một {
  màu sắc: hồng;
}  

Giờ đây, nó tốt hơn nhiều và trông gần với tiêu đề trang thực tế hơn.

image-9

Một lần nữa, bạn có thể sử dụng CodePen này để thay đổi và hãy thử mọi thứ với tiêu đề.

header

Before We End ...

Bây giờ là tất cả. Tôi hy vọng bạn thấy bài viết này sâu sắc và nó giúp bạn hiểu danh sách HTML rõ ràng hơn. Bạn có thể tìm thấy tất cả các ví dụ cùng nhau trong Bộ sưu tập CodePen này.

Hãy kết nối. Bạn sẽ thấy tôi hoạt động trên Twitter (@tapasadhikary) . Cảm thấy tự do để cung cấp cho một theo dõi. Tôi cũng đã bắt đầu chia sẻ kiến ​​thức bằng kênh YouTube của mình, vì vậy bạn cũng có thể xem qua.

Bạn cũng có thể thích các bài viết này:

< / p>


Xem thêm những thông tin liên quan đến chủ đề danh sách có thứ tự html so với danh sách không có thứ tự

Tự học HTML - Bài 11. Danh sách ko có thứ tự

alt

  • Tác giả: Mai Liêu
  • Ngày đăng: 2021-11-30
  • Đánh giá: 4 ⭐ ( 3869 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là kênh chính thức của cô Liêu Ngọc Mai. Cô làm kênh này với mục đích chia sẻ những kiến thức của mình đến mọi người.
    Nội dung của kênh sẽ bao gồm bài giảng, bài tập, ôn tập kiểm tra Môn Tin học các khối lớp từ 2-12
    Ngoài ra còn có các bài học về Tin học quốc tế như IC3, MOS Word 2016, Powerpoint 2016, Excel 2016...
    Nhận thiết kế bài giảng PP, elearning các khối lớp.
    Nhận dạy kèm Tin học online.
    Hãy ủng hộ và đăng kí, chia sẻ giúp cô có thêm động lực nhé!
    Xin cám ơn!
    Điện thoại liên lạc/Zalo: 0907603351
    Fb: https://www.facebook.com/mailieuchannel
    Youtube: https://www.youtube.com/c/MaiLieu

Danh sách có thứ tự trong HTML

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 4485 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Danh sách có thứ tự trong HTML hay danh sách được đánh số trong HTML. Mặc định tất cả các mục của danh sách được đánh dấu bằng các con số tăng dần. 1,2,3...

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

  • Tác giả: thachpham.com
  • Đánh giá: 3 ⭐ ( 8896 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).

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

  • Tác giả: www.elib.vn
  • Đánh giá: 4 ⭐ ( 2166 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ác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 7809 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

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

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 5 ⭐ ( 2850 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

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

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 7499 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.

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

Xem Thêm  Phương pháp Math.Floor (Hệ thống) - math.floor làm gì

By ads_php