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: cách gạch đầu dòng trong html

Liệt kê các mục trên một trang web là một công việc phổ biến bạn sẽ phải làm với tư cách là 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:

Xem Thêm  Arrays (Java Platform SE 7 ) - array_fill

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 cách sử dụ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ủ đề cách gạch đầu dòng trong html

Comment trong HTML

alt

  • Tác giả: Quangkhoi1228
  • Ngày đăng: 2022-05-17
  • Đánh giá: 4 ⭐ ( 2752 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Front End căn bản | Comment trong HTML
    ----------
    Trong bài này chúng ta sẽ tìm hiểu về comment trong HTML và các cách sử dụng cơ bản của nó
    ----------

    MỤC LỤC

    0:00 Intro
    0:09 Comment là gì?
    0:50 Cú pháp
    1:45 Các chức năng chính
    1:47 Ghi chú code
    2:45 Ẩn nội dung
    4:40 Thực hành

Dấu gạch ngang kiểu danh sách HTML

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 3196 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn có thể sử dụng :beforevà content:nhớ rằng điều này không được hỗ trợ trong IE…

Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 6996 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML - Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, in đậm trong HTML, in nghiêng trong HTML, gạch chân trong HTML, gạch ngang trong HTML, chỉ số trên trong HTML, chỉ số dưới trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Hướng dẫn các ký tự xuống dòng trong html mới nhất 2021

  • Tác giả: lamweb.vn
  • Đánh giá: 3 ⭐ ( 9219 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ký tự xuống dòng trong html là một lệnh rất thường dùng trong ngôn ngữ lập trình html rất đơn giản và thuận tiện khi muôn sử dụng ký tự xuống dòng trong html.

Bài 34: Chuẩn viết code HTML và HTML5

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 1200 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bất kỳ ngôn ngữ lập trình việc viết code theo chuẩn sẽ giúp đọc code dễ hơn, dễ bảo trì và tìm ra lỗi, v.v. Đây là những tổng kết cách viết code chuẩn HTML.

Lưu trữ gạch đầu dòng trong html

  • Tác giả: xaydungweb.vn
  • Đánh giá: 4 ⭐ ( 1727 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Các thẻ cơ bản, phần tử và thuộc tính trong HTML

  • Tác giả: comdy.vn
  • Đánh giá: 4 ⭐ ( 3661 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thẻ cơ bản trong HTML là gì? Thẻ và phần tử trong HTML khác nhau như thế nào? Thuộc tính trong HTML là gì?

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