Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Danh sách trong HTML (ul, ol)

5/5 - (7 bình chọn)

Trong bài trước chúng ta đã được học về các thẻ heading và thẻ paragragh. Hôm nay mình xin giới thiệu về danh sách trong HTML, ( <ul> </ul>, <ol> </ol> )
Vậy danh sách trong HTML có mấy loại, và tác dụng của mỗi loại đó ra sao thì trong bài hôm nay mình sẽ giải đáp dần dần nhé. Không lan man lâu nữa. chúng ta sẽ bắt đầu với danh sách không có thứ tự trong HTML.

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

Chắc hẳn các bạn cũng thắc mắc là sao lại gọi là không có thứ tự, thực ra là chúng được sắp xếp từ trên xuống và không được đánh số. Chúng được bắt đầu bằng thẻ <ul>. Mỗi mục trong danh sách bắt đầu bằng thẻ <li>. Danh sách các mục sẽ được đánh dấu mặc định bằng vòng đen nhỏ. Hơi khó hiểu phải không nào? Mình sẽ lấy ví dụ cho các bạn dễ hình dung nhé.

Danh sách trong HTML (ul, ol) danh-sach-khong-co-thu-tu-trong-html

Sau khi chạy ra ngoài trình duyệt sẽ được kết quả như sau:

Danh sách trong HTML (ul, ol) kq-danh-sach-khong-co-thu-tu-trong-html

Đến đây có bạn sẽ thắc mắc là liệu có thay đổi được dấu chấm mặc định ở đầu mỗi dòng không? Và thay đổi chúng như thế nào? Mình xin trả lời là có thể thay đổi được nhé. Mình sẽ thêm CSS vào trong mỗi cặp thẻ để thay đổi thuộc tính đó.

Danh sách trong HTML (ul, ol) vi-du-danh-sach-khong-co-thu-tu-trong-html

Kết quả sẽ được:

Danh sách trong HTML (ul, ol) kq-vi-du-danh-sach-khong-co-thu-tu-trong-html

Đó bạn thấy đơn giản phải không? Vậy có danh sách không có thứ tự rồi thì liệu có danh sách có thứ tự không? Và nó khác gì so với danh sách không có thứ tự. Chúng ta sẽ nghiên cứu tiếp phần 2.

Danh sách có thứ tự

Cũng tương tự như danh sách không có thứ tự, chỉ khác một chút là danh sách có thứ tự được sắp xếp bắt đầu với thẻ <ol>. Mỗi mục trong dánh sách được bắt đầu với thẻ <li>. Theo mặc định thì danh sách các mục sẽ được đánh dấu bằng số (1, 2, 3 …). Cụ thể là:

Danh sách trong HTML (ul, ol) danh-sach-co-thu-tu-trong-html

Kết quả:

Danh sách trong HTML (ul, ol) kq-danh-sach-co-thu-tu-trong-html

Ngoài kiểu số mặc định ra thì trong danh sách có thứ tự còn có một số kiểu như:

  • Đánh số bằng chữ hoa (type=”A”)
  • Đánh số bằng chữ thường (type=”a”)
  • Đánh số bằng chữ số La Mã viết hoa (type=”I”)
  • Đánh số bằng chữ số La Mã viết thường (type=”i”)

Danh sách trong HTML (ul, ol) vi-du-danh-sach-co-thu-tu-trong-html

Kết quả:

Danh sách trong HTML (ul, ol) kq-vi-du-danh-sach-co-thu-tu-trong-htmlBạn thấy đấy, có rất nhiều lựa chọn cho bạn để có thể tạo ra danh sách trong HTML, khá đơn giản phải không? Nào là chữ hoa, chữ thường, số, số La Mã… Vậy nó có phải chỉ dùng làm danh sách hay không? Để giải đáp câu hỏi này chúng ta đến với phần 3.

Ứng dụng của danh sách trong HTML

Danh sách trong HTML có rất nhiều ứng dụng khác nhau nhưng chúng thường được ứng dụng để làm menu ngang hoặc menu dọc trong các trang website, hiển thị list các bài viết.. Tới đây mình sẽ có một bài hướng dẫn các bạn làm menu đa cấp bằng danh sách trong HTML. Bài tiếp theo chúng ta sẽ tìm hiểu về bảng trong HTML. Hẹn gặp lại các bạn ở bài tiếp theo.

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Chorme Developer Tools (viết tắt là DevTools) là một bộ các công cụ hỗ trợ gỡ lỗi web được tích...
    2 giây trước
  2. SEO Onpage là gì, Offpage là gì? Sau bài viết về khái niệm SEO là gì? chúng ta đã vô...
    5 giây trước
  3. Maggie Cassella là một người Mỹ - Canada nữ diễn viên, diễn viên hài và nhà văn, nổi tiếng nhất...
    24 giây trước
  4. Để được xếp top trong Google là mục đích của bất cứ trang web nào, bởi vậy Google đã đưa ra những...
    14 giây trước
  5. SSL (Secure Sockets Layer) là một giao thức bảo mật chuẩn để thiết lập các liên kết mật mã giữa...
    4 giây trước
  6. Một trong những lý do chính khiến Wordpress "thành công" là nó rất trực quan và dễ sử dụng. Về...
    8 giây trước
  7. Bạn đang sử dụng công cụ Keyword Shitter để tìm từ khóa cho Website của mình và muốn chia sẻ với...
    19 giây trước
  8. Trong thời gian qua, ngành công nghiệp SEO đã xuất hiện một số xu hướng và thực hành mới giúp...
    10 giây trước
  9. Dù cho bạn là một Content Writer nghiệp dư hay chuyên nghiệp, cũng chưa chắc chắn 100% số lần viết...
    21 giây trước
  10. WordPress là phần mềm quản lý blog và quản lý nội dung phổ biến nhất (CMS) hiện nay. Theo thống...
    29 giây trước