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í 17++ 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

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

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...

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. Plugin là gì? Và chúng hoạt động như thế nào trong WordPress? Hầu hết các lập trình viên mới vào...
    1 giây trước
  2. Với thời đại công nghệ 4.0 việc tiếp cận các sản phẩm hay dịch vụ trở nên đơn giản và...
    20 giây trước
  3. Việt Nam Google Adsense livestream: Mẹo giúp phát triển doanh nghiệp trực tuyến của bạn với Google Adsence. Cảm ơn...
    26 giây trước
  4. Bạn có biết, nội dung bài viết rất quan trọng trong SEO cũng như Kinh doanh online, một bài viết...
    12 giây trước
  5. Để chuẩn bị bước vào  buổi học tìm hiểu về SEO, tôi đã tỉnh dậy với những suy nghĩ quẩn...
    23 giây trước
  6. Khi tìm hiểu về SEO, tất cả chúng ta đều được nghe đến câu nói "nội dung là vua". Theo...
    17 giây trước
  7. Bạn có muốn thu hút khách truy cập đang tìm kiếm những gì bạn cung cấp? Theo dõi lợi tức đầu...
    17 giây trước
  8. Mình dám cá là, khi nghe tới WordPress Update Services bạn sẽ nghĩ ngay tới một công cụ giúp cho...
    30 giây trước
  9. Có khi nào bạn tự hỏi, tại sao những tác giả, blogger, nhà văn nổi tiếng lại gặt hái được...
    10 giây trước
  10. Google lighthouse đưa ra các chỉ số cần tối ưu đặc biệt là trong Performance, đối với nhiều anh em...
    17 giây trước